Como usar o equilíbrio no Web Design
Alcançar o equilíbrio no web design requer algum pensamento, esforço e habilidade, mas vale a pena. A melhor coisa sobre o equilíbrio, que pode ser aplicada à categoria mais ampla do design como um todo, é que ele impede que o que você cria seja uma bagunça excessiva e sobrecarregada que não serve à experiência do usuário. Em outras palavras, o equilíbrio no design da web garante que você, como designer, atinja o ponto ideal de moderação. Não muito, mas não muito pouco. Não muito barulhento, mas não muito sutil. Ele mantém todo o seu design em harmonia enquanto ainda atinge todos os objetivos de usabilidade de seus clientes. Agora essa é uma habilidade para colocar definitivamente na caixa de ferramentas do seu designer! Neste artigo, veremos como você pode incorporar um bom equilíbrio nos sites de seus clientes.
Equilíbrio simétrico
Um dos exemplos mais comuns de equilíbrio que você encontra ao navegar por sites é a simetria, embora você possa não perceber, porque ele é apresentado de forma tão perfeita. A simetria é inatamente agradável aos olhos e cria um design que é esteticamente bem organizado e harmonioso. Equilíbrio simétrico é definido colocando os elementos igualmente em ambos os lados de um eixo central horizontal ou vertical. Em outras palavras, os dois lados de uma linha de mergulho imaginária no meio da página são essencialmente imagens espelhadas uma da outra. Embora alguns críticos possam descartar esse tipo de equilíbrio como tedioso ou previsível, ele ainda resistiu ao teste do tempo e continua sendo uma das melhores maneiras de mostrar equilíbrio no web design.
Site da Cisco optou por esta abordagem testada, testada e verdadeira para o design. Observe como o site está perfeitamente equilibrado em todo o eixo vertical. Se você pegasse uma linha imaginária e a dividisse bem no meio da página inicial da Cisco, notaria o seguinte:
- O mesmo número de elementos na barra de navegação (incluindo o ícone de pesquisa) em ambos os lados
- O título e o subheadline são igualmente longos em ambos os lados
- O botão de chamada para ação está perfeitamente centrado
- O mesmo número de elementos sob o título "Tarefas rápidas" em ambos os lados
Embora o site talvez não seja o mais empolgante de todos os tempos, ele não precisa ser visto, já que a empresa vende equipamentos de rede. Além disso, o site é utilizável e funcional, ambos os atributos que seus clientes podem apreciar. Vamos ver dois outros exemplos de simetria:
IWC Schaffhausen , o relojoeiro suíço, tem um site que apresenta um equilíbrio horizontal e simétrico. Se dividirmos a página em um eixo central no meio, os dois lados terão simetria.
A mesma coisa vale para o Site do aplicativo Beanstalk . Com um design simples e minimalista, seu eixo central desce no meio da página inicial, deixando as duas metades da página com um equilíbrio horizontal e simétrico.
Equilíbrio assimétrico
O oposto polar da simetria, o equilíbrio assimétrico é possível também. Não se deixe enganar pelo fato de que assimetria significa falta de equivalência entre as partes! Como você verá em breve, o equilíbrio assimétrico alcança também um sistema de contrapesos no design… mas não de maneiras que você poderia esperar. A assimetria pode ser representada de várias maneiras em uma página da web. Por exemplo, uma metade da tela, vertical ou horizontalmente, pode ostentar um elemento mais intenso, enquanto a outra metade pode ter elementos mais sutis. Apesar dessa desigualdade, tanto em força quanto em números, o equilíbrio é criado pela justaposição dos elementos contraditórios. Desta forma, a assimetria pode ser verdadeiramente bela, talvez mais do que a simples simetria, porque se baseia no conceito de dissimilaridade para criar equilíbrio. Esse é um paradoxo de design, mas que funciona tão bem em qualquer site. O equilíbrio assimétrico é, portanto, mais interessante e instigante do que a simetria previsível. Evoca temas de modernismo, energia e maravilha. Designers devem tomar nota, no entanto, que a criação de assimetria em uma página requer mais trabalho do que a simetria regular. Afinal, você precisa representar relacionamentos entre elementos de design que são mais complicados.
Honda nos dá um exemplo claro de assimetria no web design. Abaixo da dobra, em sua homepage, a empresa usa um design baseado em cartão, mas isso produz uma aparência um pouco desorganizada que, embora visualmente atraente e colorida, cria uma falta de igualdade em ambos os lados de um eixo central vertical ou horizontal. Por um lado, os cartões em si são sempre diferentes comprimentos, horizontalmente, e não são sempre empilhados em qualquer coluna ou linha uniforme. Isso cria uma grande assimetria que é muito interessante de se ver. É quase como um pequeno labirinto na página inicial da empresa de automóveis! Existem também outros exemplos interessantes:
Typographisme é um caso perfeito de assimetria no design da web. Seu site apresenta dois elementos que são desequilibrados. Tanto o logotipo TG quanto o selo verde no canto superior direito criam assimetria.
Duplos A assimetria é mais acentuada. Seu site possui um design de elementos flutuantes que não se alinha de forma consistente com a outra metade, quer o eixo central seja vertical ou horizontal. No geral, ele produz uma aparência atraente que é interessante de entender.
Equilíbrio radial
O equilíbrio radial é bem direto. Como o nome indica, o equilíbrio radial ocorre quando todos os elementos de design em uma página emanam em pontos equidistantes de um ponto central unificador. Então, se você dividir a página verticalmente ou horizontalmente ao longo de um eixo central, os elementos de ambos os lados seriam igualmente tão ou muito próximos do ponto central. Alguns dos exemplos mais básicos de equilíbrio radial são coisas como raios de sol vindos de um ponto central ou uma lagoa que tem um monte de ondas em sua superfície. O que torna essa forma de equilíbrio mais especial é que o efeito de irradiação ocorre nos dois sentidos: assim como a atenção se afasta do ponto central, ela também leva de volta a ela devido ao centro comum. Por isso, manter um ponto focal é fácil.
O melhor exemplo de balanço radial - que é bastante raro em sites, especialmente homepages - é Vlog . É o epítome do equilíbrio radial, pois tudo irradia para fora do ponto central do tipo branco de “Vlog.it”.
Todos os tipos de equilíbrio
Até agora, deve ser bastante óbvio que todos os tipos de equilíbrio têm alguns títulos comuns. Existem fatores uniformes que aparecem consistentemente em qualquer projeto que apresenta um equilíbrio atraente e interessante. Equilíbrio em web design está ao seu redor. É provável que você tenha negligenciado apreciá-lo em todos os diferentes sites que você já navegou por toda a sua vida; mas isso é só porque o equilíbrio não é realmente a primeira coisa em que você pensa quando navega em qualquer site. No entanto, o equilíbrio é importante para o design do site. Ele não fornece apenas toques estéticos que são interessantes do ponto de vista visual. Ele também pode ajudar a experiência do usuário, tornando a informação visual em um site mais fácil de absorver, o que significa, por exemplo, melhorar a navegação do site. Designers podem se esforçar para incluir um melhor equilíbrio em seu design web, prestando atenção extra à harmonia, contrapesos e equidistância. O resultado final de um bom equilíbrio paga dividendos incalculáveis para seus clientes e a experiência do usuário.