Em resumo
Software não tem um corpo fotogênico: não há o que fotografar, embora toda tela peça imagens. O conjunto visual de um produto de tecnologia não é “uma ilustração bonita”, mas uma série coerente: hero da página inicial, blocos de funções, capas de blog, estados vazios e e-mails. Ela nasce de imagens da mesma família.
O site de um SaaS enfrenta uma tarefa ingrata: explicar algo invisível com o mesmo espaço que uma loja usa para mostrar sapatos. Daí surgem dois extremos: capturas de interface sem vida ocupando a largura inteira e as conhecidas “mãos sobre o notebook”, que em 2026 passam uma impressão de improviso. A saída é um conjunto que explique o produto e preserve a linguagem da home ao rodapé do e-mail.
O que ilustrar quando o produto é software?
Ilustre não o produto em si, mas o trabalho que ele realiza e o mundo em que esse trabalho acontece. O usuário compra o resultado — relatório no prazo, estoque correto, lançamento tranquilo —, não a interface. A imagem mostra o resultado e o contexto; a captura mostra o mecanismo. As duas se completam.
Há três fontes honestas de imagem para um produto de tecnologia:
- abstração — nós, fluxos, camadas e grades: a estrutura do sistema;
- ambiente — postos de trabalho, data centers, armazéns e fábricas: onde o produto é usado;
- cena de objetos — dispositivos, telas e equipamentos sem uma interface inventada.
Capturas continuam sendo capturas: ficam ao lado da explicação de uma função, não no lugar de decoração.
Quais peças formam o conjunto visual de um produto?
Ele é formado por seis espaços recorrentes, cada um com uma função própria.
O conjunto é montado uma vez e depois cresce uma imagem por vez.
Hero da página inicial. Uma imagem que sustenta o sentido do produto. É a mais vista e define a linguagem das demais.
Blocos de funções. De três a seis imagens menores, todas da mesma família. A consistência importa mais aqui: uma mistura parece material coletado ao acaso.
Capas de blog e documentação. Sempre são necessárias em quantidade maior que a prevista: cada material pede a sua.
Estados vazios e erros. Uma tela sem dados é um momento de possível abandono. Uma ilustração calma funciona melhor que um emoji triste.
E-mails e notificações. Topo da mensagem, imagem de newsletter e capa de release.
Redes sociais e eventos. Anúncios, capas de webinars, slides e estandes.
Como mostrar o invisível sem cair num diagrama?
Use três recursos que funcionam para qualquer produto técnico.
Mostre a entrada e a saída. Todo sistema recebe algo e entrega algo: caixas e nota fiscal, ligação e transcrição, rascunho e documento assinado. O “antes e depois” explica o produto por objetos, sem tentar fotografar software.
Mostre o local de trabalho. Logística pede armazém e carga; fintech, caixa e agência; software industrial, fábrica e painel elétrico. O ambiente diz “isso é para nós” e também filtra quem não é o público certo.
Mostre a escala. Um dispositivo e uma fileira de dispositivos comunicam coisas diferentes. Se o produto fala de volume — milhares de pedidos, centenas de pontos, dezenas de armazéns —, a imagem deve mostrar repetição e conjunto.
A abstração é um quarto recurso, com uma condição: deve usar as formas da interface, com os mesmos cantos, paleta e espessura de linhas. Uma abstração genérica não se distingue de um papel de parede.
Como reconhecer um clichê e substituí-lo?
Clichê é uma imagem que cabe no site de qualquer produto sem mudar uma palavra. A alternativa sempre traz mais contexto.
Batido
- Mãos sobre um notebook numa sala de reunião
- “Cérebro digital” azul e rede neural feita de pontos
- Cadeado sobre código binário
- Aperto de mão diante de um gráfico ascendente
- Robô com rosto humano
Funciona
- Posto de trabalho de quem realmente usa o produto
- Fluxo de dados representado como objeto
- Data center, armazém, fábrica ou cabine: o ambiente da tarefa
- Close do dispositivo usado pela pessoa
- Abstração feita com as formas visuais do produto
O teste é simples: coloque o nome de um concorrente sob a imagem. Se ela continuar igual, é clichê.
Quais requisitos a web impõe a essas imagens?
O layout, e não o gosto pessoal, define os critérios: a imagem precisa suportar recorte, tema escuro e tela pequena.
Checklist antes de colocar uma imagem no site
- Use 16 : 9 horizontal para hero e capas; quadrado para cards de funções.
- Prefira lado maior a partir de 1600 px para evitar perda em telas retina.
- A composição suporta recortes laterais; o elemento principal fica a pelo menos 8% da borda.
- Há uma área calma para título e botão, sem cobrir rosto ou padrão.
- A imagem funciona no tema escuro, sem um fundo branco ocupando tudo.
- Depois da compressão, o peso fica em centenas de kilobytes, não megabytes; use WebP ou AVIF.
- Não há logotipos alheios, interfaces reconhecíveis nem imitações de marcas conhecidas.
- Não há texto dentro da imagem, que teria de ser refeito em cada idioma.
Quais necessidades uma imagem pronta resolve?
Estas são cinco tarefas que levam equipes de produto ao catálogo.
Landing page de uma nova função
Um hero e três ou quatro imagens para os blocos. Obras do mesmo briefing deixam a página coesa.
Blog e newsletter
Uma capa para cada artigo. A série dá identidade aos conteúdos, e o assinante reconhece a mensagem antes mesmo de ler o assunto.
Documentação e treinamento
Abstrações discretas e bases visuais que recebem texto.
Estados vazios da interface
Imagens pequenas, claras e sem drama, que ajudam a explicar o próximo passo.
Apresentação a investidores e eventos
Imagens amplas do ambiente e dos equipamentos, slides coerentes e visual do estande.
Tecnologia: dispositivos, telas, equipamentos e postos de trabalho — a base material de um produto tecnológico.
Abstração: fluxos, grades, camadas e gradientes para diagramas, fundos e estados vazios.
Ícones: sinais pequenos para blocos de funções e listas de recursos.
Mockups e modelos: dispositivos e telas que recebem a captura do produto.
Não encontrou o tema? Abra o catálogo completo: a busca considera o título e a descrição da obra.
Como manter uma linguagem única com tantas imagens?
Defina três parâmetros e não fuja deles: luz, paleta e escala.
Luz. Escolha direção e temperatura: lateral quente ou difusa fria. Misturar essas opções denuncia uma colagem mais do que mudar de assunto.
Paleta. Mantenha duas ou três cores do produto e um destaque. Imagens em que o destaque disputa atenção com o botão precisarão ser refeitas.
Escala. Hero em plano aberto, funções em plano médio, ícones-ilustração em close. Se todas tiverem a mesma escala, a página fica plana.
O quarto acordo é sobre armazenamento. O conjunto dura anos e atravessa equipes: guarde os originais juntos, nomeie os arquivos pelo lugar no site, como “hero-main” e “feature-sync”, e registre de qual briefing ou cena veio cada imagem. Meses depois, isso permite criar a sétima peça na linguagem das seis primeiras.
O que fazer quando a imagem necessária não existe?
Crie a sua. Abstrações para um fluxo específico e ambientes de um setor muito particular raramente estão prontos. Software de logística para câmaras frias, recebimento de metal ou sala de controle elétrico são cenas caras demais para uma produção destinada a uma procura pequena.
Outro caso comum surge quando o conjunto já existe e, meses depois, falta uma sétima imagem. Encontrar “igual, mas diferente” em outro banco é quase impossível. Descrever a linguagem aprovada e gerar uma continuação leva poucos minutos.
Veja também os requisitos para imagens de marketplaces, como mostrar dinheiro e trabalho sem clichês e como criar imagens de viagem sem viajar.
Capturas ou ilustrações: o que usar na página inicial?
As duas, em lugares diferentes. A ilustração responde “para quê”; a captura, “como é”. O hero costuma funcionar melhor com ilustração, e o bloco de função com uma captura legendada.
Como lidar com o tema escuro?
Teste a imagem nos dois temas antes da compra. Arquivos sem um fundo branco contínuo são mais versáteis e funcionam tanto em páginas claras quanto escuras.
Quantas imagens um produto precisa no começo?
Em geral, seis a oito bastam: hero, três ou quatro blocos de funções, capa de blog e estado vazio. Depois, acrescente uma peça a cada novo material.
É possível misturar 3D, fotografia e ilustração plana?
Sim, desde que cada tipo tenha uma função fixa: 3D só nos heroes, fotografia no ambiente e ilustração plana nos diagramas, por exemplo. Mistura aleatória parece falta de direção visual.
O que fazer com logotipos de serviços conhecidos?
Não os use. Marcas de terceiros criam risco jurídico e podem sugerir uma parceria que não existe.
Como controlar o custo visual no início?
Comece com um hero e três blocos na mesma linguagem, completando o conjunto à medida que as páginas surgirem. O erro caro é encomendar vinte imagens antes de saber o que o site precisa dizer.
