1.1 Ilustração, foto, ícone, abstração

1.2 As funções da imagem

• Explicar um conceito abstrato (segurança, sincronização, colaboração) que uma foto não captura.
• Dar tom e emoção — o mesmo texto com uma ilustração lúdica ou com uma foto sóbria comunica coisas diferentes.
• Humanizar — mostrar pessoas, contexto, uso real.
• Diferenciar — num mar de produtos parecidos, o estilo visual é reconhecimento (ver Branding).
• Preencher e guiar — estados vazios, onboarding, erros, marketing.

1.3 A imagem como voz da marca

Tipografia e cor dão o "sotaque"; ilustração e fotografia dão o conteúdo emocional. É por isso que empresas investem em sistemas de ilustração próprios (Slack, Dropbox, Intercom, Headspace, GitHub) — o estilo vira tão reconhecível quanto o logo. A imagem também é onde a marca demonstra (ou falha em demonstrar) valores: quem aparece nas fotos, como as pessoas são representadas, que corpos e contextos são "normais".

2.1 Os eixos de um estilo

Um estilo é uma posição em cada eixo — e a disciplina de não sair dela. "Flat, geométrico, 2 cores + neutros, sem rosto detalhado, cantos arredondados, sem textura" é um estilo descritível e replicável.

2.2 O que dá consistência

• Peso de traço uniforme (se houver contorno) — como em Iconografia.
• Vocabulário de formas — os mesmos ângulos, os mesmos raios de canto, o mesmo jeito de desenhar uma mão, uma planta, uma nuvem.
• Perspectiva consistente — tudo em vista frontal, ou tudo em isométrico, ou tudo com o mesmo ponto de fuga.
• Regras de cor — quantas cores por ilustração, como a sombra é feita (uma cor mais escura? um multiply? um viés de matiz — ver Cor), o que nunca é colorido.
• Nível de detalhe por tamanho — o spot de 48px não é a ilustração de hero encolhida.
• Tratamento de pessoas — proporções (realista? estilizada? "corn on the cob"?), diversidade, expressão, se têm feições ou não.

2.3 Estilos comuns em produto (para conversar, não copiar)

• Flat geométrico — formas simples, poucas cores, sem gradiente. Fácil de escalar e manter.
• Flat com textura — o flat + grão/giz para calor (muito usado em fintech e saúde).
• Line/contorno — traço uniforme, preenchimento mínimo; próximo da iconografia grande.
• Isométrico — bom para sistemas, infra, "como funciona"; risco de rigidez.
• Blob / orgânico — formas fluidas, gradientes suaves, humor lúdico.
• 2.5D / papel recortado — camadas com sombra sutil, profundidade sem 3D.
• 3D render — Spline/Blender; forte, mas caro de manter consistente.

2.4 Escolher o estilo

• Alinhe com a personalidade da marca (ver Branding) e com a tipografia e a cor já definidas — os três têm de conversar.
• Considere custo de produção e manutenção: quem vai desenhar as próximas 50? um estilo muito complexo ou 3D pode ser insustentável para o time.
• Considere onde vai aparecer: se precisa de spots de 32px, um estilo denso não funciona pequeno.
• Faça um teste de estresse: desenhe 3 ilustrações bem diferentes (uma pessoa, um objeto, um conceito) no estilo — se elas parecem irmãs, o estilo tem regras suficientes.

3.1 Silhueta e leitura

• Uma boa ilustração se lê pela silhueta — preencha-a de preto e ela ainda deve dizer o que é. Se a silhueta é confusa, o desenho é confuso.
• Evite tangências (linhas que se encostam sem se cruzar) e sobreposições ambíguas — elas "achatam" e confundem a profundidade.
• Contraste de forma: alterne formas grandes/pequenas, retas/curvas, angulares/orgânicas para dar interesse e hierarquia.

3.2 Formas básicas e proporção

• Construa tudo a partir de círculo, quadrado, triângulo (e cilindro, esfera, caixa no 3D) — depois refine.
• Proporção é o que faz "parecer certo": a cabeça cabe ~7–8× no corpo humano realista; estilos estilizam essa razão de propósito (2–5×).
• Gesto: capture o movimento/energia com poucas linhas antes de detalhar — uma figura "de pé, rígida" é morta; uma com uma leve curva de ação (linha S) tem vida.

