Guia para entender grids
O que é grid?
Grid, em sua essência, é uma ferramenta que nos proporciona a estrutura necessária para organizar os elementos da interface, de maneira consciente e consistente. Como consequência, ao fim do processo, o conteúdo estará distribuído de forma uniforme e teremos equilíbrio visual e estrutural.
Porque usar grid?
A malha construída para guiar o desenvolvimento da interface nos permite criar uma linguagem visual consistente e padronizada através de todas as telas.
As decisões não serão aleatórias e os benefícios serão diversos, abrangendo a equipe de desenvolvimento, os designers e o próprio usuário.
Para o usuário:
- O padrão de espaçamento e distribuição dos elementos através das telas facilitará a leitura e o escaneamento dos elementos.
- O grid facilita a distribuição uniforme dos elementos, melhorando a experiência visual.
- O olho humano percebe a distribuição proporcional dos elementos e associa as informações com maior facilidade, necessitando menos esforço cognitivo para interpretar o conteúdo.
Para o designer:
- Facilita as alterações na interface, significando rapidez para adicionar, alterar e mover elementos.
- Padrões de espaçamento e alinhamento proporcionam uma linha de trabalho uniforme.
- A estrutura facilita a garantia de consistência visual através das telas.
- Em uma equipe de designers o grid se torna um contrato, tornando o trabalho do grupo padronizado.
Para o desenvolvimento:
- É uma ferramenta de conversação entre programadores e designers, garantindo que o resultado final seja o mais próximo possível do projetado.
- Traduz para o programador os espaçamentos, margens e tamanhos projetados pelo designer.
Agora que já sabemos os benefícios iremos entender melhor como construir o Grid. A princípio precisamos nos familiarizar com os elementos que o formam:
Guias: Linhas dispostas para auxiliar o alinhamento do conteúdo
Coluna: Estruturas verticais que delimitam o espaço a ser ocupado pelo conteúdo entre as margens
Margens: É a área em torno do seu conteúdo
Calhas: O espaçamento entre as colunas
Hang-line e Linha de base: São guias horizontais que delimitam o alinhamento do conteúdo
Ritmo: Sistema de proporção que define a frequência de dimensionamento e o espaçamento de cada um dos elementos acima.
A guias são os elementos base para construir o seu grid, os demais elementos são variações delas, utilizados em momentos diferentes, mas sempre com o objetivo de delimitar o seu conteúdo seguindo padrões de espaçamento, a fim de auxiliar e justificar as decisões de posicionamento dos elementos.
Margens
As margens são importantes para apresentações, interfaces, impressos ou qualquer outro projeto visual que você desenvolverá. Elas serão basicamente uma moldura invisível ao redor do seu conteúdo, permitindo espaço para respiração visual.
A esquerda exemplificamos um conteúdo disposto em uma margem inadequada e claustrofobia, ao centro é possível ver o mesmos elementos dispostos de maneira a respeitar uma margem pré-definida que é possível visualizar na imagem da direita.
Não existe a margem ideal, este espaçamento estará relacionado com o tipo de material que você está desenvolvendo, mas abordando o desenvolvimento de interfaces para dispositivos móveis, especificadamente desenvolvimento iOS, nós possuímos uma série de orientações no documento Human Interfaces Guidelines.
Na documentação são abordados os termos Layout Guides e Safe Area, que são regiões retangulares, que não aparecem visivelmente na tela, mas ajudam o posicionamento, o alinhamento e o espaçamento do conteúdo. O sistema inclui layout guides predefinidos que facilitam a aplicação de uma margem padrão em torno do conteúdo e restringem a largura do texto para uma legibilidade ótima, mas também há a possibilidade de definir Layout Guides personalizados.
Colunas e calhas
As colunas são uma ótima maneira de segmentar o conteúdo visualmente. Eles podem agrupar, separar e equilibrar os elementos na sua tela.
Uma única coluna funciona para documentos simples e para entregar uma série consistente de informações. À medida que o conteúdo se torna mais complexo, uma grade de várias colunas pode tornar-se necessária para fornecer ao conteúdo uma formatação mais flexível.
As colunas serão ocupadas pelo conteúdo, já as calhas estarão cheias de espaço em branco que, que assim como as margens, criam o espaço de respiração para o seu conteúdo.
Hang-line e Linha de base
As hang-line e as linhas de base são guias horizontais para alinhar o conteúdo. Essas linhas horizontais criam uma âncora comum para o conteúdo e ajudam a criar sessões horizontais, auxiliando a elaboração da hierarquia visual.
Estes elementos funcionam melhor em conjunto com as colunas e calhas, que juntas irão criar espaços vazios, retangulares ou quadrados, para acomodar o conteúdo. Esta prática criará uma uma orientação visual, auxiliando o escaneamento das informações através do olho humano.
Estas são as principais ferramentas quando tratamos de organizar e espaçar os elementos em uma “folha em branco”. Ao utilizá-las possuímos alguns objetivos e como foi dito anteriormente, um destes motivos é ajudar o olho humano perceber a distribuição proporcional dos elementos e associar as informações com maior facilidade, o grid nos ajuda a cumprir esta tarefa pois ele dá ritmo ao posicionamento dos elementos.
Entenda ritmo como uma repetição que segue um padrão de disposição dos elemento no espaço, é uma “batida visual”, que assim como o nosso coração segue o compasso musical da balada, o nosso olho segue o padrão visual criado pelo grid.
Como uma série que sempre deixa uma acontecimento surpreendente no final do capítulo, para despertar o interesse de assistir o próximo e o próximo e chegar ao fim da temporada.
O designer criar elementos de repetição, cria espaços de suspense entre os elementos e um ritmo que embala o usuário a olhar para o próximo elemento, garantindo que ele olhe para o elemento certo e “assista” o seu projeto por completo.
Pois seu projeto será julgado como um todo, e não por partes. Estas partes devem possuir coerência entre si e respeitar o espaço das que as cercam.
O grid é uma ferramenta, que deve auxiliar as suas demais habilidades e evitar erros que atrapalhariam a harmonia visual da sua obra. O segredo para esta ferramenta é a prática e a observação, primeiramente pratique sempre e experimente novas possibilidade; e em paralelo olhe para o mundo ao seu redor, busque referências, analise as aplicações que você utiliza, os banners espalhados pela cidade e aumente o seu repertório.
Obrigada por ter chegado até aqui! Espero que o conteúdo tenha sido esclarecedor e te incentive a se aprofundar no assunto.
Dúvidas, perguntas e sugestões entrem em contato através dos comentários. Até mais!
Referências
