Por que as palavras afetam o SVG?

Todo logo, ícone, figurinha e insígnia que o estúdio cria é desenhado primeiro e depois traçado em caminhos vetoriais, uma forma por área de cor chapada. Um desenho feito de poucas formas marcantes e chapadas vira poucos caminhos limpos. Sombreado, textura e degradês viram centenas de lascas. Então a coisa mais útil que uma descrição pode fazer é pedir uma arte que já seja chapada. As instruções do próprio estúdio pedem isso, e as suas palavras não devem desfazer esse pedido.

Três passos: um balão de fala, uma lista de tarefas e uma lupa

O que a descrição de um logo deve dizer?

Três coisas, numa frase só: o que ele mostra, para quem é e as cores.

uma folha de samambaia que também é uma seta para cima, para um app de poupança chamado "Fernvault", azul-marinho escuro e dourado quente

  • Uma ideia. "Uma folha que também é uma seta" é um logo. "Uma folha, uma moeda, um gráfico, um escudo e uma chave" é uma multidão.
  • Substantivos concretos. "Confiança" e "crescimento" não dá para desenhar. "Duas mãos", "um broto" e "uma seta subindo", sim.
  • O nome entre aspas, ou no campo de nome, só se o logo precisar escrevê-lo. Escolha a opção Logotipo se o nome for o logo (estilos de logo: logotipo, emblema e mascote).

Como descrevo um conjunto de ícones?

Liste os ícones como itens (coisas, não ações): xícara de café, croissant, pin de mapa, cartão fidelidade. Depois descreva o estilo uma vez só, na caixa de estilo. Ele entra em todos os ícones, e é isso que mantém o conjunto coerente.

Doze ícones flat em azul, azul-marinho e coral: uma lista de tarefas, uma bandeja de download, um conta-gotas, uma lâmpada, uma lupa, um balde de tinta, um lápis, uma foto, uma tesoura, um smartphone, um balão de fala e uma pilha de camadas

Os ícones dos nossos guias são um conjunto feito assim: doze itens, Cor chapada, cantos arredondados, as cores #0061fc, #0a2d8f e #ef6e50 e as palavras de estilo "ícones de ilustração de produto limpos e modernos, formas simples e marcantes, preenchimentos chapados, sem contornos, sem degradês".

Boas palavras de estilo falam de desenho, não de clima: "pontas arredondadas", "linhas grossas e uniformes", "cantos retos", "sem contornos", "formas robustas", "cores de pôster retrô anos 70". Evite palavras que acrescentam detalhes que o ícone não comporta em 24 px: "realista", "intrincado", "3D", "sombreado detalhado". Mantenha um só nível de detalhe na lista. Um "ponto" ao lado de um "horizonte de cidade" fica desequilibrado seja qual for o estilo.

Como descrevo figurinhas e insígnias?

  • Figurinhas: para um personagem, descreva quem ele é, uma vez só e com precisão: espécie ou objeto, formato do corpo, duas ou três cores, um detalhe ("um gato laranja redondo e gordinho, de barriga creme e bochechas rosadas"). Depois liste as expressões, com a legenda entre aspas: acenando "Oi!". Mantenha as legendas com duas ou três palavras. Cada letra é desenhada, então confira a ortografia antes de enviar.
  • Insígnias: o nome da conquista vai em cima, uma regra curta ou as mesmas palavras vão embaixo. Duas ou três palavras cabem muito melhor na curva do anel de uma insígnia do que uma frase. Descreva a imagem do centro como um único objeto simples: "um tênis de corrida", "uma montanha com uma bandeira".

O que devo deixar de fora?

Evite Por quê Peça no lugar
degradês, "brilhante", "reluzente" viram listras de cor chapada dois tons chapados
luz fotográfica, sombras, "realista" viram muitas lascas no traçado "flat", "formas sólidas"
textura fina, "grunge", "aquarela" viram pontinhos no traçado uma borda limpa, ou textura acrescentada depois no editor
texto minúsculo, slogans dentro da marca ilegíveis em tamanhos pequenos o nome ao lado da marca, numa fonte
mais de três cores conjuntos mais confusos, mais caminhos até três cores, pelo nome ou em hex

Como conserto o que voltou?

Mude uma coisa de cada vez. Se um conjunto está quase lá, use uma rodada e refaça ícones avulsos com uma observação curta ("mais simples, um tapete enrolado liso") em vez de começar do zero. Se um logo está quase lá, refine-o em palavras ("deixe o R mais grosso"). Se só uma cor ou uma forma solta está errada, abra o SVG no editor de SVG, o que é mais rápido que outra rodada. E quando o SVG tem muito mais caminhos do que o desenho tem formas, o desenho não estava chapado o bastante: peça "preenchimentos chapados, sem sombreado" e desenhe de novo.