3.3 Luz e cor (o essencial)

• Cor local (a cor "própria" do objeto) × cor da luz e da sombra — a sombra não é a cor local escurecida com preto; tem um viés de matiz (frio, ou o complementar da luz). Ver Cor, Módulo 9.
• Em estilos flat, isso vira uma regra fixa: 1 cor local + 1 sombra + (às vezes) 1 luz, com matizes definidos.
• Uma fonte de luz por ilustração, consistente em toda a família (a luz vem sempre do mesmo lado).
• Valor (claro/escuro) antes de cor: se a ilustração funciona em tons de cinza, a cor só melhora.

3.4 Perspectiva (noção)

• 1 ponto de fuga: objetos de frente, profundidade recuando para um ponto. Simples, bom para interiores e "corredores".
• 2 pontos: objeto visto de quina — o mais usado para cenas.
• Isométrico: sem ponto de fuga, linhas paralelas a 30° — ótimo para diagramas de sistema; escolha e mantenha o mesmo ângulo.
• O erro comum é misturar perspectivas na mesma família (um spot frontal, outro isométrico, outro em 2 pontos) — decida uma.

3.5 Composição

• Ponto focal: um lugar para onde o olho vai primeiro (o maior contraste de valor/cor/detalhe).
• Regra dos terços / centro: colocar o foco fora do centro geométrico dá dinamismo; centralizar dá calma/formalidade.
• Fluxo: as formas e olhares guiam o olho num caminho; nada deve "sair" da composição sem querer.
• Espaço negativo: o vazio ao redor faz parte da composição (ver Layout, Grade & Espaçamento).
• Enquadramento para o uso: uma ilustração que vai ao lado de texto precisa de "peso" no lado oposto e respiro no lado do texto.

4.1 O estilo como regras escritas

Um estilo que só existe "no olho" de uma pessoa não escala. Documente:

• Grid e formato: os tamanhos de canvas (spot 48/64, feature 240, hero 480+), a área de segurança, a proporção.
• Formas: ângulos permitidos, raios de canto, peso de traço, como se desenham os elementos recorrentes (mão, planta, dispositivo, nuvem, seta).
• Perspectiva: qual, e o ângulo exato.
• Cor: a paleta (tokens de cor — ver Cor e Design Systems & Design Tokens), nº de cores por ilustração, a regra de sombra e de luz, o que nunca é colorido.
• Textura: qual, com que opacidade, aplicada como.
• Pessoas: proporções, feições, diversidade, poses, o que evitar.
• Detalhe por tamanho: o que entra e o que sai em cada canvas.
• Do's & don'ts visuais.

4.2 A biblioteca de assets

• Componentes modulares: personagens que se montam de partes (cabeça, corpo, pose, roupa, tom de pele), objetos, cenários, elementos de fundo — no Figma como componentes com variantes.
• Ilustrações prontas por caso de uso (os empty states, os erros, as features) — versionadas.
• Templates de composição para cada formato (onde fica o foco, onde fica o respiro para texto).
• Isso permite que designers de produto montem ilustrações consistentes sem serem ilustradores.

4.3 Naming, formatos e entrega

• Naming por caso de uso + variante: empty-state/projects, onboarding/step-2, error/404, spot/security.
• Formatos: SVG para spots e ilustrações vetoriais (leve, escalável, colorível por token quando possível); PNG (com @2x/@3x) para ilustrações com textura/gradiente complexo; Lottie para as animadas (onboarding). Ver Iconografia, Módulo 6, para a mecânica de SVG.
• Otimização: SVGO nos SVGs; compressão nos PNGs; peso-alvo por contexto (um spot < 15KB; um hero maior, mas lazy-loaded).
• Dark mode: ou uma versão por tema, ou um SVG com cores via currentColor/variáveis que troca de paleta.

4.4 Governança e escala

