Princípios de Design: Composição, Balanço Simétrico e Assimétrico

Steven BradleySteven Bradley

Sobre o Autor

Steven Bradley é o autor de Design Fundamentals: Elementos, Atributos, & Principles and CSS Animations and Transitions for the Modern Web. Quando não …Mais sobreSteven Bradley↬

  • 18 min read
  • Inspiração,Design,Criatividade,Princípios de Design
  • Salvado para leitura offline
  • Partilhar no Twitter, LinkedIn
/div>>/div>>/div>>/div>

/div>

Uma composição equilibrada parece certa. Sente-se estável e esteticamente agradável. Enquanto alguns dos seus elementos podem ser pontos focais e atrair o seu olho, nenhuma área da composição atrai tanto o seu olho que não consiga ver as outras áreas.O equilíbrio de uma composição envolve organizar tanto os elementos positivos como o espaço negativo de tal forma que nenhuma área do desenho sobreponha outras áreas. Tudo funciona em conjunto e encaixa num todo sem descontinuidades. As partes individuais contribuem para a sua soma mas não tentam tornar-se a soma.

Uma composição equilibrada parece certa. Sente-se estável e esteticamente agradável. Embora alguns dos seus elementos possam ser pontos focais e atrair o seu olho, nenhuma área da composição atrai tanto o seu olho que não consiga ver as outras áreas.

Balançar uma composição envolve organizar tanto os elementos positivos como o espaço negativo de tal forma que nenhuma área do desenho sobreponha outras áreas. Tudo funciona em conjunto e encaixa num todo sem descontinuidades. As partes individuais contribuem para a sua soma mas não tentam tornar-se a soma.

Uma composição desequilibrada pode levar a tensão. Quando um desenho é desequilibrado, os elementos individuais dominam o todo e a composição torna-se menos do que a soma das suas partes. Em alguns projectos, o desequilíbrio pode ser correcto para a mensagem que está a tentar comunicar, mas geralmente pretende composições equilibradas.

Nota: Este é o sétimo e último post de uma série sobre princípios de design. Pode encontrar os primeiros seis posts aqui:

  • Princípios de design: Percepção Visual e os Princípios de Gestalt
  • Princípios de Design: Espaço e a Relação Figura-Terra
  • Princípios de Design: Ligar e Separar
  • Princípios de Desenho: Peso Visual e Direcção Visual
  • Princípios de Design: Domínio, Pontos Focais e Hierarquia
  • Princípios de Desenho: Fluxo Composto e Ritmo

A Felicidade não é uma questão de intensidade mas de equilíbrio, ordem, ritmo e harmonia.- Thomas Merton

Equilíbrio Físico e Visual

O equilíbrio é fácil de compreender no mundo físico, porque o experimentamos a toda a hora. Quando algo está desequilibrado, tende a cair. Provavelmente já esteve num baloiço ou numa lontra de baloiço em algum momento da sua vida – você de um lado e um amigo do outro.

Partindo do princípio de que ambos eram mais ou menos do mesmo tamanho, foi capaz de se equilibrar facilmente no baloiço. A imagem seguinte parece estar em equilíbrio, com duas pessoas de tamanho igual, igualmente distantes do ponto de apoio no qual o balançar do balançar.

Princípios de desenho: Composição, Equilíbrio Simétrico e Assimétricobr>>>figcaption>Symmetrically balanced seeaw.

A pessoa à esquerda faz girar o balancé no sentido contrário ao dos ponteiros do relógio, e a pessoa à direita faz girar o balancé no sentido dos ponteiros do relógio numa quantidade igual. A força de cada pessoa actua numa direcção diferente, e a sua soma é zero.

Se uma das pessoas fosse muito maior, no entanto, o balanço seria atirado fora.

Serra desequilibradabr>
Serra desequilibrada.

Esta imagem não parece certa porque sabemos que a pessoa da esquerda não é suficientemente grande para equilibrar a pessoa da direita. A força no sentido horário deve ser muito maior, e o balançar deve tocar o chão à direita.

No entanto, se a pessoa maior deslizar em direcção ao centro, então o balançar será novamente equilibrado.

Asymmetrically balanced seeawbr>
Asymmetrically balanced seeaw.

