Erros e Acertos no Design de Sites Famosos

Costumo dizer que uma boa forma de aprendizado é a observação. É a forma mais barata e eficiente de ensino. Por isso convido você, para passear junto comigo por alguns sites de celebridades e empresas famosas, tentando identificar seus erros e acertos no design voltado para web.

Irei separar nossas análises e observações por assuntos importantes referentes ao design. Nessa análise abordei as cores, tipografia e identidade desses sites. Vamos lá!

Cores

Um dos itens fundamentais em qualquer design web é a cor. Uma cor mal escolhida pode desviar o olhar, atrapalhar o conteúdo ou até mesmo fazer com que o leitor se sinta irritado, caindo fora do site. Por isso uma boa combinação de cores é de extrema importância na criação de um bom design.

Abaixo um comparativo de um bom e um mal uso da cor.

NUNCA FAÇA ISSO

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.brunoavila.com.br/avante/wp-content/uploads/2010/04/analise-kellykey.jpg&key=700f8a052c60f5a6b1a2d9b098461d7db8049763d6b8feef3e480b494b332c91" alt="Imagem Postada" />

Blog da Kelly Key: Cuidado com o contraste entre o fundo do site e o conteúdo. Note que o rosa vivo do background puxa os olhos para fora do conteúdo, o que não é bom para a leitura. Lembre sempre de priorizar o conteúdo, fazendo com que sua leitura seja facilitada.

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.brunoavila.com.br/avante/wp-content/uploads/2010/04/analise-calcinhapreta.jpg&key=c8eeec67622ccaea7ebfdbbb79c7d586abc7591100d55d9da0a2cafef4d1518a" alt="Imagem Postada" />

Banda Calcinha Preta: para quê usar um bege clarinho no fundo junto com outro bege um pouquinho mais clarinho na chamada se não dá para perceber a diferença entre os dois tons? Fique ligado também no contraste de cores entre fontes e fundo. Note que a chamada "Adquira já" está em amarelo claro com fundo também claro. E sabemos que claro com claro não dá leitura. Além disso não se esqueça que fotos possuem milhões de cores em sua composição. Misturar dezenas delas como é o caso do exemplo só gera um resultado: poluição visual.

FAÇA ASSIM

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.brunoavila.com.br/avante/wp-content/uploads/2010/04/analise-patrimonio.jpg&key=57495d42b92db97819c13bf81417b06cf1725ad48ac0813eeac9e8cb5c730576" alt="Imagem Postada" />

Patrimônios do Brasil: um bom exemplo de uso de cores e gradientes em favor do conteúdo. O fundo do site utiliza um bg muito apropriado, patterns semelhantes a azulejos antigos, num tom leve de bege. O fundo do conteúdo também é bege, com um leve gradiente, dando um bonito efeito de sombra e de objeto envelhecido. Nesse caso as cores estão sóbrias e os tons de vermelho, apesar de serem vivos, são em pequenos toques, não irritando o olhar nem atrapalhando o conjunto.

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.brunoavila.com.br/avante/wp-content/uploads/2010/04/analise-embratur.jpg&key=ef62467841b35fa6025adf4e20dc7e74a417fe0954f82ed84d34a5ff730d644a" alt="Imagem Postada" />

Embratur: outro exemplo de fundo leve, favorecendo o conteúdo central. Os detalhes em cores mais fortes são positivos pois se adequam perfeitamente a identidade visual do símbolo "Brasil" trabalhado pela Embratur. O uso do verde na caixa de fotos não atrapalha e cumpre sua função de destacar aquela seção.

Tipografia

Fonte que não dá leitura não faz o menor sentido. Colocar textos em fontes tão pequenas que nem de óculos se consegue ler também não é compreensível. Texto foi feito para se ler portanto facilite a leitura do conteúdo colocando fontes e tamanho adequados.

NUNCA FAÇA ISSO

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.brunoavila.com.br/avante/wp-content/uploads/2010/04/analise-soniaabrao.jpg&key=9dccec43eeb2caab63f64cf66c36e4fcb98bd2a83855e659059a616e7a922788" alt="Imagem Postada" />