• Um dono do sistema de ilustração; um processo para pedir uma ilustração nova (briefing curto: onde, o que comunica, tamanho).
• Revisão contra as regras antes de entrar na biblioteca (a "grade da família" — todas juntas, elas parecem irmãs?).
• Versionamento como qualquer asset de design system; changelog quando o estilo evolui (e um plano para reilustrar o legado, ou conviver).
• Quando o volume é grande, contrata-se um ilustrador dedicado ou uma dupla; o sistema é o que permite freelancers produzirem "no estilo".

5.1 Os contextos e o que cada um pede

5.2 Ilustração + texto: não redundar

• A ilustração e o texto devem somar, não dizer a mesma coisa. Se o texto diz "Nenhum projeto ainda. Crie o primeiro." a ilustração não precisa ser "uma pasta vazia" literal — pode ser algo que dá tom (uma planta brotando, um foguete na plataforma).
• Evite a ilustração que exige legenda para ser entendida — nesse caso ela falhou ou o texto está fazendo o trabalho dela.
• Hierarquia: em estado vazio e erro, o texto e o botão são o principal; a ilustração é acento, não protagonista.

5.3 Acessibilidade da ilustração

• Decorativa (o texto ao lado já comunica tudo): alt="" / aria-hidden="true" — o leitor de tela a ignora.
• Informativa (transmite algo que o texto não diz — um diagrama, um gráfico ilustrado): alt descritivo, ou uma descrição longa próxima.
• Não depender de cor: um diagrama ilustrado que distingue partes só por cor falha para daltônicos — use forma, rótulo, textura (ver Cor e Acessibilidade Digital & WCAG).
• Contraste: se a ilustração carrega informação (texto dentro, ícones), respeite os mínimos.
• Movimento: ilustração animada respeita prefers-reduced-motion — versão estática equivalente (ver Motion de Interface).
• Representação: diversidade real; evitar estereótipos; pensar em quem se vê (ou não) representado.

5.4 Consistência sob pressão

• O momento em que o sistema quebra é quando chega um pedido urgente e alguém "só faz rápido" fora do estilo. Ter os componentes modulares e templates (Módulo 4) é o que evita isso.
• Se o marketing precisa de um estilo mais expressivo que o produto, defina isso como uma extensão documentada do sistema (como productive/expressive em motion), não como bagunça.

6.1 O que faz uma foto "de marca"

• Luz consistente — natural e suave? dura e contrastada? sempre a mesma direção/temperatura.
• Enquadramento — planos abertos ou fechados? espaço para texto? ângulo (altura dos olhos, de cima)?
• Cor — uma grade de cor (grading) aplicada a todas: os mesmos tons de pele, o mesmo "clima" (quente, dessaturado, filmíco). Ver Cor, Módulo 9.
• Assunto e direção de arte — pessoas reais em situações reais vs poses artificiais; o que aparece no fundo; styling (roupa, objetos).
• Autenticidade — o olhar treinado reconhece na hora "foto de banco de imagem": sorrisos exagerados, aperto de mão corporativo, "mulher rindo com salada". Isso reduz a confiança.

6.2 Critérios de seleção

• Serve à mensagem daquela tela/seção? (não "é bonita" — diz o que precisa dizer)
• Tem composição que aceita o crop e o texto que vão em cima (espaço negativo do lado certo)?
• Combina com as outras imagens da página (luz, cor, estilo)?
• Representa bem as pessoas (diversidade, dignidade, contexto real)?
• Tem licença adequada (uso comercial, web, o número de impressões, se precisa de model release)?
• Resolução e proporção suficientes para todos os crops responsivos?

6.3 Briefing e direção de um ensaio

• Moodboard (referências de luz, cor, enquadramento, atitude) — alinha o fotógrafo antes.
• Shot list: cada foto necessária, com formato (horizontal/vertical/quadrado), plano, e onde vai ser usada.
• Locação, casting, styling: definidos com antecedência; pessoas reais > modelos quando possível.
• No set: dirigir a atitude ("como se estivesse resolvendo um problema, não posando"), checar o enquadramento contra os layouts reais, prever o espaço para texto.
• Direitos: contrato de uso (onde, por quanto tempo, exclusividade), model releases assinados.

6.4 Tratamento consistente