Here, a força da pessoa maior é reduzida por estar mais próxima do ponto de apoio no qual o balançar do balançar do balançar do balançar. Espero que já tenha estado num baloiço ou, pelo menos, tenha visto outros a jogar num e que tenha uma boa noção do que se passa.

O equilíbrio visual é semelhante. O peso físico é substituído pelo peso visual. A direcção em que o peso físico actua é substituída pela direcção visual.

Como lembrete, abaixo estão as definições de peso visual e direcção visual, embora o remeta para o quarto post desta série para mais detalhes.

  • peso visual. Este é o peso percebido de um elemento visual. É uma medida de quanto tudo na página atrai o olhar do espectador.
  • direcção visual. Esta é a direcção percebida de uma força visual. É a direcção em que pensamos que um elemento se deveria mover se lhe fosse dada a oportunidade de se mover de acordo com as forças que actuam sobre ele.

Você não usa instrumentos para medir as forças. Não se usam fórmulas para calcular se tudo está em equilíbrio. Pelo contrário, usa-se o olho para determinar se uma composição está em equilíbrio.

Porquê o equilíbrio visual é importante

Apenas como no mundo físico, o equilíbrio visual é uma coisa boa. É desejável em si mesmo. Uma composição desequilibrada pode sentir-se desconfortável para o espectador. Olhe para a segunda das três imagens de serra – parece errada porque podemos dizer que a serra não deve estar em equilíbrio.

P>Peso visual é uma medida do interesse visual de um elemento ou área num desenho. Quando uma composição é visualmente equilibrada, cada parte da mesma tem algum interesse. O interesse visual é equilibrado, o que mantém os espectadores envolvidos com o desenho.

Sem equilíbrio visual, os espectadores podem não ver todas as áreas do desenho. Provavelmente não passarão qualquer tempo em áreas com menos peso visual ou interesse. Qualquer informação nessas áreas poderia facilmente passar despercebida.

Vocês equilibrariam um desenho visualmente porque querem equilibrar os pontos de interesse na sua composição, para que os espectadores passem tempo com toda a informação que querem transmitir.

Quatro tipos de equilíbrio

Existe mais do que uma forma de equilibrar uma composição. As imagens da secção anterior mostram duas delas. A primeira imagem é um exemplo de equilíbrio simétrico, e a segunda é um exemplo de equilíbrio assimétrico. Dois outros tipos de equilíbrio são radial e mosaico.

Balanço simétrico
Balanço simétrico.

balanço simétrico ocorre quando pesos iguais estão em lados iguais de uma composição, equilibrado em torno de um fulcro ou eixo no centro. O equilíbrio simétrico evoca sentimentos de formalidade (é por vezes chamado de equilíbrio formal) e elegância. Um convite de casamento é um bom exemplo de uma composição que provavelmente desejaria ser simetricamente equilibrada.

O lado negativo do equilíbrio simétrico é que é estático e por vezes considerado como aborrecido. Como metade da composição reflecte a outra metade, pelo menos metade da composição será bastante previsível.

balanço simétricobr>
balanço simétrico.

Asymmetrical balance resulta de um peso visual desigual em cada lado da composição. Um lado da composição pode conter um elemento dominante, que poderia ser equilibrado por um par ou mais pontos focais menores do outro lado. Um elemento visualmente pesado de um lado pode ser equilibrado por um punhado de elementos mais leves do outro.

O equilíbrio assimétrico é mais dinâmico e interessante. Evoca sentimentos de modernismo, movimento, energia e vitalidade. O equilíbrio assimétrico oferece maior variedade visual, embora possa ser mais difícil de alcançar porque as relações entre os elementos são mais complexas.

Balanço radialbr>
Balanço radial.

Balanço radial ocorre quando os elementos irradiam de um centro comum. Raios de luz solar e ondulações num tanque depois de uma pedra ser atirada são exemplos de equilíbrio radial. Manter um ponto focal (fulcro) é fácil porque é sempre o centro.

Porque tudo irradia de um centro comum, tudo também conduz a esse centro, tornando-o um forte ponto de atracção.

balanço do mosaicobr>>>figcaption>balanço do mosaico.

balanço do mosaico (ou balanço cristalográfico) resulta de um caos equilibrado. Pense nas pinturas de Jackson Pollack. A composição carece de pontos focais distintos, e os elementos partilham uma ênfase uniforme. A falta de hierarquia leva ao ruído visual à primeira vista. De alguma forma, porém, tudo funciona em conjunto.

