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. O uso de grades facilita a percepção de coesão do layout, num conjunto integrado. Além disso, estas ferramentas permitem que a lógica geral da solução se aplique até os mínimos detalhes, numa lógica que lembra a dos fractais.
Grades podem estruturar diversos tipos de composição, 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
► Componentes da interface web
► Usabilidade - Consistência
► Barras de rolagem
Mais informações sobre o assunto (links externos)
► 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)