O que é o estilo flat na ilustração e quando usar

O print do produto já mostra um dashboard cheio de informação. Do lado, a ilustração do hero vem com brilho, rosto pintado cheio de detalhes e um céu em degradê que vai do azul ao pêssego. A interface é sóbria; a imagem, nem de longe. Conhece a cena?

Já tirei arte assim de uma landing page porque ela brigava com a interface. Caprichar mais no prompt não resolveu: o problema era o estilo.

Uma ilustração em estilo flat é um desenho feito de formas simples e cores chapadas, com pouca sombra, quase nenhum degradê e nenhuma profundidade de mentira. É o desenho em si, não os elementos de interface em volta dele. Quando essa imagem precisa conviver com uma interface de verdade, abro o gerador de ilustrações flat com IA, escolho Flat em Estilo e descrevo só o tema.

Como é uma ilustração em estilo flat

Comece pelos preenchimentos. Cada forma tem uma cor só: a camisa é azul-marinho, a caneca é terracota. O fundo é liso, branco ou creme, para o título ao lado ter espaço para respirar.

As pessoas aparecem sem rosto. Um círculo vira cabeça, um bloco vira tronco, e mesmo assim dá para ler “pessoa no notebook”. É bem isso que eu quero: um rosto cheio de detalhes rouba o olhar que deveria ir para a captura de tela.

Mantenha a paleta curta: duas ou três cores que já existem no produto, mais um neutro. Uma cor aleatória a mais e a arte fica com cara de colada por cima. Comento a mesma regra em estilos de ilustração que funcionam em uma landing page: a imagem está ali para apoiar o produto, não para competir com ele.

Os limites de cada forma têm que ser nítidos: você aponta para qualquer uma e diz qual é a cor. Se a luz envolve uma bochecha, ou se um degradê faz o papel da sombra, isso já não é flat. É um render, e render briga com interface limpa.

Ilustração flat não é flat design

Os dois termos costumam aparecer juntos nas buscas, mas falam de coisas diferentes.

O flat design é um jeito de construir interfaces. Ele se espalhou depois que a Microsoft apresentou a linguagem visual Metro no Windows Phone 7, em 2010, e a levou para o Windows 8, lançado em outubro de 2012. Por volta de 2013, a própria página inicial da Apple já seguia a mesma linha.

O artigo do Nielsen Norman Group sobre interfaces flat e botões que parecem clicáveis é o alerta que até hoje mando para o meu time. Se todo controle vira um retângulo chapado, as pessoas deixam de saber onde dá para clicar. Depois veio o “flat 2.0”, incluindo a elevação do Material Design, que devolve uma sombra discreta a botões e painéis para a tela continuar fácil de ler.

Um desenho flat pode morar nessa tela e ser ainda mais simples que os botões. O botão talvez precise de sombra para parecer clicável; a imagem do hero, não. Coloque nela as mesmas sombras e você terá dois elementos gritando ao mesmo tempo.

Resumindo: o flat design monta a tela, e a ilustração em estilo flat é a arte que você coloca nela.

O estilo flat ao lado da line art, do 3D e do livro infantil

O Illustro oferece quatro estilos. Recorro ao flat quando o arquivo precisa se encaixar no layout de um produto e ainda sair em SVG. Os outros três não são um “flat mais caprichado”: são imagens de outra natureza.

A line art também é vetorial, então Mudar cores funciona nela, mas o que se vê é traço de tinta, não formas preenchidas. Passo para o gerador de ilustrações em line art com IA quando o layout pede mais um diagrama do que uma cena.

A Ilustração 3D é fosca, arredondada e iluminada como um objetinho fotografado em estúdio. Ela não sai em SVG e não é um arquivo do Blender. Se o flat fica sem peso ao lado de um produto divertido, leia como criar um mascote de marca em 3D sem Blender antes de insistir no Flat para uma função que não é a dele.

A arte de livro infantil é aconchegante de propósito. Uma história para crianças pede isso; uma tela de configurações, não. Deixe as ilustrações de livro infantil para as histórias. Esse estilo também não é vetorial, então não dá para trocar as cores forma por forma, como no flat.

Onde o estilo flat faz sentido

Telas vazias. Onboarding. Uma linha de recursos logo abaixo do título. Um slide que precisa combinar com o site. Em todos esses lugares, a explicação fica por conta do texto e do print. A imagem só precisa deixar claro de que momento se trata: uma pessoa, um notebook, uma planta, uma caixa de entrada vazia.

Um hero largo precisa de área livre. Se a arte ocupa todos os cantos, o título fica sem lugar. Peça um único tema com fundo liso e veja como a imagem fica enquadrada no celular antes de fechar a versão para desktop.

Manter a mesma pessoa do começo ao fim de um fluxo já é outra história. Gerar de novo não garante que ela continue a mesma. Para isso existe o pacote de ilustrações.

Você escreve um tema e uma descrição do personagem, clica em Planejar o pacote para montar as cenas (planejar é grátis) e depois em Fixar personagem. A ficha do personagem custa 3 créditos, e você aprova essa ficha antes de gerar qualquer cena. Cada cena custa outros 3 créditos, porque os pacotes rodam no Illustro MAX. Um pacote de 4 cenas sai por 15 créditos.

Espere um personagem reconhecível de uma cena para outra, não uma cópia perfeita pixel por pixel.

Quando deixo esse estilo de lado

Quando a graça está no rosto. No Flat, as figuras não ganham olhos nem boca. Se a ideia depende da expressão, o estilo é outro.

Em livro ilustrado, também. Ali o que conta é a suavidade, e de qualquer forma você não teria um SVG.

Quando o mascote precisa parecer um brinquedo em cima da mesa. Isso é Ilustração 3D, exportada em PNG ou JPEG.