Simetria e Assimetria

A simetria e assimetria podem ser usadas ao longo de uma composição, independentemente de, ainda que contribuindo para o equilíbrio final. Pode-se ter formas simétricas numa composição assimetricamente equilibrada e vice-versa.

A assimetria é normalmente vista como bela e harmonizada; no entanto, também pode ser vista como estática e monótona. A assimetria tende a ser mais interessante e dinâmica, apesar de não ser considerada como intrinsecamente bela.

Simetria

Existem três tipos primários de simetria.

Simetria de reflexão (ou simetria bilateral) ocorre quando tudo é espelhado em torno de um eixo central. É provavelmente a primeira coisa em que se pensa quando se ouve a palavra “simetria”. O eixo pode estar em qualquer direcção ou orientação, embora seja frequentemente vertical ou horizontal.

Todos os elementos de um lado do eixo são espelhados do outro lado. As formas naturais que crescem ou se movem através da superfície da terra desenvolvem simetria de reflexão. Um rosto humano e uma borboleta são exemplos.

Quando o reflexo é uma imagem de espelho perfeita, diz-se que a simetria é pura. A maior parte do tempo não será perfeita e cada lado terá pequenas variações. Isto é quase simetria, e é mais comum do que simetria pura.

A simetria pode mesmo ocorrer em múltiplos eixos ao mesmo tempo. Por exemplo, a metade esquerda e a metade direita de uma composição podem espelhar-se mutuamente, enquanto a parte superior e a inferior também se espelham mutuamente. Os flocos de neve mostram simetria de reflexão sobre mais de dois eixos.

Simetria rotacional (ou simetria radial) ocorre quando tudo gira em torno de um centro comum. Pode ocorrer em qualquer ângulo ou frequência, desde que haja um centro comum. Formas naturais que crescem ou se movem perpendicularmente à superfície da terra desenvolvem simetria rotacional. As pétalas de um girassol são um exemplo. A rotação sem reflexão pode ser utilizada para mostrar movimento, velocidade ou acção dinâmica. Pense nas rodas giratórias de um carro em movimento.

Simetria translaccional (ou simetria cristalográfica) ocorre quando os elementos se repetem sobre diferentes locais no espaço. A repetição de postes de vedação é um exemplo. A repetição cria simetria de tradução. Pode ocorrer em qualquer direcção ou a qualquer distância, desde que a orientação básica seja a mesma. As formas naturais desenvolvem a simetria translacional através da reprodução. Pode-se criar ritmo, movimento, velocidade e acção dinâmica através da simetria de tradução.

A borboleta é um exemplo de simetria de reflexão, os postes da cerca mostram simetria de tradução, e o girassol é um exemplo de simetria radialbr>
A borboleta é um exemplo de simetria de reflexão, os postes da cerca mostram simetria de tradução, e o girassol é um exemplo de simetria radial.

Formas simétricas são geralmente vistas como a figura, em oposição ao solo. Uma forma simétrica terá mais peso do que uma forma assimétrica de tamanho e forma semelhantes.

Formas assimétricas transmitem equilíbrio em e de si mesmas, mas podem parecer demasiado estáveis e demasiado equilibradas, levando a uma falta de interesse. As formas simétricas também conduzem ao espaço passivo porque o espaço negativo é igual em toda a forma.

Asimetria

As formas assimétricas carecem do equilíbrio das formas simétricas, embora se possa equilibrar assimetricamente toda uma composição. A assimetria é bastante comum em formas naturais: provavelmente é à direita ou à esquerda; os caranguejos violinistas têm garras de tamanhos diferentes; os ramos das árvores crescem em direcções diferentes; as nuvens têm formas aleatórias.

Asimetria cria relações mais complexas entre elementos, e por isso tende a ser mais interessante do que a simetria. Por ser mais interessante, a assimetria pode ser usada para chamar a atenção.

O espaço em torno de formas assimétricas é mais activo. São criados padrões imprevisíveis, e em geral tem mais liberdade de expressão com assimetria do que com simetria. A troca é que é mais difícil de alcançar.

