Será mesmo? Será que a culpa não é do Web Designer, sempre é do cliente?
Mas Bruno, tenha piedade. Meu layout estava lindo! E mesmo assim o cliente disse essa asneira. Culpa dele que não tem bom gosto!
Trago para vocês um exercício muito bacana que faço com todos os meus alunos do Curso de Design Web. A idéia é desmitificar a história de que sempre a culpa é do cliente que não entende o estilo de sua “arte”. Neste exercício apresento um briefing fictício para todos os alunos, com prazo de entrega e outras orientações. Cada briefing é analisado de forma personalizada, onde comento através de áudio e rabiscos no layout como foi o desempenho do aluno, apontando o que pode ser mudado e sugerindo melhores formas de apresentação.
Durante o curso são sugeridos 3 trabalhos de criação, todos analisados por mim. Nos últimos anos tive a oportunidade de avaliar mais de 1200 trabalhos de layout e graças a essas análises pude identificar alguns erros comuns entre os web designers.
Vamos começar então com um briefing de mentirinha que servirá de guia para a criação do layout:
Briefing
Qual o nome do site?Empresa Exemplo
Fale um pouco sobre a Exemplo
A Exemplo é uma empresa de consultoria e soluções em negócios dos mais diversos segmentos. Presta serviços para empresas que precisam de consultoria para seu business.
Quem é seu público principal?
Pessoas de classe AB, empresários e executivos, acima de 30 anos
Você está imaginando uma certa aparência e sensação para o site?
Sim, imaginamos algo bem clean, com um grande destaque emocional na imagem. Imaginamos a foto de um de nossos colaboradores, sorrindo e com grande destaque chamando para a pesquisa do IDC que apontou a empresa Exemplo como a empresa com colaboradores e clientes mais felizes do Brasil. Quem sabe uma foto de nosso colaborador dentro da empresa, sorrindo, em frente a uma de nossas paredes floridas, acho que deixaria a home do site bem viva, alegre.
Queremos um site simples, somente apresentando a empresa, sem necessidade de atualizações constantes, nem newsletter, sem busca, a capa deve ser focado na imagem e no destaque para essa pesquisa.
Quais serão os itens do menu e as seções que deverão compor o layout?
O menu deverá conter os itens: a empresa, clientes, portfolio, blog, localização e contato. Só deve ter o logotipo, o menu e uma imagem de destaque para a pesquisa que aponta a Exemplo como um exemplo de empresa feliz.
Você tem padrões existentes, como logos e cores, que devem ser incorporados?
O logotipo segue abaixo, as cores pode ser as cores do logo, vermelho e preto.
Proposta de layout do Web Designer 1
Aí está o layout que o Web Designer de número 1 apresentou. No geral percebemos total falta de sintonia entre o layout e o briefing. Isso sem falar nos erros técnicos que encontramos nesse design como a mistura de fontes (contei 4 tipos de fontes diferentes), o excesso de gradientes, os desalinhamentos e a falta de contraste entre o texto e o background. Vejamos:
1. Logo: jamais devemos distorcer imagens, fotos, textos, muito menos o logotipo do cliente. O nosso querido amigo web designer deu uma esticada legal no logotipo, dando o “efeito” de distorção. Quer aumentar ou diminuir? Faça mantendo a proporção. Se quer aumentar a largura em 50%, por exemplo, aumente também a altura em 50%.
2. Menu no topo: aqui temos três erros. Primeiro, o conteúdo do menu está completamente diferente do menu dito no briefing. Não podemos acrescentar ou retirar itens do menu sem consultar o cliente. Segundo, se o background é escuro, porquê usar uma fonte na cor escura? Se tivesse usado a cor branca, por exemplo, evitaria a “gambiarra” do uso do glow que ficou artificial e exagerado, deixando o layout mais pesado visualmente. Terceiro, se tem tantas opções assim no menu, porquê colocá-lo no topo, onde se tem menos espaço? Isso fez com que as opçòes ficassem muito próximas, parecendo ser a linha de um parágrafo, onde não conseguimos diferenciar cada opção.
3. Menu à esquerda: além de ficar redundante, já que temos o mesmo conteúdo no topo, o menu vertical encontra-se totalmente desalinhado. Note que a primeira opção está mais para a esquerda, a segunda mais para a direita e assim segue o desalinho. O correto é iniciar o item abaixo exatamente onde começa o item acima, ou seja, alinhado à esquerda.
4. Imagem: essa ilustração de perfil de um executivo não diz muita coisa a não ser que se trata de um homem de terno e gravata com a mão no bolso. Não passa a emoção que o cliente desejou transmitir, a felicidade de seus funcionários e clientes. Além disso a cor de fundo, tanto do background do site como da imagem principal, está com um excesso de gradiente. Lembre-se que gradiente é efeito de luz e sombra e este deve exercer um efeito natural. O que, na natureza, possui esse tipo de iluminação e sombra, indo do branco para o azul? O efeito fica plástico e irreal. Se deseja usar gradiente, use transições mais suaves, de um azul escuro, por exemplo, para um menos escuro, imitando uma iluminação real sobre uma superfície azul. E evite excesso de gradientes, como no caso deste layout.
Além disso esse efeito de bevel do retângulo da chamada não se vê mais desde 1996. Peso desnecessário.
5. Texto-chamada: nada mais do que um papo alegre que pouco diz. Espaço desperdiçado, ao invés de um vazio “seja bem-vindo” poderia ter aproveitado o espaço para fazer a chamada que o briefing pedia, falando sobre a pesquisa do IDC. Além disso o texto tem leitura dificultada pela falta de contraste (fonte de cor escura com background também escuro) e totalmente colado na caixa, é fundamental a margem interna para descolar a chamada e assim dar seu devido destaque.
6. Total desalinhamento dos textos: É necessário manter o alinhamento, no caso o preferível é que seja a esquerda.
7. Alinhamento centralizado: uma vez escolhido o alinhamento, mantenha esse alinhamento em todas os textos presentes no site, ao menos que o site seja experimental e os diversos tipos de alinhamento sejam propositais. Porém no caso dos portais e sites de conteúdo, lembre-se que nós ocidentais lemos da esquerda para a direita. O alinhamento a esquerda é um padrão de leitura que todos nós esperamos. Nesse caso não pode haver dúvidas, alinhou o logo a esquerda, o menu a esquerda, todos os textos estão alinhados a esquerda, não coloque um dos textos alinhados à direita nem no centro. Todos os textos devem seguir o mesmo padrão.
8. Informativo: além do briefing ser claro que o site não terá esse tipo de seção, tecnicamente esta caixa de cadastro tem diversos erros. Desde a falta da margem interna em relação a moldura até o botão, exagerado, distorcido, com uma sombra forte, irreal e com textura pesada. Opte por botões mais simples e de fácil visualização
Proposta de layout do Web Designer 2.
Agora veja o layout que o Web Designer de número 2 apresentou. Tecnicamente falando o layout está correto e até mesmo bonito. Tudo bem alinhado, equilibrado, com um background de textura agradável e padrão de fontes bem definido.
O layout acima é um típico exemplo do layout bonito mas que “tá uma merda” para o cliente. O Web Designer volta com a maior raiva, dizendo que o cliente não entende nada de design e que é um brega. Porém note que o erro é 100% do web designer.
Isso se deve a má interpretação do briefing. O cliente disse claramente que queria um layout com foco na imagem e na chamada da pesquisa do IDC. Que bastava o logotipo, menu e a chamada, nada mais do que isso. E ainda disse claramente que não era pra ter nenhuma caixinha de newsletter e busca. Aí o Web Designer, totalmente desatento, sem ler o briefing direito, faz um layout bonito mas que não atende a expectativa do cliente.
É como se o cliente precisasse de um caminhão e você entregasse uma Ferrari. Ferrari é um carro bonito, mas o cliente precisa de uma carreta pra levar sua produção para a outra cidade. Logo sua Ferrari, pra ele, é uma “merda”, pois não atende seus objetivos.
Proposta de layout do Web Designer 3
Ah! Agora sim! Justamente o que o cliente pediu. Note o logotipo, o
menu e a grande foto de destaque, com o texto casando com a imagem e
chamando para a pesquisa do IDC. A foto está espontânea, mostrando a
felicidade de um dos funcionários da empresa Exemplo. Veja o detalhe da
parede que o cliente citou, esta parede é da empresa e esta foto estava
no material que os outros 2 web designers também receberam. Porém o
Web Designer de número 3 captou bem o briefing, acertando na mosca o
que o cliente queria.Note também que é um layout bonito e extremamente simples de se fazer, não exigiu efeitos mirabolantes, apenas a boa técnica e uma foto bonita. Um layout que poderia ter sido feito em qualquer software gráfico.
Atendeu as expectativas, fez um layout equilibrado e por isso escutou do cliente um “seu layout tá uma m… aravilha!”
Quer ser analisado e ter sua orelha puxada por mim como fiz nesse post? Então conheça o Curso de Design Web.
