Trabalhar ao lado de um designer pode ser um processo divertido e colaborativo. Até você se dar conta que vocês falam duas línguas bem diferentes. Se a única coisa que você sabe dizer quando precisa dar um feedback sobre um layout é “Não sei direito, mas quero algo que chame mais atenção”, está na hora de se atualizar e aprender alguns termos de design.

Para ajudar você a saber do que está falando, elaboramos uma mini-enciclopédia para os novatos quando o assunto é criação, com ilustrações produzidas pela equipe de design da Shutterstock.

Margem de sangramento

graphic design terms bleed

O termo “sangrar” vem do design gráfico, onde a tinta literalmente sangrava para fora da borda de um layout. A margem de sangramento é tudo o que fica fora da “linha de corte”, que definirá o tamanho final da página. Leiautar além da margem de sangramento é comum de se ver quando a arte da capa chega até a borda do livro/revista sem a margem externa em torno delas.

Embora este termo tenha surgido no mundo da impressão, ele também é bastante usado quando se fala em web design, indicando elementos de um website que preencham completamente uma porção horizontal de uma página online até suas bordas. Imagine um item em formato de um banner que corta toda a parte superior da tela. Usar um efeito de sangramento, seja online ou offline, cria uma experiência de imersão para os telespectadores e dá ainda mais destaque para o elemento que está “sangrando” fora da página.

Grid

graphic design terms grid

Todo designer sabe o que é grid. Este conjunto invisível de linhas verticais e horizontais tem o intuito de organizar todos os elementos de uma página, incluindo textos, gráficos (em webdesign) e elementos de UI. Grandes portais de notícias, como o The New York Times, ou o Estadão, têm grids extremamente marcados, com conteúdo rigorosamente separado em colunas.

Em produtos online, as grids podem ser igualmente restritivas ou mais flexíveis, acomodando assim elementos que podem se estender por várias colunas em uma página. Os princípios da teoria do grid são considerados novos quando o assunto é webdesign, mas existem muitas aplicações quando pensamos em design responsivo. À medida que um usuário redimensiona uma janela de exibição, um grid “fluido” remodela o conteúdo da página para melhor atender essa nova visualização.

Gradiente

graphic design terms gradient

Gradiente refere-se menos a um princípio do design e muito mais a como princípios já existentes são aplicados a um elemento de design. Gradiente é uma aplicação gradual de cor, tamanho, forma ou outros estilos a um layout, marca, logo etc. Comumente, pessoas enxergam o gradiente apenas como uma forma de gradação de cor e tom. Ainda, o efeito gradiente quando aplicado corretamente dá uma perspectiva diferente a um objeto com forma plana.

Aplicar um gradiente a uma cor significa uma nova matiz. Gradientes ajudam a dar uma sensação de movimento e forma a elementos estáticos, tornando um círculo “chapado”, por exemplo, em uma esfera muito mais realista. Artistas como o pintor inglês J.M.W. Turner lançam mão do gradiente para dar um ar expressionista/realista a suas obras.

Hierarquia

graphic design terms hierarchy

A hierarquia de um produto determina como o usuário irá percorrer seus olhos pelo conteúdo (de uma tela, aplicativo etc.). Itens maiores, de cores diferentes e em uma posição privilegiada tendem a ser os mais importantes e por onde o usuário vai começar a “navegar.” Em seguida, seus olhos percorrem o próximo item, menos proeminente e assim sucessivamente para o final da página e outros pequenos detalhes.

Layouts com hierarquia flat dão a todos ou à maioria dos elementos da página um peso igual, forçando usuários a mergulharem no conteúdo para determinarem o que é mais importante. No entanto, o uso de uma hierarquia bem marcada faz com que leitores consigam fazer uma leitura muito mais dinâmica do conteúdo e entender as informações principais rapidamente. Por exemplo, uma capa de revista tipicamente traz uma forte hierarquia de conteúdo, com uma imagem principal e vários títulos dimensionando a importância de cada manchete. Em webdesign, a hierarquia de uma página pode ser concebida para complementar padrões típicos de leitura, facilitando a experiência do usuário, ou para destacar ou diferenciar padrões, desafiando usuários a olharem para a página de um jeito diferente.

Kerning

graphic design terms kerning

