A cara do site mudou completamente, porém a estrutura textual continua praticamente a mesma. Procurei renovar umas idéias que tive para a construção do primeiro layout, principalmente no tocante à paleta de cores do site.

Novo layout

Para o primeiro layout, criei uma estrutura larga, com 950px de largura. Criei um grid de quatro seções, sendo duas centrais mais largas (290px) e duas mais estreitas (175px).

O layout mudou, mas a idéia de layout fixo continua. Só que agora mais estreito, deixando-o melhor ajustado para a resolução de 800x600px. Quanto aos grids, fixei apenas uma área lateral e outra principal, as conhecidas áreas de sidebar e content.

Tipografia

A tipografia não mudou de família, mas mudou de cor. Agora, com uma nova paleta de cores criada, dei uma ajustada no visual dos headers. Tive como base, principalmente, as cores da imagem que usei para compor o topo do site.

Navegabilidade

Talvez o ponto de maior mudança. Agora, criei um layout mais prático, com duas seções de conteúdo: uma superior (com sidebar e content) e outra extra, com uma coloração mais carregada, ainda contando com um sidebar e um content extras. Procurei colocar nesta área extra informações importantes do site, que poderiam se repetir ao longo das páginas, além de uma prévia da galeria de fotos da academia.

Resultado

O resultado? Está no ar. É só clicar. :P

Com base no diagrama do processo de criação web postado no artigo anterior, apresento as características da primeira fase.

Coleta de dados

É o primeiro contato com o cliente. Essa fase inicial acaba tendo uma cara de palestra, porque à medida que o cliente vai passando seus desejos, nós temos que mostrar quais serão as formas que eles podem ser criados e, naturalmente, o que pode ou não ser criado, mas como diz o ditado que o cliente pode tudo, eu troco por o que deve ou não ser criado.

A parte de coleta de dados, por ser o início de tudo, deve ser capaz de adquirir o maior número de informação possível do negócio do cliente. Depois, com todos os pontos identificados e organizados, começamos a pensar na forma de criação das próximas etapas.

Natureza do projeto

Projetos mais simples nos dão mais liberdade de fala, assim conseguimos agregar idéias ao cliente com mais facilidade, já com projetos mais robustos, não há outro jeito, reuniões e entrevistas serão necessárias para definir os pontos de implementação.

Caso de uso

O caso de uso é algo que costumo usar para melhor documentar o projeto. Mostrar ao cliente tudo aquilo que foi entendido nos encontros é uma forma de passar comprometimento com aquilo que deve ser feito. A apresentação do caso de uso serve para acertar os desencontros de informação.

Arquitetura da Informação nesse processo

A Arquitetura da Informação é item essencial no desenvolvimento de qualquer projeto no decorrer de todas as suas fases. Nesta parte inicial, de declaração de escopo e identificação de funcionalidades, a Arquitetura da Informação, através do Design da Informação, serve como um meio de melhor apresentação de tudo aquilo que foi coletado.

A AI, basicamente, é o estudo da Ciência da Informação e da Interação Humano-Computador, ou seja, o ato de focar o trabalho na forma com que o usuário irá interagir com o produto final. Isso inclui Usabilidade e Acessibilidade por exemplo.

Criar um Design de Interação também é fator de suma importância, pois ele é responsável pelo link entre Arquitetura da Informação e o Design Gráfico (área verde do Diagrama do processo de criação web).

Bom… O que importa nesta etapa inicial é o bom senso. Escutando tudo o que o cliente tem a dizer e mostrando os prós e contras de implementar este ou aquele recurso.

Relacionados

• Processo de criação web
• Processo de criação web: o escopo
• Processo de criação web: a identidade
• Processo de criação web: a diagramação
• Processo de criação web: o desenvolvimento

Apresento neste artigo um pouco do estudo que fiz para iniciar este site (que ainda está em desenvolvimento) para troca de idéias e conhecimentos.

Finalidade

Um site de academia deve servir como meio de entrada de novas pessoas no estabelecimento e como porta-voz de quem já utiliza os serviços de lá. Para tanto, pensei na etrutura do site como se a academia não tivesse nenhum aluno. Partindo deste princípio, o site deve ser agradável e com conteúdo claro e objetivo, para aqueles que estejam procurando por uma academia se familiarizem com o ambiente do site e, consequentemente, tenham a vontade de conhecer a academia e fazer sua matrícula.

