Cartilha do Webdesigner Antenado

|link| O Aurélio novamente fez um artigo que gostei muito e pra não perder, resolvi deixar lincado aqui no blog. Vale à pena a leitura da ótica dele acerca de como os sites estão sendo padronizados no quesito “visual” usando poucas, mas importantes dicas.

Apesar de estar o texto básico da postagem aqui, é recomendável ir ao link da postagem pra conferir os links que fazem referências diversas.

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 e


. 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.

Site Velho Site Novo
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:

Esta entrada foi publicada em webstandard. Adicione o link permanenteaos seus favoritos.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>