Layout

Aspectos específicos da interface

Malha gráfica (grid)

Atualizado em 14.6.2013

Malhas gráficas (ou grids) são matrizes com base geométrica que servem para estruturar o layout de peças de design (impressas, tridimensionais, digitais). Em produtos online, seu uso orienta o equilíbrio e a consistência de modelos visuais, especialmente em projetos que envolvem grande número de informações e processos complexos de desenvolvimento, atualização e uso.

As malhas gráficas ajudam a organizar a apresentação e a localização do conteúdo e das funcionalidades, permitindo aos usuários melhor controle da sua experiência de uso. Além disso, facilitam o posicionamento dos elementos tanto em diversos pontos da mesma página quanto entre diferentes telas ou páginas.

A malha gráfica geral pode dispor os elementos do layout da interface de diversas maneiras:

Layout "líquido": Adaptado a diferentes resoluções de tela. Neste caso, é necessário verificar o posicionamento dos elementos em diferentes configurações do monitor, priorizando uma delas.

Portais com grande volume de acessos diários, como Amazom.com, Submarino e Americanas.com preferem usar este modelo de configuração, para incluir o maior número possível de compradores.

Com o uso de telas mais largas, o design líquido pode ajudar a explorar melhor o espaço disponível.

Posicionamento centralizado do conteúdo: A localização centralizada do conteúdo entre duas colunas mais estreitas pode ser necessária em sites com longas barras de navegação e pequenas unidades de conteúdo (ou publicidade) posicionadas nas laterais. No entanto, é preciso ter cuidado para manter espaços de respiração que valorizem cada elemento. Exemplo: National Archives

Posicionamento da navegação à esquerda da tela: Permite que os elementos se localizem de acordo com o modelo mental da maioria dos usuários (de cultura ocidental). Este modelo é mais tradicional e foi talvez o mais usado até agora, e pode associar o site a modelos não muito inovadores. No entanto, pode também estar associado a confiabilidade e conforto de leitura. Exemplo: Wikipedia.

Posicionamento da navegação à direita da tela: Atualmente é mais comum situar o conteúdo à esquerda da tela, com as barras de navegação, publicidade e conteúdo de apoio à direita. Sites de notícias e blogs costumam adotar este formato, bem como sites que não podem ficar restritos a uma navegação no alto.

Adaptação do conteúdo e do design a diversas resoluções de tela (design responsivo): a adaptação do conteúdo ao formato permite que cada dispositivo seja usado de forma a otimizar as suas características.

Forma e função

Os aspectos que influenciam a criação de uma malha são tanto estéticos quanto lógico-funcionais. Logo que olha uma página ou interface, o usuário percebe a forma e faz uma ideia geral sobre o conteúdo e as funcionalidades. A seguir, a experiência de ver e usar o leva a entrar em contato mais aprofundado com os condicionantes da forma – conjunto de forças que atuam para que um sistema tenha uma configuração, não exatamente uma "ordenação" de elementos.

Uma malha pode ordenar um conjunto de elementos num determinado espaço, mas a ordenação não é obrigatória. O princípio conceitual-funcional é mais um sistema de pensamento visual do que um sistema de alinhamentos.

Seu uso facilita o posicionamento dos elementos da interface e do conteúdo em coordenadas definidas. E provê sentido de localização para o deslocamento dos usuários nos diferentes canais e seções. Exemplo

A divisão da interface em diversas colunas que sinalizam o acesso às funcionalidades e ao conteúdo, ajuda a navegação. Do mesmo modo, os espaços em branco que procuram o equilíbrio entre os elementos dominantes e os elementos mais discretos, como entrelinhas, legendas, espaços entre colunas. Exemplo

Especificidades da malha gráfica digital

O design de malhas para a web e dispositivos móveis de modo geral é diferente do das malhas usadas para produtos gráficos impressos. Esta diferença se deve em parte à grande quantidade de dispositivos de acesso à web, com diferentes tamanhos, resoluções de tela, programas de acesso: para se adaptar a estas condições, as malhas gráficas para interfaces de dispositivos digitais precisam ser relativamente flexíveis.

