Hora de Wireframes

Os wireframes, atrelado ao Design de Interação definido na fase de escopo, são, acredito eu, os principais elementos de qualquer projeto.

O Design de Interação trata de relacionar todo o fluxo que as páginas do projeto terão e os wireframes vêm como uma transformação visual para o diagrama criado. Tendo a base das páginas que serão necessárias (Design de Interação), agora é só desenhar uma estrutura visual para o conteúdo das páginas (wireframes), colocando os elementos do layout em locais específicos, levando em conta sua importância e relevância.

Costumo desenhar meus wireframes inicialmente em papel e depois prototipar estes desenhos em XHTML e CSS. Defino, assim, alguns mockup’s e templates para o projeto.

Os wireframes em XHTML são mais amplos por possibilitarem a definição de fatores que os em gráfico não possibilitam. O estudo da tipografia e a implementação das cores são alguns destes fatores.

Desenhar Wireframes é uma arte, pois deve-se tomar muito cuidado no posicionamento de cada elemento no canvas do layout. É importante sempre levar em conta fatores como Acessibilidade e Usabilidade.

Modelando o Banco de Dados

A fase de modelagem de banco de dados é outra que poderia ser adiantada, porém fazer uma modelagem logo no início pode causar sérios transtornos (não tenha dúvidas que depois de desenhar os wireframes muitas coisas mudam na estrutura de banco de dados). Um campo que nasce, uma chave que se move, sempre há o que reavaliar.

Os wireframes darão boa base para a estrutura que o banco de dados deve ter. Então, basta organizar as tuplas que porventura já estiverem criadas, adicionar as tuplas que nasceram no meio do caminho e definir os campos para cada uma delas. Costumo fazer esse processo também desenhando à mão, mas depois é sempre bom passar tudo isso para um DER mais bem detalhado.

Apresentando resultados

A cara do projeto acaba de nascer! Temos wireframes em papel ou em gráfico, templates e a modelagem do banco de dados. Chegou a hora de apresentar resultados.

Quando o trabalho se trata de um freelance, cuidados na apresentação devem ser tomados. Talvez não seja interessante mostrar wireframes em papel, a não ser que os desenhos tenham uma boa cara. De qualquer forma, acho mais interessante apresentar os templates em XHTML. Já no meio corporativo, onde os resultados podem ser discutidos entre os colegas e a chefia, vale qualquer um dos papéis, desde que bem organizados.

Neste momento um ciclo se inicia até a chegada num consenso para a apresentação ideal que o projeto deve ter. Revisões naturalmente podem surgir.

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

Primeiro foi Greg Storey com sua inteligente idéia de criar uma régua para ser usada de background para dispor melhor os componentes do layout.

O conceito é simples. É só pegar a imagem e colocar como background para o body da página a ser desenhada.

Depois, criativamente, Christian Watson adicionou o conceito de régua em forma de grid ao estudo de Greg Storey.

Os dois recursos são muito úteis, mas, sem dúvida, o de Christian Watson é mais usual por demarcar toda a área da tela. Ele se assemelha muito ao layout grid usado por Khoi Vinh em seu site. Com a régua em grid há ainda a possibilidade, para os mais detalhistas, de dividir o grid em quadrados menores, tendo assim a possibilidade de inserir componentes em qualquer área do browser sem perder o alinhamento com algum outro qualquer.

O interessante destes recursos é que não importa se o layout é dentro ou fora do grid. Eles auxiliam seja qual for a alternativa.

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.

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.