Cartilha do Webdesigner Antenado

Programadores não são bons em webdesign. Não, mesmo. Eu engrosso as estatísticas, admito que meu talento como designer é inexistente, nulo. Me dou bem com os códigos, mas sou uma negação em criação gráfica…

Para tentar mudar essa realidade, comecei a prestar mais atenção no formato dos sites. Tenho bastante experiência em reconhecimento de padrões e logo comecei a perceber algumas características que os sites legais têm em comum. São ingredientes que se repetem e parecem fazer parte da fórmula para uma apresentação agradável.

Continuo sendo leigo no assunto, mas gostaria de deixar registradas as impressões que tive. Use sob sua própria conta e risco :)

Cartilha do Webdesigner Antenado – Edição 2006

O cinza é o novo preto

Esqueça black ou #000. O preto está proibido. As letras do site devem ser no máximo cinza escuro. Quando mais claro melhor.

Proibido usar cores berrantes

Amarelão, vermelhão e azulão? De jeito nenhum! Use somente cores suaves tipo bebê ou cristal. O lance é deixar o site em baixo contraste, como se tivesse o canal alpha em 50%.

Branco, muito branco, branquíssimo

Não amontoe os elementos. Use e abuse de margin e padding, quanto mais melhor! Assim como em um mictório público, deixe tudo bem espaçado, distante, com aquele espaço em branco bonito por toda parte.

Use espaçamento generoso entre linhas

Relacionado com o tópico anterior, ter espaços em branco no meio do texto é ultra fashion! O line-height deve ser no mínimo 150%, quanto mais melhor.

Link sublinhado é brega

Com tantas opções de afrescalha^W, digo, de formatação, você vai deixar aquele linkão azul sublinhado? Não né! Mude as cores, abuse do :hover para dar destaque, mude a cor de fundo, use bordas.

Imagens devem ter borda

Claro que você não vai usar aquela bordona azul anos 90 nas suas imagens, mas uma borda fininha e cinza com um padding para deixar a impressão de foto com borda branca, é show.

HTML diet

Ficaram para trás os velhos dias de <FONT COLOR=”fuchsia”> e <HR SIZE=”5″ NOSHADE>. O HTML hoje deve ser puro, livre de gordura. Os únicos atributos permitidos para qualquer tag do BODY são ID e CLASS. Ah sim, em minúsculas porque o W3C mandou.

Tabelas? Vá de retro!

Toda página que usar tabelas para definir o design terá seu canto reservado no mármore do inferno. Tabelas são do mal. Tabelas dentro de tabelas então? Vixe. Seja moderninho e use DIVs para organizar seu conteúdo. Tabelas só são permitidas para servir ao seu propósito inicial de mostrar dados tabulares (linhas e colunas com números, lembra?).

Seja líquido, se espalhe

Não use medidas absolutas (pixels), sempre use “em” ou porcentagem. O visitante pode usar um palmtop ou uma tela de cinema 30 polegadas, janelinha pequena ou tela cheia, não importa. Seu site deve escorregar para todos os lados e ficar bonitão em qualquer tamanho.

E claro, a foto de natureza

Uma grama verdinha, uma fruta apetitosa, um animal com um semblante sereno, uma paisagem que se perde no horizonte. Você é livre para escolher o tema, mas a indefectível foto de natureza não pode faltar. Ela deve ser totalmente fora de contexto, não ter nada a ver com o resto do site. Mas mesmo assim será “cool”.

É isso. Concorda? Discorda? Tem mais ingredientes a acrescentar? Deixe um comentário.

Para testar a eficácia dessa fórmula, tentei aplicar estes conceitos na página principal de meu site. Admito que estranhei no início, mas gostei do limãozinho :) Para comparar, veja como era a versão anterior do site.

Versão antiga / Versão nova

Leu até aqui? Então já que você está com tempo, engrandeça seus conhecimentos em webdesign e leia algumas dicas sem prazo de validade, que pregam o bom senso acima de tudo:

• Proper HTML
• The HTML Hell