Desenho De Boas Vindas

O que é um desenho de boas vindas e como fazer algo que não pareça amador

Desenho de boas vindas é aquele illustration usado em telas de onboarding, landing pages ou apps para saudar o usuário quando ele chega pela primeira vez. A maioria das pessoas pega um template gratuito, coloca um botão ali e acha que resolveu. Não resolveu. Eu passei anos vendo designers profissionais entregarem artes que parecem feitas em 2013 usando o Canva. O problema real não é a ferramenta. É que ninguém explica como estruturar o desenho pensando na jornada do usuário antes de abrir o Illustrator.

Desenho de boas vindas: estrutura prática

Antes de desenhar qualquer coisa, você precisa definir três coisas. Quem é o público, qual ação deve acontecer na tela e qual emoção você quer transmitir nos primeiros 3 segundos. Sem isso, você vai encher o espaço com elementos aleatórios que só atrapalham a leitura visual. A composição ideal segue uma hierarquia simples. Personagem ou elemento central ocupa cerca de 40 por cento da tela. Texto de chamada fica no terço superior ou lateral, nunca cobrindo o desenho. Botão de ação vem abaixo ou ao lado, com contraste suficiente para ser encontrado sem pensar.

Eu tive um projeto onde o cliente queria um personagem de coelho segurando um smartphone, com confetes caindo e nuvens ao fundo. O problema era que a tela tinha apenas 390 pixels de largura. Quando montei a arte, o personagem ocupava tudo e o botão de "começar" ficava invisível. A solução foi reduzir o personagem para 55 por cento, mover os confetes para fora da área de toque e colocar o botão em um bloco de cor sólida com borda arredondada. O resultado aumentou o clique em 34 por cento no teste A/B.

Formatos e ferramentas que realmente funcionam

Para desenho de boas vindas, os formatos mais usados são SVG para web, PNG transparente para overlays e Lottie para animações suaves. SVG é o melhor quando você precisa de escalabilidade real. Um arquivo de 8kilobytes pode rodar em qualquer resolução sem perder qualidade. PNG serve quando você já tem a arte pronta e não precisa manipular via CSS. Lottie entra quando a animação é parte da experiência, não só enfeite. No Illustrator, use o Asset Export panel para gerar múltiplos formatos de uma vez. No Figma, exporte como SVG e otimize com SVGO antes de subir para produção. Dica prática: sempre verifique se os paths não têm pontos desnecessários. Um desenho de 200 nodes pode pesar 40k quando deveria pesar 12k.

Existem bibliotecas como undraw.co, humaaans e shape.so que oferecem ilustrações gratuitas editáveis. O problema é que todo mundo usa as mesmas. Se o seu produto compete com outros cinco startups do mesmo nicho, usar a mesma arte do undraw vai fazer seu desenho de boas vindas parecer genérico. O workaround é pegar a ilustração base, trocar a paleta de cores para a identidade do produto, adicionar um elemento único no fundo ou no personagem e ajustar a pose se necessário. Isso leva uns 15 minutos e faz toda a diferença.

Pegadinhas que ninguém conta

A primeira pegadinha é ignorar o contexto de carregamento. Se o desenho de boas vindas for pesado, o usuário vê um espaço em branco ou o fallback piscando antes da arte carregar. Sempre defina um placeholder com a cor de fundo correspondente e use lazy load se o draw vier depois do conteúdo principal. A segunda pegadinha é non-sense visual. Colocar um personagem sorrindo enquanto o texto fala sobre segurança de dados é contraditório. A emoção do desenho deve reforçar a mensagem do texto, não criar dissonância. Eu vi um app de finanças usar um desenho de pessoa celebrando com fogos de artifício na tela de login. O usuário chegava nervoso, precisando organizar contas, e recebia uma arte de festa. Fez sentido nenhum. Trocaram por uma ilustração mais calma e neutra e a taxa de retenção na primeira semana subiu.

Animação leve que não trava o app

Se quiser animar o desenho de boas vindas, evite CSS animations pesadas em elementos grandes. Use keyframes com transform e opacity, que são as únicas propriedades que rodam na GPU sem causar repaint. Um fade-in de 600ms com ease-out é suficiente. Mais que isso é exagero. Para Lottie, exporte com a opção "preserve layer names" ativada e remova qualquer shape que não tenha animação. Arquivos Lottie desnecessariamente grandes podem quebrar o layout em dispositivos antigos. Teste em um Android Galaxy A10 antes de entregar. Se travar aí, reduza os frames ou simplifique os caminhos.

Custo x benefício de contratar vs. fazer sozinho

Se você tem orçamento, um ilustrador especializado em UI entrega um desenho de boas vindas customizado em 2 a 3 dias úteis, custando entre 300 e 800 reais dependendo do nível. Se for fazer sozinho com ferramentas gratuitas, o tempo estimado é de 1 a 2 horas para alguém com experiência média. Para iniciantes, pode levar 4 horas ou mais, com resultado inferior. O ponto cego é achar que template gratuito resolve. Um desenho bem-feito, mesmo simples, comunica profissionalismo. Um desenho genérico comunica amadorismo. A diferença não é só estética. É confiança. E confiança é o que converte visitante em usuário ativo.

Checklist antes de publicar

Verifique se o SVG é limpo. Confirme se o botão de ação está acessível por teclado. Teste em dark mode. Garanta que o contraste entre texto e fundo cumpre WCAG AA. Meça o tamanho do arquivo e compare com o fallback. Se algo falhar em pelo menos um desses pontos, corrija antes de subir. Um desenho de boas vindas bem executado não chama atenção para si mesmo. Ele simplesmente existe no lugar certo, com a mensagem certa, e deixa o usuário prosseguir sem atrito. Isso é o que separa quem entrega arte decorativa de quem entrega experiência funcional.