O design é dividido em uma série de princípios básicos que se aplicam a todo o projeto, seja ele do “mundo real” ou do mundo virtual. No entanto, especialmente na web, às vezes essas regras tendem a ser esquecidas e nós apenas trabalhamos com o que sentimos ser o “certo”.

Em uma das séries do desenvolvimento para web foram abordados alguns dos principais estudos sobre Gestalt para web, e isso foi um grande passo rumo à criação de interfaces melhores, pois foi possível estudar como é a percepção e entendimento das pessoas no ambiente online. Agora, veja alguns dos elementos de design aplicados à web.

Este é um artigo traduzido do original “The Elements of Design Applied to the Web“, do blog Astheria, e sofreu pequenas adaptações.

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 aparecem como imagens num espelho), o equilíbrio assimétrico é menos perceptível, mas, aparentemente, mais importante.

Elementos de design aplicados à web: equilíbrio assimétrico

Subtraction: exemplo de Equilíbrio Assimétrico

A figura acima é um excelente exemplo de equilíbrio assimétrico (aplicado em vários lugares), 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 quase faz você se sentir como se o cachorro esteja no centro da imagem, quando, na verdade, ele não está. Confira.

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.

Elementos de design aplicados à web: equilíbrio simétrico

Apple: exemplo de Equilíbrio Simétrico

Apple, uma das atuais referências de design, usa um layout completamente simétrico em sua página inicial (atualmente a página deles está diferente que a desse screenshot). Como você pode ver 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. Se num site “tradicional”, por exemplo, com uma coluna maior para 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 de pensar que a página não tem o conteúdo que estão procurando.

Enquanto algumas pessoas preferem usar grids com módulos fixos, outros preferem usar abordagens diferenciadas, tais como a usada aqui, no desenvolvimento para web – pelo menos na data de publicação deste artigo -, que tem como base a Proporção Áurea: a largura da coluna do conteúdo é, aproximadamente, 1,618 maior que a coluna da barra lateral.

A proporção também pode ser usado para, simplesmente, atribuir importância a elementos na página.

Elementos de design aplicados à web: proporção

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 baixo, 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 texto importantes (3). Combinado com um design muito unificado, esta página é quase uma obra-prima da web (especialmente para os que adoram um javascript bem feito aplicado a user interfaces).

Ritmo

Ritmo na web é algo presente principalmente em dados. É especialmente importante para sites que contêm páginas compridas e/ou grandes quantidades de informação. Este screenshot do Digg mostra que o site cai em ambas as situações e, também, é um excelente exemplo de ritmo através da repetição:

Elementos de design aplicados à web: ritmo

Digg: exemplo de Ritmo

O site cria 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 cria um ritmo consistente que o usuário segue inconscientemente (2). Esta técnica é repetida na barra lateral.

Uma boa maneira de pensar sobre o ritmo no 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 seu 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 Digg: cada parte tem seu próprio ritmo interno, segundo seu propósito; mas, como um todo, a página inteira é 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 o melhor lugar para aproveitar todas essas boas características está no logo.

Elementos de design aplicados à web: dominância (ou ênfase)

A List Apart: exemplo de Dominância

Como é possível ver na imagem, A List Apart está usando não um, mas um par de círculos para fazer a dominância ao seu logotipo (1). Isso é reforçado pelo símbolo com o número da edição, adjacente ao logo. Há, 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; um ou dois geralmente já é o suficiente.

Elementos de design aplicados à web: dominância (ou ênfase)

Google: outro exemplo de Dominância

Google usa ambos, espaço em branco e dominância de cores, para puxar o olho para a área principal da página (1). O lúdico colorido do logotipo do Google, combinado com a quantidade de espaço em branco que envolve esta área, força de seu olho a se concentrar lá imediatamente. Embora o Google pode fornecer excelentes resultados para as buscas, a chave para seu sucesso na web é a sua facilidade de uso, que é naturalmente fácil de se usar devido a suas tendências visuais básicas.

Unidade

O conceito de unidade é muito mais aberto a interpretações. A unidade é, na verdade, um sentimento de que todos os elementos estão ligados, conectados de alguma forma, e isso dá uma ideia de um todo. Um grande exemplo de unidade é o portfolio de Dave Werner, no qual cada página do site 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:

Elementos de design aplicados à web: unidade

Dave Werner: exemplo de Unidade

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 design” somente com 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 estudo (e o de Gestalt aplicado ao web design) esses elementos 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 na hora dos projetos e partir para a prática que, como sabem aqueles que já sentem um pouco da experiência dos anos de trabalho na área, sempre recompensa com trabalhos cada vez melhores.