Os 5 segredos da criação de um site “clean”

Durante as aulas de Design Web um aluno nos trouxe a crescente demanda pelos clientes por sites “clean”. Todo mundo agora quer site “clean”. Acho muito bom isso, eu também gosto de entrar em sites “clean”. ;) Bem, venho através desta dismistificar algumas idéias que a maioria tem sobre sites clean.

Primeiro, o que é um layout “clean”? Pelo nome já dá pra perceber alguma coisa. Seria um layout “limpo”, sem muita poluição visual. Porém layout clean não quer dizer layout sem conteúdo, com pouco texto na capa. Veja por exemplo os sites de grandes portais, são sites com muito conteúdo mas leves visualmente.

Vou revelar 5 segredos para você criar aquele site “cleanissimo” sem muita frescura:

Segredo 01: as margens. Layout clean tem margem entre os elementos e margens internas de mesmo tamanho. As margens brancas, sem separações visíveis entre os elementos visuais, são um dos maiores segredos. O espaço entre um elemento e outro já faz a separação natural, sem necessidade de barras e linhas separatórias, fazendo com que o layout fique mais leve visualmente.

Segredo 02: as cores. Quer fazer um layout limpo, sem possibilidade de erro? Use e abuse do branco. Use bastante branco no fundo e apenas  toques de cor.

Segredo 03: as fontes. Utilize apenas uma família de fontes. Caso queira uma fonte de título diferente da fonte do texto, utilize as variações de negrito. Por exemplo, fonte de título sendo a mesma fonte do texto, só que com negrito.

Segredo 04: evite muitos banners animados. Um dos elementos que fatalmente deixarão seu layout poluído são os banners animados, principalmente os pequenos que ficam um embaixo do outro. Cuidado pois muitos banners animados não funcionam nem para o cliente nem para o site. Isso porquê a animação serve justamente para destacar. Quando se coloca diversos banners animados juntos, cria-se então uma massa visual. Seria como um grupo de 5 pessoas. Quando uma delas coloca uma melancia na cabeça, ela irá se destacar das demais pois somente ela tem uma melancia na cabeça. Já quando todos resolvem colocar uma melancia na cabeça, as 5 pessoas serão apenas 5 figuras com uma melancia na cabeça e nada mais do que isso. Aquele lá que antes estava destacado, se torna apenas mais um. Por isso que banner animado junto de outros banners animados perdem totalmente o destaque e só tem uma função: poluir sua página e irritar a visão do usuário. Portanto, evite. Se for utilizar animação em banner, coloque apenas um banner animado, com evolução sutil.

Segredo 05: tamanho. O tamanho também serve como efeito destacador, assim como a animação. Note nos grandes portais que normalmente temos uma imagem grande de notícia destacada, as imagens que vem a seguir são menores e eles vão ficando cada vez menores até o final da página. Trata-se de uma hierarquia visual de importância. Se você colocar várias imagens do mesmo tamanho, irá criar uma disputa entre as imagens e ocorrer o mesmo que ocorre com os banners animados, nada será destacado. Então crie uma hierarquia visual, evitando colocar muitas imagens grandes no mesmo espaço da página, disputando um com o outro.

Pronto, seguindo essas 5 regrinhas dificilmente você terá um site poluído visualmente e assim contribuirá com o nosso meio ambiente virtual. ;)

Para o alto e Avante!

Por Bruno Ávila » Webdesign

13 comentarios on “Os 5 segredos da criação de um site “clean””

  • Leone Bachega

    Alguns exemplos seriam bons para ilustrar. =)

    03-04-09 » 3:27 pm »

  • Ciro Nunes

    muito boa essa matéria, acho que não tirou só a duvida de um aluno do curso de design web, mas que muitas pessoas tinham!
    obrigado

    03-04-09 » 4:15 pm »

  • Bernardo Collet

    Otimas dicas Bruno

    03-04-09 » 5:07 pm »

  • Thiago Rodrigues

    Muito boa matéria.
    Estou com epectativas muito boas para o curso de design web que estou fazendo.

    obrigado

    04-04-09 » 12:50 am »

  • Raphael Fernandes

    Ótimas informações bruno, sempre trabalhei seguindo todas essas regras, desde quando comecei a trabalhar com sites prefiro sites “clean”, não querendo me gabar, mas acho que sou bom trabalhando com sites “clean”, acho que meu problema seria sites com evolução visual maior, sites mais coloridos, com mais efeitos de imagem e etc… se fosse possível, gostaria que você postasse algumas informações sobre estes tipos de sites, como o que você fez, que vi uma vez no seu portfolio, acho que foi de um festival de musica no ceará, ou algo do tipo, afinal, existem muitos clientes que preferem esses tipos de sites, e dependendo do negócio do cliente, realmente ele pode ter razão em querer, e ainda tenho dificuldades com estes tipos de sites.

    Ah e gostaria de saber também, se algum dia você pretende palestrar um curso de algum tipo de programa como photoshop, pois eu com certeza seria um de seus alunos nesta turma, os cursos que temos por aí, são de níveis muito baixo, e todos vimos os seus trabalhos, com grandes efeitos visuais, passa essa qualidade para nós, vai :P

    Obrigado pela atenção,
    para o alto e avante!

    Valeu Raphael, pode deixar, quem sabe dou um workshop voltado pra isso. E sobre a sugestão de artigo, tá anotado. Brigaduuu!

    05-04-09 » 9:41 am »

  • Marcelo De Mari

    Boas dicas, alinhamento também acho que faz a diferença.
    Deixa a página ou qualquer outra tipo de job com ‘sentido’

    09-04-09 » 2:36 am »

  • Flavio Mendes

    Ótimas dicas, Brunildo!

    09-04-09 » 3:03 pm »

  • Iúri Florisbal

    Valeu Bruno, as margens, ah se elas falassem… foi um dos primeiros ensinamentos que tive no curso de design web e que vou levar para o resto da vida… um detalhe tão simples mas que modifica tudo…

    grande abraço

    09-04-09 » 8:52 pm »

  • fabiocotta

    so descordo do abuso de branco !

    fora isso

    show

    15-04-09 » 5:25 pm »

  • Felipe Bueno

    Por isso mesmo a calculadora é uma boa amiga! Margens iguais, tamanhos redondos e corretos, colunas certas seguindo mesmo padrão. É tão bom no visual quanto na montagem, facilita e muito.
    Hoje sigo um tamanho maior de site, melhor visualizado para monitores de 17″ em diante, gosto muito desse tamanho de até 1000px. Facilita no conteúdo e no visual também.

    Boa Bruno.

    Abraços

    06-05-09 » 3:10 pm »

  • Valeria P

    Valeu pelas Dicas Bruno!

    Detalhes simples fazem toda diferença!!!

    Na faculdade estou estudando Comunicação Visual para Web e vendo a importância…E suas dicas sempre vêm acrescentar.

    Abraços

    06-05-09 » 10:14 pm »

  • Antonio Carlos

    Ótimas dicas Bruno. Como sempre… Inclusive algumas dessas dicas você aborda com mais detalhes no curso Design Web. Muito bom mesmo…

    Abraço

    18-05-09 » 5:54 pm »

  • Web Designer | Raphael Figa

    Como alguns disseram acima a demanda é crescente quem possui muito conteudo ou aquele site que exige leitura é dificil ler em fundos pretos, coloridos tudo muito apertado com excesso de cor.
    As dicas das margens é muito boa, valeu Bruno.

    E to curioso com esse novo curso.

    Abraço.

    22-08-09 » 2:50 pm »

Comente!