O Design abrange uma série de princípios básicos que se aplicam a todo o projeto. No entanto, quando esses elementos de design são aplicados à web (web design), essas regras tendem a ser esquecidas.
Em uma das séries aqui do desenvolvimento para web foram abordados alguns dos principais estudos sobre Gestalt aplicado à Web.
Isso foi um grande avanço rumo ao conhecimento para a criação de interfaces melhores, pois foi possível estudar como é a percepção e entendimento das pessoas no ambiente digital.
Agora, veja alguns dos elementos de design aplicados à Web para compreender o profundo impacto positivo que a aplicação dessas regras pode trazer a seus projetos na Web.
Equilíbrio
Equilíbrio é um assunto complexo. Existem dois tipos de equilíbrio: equilíbrio simétrico e equilíbrio assimétrico.
Quase todos nós estamos familiarizados com imagens simétricas. A maioria de nós, nos tempos de criança, provavelmente já fez algum tipo de recorte em papel de forma que o resultado final ficasse perfeitamente simétrico.
Enquanto o equilíbrio simétrico é fácil de detectar (as coisas parecem como imagens num espelho), o equilíbrio assimétrico é menos perceptível — mas, aparentemente, mais importante.
A screenshot acima mostra um excelente exemplo de equilíbrio assimétrico, especialmente a imagem do cachorro.
Nesse exemplo P&B, a colocação do animal nessa posição deixa muito peso para o preto na metade esquerda da composição, que é equilibrada pelo aparentemente aleatório “X” na parede, à direita (1).
Esta pequena adição cria um senso de equilíbrio que engana sua percepção para dar a impressão de que o cachorro está no centro da imagem (quando, na verdade, não está).
Enquanto a imagem do cachorro demonstra um equilíbrio gráfico há, também, algum equilíbrio assimétrico no cabeçalho do site (2).
A barra de menu é bastante “pesada”, tanto em seu tamanho, quanto na cor. No entanto, a linha mais fina acima de “Subtraction” usa o espaço negativo acima e abaixo para criar um equilíbrio visual entre os dois.
Então, a área em branco acima da barra de menu fica como mesmo peso visual que a barra de navegação preta mais abaixo.
Um desenho simétrico, apesar de ser um conceito extremamente simples, pode ser surpreendentemente poderoso.
Neste exemplo, Apple usava um layout completamente simétrico em sua página inicial (evidentemente, hoje em dia a página deles está diferente).
Como você pode observar na imagem, cada elemento é correspondido do outro lado da linha, criando uma harmonia visual simples.
Proporção
Escolher o tamanho certo para os elementos vai além de simplesmente selecionar um tamanho legível para o corpo do conteúdo ou a largura das colunas.
Deve-se levar em conta a proporção, que está entre o equilíbrio e dominância, baseados nas proporções de certos objetos.
Em um site de UI “tradicional”, por exemplo, há uma coluna maior para o conteúdo e uma menor para menus e meta-informações. A coluna do conteúdo é maior justamente por ser mais importante.
Se os menus e meta-informações fossem colocados na coluna principal, certamente a primeira reação dos visitantes seria supor que a página não tem o conteúdo que estão procurando.
A proporção também pode ser usado para, simplesmente, atribuir importância a elementos na página.
Apesar de a página atual estar diferente deste screenshot, o pessoal da Panic fez um bom trabalho em usar elementos proporcionalmente dimensionados para atribuir não somente uma hierarquia visual, mas significado entre eles.
Começando com o logo do produto (1), passando, mais abaixo, para os três call to actions (2) — que são ligadas por tamanho e aspectos relacionais, como os ícones à esquerda — e, finalmente, títulos e textos importantes (3).
Ritmo
Ritmo na Web é algo presente principalmente em dados textuais. É especialmente importante para sites que contêm páginas compridas e/ou grandes quantidades de informação.
Este screenshot (antigo) do Digg mostra que o site caía em ambas as situações e, também, é um excelente exemplo de ritmo através da repetição:
O site criava um ponto de partida no cabeçalho com sua navegação horizontal estabelecendo a direção de leitura (1) para, logo em seguida, cair no conteúdo principal, que é idêntico para cada artigo. Isso criava um ritmo consistente que a pessoa seguia inconscientemente (2).
Uma boa maneira de pensar sobre o ritmo em web design está na mesma definição que vem à mente quando pensamos em música. Cada projeto tem um pouco de um “pulso visual” que, dependendo de onde você está na página, convida a uma leitura rápida, uma pausa numa imagem interessante ou a uma orientação para um botão de download.
Um site que é muito consistente no ritmo pode sofrer no fato de que todos os elementos na página acabam ficando com uma quantidade igual de “peso” ao redor, podendo deixar os visitantes ligeiramente desorientados. Muitas variações, por outro lado, podem fazer com que a página se torne um caos.
O importante é estabelecer uma coerência dentro de certas seções do site, como demonstrado acima, no antigo site do Digg: cada parte com seu próprio ritmo interno, segundo seu propósito; mas, como um todo, a página é unificada e tudo instantaneamente tem significado apenas com base na cor, forma e proporção.
Dominância (ou Ênfase)
Não há nada mais poderoso no design do que uma forma circular, especialmente em um mundo de retângulos, como a Web.
Um círculo chama a atenção simplesmente por sua forma. Ele não precisa ser especialmente vibrante em cores ou espaço em branco.
E um dos melhores lugares para aproveitar todas essas boas características está no logo.
Como é possível ver na imagem, uma versão antiga do site A List Apart estava usando não um, mas um par de círculos para fazer a dominância ao seu logotipo (1). Isso era reforçado pelo símbolo com o número da edição, adjacente ao logo.
Havia, também, outros “selinhos” como esse usados no lado direito (2) para chamar a atenção para algum ponto específico (no caso, venda de camisetas).
Outra forma de alcançar uma posição dominante é através do uso de espaço em branco e/ou cores. Estes podem ser combinados com uma forma dominante, mas, raramente, você sempre precisa combinar todos eles — 1 ou 2 geralmente já é o suficiente.
Google usa ambos, espaço em branco e dominância de cores, para “puxar o olho” para a área principal da página.
O lúdico colorido do logo do Google, combinado com a quantidade de espaço em branco que envolve esta área, praticamente força o olho a se concentrar lá imediatamente.
Embora o Google forneça excelentes resultados para as buscas, alguns argumentam que a chave para seu sucesso é a sua facilidade de uso, que é naturalmente fácil devido a suas tendências visuais básicas.
Unidade
O conceito de unidade em web design é muito mais aberto a interpretações. A unidade é, na verdade, uma espécie de sentimento ou percepção de que todos os elementos estão ligados, conectados de alguma forma, e isso dá uma ideia de um todo.
Um exemplo de unidade é essa versão (antiga) de um portfolio, no qual cada página apresenta escrita à mão, alfinetes e todo o tipo de outros elementos que, quando analisados em conjunto, produzem um sentimento de unidade.
Não há nada que se sente estar fora do lugar e tudo compartilha o mesmo estilo:
Mesmo pedaços do site que, como entidades separadas, naturalmente, podem parecer diferentes umas das outras, são cobertas de notas e esboços, trazendo até mesmo esses aspectos do site para o portfolio.
Não há nada no site que você não esperaria ver alfinetado num quadro de camurça de projetos.
Conclusão
Embora ninguém vá se tornar um guru do web design somente por seguir essas dicas, certamente essas explicações e exemplos ajudam a conceber projetos de forma mais consciente, que podem impor a hierarquia visual necessária e realmente guiar os olhos do visitante através da página da maneira que planejada.
Sem este tipo de conhecimento (lembrando, também, de Gestalt aplicado ao web design), você não ganha nada além de muito trabalho e retrabalho em busca de uma solução visual que você sinta ser a certa ou a “bonita”.
Os princípios, em si, são muito simples; o mais importante é estar ciente de que eles existem e, a partir de agora, começar a refletir sobre eles no momento de planejamento dos projetos.