Desenvolvimento de materiais publicitários como, flyers, anúncios para revistas e jornais, cartazes, cartões de visita, camisa, banners, layouts, Manual de Identidade Visual ou seja, todo e qualquer tipo de divulgação impressa.
Sistemas CMS como o Joomla permitem que um website razoavelmente complexo seja criado com uma rapidez e baixo custo impossíveis de serem obtidos através do desenvolvimento tradicional, partindo “do zero”.
Me perdoem pela palavra de baixo calão, um tanto indigesto, mas é a mais pura realidade. Quem aqui nunca escutou da boca de um cliente, do chefe ou até mesmo de um amigo que “seu layout tá uma merda”? Mesmo os melhores web designers já escutaram isso pelo menos uma vez ou algumas dezenas de vezes antes de serem o que são.
Será mesmo? Será que a culpa não é do Web Designer, sempre é do cliente?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 doCurso 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 ExemploA 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 anosQueremos 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
Clique na imagem acima para ver maior
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
Clique na imagem acima para ver maior
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
Clique na imagem acima para ver maior
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!” =D
Fonte: www.brunoavila.com.br
Categories:
Informação