Webdesign - 19/08/2014

7 erros de webdesign que todo iniciante comete

7 WEB DESIGN MISTAKES EVERY BEGINNER MAKES
Por Iain Lobb – creativebloq.com
Traduzido por Ricardo Gonçalves

É fácil cometer erros quando se está começando com webdesign. Aprenda quais são eles e como os evitar.

Experimentar e cometer erros são partes importantes do aprendizado. A cada ano em meu trabalho como professor universitário, eu vejo novos estudantes cometendo os mesmos tipos de erros em seus trabalhos de webdesign. Felizmente identificando esses erros aqui, podemos aprender como evitá-los.

1 – Falta de visão geral

Toda página de web existe por uma razão, seja para oferecer entretenimento, transmitir informações, vender um produto ou permitir o usuário fazer uma tarefa. Cada elemento da página precisa funcionar em serviço dessa razão.

Examine seu design: a função de cada elemento deve ser clara, e tudo o que não apoia seu propósito deve ser removido. Coisas clicáveis precisam parecer com coisas clicáveis – seja por sublinhado, estilizando como botões ou algum outro sistema visual, a chave é ser consistente.

Você deve focar em criar uma hierarquia visual clara, para que o usuário possa facilmente passar o olho na página e coletar informações ou funções-chave. A tonalidade e o estilo da sua página devem refletir o propósito do site, mas o conteúdo é a parte mais importante do design. Se o seu site é para promover o suas habilidades como webdesigner, talvez não seja preciso saber sobre sua paixão em colecionar selos. Pense sobre por quê o usuário foi até o site, e o que você quer que eles façam quando chegarem lá. Cuidadosamente considere como você organiza as informações e funcionalidades – por exemplo, não faça desnecessariamente um site de múltiplas páginas se ele funcionar melhor com uma página única com rolagem.

2 – Caindo por modismos e tendências

É legal acompanhar a moda, mas é mais importante se fixar aos princípios centrais do design. Por exemplo, os clássicos posteres dos jogos olímpicos da metade do século 20 ainda parecem fantásticos hoje, enquanto muitos dos sites da “web 2.0” do inicio dos anos 2000, com seus ‘bevels’ e efeitos glass, já parecem ultrapassados. O estereótipo “hipster” com suas silhuetas de ancoras e bigodes estão indo na mesma direção.

A chave é manter os princípios de tipografia, imagem e layout, ao invés de aplicar iconografias sem sentido, CSS complicado ou efeitos de Photoshop. Algumas vezes menos é mais, e só porque você pode fazer um carrossel de imagens em jQuery ou um efeito de scroll parallax, não significa que você deve.

Ninguém nasce com bom gosto (eu certamente não diria que tenho!) e gosto, é claro, é subjetivo. Porém nos expondo a coisas bem feitas, nós certamente ganhos uma apreciação pelo o que é bom, e felizmente vemos os erros nos nossos trabalhos mais facilmente.

3 – Não alinhar a um grid

Apesar das linhas do grid serem invisíveis, a maioria dos designers profissionais alinham seus trabalhos a uma grid rigoroso, na maioria das vezes feito de 8, 12 ou 16 colunas verticais finas. Essas colunas devem ter larguras e espaçamentos uniformes, com margens as separando claramente. Elementos visuais podem ocupar uma ou mais colunas , então na prática as 12 colunas menores podem ser divididas em três colunas de texto, e em outras vezes uma imagem pode ocupar todas as 12 colunas. Variando a forma como essas colunas são separadas pode ajudar a fazer o design parar de parecer com uma tabela rígida.

Sistemas de grid foram originados no design de impressão,  mas vieram para a internet por frameworks como o 960 Grid System e mais recentemente sistemas responsivo como o Skeleton, que são capazes de dinamicamente alterar o tamanho e numero de colunas com base na resolução da tela. Lembrem-se, elementos visuais devem ou alinhar-se claramente, ou claramente parecer que eles não foram feitos para isso. Quando as coisas quase se alinham, porém não tanto, tudo começa a parecer estranho. Também fique atento para “palavras órfãs” ou elementos que vão parar em lugares não esperados. Normalmente é melhor “fazer o design no browser” do que no Photoshop, assim você terá uma ideia mais realista de como o site irá parecer.

No mínimo, uma página de web deve estar centralizada na largura do browser, ao invés de deixar o conteúdo da página ancorado à esquerda com um espaço vazio para a direita (estou olhando para você, TSB).

Espaço em branco pode ser muito bom, mas não assim.

4 – Tratamento inadequado de texto