Layout

Ao iniciar um projeto de website sempre vem a dúvida: e agora? Layout fixo ou flexível? Para a body-shopping.com pensei que um layout fixo seria mais viável, porque ele se adequaria melhor nas idéias de composição que já estavam surgindo na cabeça.

Com o layout fixo escolhido, agora era só pensar numa forma de compor o mesmo. Nada mais usual que criar uma estrutura de grid. um grid layout.

Criei um grid layout que atendesse à resolução de 1024x768px para cima, mas que pudesse ser visto numa resolução 800×600 sem problemas (isso pode ser uma dor de cabeça, dependendo do público alvo para o site). Muitos ainda usam resolução 800×600, mas essa é uma prática que vem, naturalmente, sendo reduzida ao passar dos anos. Este é um risco que às vezes deve-se correr, mas com a devida cautela (cada caso é um caso, sempre!).

O grid layout, então, ficou com um tamanho fixo total de 950px.

Quatro seções principais (colunas) foram criadas e cada uma delas foram separadas em mais duas subseções. As duas colunas principais laterais caracterizam na esquerda o logo da academia e na direita uma sidebar e as duas seções principais centrais caracterizam o conteúdo do site (o conhecido content). Veja o tamanho das seções na imagem ampliada logo abaixo. Na imagem são apresentadas apenas duas das quatro seções principais. O lado não apresentado na imagem é exatamente o espelho do lado em questão projetado para o lado direito. Os retângulos azuis representam os itens de menu que futuramente seriam – e foram – criados.

Tipografia

Como já disse outrora, deve-se tomar cuidado ao escolher a família de fontes para um determinado projeto. Por isso costumo sempre adequar o typeface ao estilo que o site deve ter e em quem lerá o conteúdo dele. Para este site, escolhi uma família tradicional sem serifa: Verdana, Arial, Helvetica, sans-serif.

Cores

As cores já estavam praticamente pré-definidas, já que pude estudar à partir de cartazes que existem na academia. Esta parte foi, acredito eu, a mais simples, pois eu apenas somei algumas cores para dar uma variada nas cores padrão e avivar algumas seções que deveriam ser destaque.

Navegabilidade

Para as duas seções centrais criei áreas com conteúdo fixo para grande parte das páginas e acima destas o conteúdo principal da área visitada.

Resultado inicial

O resultado inicial (já que alterações podem ser feitas à qualquer momento) é este:

O site ainda está amadurecendo. A área de alunos ainda está nascendo. Não há área específica para avisos gerais e por aí vai. Bom… Por enquanto, é só! ;)

Atualização 2007-05-01: Veja a remodelação do site Body Shopping em seu segundo case.

• O que deve ser feito?
• Para quando deve ser feito?
• Por que deve ser feito?

Parece vago, mas cada pergunta, ao meu ver, é importantíssima antes de iniciar qualquer projeto. Vamos às justificativas.

O que deve ser feito?

Saber realmente o que deve ser feito é importante para delimitar como será a forma de trabalho e quais recursos serão utilizados. Para saber o que realmente deve ser feito, outras perguntas devem ser feitas:

• Sobre o que é o projeto?
• Quais são os pontos chave?

Pronto! Acho que já é o suficiente. Talvez uma lista com menos de uma dúzia de itens (como numa receita de bolo) esteja de bom tamanho.

Esqueça o menu

Como tenho visto muito na internet, o pessoal de webdesign tem uma tendência muito forte a criar menus com objetos que poderiam ser agrupados de outra forma. Criar uma estrutura que forçará o usuário a clicar em links antes mesmo de montar a estrutura do site pode não ser uma boa idéia.

Criando a estrutura

Com base nos itens da receita de bolo, fazer um estudo macro do projeto, analisando sua finalidade e suas características pode ser proveitoso. Neste momento, já dá para ter uma idéia das cores que serão utilizadas, da tipografia e do layout.

O layout é a parte mais trabalhosa, pelo fato de ele ter que agrupar informações de acordo com o que elas significam. O layout deve ser voltado diretamente ao conteúdo que o site propõe, criando um agrupamento de informações textuais e visuais simultaneamente.