Sonia Abrão: além do próprio logo, cuja fonte manuscrita pode dificultar a leitura, as fontes do menu e do texto são muito pequenininhos. Além disso, encaixotar todas as informações só dão mais peso a página. Os textos dos topos de cada caixa também estão muito coladas nas bordas e com muita justaposição, embaralhando as letras.

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.brunoavila.com.br/avante/wp-content/uploads/2010/04/analise-stella.jpg&key=c73185ea1410e2cee8f10db54a86708576fab2a11e45d6a2d4864d7f6f4be15c" alt="Imagem Postada" />

Stela Barros: cuidado com textos em cima de fotos sem espaço vazio e com muitas cores.Nunca dá leitura, as letras acabam se perdendo em meio a tanta cor. Se você se sentir obrigado a colocar uma sombra preta embaixo das letras ou mudar diversas palavras para outra cor afim de dar leitura, isso está denunciando que há algo de errado. Nesses casos evite essas gambiarras e opte por tarjas de cor escura com o texto por cima em cor clara.

FAÇA ASSIM

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.brunoavila.com.br/avante/wp-content/uploads/2010/04/analise-globo.jpg&key=fe88d3115a2f860425ec1792aee8fe4f4b8b80f863e7491341544ec3b0cb1868" alt="Imagem Postada" />

Globo.com: muitos não gostam do seu layout, mas nada podemos dizer em relação a sua facilidade de leitura, principalmente na navegação. Fontes grandes são fáceis de ler e as cores servem como identificação de assunto.

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.brunoavila.com.br/avante/wp-content/uploads/2010/04/analise-accor.jpg&key=d44768a6f3c3c72a671d7a99e1197c04bf907c6cdee51461798a15d3736fe72d" alt="Imagem Postada" />

Accorhotels: note que os textos das chamadas ficam por cima de cores lisas, sem textura e sem estar por cima da foto, sempre com uma cor contrastante em relação ao texto. A dica é simples, fundo escuro, fonte clara. Fundo claro, fonte escura.

Identidade

Com a popularização dos templates prontos, encontramos muitos sites sem identidade. Afinal a identidade vai além do logotipo. Muitas vezes nos deparamos com sites cujo layouts são únicos e personalizados, porém basta mudar o logotipo que o layout se adequará muito bem a qualquer empresa. É o que chamamos de layout genérico.

NUNCA FAÇA ISSO

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.brunoavila.com.br/avante/wp-content/uploads/2010/04/analise-locaweb.jpg&key=52f1651d22a20013261b08e81a29be11d7a24d8080e7a2ac78d8a2334451dc36" alt="Imagem Postada" />

LocaWeb: layout simples, correto mas sem identidade. Se mudarmos o logotipo da Locaweb pelo logo da Xerox, Canon ou do Flamengo, vai dar no mesmo. Isso ocorre pois não existe mais nada no layout que faça qualquer alusão a Locaweb, tirando a chamada principal, claro.

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.brunoavila.com.br/avante/wp-content/uploads/2010/04/analise-viajamais.jpg&key=9b94907010e81a967e1413ad63e12c7b76c2d79e5c5e369a7b8c4c719e29977f" alt="Imagem Postada" />

Viaja Mais: outro site com layout genérico, daqueles que a gente encontra facilmente em bancos de templates prontos para Joomla ou Wordpress. Basta mudar o logotipo e a foto do topo que o layout irá se adaptar ao assunto que quiser. Se tivessem colocado o detalhe dessa malazinha e das cores no bg ou em outras partes do design, talvez teríamos uma maior identidade com o projeto. Além disso esses traços entre as seções só fazem pesar a página pois a distância entre as seções já fazem a divisão. Então para quê essas linhas?

FAÇA ASSIM

http://www.brunoavila.com.br/avante/wp-content/uploads/2010/04/analise-mtv.jpg

MTV: a identidade vai além do logotipo. Em toda parte do layout encontramos elementos que se relacionam com a MTV. Da escolha da fonte aos ícones. Sem falar no fundo do site que muda de acordo com a chamada principal do site, criando sempre uma relação.

http://www.brunoavila.com.br/avante/wp-content/uploads/2010/04/analise-vale.jpg

Vale: layout simples, clean, leve com identidade. As cores e fontes utilizadas pela identidade da Vale se faz presente em todo o site assim como o movimento do seu logo que está presente também na barra do topo.

Existem outros pontos importantes no design web que podem ser abordados. Os sites citados acima podem pecar numa coisa mas podem ter acertado em outras também. Afinal não existe design perfeito.

Fonte