Estudantes na maioria das vezes fazem o texto muito pequeno. A fonte padrão do HTML vem de um tempo em que os websites tinham que ser do tamanho certo para monitores com resolução de 800×600, mas na era dos portáteis e monitores de alta resolução, nós podemos pensar maior. Designers como Jeffrey Zeldman tem mostrado que fontes grandes podem funcionar bem para parágrafos.

Não esqueça de checar como o seu website parece em várias resoluções e use media queries no CSS para adaptar se necessário. Os títulos devem ser significativamente maiores do que o texto dos parágrafos. Também garanta que você terá espaço vertical suficiente para o espaço entre as linhas de texto. Na tipografia, essa distancia é chamada “leading”, e no CSS é controlada pelo line-height. O valor padrão coloca as linhas um pouco próximas umas das outras, o que pode significar que o leitor irá perder noção de onde ele está, com o passar dos olhos pela página. Tente usar um valor que é 50% maior do que o tamanho da sua fonte, por exemplo 36px para 24px de fonte.

Garanta que você deixará bastante “espaço em branco” dentro do texto – isso significa espaço vazio na pagina que serve para separar os elementos e conduzir os olhos pela pagina. Garanta que você limitará a largura das colunas dos textos para que você não tenha muitas palavras em uma linha – isso também ajuda a ter certeza que o leitor não se perca ao mover seu olho do final de uma linha para o começo de outra. Geralmente uma média de 10 palavras por linha funciona melhor. Pelos mesmos motivos, evite text-align:center ou  text-align:right para parágrafos.

Limite-se a duas ou três fontes, e evite usar imagens como texto – serviços como o Google Fonts e Typekit dão acesso a uma grande variedade de fontes. Garanta que tenha bastante contraste entre a cor da fonte e a cor de fundo – geralmente textos com uma cor escura em fundos claros funcionam melhor. Textos de cor clara em fundos escuros podem funcionar também, mas pode ser visto como mais masculino, frio e não convidativo. Ferramentas online como Adobe Kuler podem te ajudar a escolher um bom esquema de cores. Evite usar fundos de alto contraste que podem confundir a forma das letras.

5 – Tratamento inadequado de fotografia

O erro mais comum aqui parece ser de estudantes posicionando fotos muito pequenas na página, assim perdendo seu impacto. Imagens que ocupam toda a largura do browser (como visto no Treehouse, por exemplo) dão mais impacto, como se fosse uma revista impressa. Também tenha certeza que a fotografia que você escolher transmite a mensagem que o seu website está tentando passar, e que você tenha o direito legal de usá-la. Sites de fotografia oferecem uma impressionante seleção de imagens, mas garanta se afastar das várias das fotos clichê que você pode encontrar por lá. Se você estiver usando sua própria fotografia, tenha certeza de ajustar os níveis de cor e contraste para parecer mais impactante e sem parecer velha, mas ainda sim ser natural.

Imagens de largura total podem dar ao seu site um visual maravilhosamente impactante.

6 – Tratamento inadequado de ícones e logos

Um problema comum são artes mal cortadas com bardas irregulares visíveis (“serrilhados”). Domine a ferramenta caneta no Photoshop, ou use o lasso poligonal com um zoom muito alto. Outro problema frequente é a compressão de arquivos jpeg, então use SVG ou um PNG de resolução muito alta para ícones e logos. Tenha certeza de não mostrar a arte acima de sua resolução nativa, pois ela pode parecer borrada. Você pode se safar dessa com um fotografia, mas não com um ícone.

7 – Deixar coisas incompletas ou “quebradas”

Um designer profissional nunca irá conscientemente deixar alguma coisa não terminada ou quebrada num site público. Grandes agências de design podem ter um setor dedicado a garantir a qualidade e procurar falhas e erros, mas como um iniciante cabe tudo a você. É bom ter um amigo para ajudar a revisar e verificar seus trabalhos. É incrível o que um segundo par de olhos pode fazer.

Fique de olho aberto para links que levam para páginas não existentes, “imagens quebradas”, falhas no layout, estilos não atrativos e erros de gramática. A chave é dar atenção aos detalhes. Se você tentou implementar alguma coisa mas não conseguiu fazer funcionar direito, remova. Se você tem erros óbvios na sua página, pessoas verão apenas os erros e não a sua mensagem.

E é claro, não cometa erros óbvios como deixar o titulo da página como ‘Untitled Document’ ou deixar textos genéricos na página! Mas nenhum de nós faria isso, faria?! Lorem ipsum dolor…