Tudo sobre Web Design e outras firulas.
O FUSCA E O JOOMLA 2.5
O que tem a ver um Fusca, uma Ferrari e um tema para Joomla 2.5? Assista o vídeo ao lado e descubra. ;)
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ê, caro leitor de Avante, 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
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.
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
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.
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
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.
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
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.
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
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.
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
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.
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.
Você quer saber mais sobre esse o assunto e ainda por cima quer que eu analise o seu layout? Então conheça o Curso Online de Design Web e participe da próxima turma!
Para o alto e Avante!
Bruno Ávila
Um pequeno menino risonho e falante, que gosta de arroz, batata-frita e chocolate. Sua diversão é fazer layouts, publicidade e cursos marotos para alunos supimpas. E nas horas vagas, claro, trabalha um pouquinho. ;D
Criação Publicitária
Aprenda a utilizar técnicas de comunicação visual e publicidade em seus layouts.
Identidade Visual
Para você que sempre quis aprender a fazer logotipo e manual de identidade visual com Bruno Ávila
Tableless para
Web Designers
Aprenda de uma vez por todas a recortar e montar bem um layout
Design para
Joomla 2.5
Aprenda a criar temas profissionais especialmente para Joomla 2.5!
TWITTER DO BRUNO
27 Comentários
Júlio Barros
Muito bom Bruno, certos detalhes as vezes passam despercebidos e somente o Bruno Avila para nos mostrar.
PS. Mas tem um exemplo do que fazer que você ñ colocou ai, e nem precisa, estou falando desses rabiscos que vc fez aqui no seu blog que particulamente acho sensacional.
Abraços.
Jadson Moreira
Muito Bom o artigo, Parabéns!
A colocação sobre a identidade esta presente não apenas na logo faz realmente uma grande diferença.
Douglas
Obrigado Bruno, com esse blog me ensina tudo.
Bruno Ávila
Hehehehe, os rabiscos tem motivo, eu vivo rabiscando antes de fazer layouts, então porquê não trazer para o próprio layout? Aí dá uma animada, dá um ar mais divertido. Valeu Júlio!
Sérgio Novelli
Parabéns, Bruno, pelo artigo.
Muito boa essa idéia de nos colocar essas observações em relação à layouts. Você, como sempre, se destacando como profissional e ajudando à todos nós.
Obrigado, pois nos ensina muito!
Adriano Trenahi
Parabéns Bruno, Ótima postagem.
É sempre bom aprender com erros e acertos de outros websites para melhorar o nosso trabalho.
Israel Brito
Realmente devemos ficar atentos a estas dicas, pois são importante para nós que trabalhamos com isso, muito bom artigo, parabéns.
Ramalho
Alô Família WEB,
Mais um “puxão de orelha” do mestre que vale a pena sentir dores.
Excelente info embora seja triste viver com esta epidemia que tem se propagado drasticamente pois tem afectado até os “Macacos velhos” na área.
Julgo que com estas dicas poderemos combatê-la desde que agente ponha em prática tomando atitude positiva, o que é difícil porque ainda estamos a treinar dizer NÃO ao cliente com Urgencias.
Para o colega J.Barros, creio que os links abaixo poderão lhe ajudar como fonte de inspiração:
http://vector.tutsplus.com/
http://schultzdesign.wordpress.com/category/rabiscos-rabiscos-02/
Grato pela dica BRUNO
Hildo Antônio
Bruno você realmente passa informação de qualidade a todos, isso mostra sua capacidade de ser professor, seus cursos são realmente de qualidade.
Bruno Ávila
Valeu Hildo!!! Brigadão!
Augusto César
Excelente esclarecimentos Bruno, parabéns!!!
Gustavo Frasão
É meu professor! Acompanho seu blog desde o início e todos os artigos que você publicou, de 2002 até hoje, me foram muito úteis. São informações séries, pertinentes e importantes que mostram como os detalhes fazem a diferença.
Por isso hoje sou seu aluno, com muito orgulho! Esse é o primeiro de muitos cursos que ainda vou fazer com você. E recomendo, quem não fez ainda está perdendo uma baita duma oportunidade.
Alenilson
Muito bom!
Essas dicas são facinantes.
Edimar S. Ramos
Parabens Bruno..
Mais um belo artigo para minha lista de favoritos..
rafael
ótimas dicas!
Veja meu artigo!
Anunciar em sites na internet compensa?
http://www.agenciaintermidia.com.br/site/modules/news/article.php?storyid=36
É de minha autoria!
Eliana Tiné
Olá prossefor Bruno
Deu para matar a saudade das aulas. Ensinou além webdesigner, ensinou a ser profissional, feliz e responsável.
Atualmente conto com duas parcerias e uma delas é com a http://www.innovarsite.com.br
Lógico que conta a nossa parte e aproveito para agradecer pela sua contribuição “por uma internet mais bonita” e com conteúdo.
Abraços e sucesso.
Fabrício Dantas
Bruno, Poxa cara, acho que você já escutou isso um milhão de vezes, mas nunca é demais…
Seu trabalho é ótimo e vc está de parabéns pelo site!
alexandre
Muito bom este post.Parabens….
Alexandre
Bruno Ávila
Hehehe, que é isso Fabricio, assim fico envergonhado! Brigadão!!! Valeu!
Bruno Ávila
Valeu querida aluna Eliana! Muito bom saber do seu sucesso!
))
Kilderson Sena
Ótimo post. Vale apenas salientar que as vezes, até muitas vezes, o próprio cliente “faz” o layout, então, muitos erros também é culpa do próprio cliente exigente.
Mas fora isso, todas as observações são bem notadas. Parabéns Bruno, como sempre arrasando!
Abraços !
Rômulo Villela
Pois é, um site de um festival da Claro tem um problema com o vermelho. http://www.clarocurtas.com.br, todos sabemos que a cor padrão da Claro é vermelha, porém não precisa assassinar nossos olhos.
Notem o BG que é praticamente vermelho RGB, se paro para ler algo por uns 5 minutos nessa página começo a delirar, rs.
Leonardo
Alguem já viu o site das Lojas Marisa?
http://marisa.com.br/ListaProduto.aspx?SecaoId=8
Carlos Junior
Concordo plenamente com o texto acima. Mas, gostaria de ressaltar que sites que não tem uma identidade total, ou seja, apenas tem um logo para identificar, podem diferenciar pelo conteúdo único.
Percebi que o meu blog não tem identificação total, ou seja, apenas o logo identifica o blog. Mas com certeza, o meu contéudo faz alguma diferença. Não discordo do texto. Irei daqui pra frente trabalhar mais no layout em geral. Só gostaria de deixar esta opinião para aqueles que não tem muito poder de layout. Foquem no conteúdo!
Bruno
Excelente post! Eu sempre gosto de ver essas análises, principalmente quando feitas por um profissional desse nível. Olha que interessante, alguém contou pro pessoal do calcinha preta pois o site deles está em manutenção
Sivaldo Gomes
É verdade e já corrigiram, agora o site está todo preto mesmo, nada de bege ._.
Fabrício Viagens
Muito boas dicas…o site é ótimo , Parabéns.
Um Trackback
[...] artigo “Erros e Acertos no Design de Sites Famosos“, o Bruno faz uma análise de design em alguns sites de celibridades, ou sites populares [...]