• Uma receita de grading (LUT ou preset) aplicada a todas as fotos — mesmo contraste, mesma saturação, mesmo tratamento de pele.
• Regras de crop (proporções permitidas, onde o assunto fica).
• Tratamento de duotone/overlay se a marca usa (fotos viradas para uma cor da paleta).
• Documentar isso nas guidelines, com exemplos "antes/depois" e do's & don'ts.

6.5 Stock: bem usado vs mal usado

• Mal usado: a primeira foto "boa" de cada busca, sem tratamento, poses genéricas, misturando estilos — grita "genérico".
• Bem usado: selecionar com critério (composição, autenticidade), aplicar o mesmo grading da marca a todas, crop consistente, e combinar com ilustração/tipografia próprias para "puxar" o conjunto para a identidade.
• Fontes com curadoria melhor (Stocksy, Death to Stock, coleções autorais) > os megabancos genéricos.

7.1 O que é arte-direção

Arte-direção é a visão visual coesa por trás de tudo o que a marca ou o produto mostra — e a disciplina de fazê-la acontecer através de outras pessoas. O art director raramente executa cada peça; ele define os princípios, dá referências, dirige quem executa, e edita (aceita, ajusta, recusa) para manter a coerência. É "o olho" que garante que a ilustração, a foto, a tipografia, a cor e o movimento parecem a mesma coisa.

7.2 O processo

1. Entender: a marca (ver Branding), o público, a mensagem, o meio.
2. Pesquisar e referenciar: reunir muitas referências (não só de design — cinema, fotografia, arte, editorial) e destilar o que serve.
3. Definir princípios visuais: 4–6 frases que guiam toda decisão ("luz sempre natural"; "formas orgânicas, nunca rígidas"; "uma cor de acento por peça"; "pessoas em ação, não em pose").
4. Fazer um piloto: 2–3 peças-chave executadas até o fim, que viram o padrão.
5. Documentar: guidelines com os princípios, exemplos e do's & don'ts.
6. Dirigir e editar a produção contínua.

7.3 Dirigir freelancers (ilustrador, fotógrafo, 3D, motion)

• Briefing: o problema (não a solução), o contexto de uso, os princípios visuais, referências anotadas (por que cada uma), o formato/entregáveis, o prazo, o orçamento, e os direitos (uso, exclusividade, cessão).
• Referências com critério: mande o que representa o alvo, não "faça igual a isso"; explique o que tirar de cada referência.
• Feedback: específico e acionável ("a silhueta da figura central se funde com a mesa — separe"; "o grading está mais quente que o aprovado"), em rodadas definidas, priorizado (o que é bloqueante vs preferência).
• Respeitar o ofício: contratar alguém cujo estilo já é próximo do alvo; dar liberdade dentro dos princípios; creditar; pagar bem e no prazo.
• Rodadas: combine quantas (ex.: esboço → 1 rodada de ajuste → arte final → 1 rodada de ajuste); mudanças além disso são escopo novo.

7.4 Coerência entre disciplinas

• A ilustração, a fotografia, a tipografia, a cor, os ícones e o motion precisam parecer decisões da mesma pessoa. O art director é quem cruza: a paleta da foto é a mesma da ilustração? o peso do traço dos ícones conversa com o das ilustrações? o humor do motion bate com o das imagens?
• Arte-direção de produto (sistema, consistente, sustentável) × de campanha (peça única, pode ousar mais, vida curta) — regras diferentes, mas partindo dos mesmos princípios de marca.

7.5 O olho e a crítica

• Desenvolve-se olhando muito (cinema, fotografia, arte, editorial de qualidade) e analisando por que funciona.
• Crítica útil descreve o efeito ("a composição está estática, o olho não tem para onde ir") e sugere a direção ("quebre a simetria, dê um ponto focal fora do centro"), não "não gostei".
• Separar gosto pessoal de adequação ao briefing e à marca.

8.1 Texto sobre imagem

• Texto sobre foto precisa de contraste garantido no pior ponto da imagem — não só onde você testou (WCAG 4.5:1 / 3:1; ver Cor e Acessibilidade Digital & WCAG).
• Técnicas: scrim (uma camada semitransparente escura/clara sobre a imagem toda ou em gradiente do lado do texto), duotone da imagem, blur localizado, caixa sólida atrás do texto, ou escolher/dirigir imagens com área lisa para o texto.
• Um gradiente de preto 0→60% subindo do rodapé é o padrão mais robusto para legendas em cards de imagem.
• Evite depender só de text-shadow — ajuda pouco em fundos claros e ruidosos.