Cada item da lista pode ser tratado como um objeto a ser inserido num canvas de desenho. Informações importantes (pontos chave da lista) devem ficar em destaque, melhor ainda se forem na parte superior da página (área sem uso de scroll). Informações de segundo plano podem ser agrupadas em áreas diversas, porém com seu destaque também. Neste momento, um menuzinho aqui ou ali não faz mal à ninguém, mas é claro, na dose certa!

Hum… Mas quem vai ver esse negócio no ar??

Essa pergunta é reponsável pela personalidade do site e a qual tipo de público ele deverá atender. Existe infinitas maneiras de estruturar um site de acordo com o público, mas todas elas devem ter, pelo menos, os seguintes recursos:

• Estética agradável
• Acessibilidade
• Usabilidade

Para quando deve ser feito?

Esse pode ser um complicador. Os clientes normalmente não entendem que sites bem feitos não são feitos em apenas um fim de semana.

O cliente diz:

Ah! Mas que complicação!! Não é só criar um título, um menu, uma área principal, um rodapé, colorir e colocar imagens nisso??

Isso quando o cliente conhece um pouco de internet, porque quando ele não conhece, ele chama logo o webdeveloper/designer de "o cara bom do computador" e acha que ele faz milagres com as teclas e os cliques.

Acredito que o ponto principal no desenvolvimento de um site de qualidade é o bom relacionamento entre contratante e contratado. Eles devem trabalhar juntos na maior parte do tempo. O divã entre contratante e contratado dá vida a todas as respostas que o contratado precisa ter para trabalhar bem e no tempo necessário.

Por que deve ser feito?

Principal pergunta de todas (por isso ficou para o final).

Pense bem… Esse meu texto não valeria de nada se o projeto não precisasse ser feito!!!

Entender o que realmente deve ser feito e conduzir o contratante a explicar isso dá razão a todo o trabalho que será iniciado. É neste momento que se cria o espírito de uma missão à cumprir e o pensamento voltado na forma em que o projeto deverá ser conduzido.

Antes de por em prática o desenho para o layout eu defini a forma como ele seria apresentado (tipografia, swatches e estrutura). O logo ainda não havia sido criado, mas já tinha a idéia de como fazê-lo (gostaria que fosse algo que pudesse ser usado tanto na web, quanto em outros trabalhos).

Tipografia

Optei por usar uma fonte de serifa para o logo, por estas terem um aspecto mais arrojado. Depois do troca-troca de fontes, cheguei à um denominador comum: Garamond. Por conta disso, o site também ganhou tipografia com serifa: família Georgia, arial, verdana, sans-serif Georgia, Palatino, "Palatino Linotype", Times, serif. Aproveito o ensejo para salientar que nem todo projeto deve se dar ao luxo de usar fontes de serifa. A boa e velha família verdana é a melhor opção quando o site deve atender à qualquer tipo de público. Mas cada caso é um caso, às vezes até a temida Times New Roman pode ser uma ótima pedida!

Cores

A escolha das cores costuma ser a primeira coisa que faço quando vou iniciar um projeto. Se o cliente já tem um logo, procuro me basear nas suas cores padrão. Se ele não o tiver, procuro me basear na identidade que o projeto deve ter. Mas isso não é uma regra, a criatividade costuma falar mais alto nessas horas.

Para este site, inicialmente, eu criei várias paletas de cores, alternando entre azul e algumas outras, como areia, marrom e até um pouco de verde. Cocei os dedos para colorir o layout, fiz algumas composições, mas no final me rendi ao clean. O resultado final foi: três tons de azul (incluindo o do logo), uma cor meio dourada para dar vida aos links e algumas tonalidades de cinza. O marrom também ficou, mas só de coadjuvante, aparecendo, apenas, no hover dos links.

Navegabilidade

A navegação foi estudada em conjunto com a composição do layout. Desde o início pensei que não seria interessante usar tamanhos fixos para as áreas de conteúdo. Não teria a ver com a característica do site. Como pretendia algo despojado, sem aquele aspecto duro que certos sites passam, nada melhor do que usar um layout flexível. E o conceito de flexibilidade me deu grandes idéias para o posicionamento do logo e do menu (na foto que inseri o logo não está na direita). A sidebar receberia o campo de busca logo acima e os arquivos logo abaixo. Na foto há mais alguns itens, mas estes só entrarão no ar daqui algum tempo.

Para completar a navegação, usei um área de conteúdo extra com um background mais chamativo no rodapé, porém sem exageros. Nela estão links gerais para acesso rápido no site, além de links externos.