fbpx

Um guia simples: termos mais usados no design

Quem trabalha na criação de apps precisa aprender conceitos de diversas áreas, incluindo programação, marketing, entre outros. E conhecer o básico de design pode ser crucial para o sucesso de seu app: isso é importante para a interface e experiência de usuário; e também influencia na divulgação em seu site e em redes sociais.

No entanto, nem sempre o jargão do design é tão simples de compreender. Às vezes, ouvimos alguns conceitos tantas vezes, mas será que realmente sabemos o que eles querem dizer? Para ajudar nessa tarefa, elaboramos um pequeno vocabulário com termos essenciais e o que eles significam.

Tipografia

“A tipografia é o componente visual da palavra escrita”, como explica o site Practical Typography. São os elementos que o texto ganha ao ser exibido visualmente, seja no papel, numa tela de computador ou em um outdoor. Trata-se não apenas da fonte escolhida, como também do posicionamento das letras e das palavras.

Serifa

A serifa é o pequeno traço, curva ou prolongamento extra nas extremidades de certas letras.
Alguns especialistas acreditam que as fontes serifadas podem facilitar a leitura em textos impressos, porque ajudariam a agrupar visualmente as letras de uma palavra – e as pessoas leem palavra por palavra, e não letra por letra.

No entanto, diversos estudos mostram que o efeito na legibilidade é muito pequeno; ela é mais afetada por fatores como a altura-x (que discutiremos abaixo).

Sans-serif

“Sans” significa “sem”; uma fonte sem serifa não inclui qualquer traço ou curva extra nas extremidades das letras.

Fontes sans-serif são bastante comuns em interfaces de apps e em textos online. Um motivo seria a diferença na resolução das telas contra a resolução da impressão no papel. Mesmo as telas mais avançadas chegam a cerca de 500 pontos por polegada, enquanto é fácil encontrar texto impresso com 1.000 pontos por polegada.

No entanto, estudos não apontam grandes diferenças na legibilidade entre fontes com e sem serifa. Ou seja, você não precisa se restringir a fontes sans-serif em seu app ou site.

Altura-x, ascendente e descendente

Na busca pela melhor legibilidade, é importante atentar também para a altura-x. Trata-se da distância entre a linha de base dos caracteres e a linha média das letras minúsculas. Assim:

O ascendente é a parte da letra minúscula que fica acima da linha média (presente em letras como “d”, “l” e “t”); enquanto isso, o descendente é a parte que fica abaixo da linha de base (presente em letras como “g”, “q” e “p”).

A altura-x – e, portanto, o tamanho dos ascendentes e descendentes – ajudam a melhorar a legibilidade, especialmente em tamanhos pequenos, permitindo diferenciar melhor um “h” de um “n”, por exemplo.

Kerning

Kerning é o espaço entre dois caracteres (letras, números, pontuação etc.). Ao ajustar este espaço, você melhora a legibilidade e até mesmo evita alguns constrangimentos. Recentemente, a Apple teve que aumentar o espaço entre as letras “c” e “l” para não parecerem um “d” e mudarem o sentido da palavra “click”.

Tracking

Enquanto o kerning é o espaço entre dois caracteres, o tracking é o espaço entre grupos de letras. Este é um aspecto importante, dado que a legibilidade depende de como as letras são agrupadas visualmente – lembre-se, lemos de palavra em palavra, não de letra em letra.

Leading

Leading é o espaçamento entre as linhas do texto, geralmente medido como o espaço entre as linhas de base. A ideia, como sempre, é melhorar a legibilidade, garantindo uma distância adequada entre as letras da parte inferior e da parte superior.

Hierarquia tipográfica

A hierarquia tipográfica ajuda a organizar visualmente o texto em ordem de prioridade. Ela chama a atenção do leitor para os elementos mais importantes (como o título) e mostra onde começa e onde termina uma seção do texto. A hierarquia combina pesos diferentes de fontes e espaçamento entre linhas.