8.2 Crop responsivo com foco

<picture>
  <source media="(min-width: 1024px)" srcset="hero-wide.avif" type="image/avif">
  <source media="(min-width: 1024px)" srcset="hero-wide.jpg">
  <img src="hero-square.jpg" alt="..."
       width="1200" height="1200"
       style="object-fit: cover; object-position: 70% 30%;">
</picture>

• Art direction com <picture>: servir enquadramentos diferentes por breakpoint (um plano aberto no desktop, um crop fechado no mobile) — não só tamanhos.
• object-fit: cover + object-position: manter o assunto no quadro ao cropar; guardar um focal point por imagem (x%, y%).
• Ferramentas de CDN de imagem (imgix, Cloudinary, Vercel/Next Image) fazem crop inteligente e focal point por URL.

8.3 Formatos

8.4 Performance: LCP, CLS, lazy

• Sempre width e height (ou aspect-ratio) na <img> — reserva o espaço e evita CLS (layout shift). Ver Tipografia/Layout.
• srcset/sizes para servir a resolução certa a cada tela — não mande uma imagem de 2000px para um card de 320px.
• A imagem de LCP (o maior elemento visível no carregamento, geralmente o hero): loading="eager", fetchpriority="high", preload; as demais loading="lazy".
• Placeholders: cor dominante, LQIP/blur-up (uma versão minúscula desfocada), ou background com a cor média — evita o "flash" de espaço vazio.

8.5 Imagem em dark mode

• Fotos: um leve rebaixamento de brilho (filter: brightness(.85)) ou um scrim evita o "farol" de uma foto clara sobre fundo escuro.
• Ilustrações e diagramas: servir uma versão por tema (<picture> com media="(prefers-color-scheme: dark)") ou usar currentColor/variáveis no SVG.
• PNGs com "branco" de fundo aparecem como um bloco branco no dark — precisam de transparência real ou de versão escura.

9.1 Onde a IA generativa ajuda hoje

• Ideação e exploração: gerar dezenas de direções visuais rápido para um moodboard ou uma conversa de estilo.
• Variações de uma composição/paleta que você já definiu.
• Fundos, texturas e elementos de apoio — padrões, gradientes com textura, cenários genéricos.
• Edição: inpainting (remover/adicionar elementos), outpainting (estender o quadro para um crop novo), upscale, remoção de fundo, "generative fill" no Photoshop.
• Mockups e cenas de contexto para apresentação.

9.2 Onde ela ainda falha

• Consistência de personagem entre peças (o mesmo "mascote" em 8 spots) — difícil sem treino específico.
• Mãos, texto dentro da imagem, geometria precisa, contagem — melhorando, mas ainda escorrega.
• Controle fino — "mova este elemento 20px, deixe a sombra 10% mais suave" não é o forte de prompt.
• "Cara de IA" — uma estética média, lisa, meio brilhante, que o olho treinado reconhece e que não é a identidade da sua marca.
• Coerência com um sistema — encaixar no seu estilo definido (Módulo 4) exige muito ajuste manual.

9.3 Técnicas de controle

• Imagem de referência / style reference — alimentar o modelo com exemplos do seu estilo.
• Seeds fixas para reproduzir e iterar sobre um resultado.
• Control por pose/profundidade/contorno (ControlNet e equivalentes) — impor a composição.
• Treino de estilo (LoRA / fine-tune / "custom style") — noção: treinar um modelo pequeno nas suas ilustrações para gerar "no estilo". Exige um conjunto consistente e atenção a direitos.
• Fluxo híbrido (o mais realista para produto): IA gera a base ou o rascunho → o designer redesenha/vetoriza/recompõe por cima, ajusta cor aos tokens, corrige o que a IA errou, e integra ao sistema. A IA acelera; a decisão e o acabamento são humanos.

9.4 Consistência entre peças

