Equilíbrio Assimétrico no Web Design
Quando eu cobri pela primeira vez a ideia de padrões de design simétrico aqui no Webdesigner Depot Eu não tinha intenção de cavar a noção de design assimétrico.
No entanto, quanto mais eu pensava nisso, mais me sentia obrigado a abordar o tópico para contrastar algumas das idéias que giravam em torno de padrões de design simétrico.
No design assimétrico, encontramos designs que contêm elementos que não criam uma imagem espelhada. Na maioria das vezes, esses desenhos assimétricos estão de fato equilibrados, mas não apenas através de metades perfeitamente similares.
Este tipo de design é realmente muito mais fácil de encontrar, considerando que a maioria do conteúdo não se presta a uma perfeita simetria.
Vamos considerar uma variedade de sites que põem essa abordagem de design em prática e talvez descubram algumas idéias que podem afetar seu próprio trabalho de design.
Introdução ao uso de assimetria
Bully Entertainment
Como uma introdução à noção de design assimétrico, este design dramático fornece um bom ponto de partida. Embora não haja realmente nenhuma razão para que este projeto não possa ser reconfigurado para produzir uma simetria perfeita, ele simplesmente não funcionaria tão bem. Os designs grandes e ricamente ilustrados compensam lindamente o texto da página inicial. Seu tamanho garante que eles sejam extremamente visíveis e são a principal força motriz visual do design. Este equilíbrio natural entre um único elemento grande e uma alternativa mais compacta é uma abordagem muito comum.
Jorge Rigabert
Esse layout apresenta um layout da web bastante padronizado. Uma pequena coluna lateral que contém a navegação principal, combinada com uma coluna muito maior para o conteúdo dos sites. Este é talvez um dos vários layouts padrão usados diariamente pelos designers. Acredito que grande parte do processo de design, neste caso, acontece de forma semi-automática. Considere a barra lateral nesse caso que equilibra de maneira assimétrica a coluna de conteúdo. A barra lateral tem uma cor mais escura, o que ajuda a compensar o canal de conteúdo mais leve. Sem o plano de fundo mais escuro, a barra lateral provavelmente se perderia e não se destacaria tão bem.
Imagens para equilibrar o texto
Outra abordagem bastante padrão para web design que acaba sendo um elemento de design assimétrico é o emparelhamento de texto com imagens. Como você verá nas amostras abaixo, cada uma tem uma imagem grande. Esta imagem é emparelhada de alguma forma com um bloco de texto. Essa combinação é extremamente comum.
O truque é bastante óbvio, apenas certifique-se de que os dois se complementam de alguma forma. Dado que esses dois elementos geralmente criam um loop para os olhos, é importante que eles de alguma forma trabalhem juntos. A abordagem mais óbvia é ter a imagem literalmente ilustrada ou mostrar o que o texto está falando. Outra tática comum é fazer com que a imagem estenda a ideia apresentada no texto.
Aqui estão algumas amostras a serem consideradas.
Bolo bolo doce
Este projeto é certamente bem equilibrado, mas faz uso de vários elementos assimétricos para conseguir isso. Observe a grande imagem de um bolo combinada com o texto. As imagens são bastante óbvias, mas fundamentalmente importantes. Neste caso, o bolo não apenas nos informa que se trata de uma confeitaria, mas que estilo específico eles podem oferecer. Combine isso com o texto de esclarecimento associado a ele e você terá um discurso de vendas bem claro. Isto é tudo para não mencionar o design incrivelmente saboroso este site é envolvido em.
Mais Soda
Este exemplo também faz uso de elementos de design assimétricos baseados em uma imagem grande combinada com um bloco de texto. Nesse caso, a conexão não é tão clara. Não há nenhum elemento de vendas óbvio envolvido. Em vez disso, a imagem se torna mais decorativa e cria um senso geral de estilo para o site. Na minha opinião, é um pouco menos funcional, mas é realmente difícil dizer sem saber exatamente o quão eficaz é o site. Parece que um visual como esse tem um objetivo singular de estimular você a se aprofundar um pouco mais para ver do que se trata. Uma espécie de teaser, se você quiser.
Web design adaptativo
Como você provavelmente já descobriu, esse padrão é tão comum quanto a cor azul. Eu ouso especular que quase todo site acaba colocando uma ferramenta visual como essa para funcionar em algum momento. Eu acho que esse lugar comum a natureza faz com que seja um tópico que vale a pena discutir. Muitas vezes eu acho mais inspiração e novas idéias de reconsiderar as coisas que faço repetidas vezes sem pensar.
Este site simples promove um livro. E, claro, o elemento principal quando você pousa nele é uma grande imagem do livro. Combine isso com o grande bloco de texto e você tem uma área bem equilibrada que contém todos os elementos críticos. Mais importante ainda, é concluído com um chamariz atraente para a ação. A continuidade desta área é simples e pontual. Os olhos fluem facilmente através dele e consomem as informações críticas. Não é confuso, complicado, esperto ou complicado. A abordagem é simples e clara.
Elementos de primeiro plano e plano de fundo
Uma nova abordagem ao design assimétrico é fazer uso de elementos de fundo que equilibram assimetricamente os de primeiro plano. Esse tipo de abordagem cria uma dinâmica interessante em que o plano de fundo desempenha mais um papel funcional como parte do conteúdo e, no entanto, ainda faz parte do cenário do site. Na maioria das vezes isso é feito através de sobreposições simples que criam a ilusão de profundidade. Aqui estão algumas amostras a serem consideradas.
Galeria de Peter McLeavey
Os sites desta galeria são uma demonstração perfeita desta ideia. Aqui, o elemento de segundo plano serve muitos papéis. Primeiro, ao ponto desta seção, ele cria um equilíbrio assimétrico com o grande círculo cinza em primeiro plano. Essa combinação visual cria duas áreas que fazem com que os olhos saltem para frente e para trás. Isso, na minha opinião, é uma coisa boa.
O elemento à esquerda contém a marca principal e links para o conteúdo do site, enquanto o elemento de plano de fundo informa o contexto do site. Você está olhando para um site de galeria, e isso se torna óbvio em poucos segundos após o desembarque no site. Eu amo que um elemento tão informativo como o fundo também pode desempenhar um papel importante no design e estilo geral do site. Especialmente quando ecoa tão perfeitamente com o contexto do produto que o site oferece. Uma abordagem tão simples, mas muito eficaz.
Aleksandar Grkinic
Simples sobre mim A página também adota essa ideia simples em que um elemento de segundo plano equilibra um primeiro plano de maneira assimétrica. Neste caso, porém, o pano de fundo não é totalmente claro. E isso é o que eu realmente amo sobre isso. A ilusão de profundidade está totalmente lá, e sem qualquer tipo de sobreposição, é realmente difícil decidir o que o fundo realmente é. Suponho que poderíamos argumentar que a pessoa que pula não está no fundo. Independentemente disso, o equilíbrio assimétrico é claro. E sem a bela combinação de diferentes elementos, a página não existiria. O desenho é, em muitos aspectos, puramente baseado no conceito de equilíbrio assimétrico. Muitas vezes parece que projetos extremamente simples podem parecer extraordinários com contrastes lindos como este.
Robert Dabi
Nesse caso, o background desempenha um papel interessante no design, mas não produz os elementos assimétricos que vimos até agora. Na minha opinião, o grande visual é claramente um elemento de primeiro plano do design. O que eu amo, porém, é como isso sutilmente embaça essa linha com algo tão simples quanto a sombra abaixo da imagem. Isso efetivamente mescla com o plano de fundo e cria uma dinâmica bonita. Obviamente, a imagem grande é assimetricamente balanceada com a cópia ao lado dela. Percorra as páginas do site e você verá com prazer que o plano de fundo muda e se funde com o visual de maneiras muito interessantes. Um design impressionante que se sente fresco, limpo e super suave. Parece uma boa apresentação para um site de portfólio para mim.
Mais dez projetos
Abaixo, forneci dez designs adicionais que fazem uso de elementos assimétricos. Como já mencionei, pude colocar muitos sites nesta categoria. Assim, para os propósitos deste artigo, eu selecionei cuidadosamente designs que eu sinto que usam a abordagem de maneiras ligeiramente atípicas e criativas. Considere cada design à luz deste tópico e espero que você ganhe algumas ideias novas para inspirar seu próximo design.
Greenluv
Andersson Wise
Previsão
13 esposas
Instituição de rifas
Urban Svensson
Carrossel
Purlize
Ônibus na cervejaria
Humaan
Conclusão
O equilíbrio é uma parte fundamental do processo de design, e o uso de elementos assimétricos é igualmente básico. Eu sempre adoro voltar aos fundamentos do design, pois sempre entendo isso de uma maneira nova que afeta o trabalho que faço. Existem inúmeras maneiras de abordar as coisas e quebrar nossos padrões podem levar a novos e novos projetos que rejuvenescem nossa paixão por nossos trabalhos.
Quais são os seus designs de sites assimétricos favoritos? Quem está fazendo algo diferente com assimetria? Deixe-nos saber nos comentários!