Web design que sobrevive ao handoff
Design system com identidade própria, componentes acessíveis e microinterações sóbrias. Trabalhamos em parceria com seu time de produto ou cuidamos do ciclo inteiro.
O desenho bonito que vira tela feia em produção quase nunca é culpa de quem programou. É sintoma de design entregue como imagem: cada estado que ninguém desenhou — campo com erro, lista vazia, nome longo demais, conexão lenta — acaba sendo decidido às pressas por outra pessoa.
Trabalhamos com design system em código desde o começo. O que você aprova é o que vai para produção, com os estados difíceis já resolvidos.
Onde atuamos
- Identidade visual e design system
- UX research e fluxos críticos
- Prototipação navegável
- Handoff e tokens em código
O que você recebe
- Brand guidelines + componentes em Figma
- Design tokens prontos para Tailwind/CSS
- Protótipos validados com usuários
- Guia de microcopy e acessibilidade
Quando o problema é design, não código
Nem toda insatisfação com um produto é de design. Vale investigar quando a reclamação é sempre a mesma — ninguém acha o botão, todo mundo erra o mesmo campo, o time de suporte responde a mesma dúvida toda semana.
- Produto que funciona mas ninguém entende sozinho
- Cada tela nova sai com um visual um pouco diferente
- Identidade visual que não existe fora do logo
- Formulário com taxa de abandono alta no mesmo ponto
- Time de desenvolvimento decidindo espaçamento e cor no improviso
Do problema ao componente
Começamos entendendo o que a pessoa está tentando fazer na tela, não como a tela deveria parecer. Isso costuma reordenar prioridade: muita interface pesada existe porque foi desenhada a partir da estrutura do banco de dados, não do trabalho de quem usa.
Depois desenhamos os componentes — não as páginas. Botão, campo, aviso, tabela, modal: cada um com seus estados de foco, erro, carregamento e vazio. As páginas se montam a partir daí, e a próxima tela já nasce consistente sem ninguém precisar decidir nada de novo.
Design em código, não em imagem
Os tokens de cor, tipografia, espaçamento e raio viram variáveis CSS de verdade. Isso não é detalhe de implementação: é o que permite trocar o tema inteiro do site, checar contraste automaticamente e garantir que o modo claro e o escuro nasçam juntos em vez de um ser adaptação improvisada do outro.
Contraste WCAG 2.2 AA é critério de aceite, verificado por ferramenta a cada alteração. Cor que reprova em contraste é bug, e como tal bloqueia a entrega.
- Figma para exploração, código para a verdade
- Tokens em variáveis CSS, com tema claro e escuro desde o início
- Componentes acessíveis por teclado e leitor de tela
- Microinterações respeitando prefers-reduced-motion
O que muda depois
O ganho mais visível é de velocidade: com o sistema pronto, tela nova sai em uma fração do tempo, porque as decisões difíceis já foram tomadas uma vez.
O segundo é de consistência sem esforço. Quando o componente certo é o caminho mais fácil, ninguém precisa policiar padrão em revisão de código — e a interface para de divergir sozinha ao longo do tempo.
Perguntas frequentes
Vocês fazem só o design ou também implementam?
Fazemos os dois, e no nosso caso é difícil separar: entregamos o design system em código, com os componentes funcionando. Se o seu time vai implementar, entregamos os componentes e a documentação — o que evita a perda de tradução clássica entre a imagem aprovada e a tela publicada.
Preciso trocar minha identidade visual inteira?
Quase nunca. Na maioria dos casos a marca está bem e falta o sistema em volta dela — escala tipográfica, paleta com contraste verificado, espaçamento consistente, estados de componente. Redesenho completo de marca é outro projeto, e dizemos quando não é necessário.
Acessibilidade encarece o projeto?
Feita desde o início, quase não pesa: é escolher cor com contraste adequado, marcar o HTML corretamente e testar navegação por teclado. Cara é a adaptação depois, quando é preciso refazer componente já espalhado por trinta telas.
Como sei que o design funcionou?
Definimos junto o que medir antes de desenhar: taxa de conclusão do formulário, tempo até a primeira ação relevante, volume de chamado sobre determinada tela. Design sem métrica combinada vira discussão de gosto, e discussão de gosto quem ganha é quem fala mais alto.
Vocês trabalham com nossa equipe de marketing?
Sim, e costuma ser necessário. O design system precisa comportar campanha, landing page e material que o marketing produz sozinho depois — se não comportar, ele é contornado no primeiro prazo apertado e deixa de existir na prática.
Serviços que combinam
Projetos costumam pedir mais de uma frente. Estas são as que mais aparecem junto com esta.
- Desenvolvimento de sitesSites institucionais, e-commerce e portais com performance, SEO técnico e a11y desde o primeiro commit.
- Software sob demandaSistemas web e mobile sob medida — incluindo agentes de IA e automações que reduzem tarefa repetitiva.
- Consultoria de TIDiagnóstico de stack, arquitetura, custo de nuvem e roadmap. Onde IA aplicada gera ROI mensurável.
Quer um diagnóstico desse serviço? Vamos conversar.
Falar com a equipe