Para uma série (empty states, blog), gerar tudo de uma vez com o mesmo prompt/seed/referência ajuda, mas quase sempre é preciso padronizar depois: mesma paleta (aplicar os tokens de cor manualmente), mesmo enquadramento/escala, mesmo tratamento de sombra, mesmas proporções de figura. Sem essa etapa, a série parece "quase" — e "quase" é o que denuncia.

9.5 Direitos, treino e ética

• O status jurídico de imagens geradas por IA (direito autoral sobre a saída, uso de obras protegidas no treino, licenças das ferramentas) varia por país e está em disputa/evolução. Algumas ferramentas oferecem indenização contratual e treino "limpo"; outras não.
• Para trabalho de cliente / uso comercial: verifique os termos da ferramenta (uso comercial permitido? quem detém a saída? há garantia?), evite gerar "no estilo de [artista vivo]", e prefira ferramentas com política de treino transparente.
• Disclosure: seja transparente com o cliente e, quando relevante, com o público, sobre o uso de IA.
• Representação e viés: modelos reproduzem vieses do treino (tons de pele, gênero, corpos, contextos) — revise ativamente.
• Quando não usar: quando a autenticidade é o ponto (fotos reais de clientes, retratos), quando a consistência de sistema é crítica e o ajuste manual sairia mais caro, ou quando os direitos não são claros para o uso pretendido.

10.1 Onde essa habilidade pesa

• Illustrator / brand illustrator: criar e manter o sistema de ilustração de uma marca/produto.
• Art director: a visão visual coesa, dirigir ilustradores/fotógrafos/3D, guidelines.
• Brand designer: ilustração e fotografia como parte da identidade (ver Branding, Logótipos & Lettering).
• Product designer: aplicar o sistema de ilustração, dirigir assets, imagem + texto na UI.
• Design systems: a biblioteca de ilustração, os tokens, a governança.
• Marketing / growth designer: heros, campanhas, seleção e tratamento de imagem.

10.2 Roadmap de estudo (6–8 semanas)

10.3 Banco de perguntas (com a resposta que aprova)

10.4 Projetos de portfólio que geram entrevista

1. Sistema de ilustração (âncora): as regras de estilo escritas + uma biblioteca de componentes modulares + uma série aplicada (empty states/onboarding) + o specimen, mostrando que qualquer ilustração nova parece da casa.
2. Série de estados vazios / onboarding: 6–10 ilustrações consistentes com o raciocínio de conceito, a relação com o texto e o markup de acessibilidade.
3. Guideline de fotografia + direção: os princípios visuais, exemplos aprovados/reprovados, uma receita de grading, e um briefing de ensaio (mesmo que fictício, ou um ensaio real dirigido).
4. Estudo de imagem + texto responsivo: um hero/card com imagem e texto, com art direction por breakpoint, otimização (AVIF, srcset, LCP/CLS) e dark mode — o antes/depois de performance.
5. Fluxo IA-híbrido documentado: uma série onde a IA entrou na ideação e o acabamento foi manual, com o passo a passo, o que foi corrigido, e as decisões de direitos/ética.

10.5 Fontes para continuar

• Desenho e composição: Figure Drawing / Successful Drawing (Andrew Loomis); Framed Ink (Marcos Mateu-Mestre); Color and Light e Imaginative Realism (James Gurney); Picture This (Molly Bang); Making Comics (Scott McCloud, para clareza visual).
• Ilustração de marca/produto: os estudos de caso públicos de sistemas de ilustração (Slack, Dropbox, Intercom, Headspace, GitHub, Shopify Polaris illustration), AIGA Eye on Design, It's Nice That.
• Fotografia: The Photographer's Eye (Michael Freeman); guias de direção de fotografia de marca; coleções curadas (Stocksy, Death to Stock).
• Arte-direção: The Art Direction Handbook; portfólios e process de estúdios (Pentagram, Collins, Koto, Order); Brand New (UnderConsideration).
• Web: web.dev sobre imagens responsivas, formatos modernos e Core Web Vitals; MDN sobre <picture>/srcset.
• Nesta trilha: Cor (grading, Módulo 9), Tipografia, Branding, Layout, Grade & Espaçamento, Design Systems & Design Tokens, Iconografia, Logótipos & Lettering, Motion de Interface; e Acessibilidade Digital & WCAG, Photoshop 2026, Adobe Illustrator.