Alguns passos para criar um Layout "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, como UOL, G1 etc, são sites com muito conteúdo mas leves visualmente.

Abaixo, 5 dicas para fazer um site legal sem poluir a visão do visitante:

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.

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

Abraço!

Participe deixando seu comentário ou sugestão ao Blogão do Design...