O que inclui o design UI/UX de um site de marketing
O trabalho cobre cada decisão entre o primeiro segundo de uma visita no site e a ação que você quer que ela tome. Ajustamos o escopo ao seu briefing, e a proposta diz quais destas entregas estão incluídas e como cada uma é aprovada.
- Resumo da pesquisa: analytics, buscas, perguntas de vendas e suporte, sites concorrentes
- Mapa do site, navegação e lista de templates de página
- Wireframes com conteúdo real para cada template, com títulos de verdade em vez de texto de preenchimento
- Design de interface para desktop e celular, com todos os estados de cada componente
- Um design system no Figma cujos componentes correspondem ao CMS, para os editores montarem páginas novas
- Um protótipo navegável e os resultados dos testes de usabilidade
Como o trabalho anda, da pesquisa ao protótipo testado
Cada etapa termina com algo que você aprova, para pegar um desvio antes que ele custe refazer o site. A ordem importa: estrutura antes da aparência e testes antes do código.
| Etapa | O que fazemos | O que você aprova |
|---|---|---|
| Pesquisa | Lemos analytics e buscas, entrevistamos vendas e suporte, revisamos concorrentes | O público, as tarefas principais e as perguntas que cada página precisa responder |
| Estrutura | Mapa do site, navegação e lista de templates | Que páginas existem e como se vai de uma a outra |
| Wireframes | Layouts com conteúdo real para cada template, desktop e celular | A ordem da informação em cada template |
| Interface | Design visual, componentes e seus estados, design system | A aparência do site e dos componentes |
| Protótipo e teste | Um protótipo navegável testado com cerca de cinco pessoas por rodada | Os ajustes de cada rodada |
| Construção | O design aprovado construído em Webflow, Framer, Astro ou Next.js | O site no ar, página por página |
Experiência de site de marketing, não de produto
Um site de marketing tem um trabalho diferente do de um produto de software. A interface de um produto ajuda quem já se cadastrou a fazer o seu trabalho; um site de marketing precisa explicar, conquistar confiança e levar um desconhecido a uma ação. Isso muda o que pesquisamos e testamos: primeiras impressões, leitura rápida, comparações, páginas de preços e formulários.
A Dardo desenha só sites de marketing. Para a interface de um app, um painel ou um portal de clientes, contrate uma equipe de design de produto. Se a estrutura do seu site funciona e só precisa de uma nova cara, o nosso serviço de redesign de site serve melhor.
Acessibilidade e velocidade se decidem no design
Acessibilidade e velocidade se resolvem no design, não com remendos depois do lançamento. Desenhamos pela WCAG 2.2 nível AA, o padrão de acessibilidade atual do W3C: contraste, ordem do foco, tamanho dos alvos de toque, rótulos e mensagens de erro fazem parte de cada componente, não de uma revisão final.
A velocidade começa nos mesmos arquivos. As Core Web Vitals do Google consideram boa uma página quando o conteúdo principal carrega em até 2,5 segundos, ela responde a uma interação em até 200 milissegundos e a pontuação de deslocamento do layout fica em 0,1 ou menos, então escolhemos tamanhos de imagem, fontes e animações com esses limites em mente.
Na prática: o site da Gissi
A Gissi é uma escola de música em Bogotá cujo site a Dardo desenhou e construiu. As visitas chegam com perguntas práticas (que instrumento, que professor, online ou em casa, como começar), e a estrutura responde nessa ordem.
- Uma página de instrumento só é publicada quando pelo menos um professor o ensina, para ninguém chegar a uma aula que não pode agendar
- Cada perfil de professor mostra o instrumento, a região e os formatos de aula, e o link de contato abre o WhatsApp com o nome do professor já escrito na mensagem
- Uma página para cada forma de aprender: online, em casa em Bogotá e preparação para o vestibular de música
- O site funciona em espanhol, inglês e português, cada idioma com os próprios endereços
Os cliques do Google passaram de 34 nos três meses antes do relançamento para 416 nos primeiros nove dias, depois da mudança para a Cloudflare e do lançamento em quatro idiomas; o case conta como.
Plataformas, arquivos e propriedade
Desenhamos no Figma e construímos na plataforma que a sua equipe vai editar: Webflow ou Framer quando o marketing publica as próprias páginas, Astro ou Next.js com um CMS headless quando o site tem um desenvolvedor ou muitas integrações. Os componentes do design system viram os blocos do CMS, e as páginas novas continuam coerentes depois do lançamento.
A sua empresa é dona dos arquivos do Figma, do código e de todas as contas desde o início. A Dardo orça cada projeto por escopo numa proposta escrita e detalhada, sem orçamento mínimo.
Dúvidas antes de escolher
O que inclui um serviço de design UI/UX para um site de marketing?
Pesquisa sobre quem visita o site e do que precisa, um mapa do site e a navegação, wireframes para cada template, a interface visual para desktop e celular, um design system e um protótipo navegável testado com usuários reais. Quando a Dardo também constrói o site, a mesma equipe transforma o design aprovado nas páginas no ar, sem perdas numa passagem de bastão.
Quanto custa o design UI/UX de um site?
A Dardo orça cada projeto por escopo numa proposta escrita e detalhada, sem orçamento mínimo. O que mais move o preço é o número de templates, quanta pesquisa e quantos testes o projeto precisa, o número de idiomas e se a Dardo também constrói o site. Só o design custa menos do que design e construção, mas depois você precisa de uma equipe que o construa com fidelidade.
Vocês desenham interfaces de apps ou de produtos?
Não. A Dardo desenha sites de marketing: as páginas que explicam um produto ou serviço e levam a uma demo, um orçamento, um agendamento ou um cadastro. A interface de um produto de software, como um app, um painel ou um portal de clientes, precisa de uma equipe de design de produto, e diremos isso se for o que o seu briefing descreve.
Vocês melhoram a experiência de um site sem refazê-lo?
Muitas vezes, sim. Começamos com uma auditoria do analytics, dos dados de busca e um teste curto com usuários; depois redesenhamos os templates que perdem visitas e aplicamos as mudanças na sua plataforma atual. Se a própria plataforma impede as mudanças, a auditoria diz isso e o trabalho vira um redesign ou uma migração.
Vocês fazem testes de usabilidade?
Sim. Testamos os protótipos com um grupo pequeno de pessoas do seu público antes da construção, em rodadas de cerca de cinco participantes, o tamanho que o Nielsen Norman Group recomenda para encontrar a maior parte dos problemas num teste qualitativo. Cada rodada termina com uma lista curta de problemas e as mudanças de design que os resolvem.
O que recebemos no final?
O resumo da pesquisa, o mapa do site, os arquivos do Figma com o design system e todos os templates, o protótipo e os resultados dos testes. Se a Dardo constrói o site, você também recebe o site no ar com o CMS pronto para os seus editores. Os arquivos, o código e todas as contas ficam no nome da sua empresa.
Vocês desenham sites em vários idiomas?
Sim. A Dardo trabalha em inglês e espanhol e planeja a navegação, os endereços e o tamanho dos textos de cada idioma desde o primeiro wireframe. A Gissi, uma escola de música, funciona em espanhol, inglês e português num site que a Dardo desenhou e construiu.
Fontes e leituras adicionais
Fontes desta página, com mais detalhes dos publicadores originais.
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2w3.org
- Google Search Central: Core Web Vitalsdevelopers.google.com
- Nielsen Norman Group: Why you only need to test with 5 usersnngroup.com
- Nielsen Norman Group: Usability testing 101nngroup.com
- Gissi Music Academy (live site)gissimusic.com
