Adeus 800×600

A primeira providência que tomei foi tornar o layout fixo. Não interessava mais manter algo fluido, já que a porcentagem de uso da resolução 800×600 vem caindo consideravelmente. Resolvi, então, manter um layout fixo de 960px de largura, composto de: ~160px de área livre à esquerda, 480px de conteúdo e 280px de barra lateral direita.

Aproveitando a formação do grid, resolvi ajustar o rodapé a esta estrutura de colunas, tornando, de fato, o layout um grid layout.

Novo logotipo

Talvez não tão novo, porém redesenhado. A mudança significante está na tipografia. Deixei de lado a Garamond e apostei numa fonte até então desconhecida para mim, mas que ganhou meu apreço.

A fonte chama-se “IPAP” e foi encontrada num dos utilíssimos artigos do Smashing Magazine.

Novo menu

O menu sofreu algumas alterações no espaçamento e na estilização dos links, tornando, assim, o que era “solto” algo mais integrado.

Outras mudanças

A seguir, check-list de alguns dos itens modificados:

• Novo alinhamento de logotipo (trazido para a esquerda) e sidebar;
• Nova estilização das listas da sidebar e do rodapé;
• Novo recuo das listas do conteúdo;
• Novo estilo para as datas;
• Inserção de comentários randômicos no conteúdo extra do rodapé;
• Alinhamento do conteúdo extra em colunas, respeitando o alinhamento das áreas superiores.

E assim a busca continua… ;)

A solução se trata de formulários baseados em grid layout. Usa solução simples, que usa um punhado de CSS e alguns conceitos de acessibilidade para formulários.

Princípios básicos de acessibilidade em formulários

• Utilizar <label> para o texto descritivo (título) de cada campo;
• Associar este <label> ao campo à que o título se refere (ex. <label for="txtnome"> Nome </label> ou <label> Nome <input type="text" name="txtnome" id="txtnome" /></label>);
• Colocar todo título acima do campo à que ele se destina;
• Ordenar campos por tabindex;
• Usar accesskeys; E por aí vai.

A idéia veio das tabelas!

A solução mais prática para criar formulários acessíveis, seria, então, colocar cada controle um abaixo do outro, formando, assim, um extenso formulário a ser navegado. A partir daí, nasceram os questionamentos: e para os campos pequenos, como UF e datas? Ficariam um abaixo do outro também? Não seria uma idéia legal ter um formulário não muito grande, com uma rolagem desnecessária.

Num tempo não muito distante (aliás, hoje ainda se faz isso), muitos web designers usavam/ usam tabelas para separar os campos de seus formulários. Visualmente ficam trabalhos realmente muito bem feitos, mas quando nos deparamos com a marcação, nascem os problemas.
O Web Standards Project, num artigo sobre acessiblidade em formulários, arremata:

Another accessibility gotcha with forms is that they are invariably set out using tables to achieve a nice grid-like effect. This is not always an automatic accessibility problem, but it can be – a table layout is irrelevent to a screen reader which effectively reads the content in the order it appears in the source code. [...]

Pois é, tabelas podem complicar a vida misturando a ordem dos controles na marcação. Então, por que não criar uma solução tableless?

Criando o grid

Para explicar os grids para formulários, criei um grid de aproximadamente 81px para cada coluna. Assim sendo, num formulário de 750px de largura é possível usar até 9 campos por linha.

¹ – O uso do <BR /> é importante para o caso de linhas que precisam ser quebradas antes do seu fim. Por exemplo, ter de quebrar a linha imediatamente depois de usar um label x-mall

A grande sacada do alinhamento é deixar os labels “soltos” na marcação e separar, apenas, as quebras de linha com <BR />¹. O CSS tratará do resto, usando classes específicas para cada tamanho de label. As possibilidades são²:

• X-small label (81px);
• Small label (2 * x-mall + margens);
• Large label (4 * x-mall + margens);
• X-large label (6 * x-mall + margens);
• Full label (Aproximandamente x-mall * 9 colunas).

² – Não foram levados em conta na contagem os ajustes de tamanho que foram necessários para o IE 6 (argh).

Como criar uma linha

1. <label class="small">Cidade * <input type="text" class="textfield" /></label>
2.    <label class="x-small">Número * <input type="text" class="textfield" /></label>
3.    <label class="large">Complemento * <input type="text" class="textfield" /></label>
4.    <label class="x-small">Estado *
5. <select class="select">
6.   <option value="RJ">RJ</option>
7.   <option value="SP">SP</option>
8.   <option value="MG">MG</option>
9.   <option value="ES">ES</option>   
10. </select>
11. </label><br />

Isso resulta em

Agora, o resultado final

Crie seu próprio formulário

Fique livre para usar a minha solução. Baixe os arquivos que resultaram nas imagens de exemplo.

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.