O design UX/UI decide como um produto digital funciona (a experiência do utilizador) e como se apresenta e se comporta no ecrã (a interface do utilizador). Para quem decide, a questão não está nas definições mas no retorno: um bom design UX/UI aumenta a conversão, reduz os pedidos de suporte e torna o desenvolvimento mais barato, porque menos ecrãs são construídos duas vezes. Na nossa experiência, o custo baixou nos últimos dois anos, porque a inteligência artificial assegura hoje a produção repetitiva (variantes de componentes, primeiros esboços, preparação de imagens, testes), enquanto a pesquisa, o conceito, a direção de arte e o acabamento final continuam a ser trabalho de pessoas, e é aí que o dinheiro deve ir. Este guia explica as duas metades em termos simples, que pesquisa vale a pena pagar, como percursos, wireframes e interfaces se encaixam, porque é que um sistema de design importa, o que esperar em custo e prazos e como escolher um parceiro de design.
Qual é a diferença entre UX e UI?
O design da experiência do utilizador trata da estrutura e do comportamento: o que as pessoas tentam fazer, que passos dão, o que precisam de saber em cada passo e onde ficam presas. Os seus resultados são conclusões de pesquisa, percursos de utilizador, mapas do site e wireframes.
O design de interfaces trata da apresentação: tipografia, cor, espaçamento, componentes, estados e movimento. Os seus resultados são ecrãs acabados, protótipos e uma biblioteca de componentes.
Os dois não se compram em separado com bons resultados. Uma interface bonita sobre um percurso confuso continua a perder pessoas; um percurso lógico com uma interface descuidada parece pouco fiável. Design de produto é o termo mais usado quando o mesmo grupo assume ambos, juntamente com os objetivos comerciais do produto.
Que pesquisa compensa o investimento?
A pesquisa é a parte de um projeto que mais vezes se corta, e aquela cuja ausência mais custa depois. O objetivo não é um relatório grosso. É substituir suposições por evidência antes de alguém construir seja o que for, e fazê-lo em dias, não em meses.
O que decidir primeiro
- Quem são os principais utilizadores e que tarefas mais importam para eles e para o negócio.
- O que já sabe: dados de analytics, pedidos de suporte, chamadas comerciais, estudos anteriores, as razões que os clientes dão para sair.
- A suposição mais arriscada do projeto e a forma mais barata de a testar.
Um punhado de entrevistas curtas com utilizadores reais, lidas a par dos dados de analytics e das perguntas ao suporte, revela normalmente a maior parte dos problemas relevantes de um percurso, e isso chega para começar a desenhar com confiança.
O que deixar para depois
Grandes inquéritos, longos documentos de personas e fases de descoberta de um mês raramente justificam o seu custo num projeto pequeno ou médio. Comece com pesquisa dirigida e depois teste à medida que desenha. Se o produto é novo, trate a primeira versão também como pesquisa.
Na Odduel, a IA faz a triagem: transcreve e agrupa as notas das entrevistas, resume pedidos de suporte e identifica padrões no feedback. Os designers passam o tempo a falar com utilizadores e a tomar decisões, e as conclusões são verificadas pelas pessoas que estiveram na sala. A mesma divisão de trabalho atravessa os nossos projetos de desenvolvimento de IA: a máquina trata do volume, as pessoas do critério.
Fluxos, wireframes, interfaces
O design passa do abstrato ao concreto em três passos. Cada um responde a uma pergunta que deve poder fazer na revisão.
| Passo | A pergunta a que responde | O que revê |
|---|---|---|
| Percurso de utilizador | Que passos dá uma pessoa para concluir uma tarefa? | Um diagrama do caminho, com as saídas |
| Wireframe | O que entra em cada ecrã e por que ordem? | Layouts a cinzento com conteúdo real |
| Interface | Como se apresenta, como se sente e como responde? | Ecrãs acabados e um protótipo clicável |
- Percursos. Um percurso mapeia os passos para concluir uma tarefa: criar conta, pedir um orçamento, pagar. Expõe passos desnecessários antes de se desenhar um único ecrã, e é aí que a maior parte da conversão se ganha ou se perde.
- Wireframes. Layouts com pouco detalhe que fixam a estrutura e as prioridades. São baratos de alterar e mantêm a discussão no conteúdo e na ordem, não na cor.
- Interfaces. O design visual completo, construído sobre a marca, com todos os estados (vazio, a carregar, erro, sucesso) desenhados, em vez de deixados à adivinhação do programador. Se a marca ainda não estiver definida, leia primeiro o nosso guia de branding.
Um exemplo. A Nothing To Eat, uma marca de sandes em Amesterdão, precisava de um website que vendesse antes de explicar. O percurso foi reduzido a uma decisão: quem quer encomendar é enviado diretamente para o menu, na mesma página, e tudo o resto fica à volta desse caminho, não à frente dele. Uma página, uma tarefa, todos os estados de ecrã desenhados antes de a construção começar.
O que é um design system, e precisa de um?
Um sistema de design é uma biblioteca partilhada de componentes, regras e tokens (cores, tamanhos de letra, espaçamentos) usada tanto por designers como por programadores. É o que mantém um produto coerente à medida que cresce e que entram pessoas novas.
O que faz pelo negócio:
- Rapidez. Páginas e funcionalidades novas montam-se a partir de peças testadas.
- Coerência. Botões, formulários e mensagens comportam-se da mesma forma em todo o lado.
- Qualidade. Acessibilidade e desempenho ficam embutidos em cada componente de uma só vez.
- Um custo de mudança mais baixo. Uma atualização de marca aplica-se num só sítio.
Um sistema de design não precisa de ser grande para ser útil, e é também onde a IA mudou o nosso trabalho de forma mais visível: as variantes de um componente, o código por trás dele e os respetivos testes são produzidos em horas e depois revistos. É por isso que os nossos projetos de criação de websites e de desenvolvimento de aplicações partem de um sistema e não de um ecrã em branco. O nosso guia de criação de websites acompanha o sistema até ao desenvolvimento.
Testes
Os testes fecham o ciclo entre o design e a realidade. Métodos úteis, do mais barato ao mais exigente:
- Testes de cinco segundos numa página-chave: de que é que as pessoas se lembram?
- Testes com protótipo clicável com alguns utilizadores por ronda, antes de existir qualquer código.
- Verificações de acessibilidade segundo os critérios das WCAG 2.2: contraste, uso por teclado, etiquetas, foco.
- Analytics depois do lançamento: onde é que as pessoas abandonam um percurso?
- Testes A/B em páginas de grande tráfego, onde pequenas diferenças contam.
Teste cedo, com protótipos em bruto: alterar um wireframe custa minutos, alterar uma funcionalidade já programada custa dias. As verificações automáticas, incluindo as baseadas em IA, apanham uma boa parte dos problemas em muitos ecrãs de uma vez; não apanham tudo, por isso acrescentamos passagens manuais por teclado e leitor de ecrã antes de qualquer coisa ir para o ar.
Porquê pensar na acessibilidade desde o primeiro wireframe?
A acessibilidade funciona muito melhor como princípio de design desde o primeiro wireframe do que como verificação final, e é hoje uma exigência legal para muitos produtos: a Lei Europeia da Acessibilidade aplica-se a uma vasta gama de produtos e serviços digitais vendidos na UE desde 28 de junho de 2025.
Desenhar de forma acessível significa:
- Contraste que cumpre os rácios das WCAG para texto e controlos.
- Tamanhos de letra que se mantêm legíveis em ecrãs pequenos e com zoom.
- Caminhos por teclado em todos os percursos, com um estado de foco visível.
- Etiquetas e instruções que não dependem só da cor ou do texto de exemplo do campo.
- Movimento que pode ser reduzido para quem precisa.
- Erros explicados por palavras, junto ao campo, com uma forma de os corrigir.
Nada disto limita o bom design. Tende a melhorá-lo, porque clareza para pessoas com deficiência é clareza para qualquer pessoa a usar o telemóvel ao sol. Inclua estas regras no sistema de design e cada componente novo herda-as; o custo de cumprir a lei baixa a cada página.
Quanto custa o design UX/UI e quanto tempo demora
Não publicamos uma tabela de preços, porque dois produtos com o mesmo número de ecrãs podem exigir várias vezes mais esforço um do que o outro. O que define o valor é o número de percursos e tipos de ecrã distintos, a profundidade da pesquisa, se inclui um sistema de design e quantas pessoas aprovam cada ronda.
O que a IA mudou foi a produção: as variantes de componentes, os estados de cada ecrã, a preparação de imagens e a primeira versão das especificações levam agora horas em vez de dias. Na nossa experiência, um projeto focado, como redesenhar um percurso-chave, demora algumas semanas a partir de um briefing aprovado; o design completo de um produto ou de um site decorre por fases ao longo de uns dois meses, com a pesquisa e os testes a ocupar a parte do calendário que antes era da produção. O nosso guia sobre quanto custa um site apresenta o orçamento no seu conjunto. Se vai substituir um produto existente em vez de começar um, o redesign de websites define-se de outra forma, porque os conteúdos, os dados e as posições nos motores de busca já existem.
Como trabalhar com um parceiro de design?
O que um bom parceiro de design traz, e o que esperar dele:
- Um processo claro da pesquisa à entrega, com pontos de revisão definidos.
- Design na realidade do browser: layouts responsivos, conteúdo real, todos os estados cobertos.
- Trabalho próximo com os programadores, para que o que se desenha possa ser construído e o que se constrói corresponda ao design. Na Odduel, os programadores entram no projeto desde o primeiro wireframe, por isso podemos desenhar para a nossa própria construção ou passar o trabalho à sua equipa.
- Documentação: componentes, regras e decisões registados para quem vier a seguir.
- Atenção à prática atual sem correr atrás de modas.
Pergunte como usam a IA. Uma resposta credível inclui a síntese da pesquisa, variações rápidas para explorar e verificações automáticas, com os designers a tomar todas as decisões finais; explicamos a nossa resposta em IA no design e desenvolvimento web. Peça para ver a pesquisa por trás de um projeto anterior e produtos em funcionamento que tenham desenhado, não apenas imagens do portfólio. A nossa nota sobre como escolher uma agência digital reúne as outras perguntas que vale a pena fazer, e o artigo sobre o arranque com uma agência descreve as primeiras semanas.
Perguntas frequentes
Quanto devo orçamentar para design UX/UI?
Depende do número de percursos e tipos de ecrã, da profundidade da pesquisa e de incluir ou não um sistema de design. O design é uma parte modesta do custo total de um projeto digital e poupa muito mais em retrabalho evitado. Peça um orçamento discriminado por entregável, para poder comparar os valores de duas agências.
Quanto tempo demora o design UX/UI com a Odduel?
Um projeto focado, como redesenhar um percurso-chave, demora algumas semanas a partir de um briefing aprovado. O design completo de um produto ou de um site demora mais e decorre por fases. A IA encurta a análise da pesquisa e a produção, por isso mais tempo vai para testes e afinação.
Qual é a diferença entre design UX e design UI?
O design UX decide o que um produto faz e por que ordem: os percursos, a estrutura, o conteúdo de cada ecrã. O design UI decide como se apresenta e como responde: tipografia, cor, componentes e movimento. Um bom produto precisa dos dois, dentro do mesmo âmbito.
Preciso de um sistema de design para um produto pequeno?
Normalmente sim, em versão reduzida. Algumas dezenas de componentes documentados e um conjunto de tokens mantêm um produto coerente à medida que cresce e tornam cada funcionalidade nova mais barata de acrescentar. Constrói-se como parte do primeiro design, não como projeto à parte.
Como é que a IA muda o custo e o prazo?
Acelera a síntese da pesquisa, a exploração inicial, a produção de componentes e as verificações de qualidade, o que encurta os projetos e baixa o custo. O critério sobre o que os utilizadores precisam e sobre como o produto deve sentir-se fica com os designers, e cada resultado é revisto por uma pessoa antes de chegar até si.
Se um produto ou um site não está a dar os resultados que devia, a causa está normalmente num punhado de percursos. O nosso serviço de design UX/UI começa aí: pesquisa onde compensa, protótipos que pode testar, interfaces feitas para a sua marca e um sistema sobre o qual os seus programadores podem construir, a partir de Barcelona e de São Paulo. Ou fale-nos do seu projeto.
