5 Técnicas Eficientes para melhorar os Designs

Técnicas complexas de design são normalmente perda de tempo e ao mesmo tempo, complexas.Alguns destes efeitos mais avançados podem acrescentar um toque muito especial aos designs que fazemos, mas quando são usados no sitio errado apenas servem para distrair a vista do utilizador e desvia-la do tema/conteudo principal. Estes efeitos devem ser precisamente o que um design precisa para ter o impacto desejado, mas nestes casos devem ser efeitos bem feitos mas simples...

Efeitos e técnicas simples são as bases dos designs da actualidade. Por exemplo, para que usar uma técnica de luz se não conseguimos decidir quais cores usar ou quais efeitos de texto conjugar com o efeito?

Com o lema de “menos é mais” 3 técnicas simples conseguem drasticamente melhorar a performance e aparência dos designs produzidos.

Num blog proximo, mais técnicas serão dadas a conhecer.

Primeiro, o básico. Porque temos que gatinhar antes de saber andar, vamos começar com os princípios fundamentais do design simples e eficiente.

1. Contraste

Infelizmente, adicionar contraste extra é uma das técnicas mais esquecidas.

Joost de Valk dá grande uso a este conceito. Através de linhas de alto contraste torna-se fácil para o utilizador distinguir entre diferentes áreas e secções de uma página. Numa versão alargada da imagem acima é possível ver que a maioria das vezes é apenas uma linha colorida com 1 pixel de largura logo após uma linha igual na cor preta.

Por outro lado, os botões “more” e “go” na home page tem um contraste tão suave que é fácil ignora-lo quando se olha para ele.

WordPress utiliza cores para adicionar contraste no link mais popular da sua página, “Download”. O vermelho atrai comparando com toda a composição da página em tons de azul e cinzento mas não é brilhante demais de modo a magoar a vista ao olhar para ele.

Se está na duvida sobre onde precisa de mais contraste, pense nas coisas como se fosse aplicando maquilhagem. A ideia não é levar as pessoas a dizer, “Hey, olha!... Contraste!”.
Queremos conduzir o olhar do utilizador de um modo natural aos itens na página que são mais importantes.

2. Gradients

Os desenvolvimentos na tecnologia trouxeram ao mundo novas e acessíveis ferramentas para criar gradients. Todos podem utilizar. Mas, será isso bom?

A página Media Temple tem gradients em todas as páginas do seu site, mas a moderação e subtilidade são a chave para um design de sucesso. Todos os elementos tem um pequeno gradient para dar ênfase ao conteúdo. Os gradients de maior tamanho estão localizados em alguns botões para atrair a olhar do utilizador.

Commission Junction não só utilizam mais gradients do que no exemplo anterior como também implementa uma maior variedade de tipos de gradient.

1. Horizontal, linear gradient de preto para cinzento média no topo da página.

1. Radial verde no fundo da header.
2. Diagonal em cima das letras no logotipo na caixa de log-in.
3. Vertical linear em cada input box.
4. Vertical gradient na barra de navegação
5. Brilhante linear no banner Webinar.
6. Outro gradient no inicio dos textos.

O design é um pouco aventureiro, e para a maior parte das pessoas, funciona, mas tem uns pequenos problemas. O mais importante é que não há consistência. Mais do que escolher um conjunto de cores a serem utilizadas, devem ser escolhidos também os tipos de gradient que vão ser utilizados em cada projecto.

Quando se trabalho com gradients é importante manter um fluxo visual agradável. Utilizar gradients de forma subtil e mais importante ainda utilizar apenas quando estes complementam o resto do projecto.

3. Cor

Utilizar cor pode ser um desafio. Entre acertar na paleta certa e escolher onde meter cada tom, é fácil perder muito tempo colorindo um design.

Realmac Software utiliza um espectro de cores em todas as 404 paginas do seu site. Isto resulta por algumas razões. Primeiro, Realmac definiu a página para funcionar com um fundo cinzento. Mais importante que isso, não utilizam mais cor em lado nenhum na página excepto os pequenos pontos de azul entre outros pequenos pormenores.

Mesmo utilizando as cores de um espectro completo para captar a atenção, continua a ser de um modo simples, e o uso do fundo cinza evita irritar a visão. Tentar utilizar mais do que quatro ou cinco cores num só design normalmente não resulta. O ideal é ficar pelas 4 cores a menos que a página ou o design exija mesmo a utilização de mais.

Quando se utilizar cor de um modo inteligente, é muito facil dirigir a atenção para os items mais imporantes. Na página Interspire’s “Sobre Nós”, os visitantes são rapidamente conduzidos para o logo no topo da página, depois para os titulos dos textos e só depois para o logo no topo da página de conteudo.

4. Letter Spacing

Espaçamento de letra pode fazer uma grande diferença nos titulos, paragrafos, logotipos e tudo o resto que involva texto. Não é nada mais do que a distnacia entre cada par de letras.

No novo Krop’s portfolio não há nada estravagante com os textos. A maioria das imagens da página usa pouco espaçamento entre as letras para fazer frases mais concisas e fortes.

A ilustração acima, mostra como o espaçamento pode ter um efeito negativo nos designs. Texto pequeno ou sem anti-aliasing pode ser dificil de ler se tiver um espaçamento de letra diferente do definido por defeito.

5. Maiusculas e Minusculas

… Alterar o tamanho de letra entre maiúsculas e minúsculas requer nada mais do que pressionar uma simples tecla. Ou o Shift ou o Caps Lock. Ainda são poucos os designers que tiram partido destas técnicas poderosas.

Algumas áreas da página MSNBC’s usam estas técnicas. Ao redor do logotipo em tamanho pequeno, a empresa faz um uso subtil de diferentes tipos de tamanho. A barra de topo de página normalmente utiliza sempre uma palavra ou duas em letras maiusculas. Exemplo neste caso de “WATCH LIVE”. Considerando que as palavras normalmente despertam a atenção dos utilizadores, utiliza-las desta maneira é uma excelente maneira de atrair a atenção para um anuncio particular.

Continuando com os sites de notícias do momento, a CNN desperdiça uma série de oportunidades para usar letras maiúsculas e minúsculas para melhorar as páginas do site. A grande maioria da página está em processo tradicional, com apenas a primeira letra de cada frase em tamanho Maiúsculo.