Layout da interface
Atividades relacionadas (ao layout do web site)
Composição geral dos elementos
Simetria e assimetria - grade
As opções de composição dos elementos da interface são infinitas. E o uso de grades facilita a percepção de coesão dos elementos do layout em conjuntos harmônicos. Além disso estas ferramentas permitem que a lógica geral da solução composicional geral se aplique até os mínimos detalhes, numa lógica que lembra a dos fractais.
Grades podem estruturar composições simétricas e assimétricas, como:
■ Composição simétrica: Os elementos ficam centralizados em torno de um eixo. Há equilíbrio visual, o olho não se desloca muito do lado direito ao lado esquerdo da tela.
Na página ilustrada abaixo, os elementos de navegação laterais estão dispostos de maneira simétrica em relação ao texto central. No alto, o cabeçalho, mantém a estrutura visual centrada em torno do título principal (o nome da instituição) embora a barra de navegação ali situada não esteja centralizada.
A simetria, neste caso, parece ser uma referência visual ao neoclassissismo, movimento artístico muito forte na Europa no início do século 19, que se baseava em referências visuais da cultura greco-romana. O "fronspício" do título do site, bem como as estátuas que o ladeiam, reforçam este argumento.
A navegação pelas obras e exposição fica integrado ao bloco de texto central, o que contribui para manter a leveza do conjunto embora este careça de informações contextuais importantes, como o título da página e onde a página se situa dentro do site.
► Ver outra página do
mesmo site.
http://www.hermitagemuseum.org/
■ Composição assimétrica: elementos dispostos por peso visual e função. Malhas visuais ajudam a disposição dinâmica e consistente dos elementos.
http://www.masp.art.br/default.asp
Assuntos relacionados
► Layout líquido: usar ou não?
► Componentes da interface web
► Usabilidade - Consistência
► Barras de rolagem
Referências sobre malhas simétrias e assimétricas em design para a web
► What is the best layout for multiple-column web pages? (Software Usability Research Laboratory, acesso em 1.2.2009)
Mais informações sobre o assunto (links externos)
► Thinking outside the grid, de Molly E. Holzschlag (A list Apart, acesso em 22.6.2010)
► Nudge your elements (Subtraction, acesso em 7.8.2008)
► Oh Yeeaahh! (Subtraction, acesso em 7.8.2008)
► Visual language - Design guidelines for the widening of page templates across bbc.uk.uk - especificações de design dos sites da BBC (link para o arquivo em pdf)
► Design and the Divine Proportion (Mark Boulton, acesso em 8.8.2008)
► Five simple steps to designing grid systems - Part 1 (Mark Boulton, acesso em 7.8.2008)
► Five simple steps to designing grid systems - Part 2 (Mark Boulton, acesso em 7.8.2008)
► Five simple steps to designing grid systems - Part 4 Fixed (Mark Boulton, acesso em 7.8.2008)
► Five simple steps to designing grid systems - Part 5 Fluid (Mark Boulton, acesso em 7.8.2008)