Kerning é a prática de ajustar o espaçamento entre os caracteres de determinada fonte a fim de criar ritmo e consistência. Enquanto o kerning pode ser aplicado a qualquer texto em um layout, é mais comum o uso desta técnica em headlines editoriais e logos. Dependendo da fonte que está sendo usada, alguns caracteres (tipicamente em pares como “AV” ou “WA”) podem precisar de mais ou menos espaço entre suas letras. A técnica do kerning faz com que caracteres pareçam ainda mais espaçados, além de criar um efeito dramático quando o espaço entre as letras se torna exagerado. O site Kern Type traz um jogo online para ajudar designers a desenvolverem um olhar para o espaçamento em tipografia, fazendo com que os jogadores tenham que ajustar manualmente posições de caracteres de diversas fontes.

Órfãs/Viúvas

graphic design terms widow orphan

Nada deixa um designer mais desesperado do que uma linha órfã teimosa ao final de um parágrafo. Uma linha órfã nada mais é do que uma única palavra que fecha um texto, criando um final inesperado e fazendo com que seu leitor tenha uma experiência dissonante e desagradável. Similarmente, uma “viúva” é quando uma frase do final de uma coluna termina na topo da outra página/coluna. Órfãos e viúvas podem ser corrigidas quando ajustamos a largura das colunas de conteúdo (juntamente com o grid), ou editando o próprio conteúdo.

Espaço negativo

graphic design terms negative white space

Geralmente, usuários concentram sua atenção nas áreas coloridas de uma página web. Mas espaços vazios também merecem atenção especial. Os espaços em branco (ou espaço negativo) referem-se a todo espaço ao redor ou entre os elementos de design.

Aumentar o espaço negativo em um layout faz com que a atenção de seus usuários recaia em um ou dois elementos principais, dando uma sensação de relaxamento e concentração. Por outro lado, diminuir espaços negativos pode dar mais dinamismo para um layout. As best practices, tanto em design impresso, quanto editorial, incentivam o uso do espaço em branco entre seus elementos de design.

Wireframe

graphic design terms wireframe

Quando um trabalho é muito complexo, geralmente o designer terá que passar pelo processo de wireframing. Wireframes são mockups em preto e branco (ou cinza) que projetam com precisão a navegação, hierarquia de elementos e informação de uma página, produto ou layout sem se preocupar muito com detalhes. Nesta fase, o objetivo é deixar claro como todo conteúdo irá se alinhar com o design, além de introduzir como algumas interações básicas (para webdesign) vão funcionar.

Wireframing tende a ser um processo de colaboração entre designers, criadores de conteúdo, desenvolvedores web e gerentes de projeto. É o momento exato para se certificar de que todos os elementos fundamentais estão sendo levados em consideração (Serão usados um ou dois fotógrafos? Como será o ajuste do texto na página?), antes mesmo de um designer começar a leiautar tudo. Wireframes podem ser criados em qualquer software de design, mas existem ferramentas gratuitas como o Moqups e Balsamiq que podem ajudar mesmo quem não é designer a desenhar seus próprios wireframes.

Altura-x ou x-Height 

graphic design terms x height

A X-height, ou Altura-x de uma fonte é, literalmente, a altura do “x” minúsculo em determinada tipografia. Enquanto a maioria das pessoas está familiarizada com o “point size” de uma fonte (o tamanho da fonte que você seleciona em uma plataforma de texto), o X-height é uma medida específica que indica a diversidade existente entre letras minúsculas e maiúsculas em uma tipografia. Fontes com uma Altura-x maior serão mais uniformes quando comparamos o tamanho do “x” com letras como “h” ou “t”. Enquanto fontes com uma Altura-x menor, como a Perpetua, terão mais contraste entre minúsculas e maiúsculas. Fontes com Altura-x como a Antique Olive são altamente legíveis quando em tamanhos maiores e são ótimas para títulos, banners ou outras peças. Enquanto isso, fontes com altura menor, como a já mencionada Perpetua, funcionam bem com tamanhos de fontes menores e para redação de conteúdo, como textos de um artigo. Fontes com Altura-x menores tendem a ocupar menos espaço.

119031-Screen_Shot_2016-07-10_at_9.22.47_AM
<em>A Antique Olive tem uma altura-x maior, tornando a leitura em um fonte maior agradável.</em>
119032-Screen_Shot_2016-07-10_at_9.24.12_AM
<em>Perpetua é uma fonte de altura-x pequena com muito mais contraste entre caracteres minúsculos e maiúsculos.</em>

E aí, gostou da nossa mini-enciclopédia? Gostaria de ver outro termo explicado aqui? Deixe sua opinião nos comentários abaixo.