Em logo. Formas flat pequenas até ficam legíveis, mas o Illustro não é um gerador de logos. Uma marca que vai estampar mil brindes continua pedindo um designer.

Quando a marca já tem um sistema de ilustração próprio, que um prompt não consegue sustentar. O flat entrega uma primeira versão que dá para publicar ainda esta semana, mas não substitui a direção de arte da peça principal de uma campanha.

Como escrever o prompt de uma ilustração em estilo flat com cores editáveis

Este é o prompt que eu colo de verdade e depois vou ajustando:

“Pessoa usando notebook, vista de lado, formas geométricas simples, camisa azul-marinho, caneca terracota, fundo creme, sem olhos nem boca, sem degradê”

Diga o tema, a pose e duas ou três cores de preenchimento. Deixe de fora “cinematográfico”, “8k” e “iluminação dramática”. Essas palavras pedem justamente a profundidade que você quer evitar.

Prompt que pede lente de câmera não sai flat. “Mulher num escritório ensolarado, estilo cinematográfico, rosto detalhado, bokeh suave” pede, na prática, uma fotografia. A versão flat nomeia formas e cores e deixa claro que não quer rosto nem degradê.

Se o primeiro resultado ainda tem cara de render, gere de novo no Illustro Light antes de gastar créditos do MAX numa cena que você não quer. Como criar um arquivo SVG com IA e mudar as cores depois parte da mesma ideia: peça um desenho, não uma fotografia.

Agora, os controles.

1. Escolha Flat em Estilo.
2. Use o Illustro Light (1 crédito) enquanto a pose ainda é um palpite. Passe para o Illustro MAX (2 créditos) quando a cena for a que você vai publicar. O editor abre no Light, então confira o modo antes de clicar em Gerar.
3. Escolha um Tamanho: Quadrado (1024×1024), Vertical (1024×1536) ou Horizontal (1536×1024). Quadrado para um espaço na interface, Horizontal para uma seção hero. Não dá para digitar um tamanho personalizado em pixels.
4. Se a pose está certa e o amarelo está errado, abra Mudar cores. Mudar as cores é grátis: troque uma cor em todos os lugares onde ela aparece, ou clique numa forma e mude só aquela.
5. Um objeto novo ou outro gesto (a figura acenando, por exemplo) é com Editar com IA (3 créditos). Mudar cores não desenha nada novo.
6. Baixar em PNG ou JPEG é grátis. Exportar em SVG custa 1 crédito nas ilustrações que você gerou. Leve esse arquivo para o Figma com o plugin do Illustro, ou exporte e arraste você mesmo o SVG para a tela do Figma.

Já tem uma foto com a pose? Transforme a foto em desenho. A ferramenta só gera no estilo flat, custa 3 créditos, e depois você muda as cores como em qualquer outro arquivo flat. Envie apenas fotos de pessoas que autorizaram o uso da imagem delas (no caso de uma criança, com a autorização dos pais ou responsáveis).

Perguntas frequentes

O que significa flat na ilustração?

Flat quer dizer que a imagem não finge profundidade. As formas ficam num plano só, a cor é chapada e a sombra é mínima ou nem existe. No layout de um produto, esse visual evita que a ilustração dispute atenção com botões, textos e capturas de tela. Se dá para sentir de onde vem a luz numa bochecha, o desenho já deixou o flat para trás.

Para que serve uma ilustração em estilo flat?

Ela aparece em seções de sites, no onboarding de apps, em telas vazias e em slides: em qualquer lugar onde uma cena simples precisa combinar com a interface. Os times recorrem a esse estilo quando o protagonista é o print e a imagem só precisa mostrar uma pessoa, um objeto ou uma caixa de entrada vazia. Exporte em SVG quando o arquivo precisar crescer sem perder qualidade e mantenha a paleta curta, para aproveitar as cores do próprio produto.

Estilo flat é a mesma coisa que flat design?

Não. Flat design é um estilo de interface. O Metro apareceu no Windows Phone 7 em 2010, o Windows 8 levou esse visual para o desktop em outubro de 2012, e as interfaces de produto vieram atrás.

A ilustração em estilo flat é a arte que você coloca dentro dessa interface. O botão ainda pode ter uma sombra discreta para parecer clicável. A imagem pode continuar mais chapada que o controle.

Ilustrações em estilo flat são arquivos vetoriais?

No Illustro, o que você gera em Flat vira um SVG com cores editáveis. Baixar esse SVG custa 1 crédito. PNG e JPEG são grátis.

Mudar cores troca a cor de um preenchimento ou apaga uma forma. Não acrescenta desenho novo, como faria a ferramenta Caneta. Livro infantil e Ilustração 3D não são vetoriais, então isso não vale para esses estilos.

Como se chama um desenho em estilo flat?

Também é chamado de ilustração vetorial flat, ilustração em flat design ou desenho flat. Eu uso “flat” para formas chapadas quase sem sombra. Se a imagem é feita principalmente de contornos, é line art, não flat. Se parece um brinquedo de massinha, é Ilustração 3D.

Posso usar uma ilustração em estilo flat para fins comerciais?

Sim, depois que você compra créditos: qualquer pacote de créditos com pagamento único libera o uso comercial, desde que você siga os termos. O que você cria com os créditos grátis do cadastro é para uso pessoal até a primeira compra, que passa a cobrir essas imagens também. Só não use esses arquivos para treinar ou avaliar outro sistema de IA.

Na página de preços do Illustro, os pacotes de créditos com pagamento único aparecem com o uso comercial liberado. Uma campanha que precisa de um sistema de marca sob medida ainda pode pedir o trabalho de um ilustrador depois do rascunho.