Cada usuário pode também personalizar suas configurações, como as barras dos browsers, ou o uso de dois monitores, ou telas ampliadas, o que afeta o modo como as malhas aparecem. E em cada tipo de dispositivo o tamanho dos pixels pode variar, o que cria diversas variações de layouts para diferentes usuários.

Além disso, as diferentes tipologias não renderizam de forma homogênenea nas telas de todos os dispositivos. E há usuários que ampliam ou reduzem a tela default, o que gera inúmeras variações visuais, cujo layout nem sempre é controlado.

Fatores condicionantes

Ao mesmo tempo que visa à concepção de modelos para atender aos condicionantes visuais e conceituais de um produto, a criação de malhas considera aspectos conceituais e funcionais ligados aos resultados que se procura alcançar.

-> Por exemplo, se precisamos de uma interface que valorize diversas imagens de paisagens, tenha navegação distribuída entre um menu pricipal e outro secundário, textos e imagens pequenos, como o espaço da tela pode ser organizado?

De várias maneiras diferentes. As soluções dependem do grau de prioridade dos objetos (quais devem ficar mais ou menos destacados?), das condições de usabilidade (qual a sua localização e tamanho?), das convenções consolidadas em relação a estes elementos, que podem condicionar o seu posicionamento e dimensionamento (onde a maioria dos usuários está acostumada a encontrá-los?)

Com as malhas gráficas, as diversas possibilidades de composição dos elementos seguem referências ortogonais que orientam o posicionamento para estabelecer um conjunto consistente entre páginas e facilitar a construção da narrativa de cada usuário. A consistência e a harmonia decorrentes da composição equilibrada contribuem para uma experiência de uso em que a interface, com todos os seus atributos de qualidade, somados às ações de cada usuário, estabelece uma interlocução produtiva.

 

Assuntos relacionados
Layout líquido: usar ou não?
Elementos da interface web
Lugares comuns dos elementos das páginas
O espaço da página
Especificações do produto : Consistência do layout e do tratamento editorial
Usabilidade : Consistência
Elementos da interface web

Mais informações sobre malhas gráficas
Effective design principles for web designers: Alignment, Ryan Boudreaux (TechRepublic, acesso em 14.6.2013)
Gridpak: The responsive grid generator (Smashing Magazine, acesso em 25.3.2012)
Global Experience Language (BBC – Gel, acesso em 1.12.2012)
Livro: Orderning disorder – Grid principles for web designs, de Khoi Vinh. Berkeley: New Riders, 2011.
Thinking outside the grid, de Molly E. Holzschlag (A list Apart, acesso em 22.6.2010)
Designing with content in mind (thedesignCubicle, acesso em 7.12.2009)
960 Grid System, de Nathan Smith acesso em 28.8.2009
Grids are good, de Khoi Vinh e Mark Boulton (PDF, 8,85Mb, Subtraction, acesso em 6.3.2009)
Fluid grids, de Ethan Marcotte (A List Apart, acesso em 6.3.2009)
Grids CSS: Examples (Yahoo Developer Network, acesso em 20.2.2009)
Choose the overall page widthYUI grids CSS (Yahoo Developer Network, acesso em 20.2.2009)
Feeling your way around grids, de Mark Boulton (Mark Bouton, acesso em 7.8.2008)
Design principles (IBM, acesso em 28.3.2008)

Programas auxiliares
Grid Designer – Ferramenta que gera uma malha com exportação de CSS com fontes e medidas (acesso em 14.6.2013)
Gridmax – Ferramenta que gera uma malha (grid) vertical para quem está testando o layout no browser (acesso em 2.5.2013)
PicNet's Mouse Eye Tracking – solução gratuita para mostrar detalhes sobre como cada usuário vê as páginas de um site (acesso em 28.3.2010)
ClickTale – ferramenta de acompanhamento de uso de web sites (acesso em 28.3.2010)
AttentionWizard – programa para avaliar layouts de web sites a partir da simulação dos movimentos do olho humano e da verificação dos principais pontos de atenção (SiteTuners.com, acesso em 4.12.2009)
Sketchbook Pro – permite o desenho livre de esboços, com suporte de ferramentas de texto e alguns efeitos de texturas

Avellar e Duarte no Twitter Avellar e Duarte no Facebook Feeds da Avellar e Duarte Avellar e Duarte no Delicious