Tal como a semelhança e o contraste trabalham juntos, é possível combinar simetria e assimetria com bom efeito. Equilibrar formas simétricas de forma assimétrica, ou equilibrar formas assimétricas de forma simétrica. Quebrar as formas simétricas com uma marca aleatória para adicionar interesse. Contraste simetria e assimetria na sua composição para fazer com que os elementos recebam mais atenção.

Princípios de Gestalt

Através desta série tentei apontar quantos princípios de desenho surgem dos princípios de gestalt. Também espero que ao longo desta série tenha visto como diferentes princípios de design se baseiam uns nos outros.

Um dos princípios de gestalt aborda especificamente a simetria e a ordem e aplica-se certamente ao equilíbrio composicional. Dificilmente é o único princípio que se aplica, embora.

A simplicidade das formas simétricas é prevista pela Lei de Prägnanz. Princípios de Gestalt, tais como pontos focais e similaridade, contribuem para o peso visual. Princípios como a continuação, o destino comum e o paralelismo dão uma direcção visual. Também mencionei que as formas simétricas são mais susceptíveis de serem vistas como figura do que como terra.

Espero que esta ideia de que os princípios da gestalt conduzem a muitos dos princípios de design que nos guiam se tenha tornado mais clara à medida que se lê esta série. Os princípios de design que seguimos não surgiram do nada; eles emergiram da psicologia da forma como percebemos o nosso ambiente visual.

Exemplos

É altura de screenshots. Tenho mais alguns websites do que o habitual para este último artigo da série, e agrupei-os de acordo com os quatro tipos de equilíbrio.

Como reiterei ao longo da série, o que se segue é a minha opinião. É assim que eu vejo o equilíbrio nestes desenhos. Talvez o vejam de forma diferente, o que é óptimo. Pensar criticamente sobre os desenhos é mais importante do que concordar sobre o que pensamos.

Exemplos de equilíbrio simétrico

O desenho de Helen & O website inteiro de Hard é simetricamente equilibrado. A imagem aqui é da página “Sobre”, mas as outras páginas do website são equilibradas de forma semelhante.

Imagem de Helen Hard
Imagem de Helen & página “Sobre” de Hard. (Ver versão grande)

Todos os elementos reflectem em torno de um eixo vertical no centro da página. O logótipo está centrado, a barra de navegação está centrada, as imagens circulares estão centradas, o cabeçalho está centrado, e as três colunas de texto estão centradas.

O balanço não é perfeitamente simétrico. As colunas têm diferentes quantidades de texto, por exemplo.

No entanto, repare no topo da página. Tanto o logótipo como a barra de navegação estão centrados, mas não parecem estar visualmente centrados. O meu olho quer que o logótipo esteja centrado na amperanda, ou pelo menos mais perto dela. Os três itens do menu do lado direito da barra de navegação têm mais letras do que os do lado esquerdo. O meu olho quer que sejam iguais e quer que o centro fique entre os links “Sobre” e “Pessoas”.

Penso que mover estes dois elementos do centro para os fazer parecer que estão visualmente centrados equilibraria a composição um pouco melhor.

A página inicial do Tilde é outro desenho simetricamente equilibrado. Como Helen & Hard, tudo aqui gira em torno de um eixo vertical que desce pelo centro da página: a navegação, o texto, as pessoas na imagem. É o mesmo que rolar pela página.

0Screenshot da página inicial de Tilde
Screenshot da página inicial de Tilde. (Ver versão grande)

As with Helen & Hard, a simetria não é pura. As linhas centradas de texto não são imagens espelhadas, por exemplo. Além disso, alguns elementos estão desligados: a seta “Meet the Team” apontando para a direita e o texto na parte inferior da página terminando noutra seta apontando para a direita.

Both são chamadas à acção e ambas quebram a simetria, chamando a atenção extra para si próprias. Observe como ambas as setas usam cores que contrastam com o seu fundo, aumentando ainda mais a atracção destes elementos.

Exemplos de Equilíbrio Assimétrico

A página inicial da carteira de Carrie Voldengen exibe um equilíbrio global assimétrico em torno de uma forma simétrica dominante. Olhando para a composição geral, vejo várias formas discretas.

Screenshot of Carrie Voldengen's website
Screenshot of Carrie Voldengen’s website. (Ver versão grande)

