Construção de Grid para Logo: Os 4 Sistemas de Grid e Quando Usar Cada Um

Um grid de logo é um sistema de guias geométricas que restringe as proporções, os ângulos e o espaçamento de uma marca. Não é uma coisa só. Quatro grids de logo diferentes fazem quatro trabalhos diferentes, e acontecem em quatro momentos diferentes: antes de você desenhar, depois de desenhar, quando você combina a marca com a tipografia, e quando o logo está pronto e vai para um guia de marca.

Quase ninguém dá nome a eles. A nomenclatura usada aqui vem da análise da Akrivi Studio sobre os quatro sistemas de grid de logo, a versão mais clara já escrita: Base, Construction, Lockup, Clearspace. Uma vez que você tem esses quatro nomes, a maior parte da discussão sobre se grids são ofício de verdade ou teatro se resolve, porque geralmente são duas pessoas falando sobre dois grids diferentes.

O que um grid de logo realmente é

Um grid de logo é um conjunto de guias de construção, desenhadas em linhas azul-claras ou coral por baixo da marca, que definem a geometria dentro da qual a marca se encaixa. Quadrados, círculos, retângulos de proporção, linhas de ângulo. As guias fazem três trabalhos:

• Garantir consistência. Um selo circular construído sobre um único raio se lê como uma forma só. Esboçado à mão livre, tem três curvas ligeiramente diferentes e parece desigual mesmo com uma diferença de dois pixels.
• Garantir proporção. Um grid codifica a relação entre elementos, peso do traço em relação à altura da letra, forma interna em relação à forma externa, respiro em relação à área ativa, para que a marca escale sem desvio.
• Tornar a marca legível para o próximo designer. Um logo com um grid publicado é reproduzível. Um sem grid depende do arquivo original e do julgamento original, e se degrada toda vez que alguém abre o arquivo correndo contra o prazo.

O que o grid não faz é desenhar o logo por você. É restrição, não invenção. Ele não vai tornar uma forma sem graça interessante. Ele só vai tornar uma forma forte consistente.

Os quatro sistemas de grid de logo, e quando cada um acontece

Os quatro não são variantes um do outro e não são intercambiáveis. Um grid base é um andaime sobre o qual você constrói. Um grid de construção é uma inspeção que você faz depois. Um grid de lockup é sobre a relação entre dois objetos. Um grid de clearspace é uma regra que você entrega para quem vai usar o logo em seguida.

A maior parte do ruído sobre grids de logo vem de misturar esses conceitos. Quando alguém posta uma marca finalizada cercada de círculos e chama isso de prova de rigor, isso é um grid de construção, feito depois do fato. Quando alguém diz que grids matam o caráter, geralmente estão falando de grids base. Ambos podem estar certos ao mesmo tempo, porque estão discutindo objetos diferentes.

1. Grids base: o andaime sobre o qual você desenha

Use antes de desenhar. Propósito: estrutura, consistência, não precisar calcular proporções no olho. Um grid base é um campo repetitivo lançado antes da marca existir, e vem em quatro formas comuns.

O grid de 8 pontos é o padrão no design de UI moderno. Material, iOS e a escala de espaçamento do Tailwind assumem uma base de 8 ou 4 pontos, então um logo construído sobre um desses se encaixa numa UI de 8 pontos sem desalinhamento de subpixel. A marca da IBM se apoia num grid modular apertado que controla o espaçamento das barras e suas oito faixas horizontais.

Proporção áurea, e por que "grid circular" não é uma coisa

"Grid circular" não é um sistema de grid nomeado. Quando alguém diz isso, quer dizer uma de duas coisas reais: um grid base de proporção áurea, ou um grid de construção, que geralmente é desenhado como círculos sobre uma marca finalizada. Misturar esses dois é onde começa a maior parte da confusão sobre grids de logo.

Grids de proporção áurea começam com um círculo âncora, depois adicionam círculos cujos raios se relacionam com o primeiro por uma proporção fixa, 1:1,618 (áureo), 1:1,414 (prata), ou 1:2. Cada novo círculo se encaixa dentro do primeiro, se intersecta com ele num ângulo conhecido, ou se estende para fora num deslocamento conhecido, e a marca é desenhada ao longo dos arcos e interseções.

• Twitter (pássaro de 2012): construído a partir de catorze círculos sobrepostos de três raios. Cada curva, a cabeça, a asa, o peito, o bico, segue o arco de um deles.
• Mastercard: dois círculos de raio igual, deslocados por uma distância conhecida, com a sobreposição definindo o bloco de cor.
• Pavão da NBC: radial, onze pétalas, cada uma uma gota construída a partir de arcos arranjados em incrementos angulares fixos.