Espaço em branco

Na interface, a ausência de elementos também é um aspecto importante. O espaço em branco, ou espaço negativo, é a área que fica entre os elementos gráficos, imagens, textos e qualquer outra coisa. (Vale notar que ela não precisa necessariamente ter a cor branca.)

Você pode aproveitar o espaço em branco para melhorar a legibilidade, e também para priorizar recursos de seu site ou app. Um exemplo clássico é a página inicial do Google, que usa o espaço negativo para o usuário se concentrar na barra de pesquisa.

Teoria das cores

A teoria das cores cria uma estrutura lógica para as cores, algo importante no design e marketing para transmitir um significado. Ela consiste em dois conceitos básicos: o círculo cromático (ou roda das cores); e a harmonia das cores.

Círculo cromático

O círculo cromático reúne as cores primárias (vermelho, amarelo e azul) e as cores secundárias (verde, laranja e roxo) e terciárias que delas resultam.

Harmonia de cores

Adaptado daqui.

Adaptado daqui.

Existem três tipos principais de harmonias. Os esquemas de cores complementares reúnem cores opostas uma à outra no círculo cromático – por exemplo, azul e laranja. É ideal para criar contraste, e funciona melhor quando você combina cores quentes (vermelho, laranja, amarelo) e frias (azul, verde, violeta) – uma delas será a dominante, para destacar os elementos mais importantes da interface.

Os esquemas de cores análogas usam as cores que estão próximas umas das outras no círculo cromático: por exemplo, vermelho, laranja e vermelho alaranjado. Isso pode criar um visual mais sereno e acolhedor.

E temos os esquemas de cores triádicas, que reúnem três cores separadas pela mesma distância no círculo cromático: por exemplo, laranja, verde e violeta. Esta harmonia reúne as vantagens dos dois esquemas anteriores: tem riqueza de cores e cria contraste.

Logotipo e marca

O logotipo (ou logo) é a forma característica de representar o nome de uma empresa ou produto, e consiste em um símbolo gráfico e em tipografia. É fácil se lembrar dos logos do Google, Sony, Coca-Cola e outras. Ou seja, esta é a imagem da marca.

A marca, por sua vez, conecta a missão e visão de uma empresa aos seus consumidores. Ela é a união do logotipo e da identidade visual, que envolve as cores escolhidas para representar a empresa e até mesmo as emoções e experiências que ela evoca.

“Logomarca”, no entanto, é um neologismo controverso que não tem muito motivo de existir. O prefixo “logo” vem do grego, e o sufixo “marca” vem do germânico, e ambos querem dizer “significado”.

Esqueumorfismo

O esqueumorfismo (ou skeumorfismo) usa gradientes, texturas e sombras para fazer objetos digitais parecerem “reais”. Neste caso, os elementos digitais são projetados para se aproximarem de algo do mundo físico.

Esta tendência de design foi fortemente adotada em interfaces de computador e também no iOS, mas vem caindo em desuso há alguns anos, suplantada pelo flat design.

Flat design

O flat design é uma abordagem minimalista praticamente oposta ao esqueumorfismo. Ela dá prioridade a espaços em branco, cores vivas e desenhos bidimensionais. A ideia é criar uma experiência autenticamente digital, sem ficar limitada ao mundo analógico que conhecemos.

As interfaces com flat design vem evoluindo ao longo dos anos para se tornarem mais humanas e mais intuitivas. Por exemplo, o iOS 10 indica mais claramente os botões da interface – em vez de deixar para o usuário adivinhar qual texto é “clicável” – porém mantendo seu aspecto bidimensional.

Se você se interessou, também escrevi esse post sobre 7 princípios de UX que afetam diretamente o engajamento do usuário. Estou disposto a tirar suas dúvidas e analisar o seu projeto de acordo com essas definições. Me mande um e-mail em julio.viegas@sofist.com.br ou ligue em (19) 3291-5321. Será um prazer ajudá-lo! =)