A massa da página é um grande rectângulo que é composto por uma grelha de imagens rectangulares mais pequenas. Por si só, esta grelha é simétrica em torno dos eixos vertical e horizontal. Sente-se muito forte e estável. Por si só, é muito equilibrada e parece que não vai a lado nenhum.

À direita, um bloco de texto puxa para baixo sobre a forma. É contrabalançado pelo texto e pelo logótipo circular na parte superior esquerda. Ambos proporcionam uma quantidade relativamente igual de peso visual actuando na grelha em direcções opostas.

A distância a um fulcro imaginado é aproximadamente a mesma que os pesos. O texto à direita é maior e mais escuro, mas o logótipo circular azul dá mais peso à sua área geral. O círculo até se liga ao canto superior esquerdo da grelha através de uma única cor.

O texto abaixo da grelha parece estar pendurado nela, e é suficientemente leve por si só para não desequilibrar a composição.

Nota que o espaço também se sente equilibrado. As áreas abaixo à esquerda, ao longo da parte superior direita e abaixo à direita, incluindo um pouco da parte inferior direita, todas se equilibram umas às outras. A área à esquerda é maior do que a área à direita, mas a direita tem espaço adicional em cima e em baixo.

As imagens no topo da página inicial de Hirondelle USA rodam. Tirei uma imagem desta especificamente para falar do equilíbrio assimétrico estabelecido no topo da página.

Tela de Hirondelle USA
Tela de Hirondelle USA. (Ver versão grande)

A coluna na imagem está ligeiramente fora do centro, e ancora a composição com uma forte linha vertical – é um objecto que sabemos pesar muito. O corrimão à esquerda proporciona uma forte ligação com a borda esquerda do ecrã. Também se sente ancorado. É difícil imaginar qualquer elemento de desenho na página atirando ou desequilibrado.

O texto acima do corrimão sente-se apoiado pelo corrimão; no entanto, é também visualmente equilibrado pela imagem do rapaz à direita. Pode-se ver o corrimão como pendurado do lado esquerdo do poste, puxando-o para fora de equilíbrio, mas penso que o interesse intrínseco do rapaz, bem como os valores mais escuros no fundo atrás dele contrabalançam tanto o corrimão como o texto à esquerda e mantêm as coisas em equilíbrio.

Existe uma sensação de simetria de tradução à medida que as linhas douradas do texto se repetem no canto superior esquerdo e inferior direito da imagem, bem como no botão mais abaixo na página. O texto branco repete-se também.

Exemplos de Equilíbrio Radial

A página inicial do Vlog.it exibe o equilíbrio radial, que espero que esteja claro a partir da imagem do ecrã. Além da forma no canto superior direito, tudo gira em torno do centro da página, à medida que os três anéis das imagens giram em torno do círculo central.

Screenshot of Vlog.it
Screenshot of Vlog.it. (Ver versão grande)

O que não se pode ver na imagem do ecrã é como a página é carregada. Uma linha é desenhada desde o canto inferior esquerdo até ao centro da página. A partir daí, quase tudo o que aparece na página fá-lo girando em torno do centro ou irradiando a partir dele, como ondulações num lago.

O círculo mais pequeno no canto superior direito acrescenta um pouco de simetria de tradução e alguma assimetria, aumentando o interesse visual na composição.

A página inicial de Demonstrações Brilhantes da Opera não é circular, mas as ligações de texto parecem todas emanar de um centro comum ou quase comum. É fácil imaginar toda a forma a girar à volta de um dos quadrados no meio ou talvez num dos cantos onde quatro quadrados se encontram.

Tela de Demonstrações Brilhantes da Ópera
Tela de Demonstrações Brilhantes da Ópera. (Ver versão grande)

O cabeçalho das Demos Brilhantes no canto superior esquerdo e o logotipo da Ópera no canto inferior direito contrabalançam-se e também parecem irradiar do mesmo centro que os links de texto.

É um bom exemplo de como o equilíbrio radial não requer necessariamente o uso de círculos.

Exemplos de equilíbrio do mosaico

É de esperar que o equilíbrio do mosaico seja o menos usado online, especialmente depois de ter oferecido pinturas Jackson Pollack como um exemplo de equilíbrio do mosaico. Muitos mais exemplos estão online do que se poderia imaginar.