Uma ressalva honesta: a proporção áurea é mais útil como verificação de sanidade do que como gerador. Designers que dizem ter "desenhado o logo na proporção áurea" geralmente desenharam a marca primeiro e notaram a proporção depois. Usar phi para verificar é ofício razoável. Usá-lo como o motor literal de cada medida é overengineering, e o briefing vazado da Pepsi de 2008, com sua atração gravitacional e campo magnético da terra, é o monumento ao que isso parece.

A maioria das marcas reais mistura formas em vez de se comprometer com uma só. A Apple é a análise que circula pelas escolas de design: o corpo, a mordida e a folha são construídos sobre círculos sobrepostos, mas o alinhamento da folha com o corpo, a relação largura-altura, e o posicionamento da mordida ficam num grid modular. Tire os círculos, a maçã perde a forma. Tire o espaçamento modular, ela perde o equilíbrio. A BMW é a mesma história, com um selo circular e tipografia modular na borda. O erro é escolher o grid base por preferência estética em vez de pela geometria da marca.

2. Grids de construção: o que todo mundo posta

Use depois de desenhar. Propósito: inspeção, o polimento que faz um cliente perguntar como é tão exato. Um grid de construção revela as âncoras, alças, contornos e linhas de grid dentro de uma marca finalizada, para que você encontre os erros antes que um cliente os encontre: linhas desiguais, uma curva cuja alça está dois graus fora, uma forma uma unidade curta de se alinhar com a que está ao lado. Feito à mão, leva de trinta a sessenta minutos por logo.

Este é o grid em quase todo deck de rebranding: uma marca finalizada, uma malha de círculos por cima, uma sala cheia de gente lendo isso como prova de rigor. As duas coisas que as pessoas dizem sobre esse slide são verdadeiras ao mesmo tempo. É uma ferramenta de ofício real, e é desenhada depois que a marca foi finalizada. A pergunta que vale a pena fazer quando o slide aparece não é "você usou um grid." É quais partes disso você quebrou de propósito, e por quê.

3. Grids de lockup: a marca e a tipografia

Use ao combinar um logomark com um logotype. Propósito: harmonia e hierarquia. Empilhar, alinhar ou combinar uma marca e uma wordmark no olho é onde identidades por outro lado fortes se desmancham, porque "levemente descentralizado" é a observação que chega de um cliente três semanas depois e não pode ser desvista depois disso.

Um grid de lockup fixa a relação, não as formas. Usa técnicas como a regra dos terços para manter espaçamento consistente entre marca e tipografia, manter a relação óptica estável em arranjos horizontais e verticais, e fazer o layout parecer decidido em vez de improvisado. Quase nenhum logo é entregue como um objeto único. A maioria é entregue como uma marca, uma wordmark, um lockup horizontal e um lockup empilhado, e o grid de lockup é o que mantém esses quatro consistentes entre si.

4. Grids de clearspace: a regra que você entrega

Use quando o logo está finalizado. Propósito: proteger o logo de todos que vão usá-lo em seguida. Um grid de clearspace define a zona de exclusão, o espaço ao redor do logo onde nada mais é permitido. Geralmente é expresso numa unidade derivada da própria marca, comumente marcada como X, para que a regra escale com o logo em vez de ser uma contagem fixa de pixels que deixa de fazer sentido em tamanho de outdoor.

Este é o menos glamouroso dos quatro e o que mais sobrevive ao contato com a realidade, porque é o grid que acaba impresso nas diretrizes de marca. Toda vez que um logo aparece espremido no canto de um pôster, encaixado contra um título, isso é uma regra de clearspace que não existia ou que nunca foi entregue.

Análises de grids de logos famosos

Sete logos, e qual grid faz o trabalho em cada um.

A FedEx vale destacar. A seta escondida entre o E e o x não é um acidente feliz. É o resultado visível de um grid que exigiu que o espaço negativo entre duas letras se tornasse uma forma utilizável. Isso não acontece com kerning à mão livre, e também não acontece só com círculos de proporção. O padrão nos sete: todo grid lida com a geometria, e nenhum deles gera o conceito. O conceito vem de posicionamento, nomeação e insight de categoria; o grid vem depois, para tornar isso reproduzível.

Correções ópticas que quebram o grid de propósito

Todo grande logo com grid trapaceia seu grid em pelo menos três lugares, porque o olho e a matemática não concordam, e o olho é quem está comprando. Correção óptica é a prática de quebrar o grid por uma quantidade pequena e deliberada para corrigir um problema perceptual que o próprio grid cria.

Um grid de logo que não permite essas correções é rígido demais para ser entregue. O grid é um ponto de partida, não um contrato. A disciplina é acompanhar cada correção, marcá-la no grid de construção, e documentar o porquê, porque o próximo designer que abrir o arquivo vai ser tentado a "consertar" o desvio de volta ao grid e arruinar o equilíbrio óptico.

Precisa de um logo construído sobre um grid de construção de verdade, com as correções ópticas, o sistema modular, e as regras que se sustentam em toda superfície? Contrate a Brainy. Entregamos sistemas de logo pela LogoBrainy e identidades de marca completas para times que querem a estratégia, a construção e a tipografia num único pacote.

Quando um grid ajuda e quando ele engessa o logo

Grids base ajudam quando a marca é geométrica e modular. Atrapalham quando a marca precisa de caráter, gesto ou calor que nenhum grid pode fornecer. Os outros três são menos contestados: grids de construção, lockup e clearspace são úteis em quase qualquer logo, incluindo os gestuais, porque inspecionam e protegem a marca em vez de gerá-la.

• Grids base compensam em: monogramas geométricos e marcas com letras (IBM, NASA, HBO, GE), marcas pictóricas construídas (Apple, Twitter, Mastercard, BMW, Toyota), selos modulares construídos sobre círculos, hexágonos ou quadrados com geometria interna, e wordmarks sans geométricas (FedEx, Visa, Google pós-2015).
• Grids base engessam: wordmarks de script customizado (Coca-Cola, Disney, Tiffany) onde o gesto é o ativo, marcas desenhadas à mão ou ilustrativas, marcas caligráficas e de estilo histórico onde o caráter mora na imperfeição, e qualquer marca cuja estratégia seja calor ou acessibilidade, porque um grid de construção rígido sinaliza precisão e engenharia, o que combate a estratégia.

A regra de decisão: se a marca é geométrica, modular, ou construída a partir de formas reproduzíveis, construa um grid base. Se é gestual, ilustrativa, ou guiada por caráter, esboce primeiro e use um grid base leve só para consistência proporcional. De qualquer forma, rode um grid de construção antes de apresentar, construa um grid de lockup, e entregue uma regra de clearspace.

Como montar um grid de logo do zero

Cinco passos que transformam um arquivo Figma em branco num grid base funcional, depois mais três que fecham o trabalho.

1. Escolha o tamanho da tela mestre. 1024 por 1024 pixels para marcas digital-first, 1200 por 1200 para as mais editoriais ou voltadas para impressão. O número tem que dividir de forma limpa pela sua unidade base.
2. Escolha a unidade base. 8 pixels para a maioria dos casos, 4 para trabalho tipográfico fino, 16 para marcas grandes ou simples. Configure um Layout Grid do Figma nessa unidade.
3. Defina a área ativa. A zona interna onde a marca se encaixa. Um padrão razoável é o 75 por cento central da tela, deixando 12,5 por cento de respiro em cada lado, e o respiro tem que ser um múltiplo limpo da unidade base.
4. Escolha a forma do grid base. Quadrado para marcas modulares e tipográficas, isométrico para profundidade implícita, hexagonal para geometria radial e celular, círculos de proporção áurea para marcas dominadas por curvas. A maioria das marcas acaba misturando um campo quadrado com círculos de proporção por cima.
5. Construa a marca sobre as guias. Toda dimensão mensurável se encaixa no grid. Onde correção óptica for necessária, quebre o grid deliberadamente e anote a quebra.
6. Rode um grid de construção sobre a marca finalizada e conserte o que ele expuser.
7. Construa o grid de lockup para cada arranjo que você vai entregar: horizontal, empilhado, marca sozinha.
8. Defina o clearspace numa unidade derivada da marca, e coloque nas diretrizes.

Os passos 1 a 5 levam trinta minutos na primeira vez, dez minutos depois. O resultado é um arquivo Figma que qualquer outro designer pode abrir e continuar sem adivinhar proporções. Figma é o padrão para a maior parte do trabalho de logo moderno; o Illustrator ainda tem controle de bezier mais afiado para a limpeza vetorial final. A mesma unidade base modular que mantém o logo coeso também sustenta o design de sistema de ícones e o ritmo tipográfico do entregável mais amplo de precificação de design de identidade de marca.

Perguntas frequentes

Quais são os quatro tipos de grid de logo?

Base, Construction, Lockup e Clearspace, acontecendo em quatro momentos diferentes. Um grid base é o andaime lançado antes de desenhar, e pode ser quadrado, isométrico, hexagonal ou de proporção áurea. Um grid de construção é a passagem de inspeção feita sobre a marca finalizada para expor âncoras, alças e erros de alinhamento. Um grid de lockup governa o espaçamento entre um logomark e seu logotype, e um grid de clearspace define a zona de exclusão que acaba nas diretrizes de marca.

Existe algo como um grid de logo circular?

Não como um sistema de grid nomeado. O que as pessoas geralmente querem dizer é um grid base de proporção áurea, construído a partir de círculos cujos raios se relacionam por 1,618, o estilo de construção do pássaro do Twitter e da Mastercard. Também podem querer dizer um grid de construção, já que esses são comumente desenhados como círculos sobre uma marca finalizada. Chamar isso de "grid circular" mistura a forma de um grid base com o tipo de grid, que é onde começa a maior parte da confusão.

O que é o grid de 8 pontos no design de logo?

Um grid base quadrado onde toda dimensão mensurável no logo, largura do traço, raio de canto, respiro, altura de caixa alta, espaçamento, é um múltiplo de 8 pixels. É o grid base dominante no design de UI e de logo modernos porque se alinha de forma limpa com iOS, Android e a maioria dos sistemas de design web. Um grid de 4 pontos é a mesma ideia numa resolução maior. Serve para monogramas geométricos, marcas com letras e selos modulares.

Como você usa a proporção áurea no design de logo?

Como uma verificação de sanidade nas proporções, não como um gerador. Designers geralmente desenham a marca primeiro, depois verificam se relações-chave, largura em relação à altura da marca, forma interna em relação à externa, folha em relação ao corpo numa marca como a Apple, caem perto de phi. Quando as proporções caem naturalmente perto de 1,618, a marca tende a parecer equilibrada. Forçar cada medida a obedecer isso é overengineering e geralmente produz resultados rígidos.

Todo logo precisa de um grid?

Todo logo precisa de uma regra de clearspace e, se tiver tanto uma marca quanto uma wordmark, de um grid de lockup. Nem todo logo precisa de um grid base rígido. Marcas construídas, monogramas geométricos, selos, marcas pictóricas modulares como Apple, Twitter, Mastercard, precisam de um porque a geometria tem que ser consistente. Marcas gestuais, scripts customizados como Coca-Cola ou Disney, ilustração desenhada à mão, mascotes de personagem, geralmente sofrem quando um grid é forçado sobre eles.

O grid é uma ferramenta, não uma virtude

Um grid é uma ferramenta para resolver problemas geométricos num logo. Não é um substituto para ter um logo que valha a pena resolver. Apple, o pássaro do Twitter, os discos da Mastercard, o pavão da NBC, a seta da FedEx, todas essas marcas viviam num grid quando foram entregues, mas nenhuma delas começou como um grid. Começaram como um conceito, um insight de posicionamento, uma decisão que rompia categoria sobre o que a marca estava tentando ser. O grid veio depois, para tornar o conceito reproduzível.

Designers no estágio inicial de uma marca construída às vezes invertem a ordem: abrem o Figma, montam um grid base elaborado, constroem um logo em cima dele, e olham para cima seis horas depois se perguntando por que o resultado é genérico. O grid produziu consistência, não um conceito. O conceito tem que vir de outro lugar, a decisão entre wordmark e lettermark, a estratégia de marca, o posicionamento de categoria.

O erro oposto custa igual: pular o grid inteiramente, esboçar à mão livre, nunca montar um sistema de verdade, e o resultado desvia nas proporções toda vez que é reconstruído e se desmancha em tamanhos pequenos. O ajuste não é forçar todo rabisco a um grid base. É saber qual dos quatro grids uma determinada marca realmente precisa, e quando. Se a marca pede uma marca construída geométrica, construa o grid base, rode as correções ópticas, documente as quebras. Se pede uma marca gestual, esboce primeiro e faça um grid leve. De qualquer forma, inspecione com um grid de construção, trave os arranjos, e entregue uma regra de clearspace.

Se você não tem certeza de qual a marca precisa, isso é um problema de estratégia, não um problema de logo, e nenhuma quantidade de trabalho de grid de construção vai resolver isso. Se você quer um sistema de logo construído sobre ofício de construção de verdade, com o grid base, as correções ópticas, as proporções, os lockups, e a documentação que mantém a marca coesa pela próxima década, contrate a Brainy. Entregamos sistemas de logo pela LogoBrainy e identidades de marca completas para times que querem a estratégia, a construção e as regras num único pacote.