A página inicial de Rabbit’s Tale foi um bom exemplo. Houve certamente uma sensação aleatória e caótica com as letras espalhadas, mas o equilíbrio na composição funciona.

Screenshot of Rabbit's Tale
Screenshot of Rabbit’s Tale. (Ver versão grande)

Há perto de áreas iguais de cor e espaço em ambos os lados (direita e esquerda) para se equilibrarem mutuamente. O coelho do meio até serve de ponto de apoio. Pode também destacar-se um pouco depois de o ter visto, mas no geral os elementos não chamam a atenção individualmente.

Não vou tentar descobrir quais os elementos que se contrabalançam, um elemento de cada vez, mas espero que concorde que existe um equilíbrio geral. Se alguma coisa, o caos é mais pesado do lado direito, mas não ao ponto de lançar fora da balança.

Siteis pesados em termos de conteúdo, tais como sites de notícias e revistas exibem também o equilíbrio do mosaico. Poderá reconhecer a página inicial de The Onion. Na imagem do ecrã, removi a imagem de fundo atrás do topo da página.

Imagem de fundo da cebola
Imagem de fundo da cebola. (Ver versão grande)

Há muito para ver. A disposição não é simétrica. As colunas não são iguais em tamanho. É difícil identificar que contrabalançam o quê. Os blocos de conteúdo têm quantidades diferentes de conteúdo no seu interior e, consequentemente, são de tamanhos diferentes. Nada irradia de um centro comum.

Existe um pouco de caos e aleatoriedade nos blocos de tamanhos diferentes, alguns mais densos do que outros. Uma vez que as histórias no sítio web mudam todos os dias, um caos diferente irá aparecer a cada dia. No geral, funciona.

Talvez seja uma extensão dizer que é um equilíbrio em mosaico, mas mais uma vez eu argumentaria que é e que muitos websites exibem este tipo de equilíbrio caótico, embora algo me diga que muito do caos que vemos online não foi planeado.

Sumário

Demorou algum tempo a chegar aqui, mas isso conclui a nossa série sobre princípios de design. Espero que tenham gostado, aprendido algo novo ou achado que a série é uma boa revisão dos princípios fundamentais do design.

Como podem adivinhar, penso que os princípios fundamentais são importantes. Comecei esta série para mostrar como todos estes princípios surgem da percepção humana e da teoria da gestalt. Não fui eu que os inventei. Os princípios baseiam-se na forma como todos nós percebemos e interpretamos o nosso ambiente visual.

Por exemplo, uma razão pela qual notamos pontos focais é porque contrastam com os elementos que os rodeiam. Eles destacam-se como diferentes. Isso é importante quando se precisa de determinar rapidamente o amigo do inimigo. Essa capacidade era importante para a nossa sobrevivência como espécie, e assim os nossos olhos desenvolveram-se para fazer a determinação rapidamente.

No entanto, os princípios de design não são regras difíceis e rápidas. São directrizes. Não há uma forma correcta de comunicar que dois elementos são semelhantes ou diferentes, por exemplo. Não precisa de seguir nenhum destes princípios, embora deva compreendê-los e ter uma razão para os quebrar.

Again, espero que tenha gostado desta série, e espero ainda mais que algo na série lhe tenha dado mais controlo sobre a comunicação visual nos seus designs.

Recursos adicionais

  • “Is Your Web Design Balanced?”, Steven Bradley
  • “A Study of Symmetry”: When, Where, and Why to Use It”, James George
  • “Visual Balance”, Cheryl Qian
  • “Balance – Symmetry”, James T. Saw”Understanding the Importance of Balance in Graphic Design”, Mark Masters

  • “Photography Rules of Composition”: Peso Visual”, Julie Waterhouse
  • “Princípios de Desenho”: Equilíbrio”, Charlotte Jirousek
  • “A Fine Balance”, Erik Spiekermann”Arte e Percepção Visual de Rudolph Arnheim: Notas de Frederic F. Leymarie” (PDF) Notas de Leymarie do livro de Arnheim.”Map Design” (PDF), da Cartografia: Desenho de Mapa Temático, Borden Dent e Jeff Torguson Este capítulo do livro trata dos princípios de desenho discutidos nesta série.

Smashing Editorial(il, ml, al)

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *