Design UX/UI para sites, lojas online e aplicações

Investigamos como as pessoas usam realmente o teu produto, organizamos a informação, prototipamos e testamos antes de programar, e entregamos um sistema de design que a tua equipa pode continuar a usar. Acessível segundo as WCAG 2.2 AA desde o primeiro esboço, e construído pela mesma equipa que o desenhou.

Fala-nos do teu produto Ver como trabalhamos

2-3 cliques Até à compra de bilhetes no TNC
WCAG 2.2 AA Acessibilidade desde o design
Desde 2009 Design e desenvolvimento, a mesma equipa

01 · Pesquisa Marca, público e concorrência
02 · Conceito Uma ideia que ordena
03 · Sistema Tipografia, cor e componentes
04 · Protótipo Navegável e testado
05 · Testes Com utilizadores reais
06 · Entrega A tua equipa usa-o desde o primeiro dia
Cada teste afina o sistema

Scroll

Definição

O que é o design UX/UI?

O design UX/UI é o trabalho de definir como funciona um produto digital (UX, experiência do utilizador) e como cada ecrã se apresenta e se usa (UI, interface do utilizador). A UX decide fluxos, estrutura e conteúdo a partir do que as pessoas precisam; a UI transforma-os em componentes, tipografia, cor e estados que se percebem à primeira.

Na prática inclui investigação com utilizadores, arquitetura de informação, wireframes e protótipos navegáveis, design visual, um sistema de design com os seus componentes e testes de usabilidade. Aplica-se a sites, lojas online, aplicações móveis e plataformas SaaS e, bem feito, reduz erros, pedidos ao suporte e desenvolvimento refeito.

Resumo

Resumo executivo

O que compras quando contratas design UX/UI e o que te poupa.

O custo de uma má experiência não aparece em nenhuma fatura: está no carrinho abandonado, no formulário que ninguém termina, nas chamadas ao suporte para fazer algo que devia ser óbvio e nas semanas de desenvolvimento deitadas fora quando um ecrã é redesenhado depois de programado. O design UX/UI traz essas decisões para o início, quando mudá-las custa um protótipo e não um sprint.

Trabalhamos com investigação e dados reais (entrevistas, analítica, mapas de calor, testes com utilizadores), não com opiniões. Daí sai a estrutura, depois os protótipos que se testam e, no fim, um sistema de design com componentes, estados e regras para que o teu produto cresça sem perder coerência. A acessibilidade WCAG 2.2 AA entra desde o primeiro esboço: contraste, foco, áreas de toque e ordem de leitura desenham-se, não se remendam.

O que nos distingue é que design e desenvolvimento são a mesma equipa. O design aprovado é o que se constrói, e quem o desenhou verifica que é respeitado. Foi assim no Teatre Nacional de Catalunya, onde o redesign UX deixou a compra de bilhetes a 2-3 cliques e reduziu em 37 % o LCP em mobile.

-37 % LCP em mobile após o redesign do TNC
+35 % Reservas diretas no Tamarit Beach Resort
+200 % Donativos online na Ampans

O que inclui

O que inclui o design UX/UI

Cada fase deixa um entregável que podes usar, mesmo que o desenvolvimento seja feito por outra equipa.

Investigação com utilizadores: entrevistas, análise da analítica e dos mapas de calor, e revisão da concorrência
Arquitetura de informação: mapa de conteúdos, navegação, taxonomias e fluxos das tarefas-chave
Wireframes e protótipos navegáveis no Figma para validar os fluxos antes de investir no visual
Testes de usabilidade com pessoas reais sobre o protótipo, com conclusões priorizadas
Design de interface a partir da tua marca: tipografia, cor, ícones, estados e microinterações
Sistema de design: componentes, tokens e regras de utilização para a tua equipa criar ecrãs novos coerentes
Acessibilidade WCAG 2.2 AA desde o design: contraste, foco visível, áreas de toque e ordem de leitura
Design responsivo e mobile first: cada ecrã pensado para telemóvel, tablet e computador
Acompanhamento do desenvolvimento: especificações, revisão do que foi construído e ajustes com dados depois de publicar

Porquê

Design UX/UI, webdesign e branding: o que é cada coisa

Três serviços que se tocam, com objetivos diferentes.

O branding define quem és: a estratégia de marca, o logótipo, a identidade visual e o tom. O webdesign é o projeto de um site institucional que transmite essa marca e converte visitas em contactos. O design UX/UI vai um passo mais fundo: como funciona um produto com tarefas a sério, como comprar, reservar, registar-se, gerir uma conta ou trabalhar todos os dias numa plataforma. Precisas dele quando o problema não é a imagem, mas sim que as pessoas não conseguem fazer aquilo que vêm fazer. Se o que falha é a conversão de um site que já funciona, começa pelo CRO.

sistema-de-design/botao.json

// Um componente, todas as suas regras

"botao-principal": {

"estados": ["normal", "hover", "foco", "desativado", "a carregar"],

"contraste_minimo": "4.5:1",

"area_de_toque": "24x24 px no mínimo",

"foco": "visível, 3:1 sobre o fundo"

}

Com estados Componentes
WCAG 2.2 AA Acessibilidade
Testado Protótipo

Pontos-chave

O que desenhamos

Produtos em que a experiência decide se são usados ou não.

01
Sites com tarefas complexas

Agendas, motores de pesquisa, áreas privadas, reservas ou venda de bilhetes. No TNC redesenhámos a navegação pela agenda com filtros e as fichas de espetáculo com uma hierarquia clara (datas, elenco, preços e botão de compra).
02
Lojas online e processos de reserva

Fichas de produto, coleções, carrinho e checkout. No Tamarit Beach Resort a UX mobile leva a reserva em 3 passos, com galeria e comparador de alojamentos.
03
Aplicações móveis

Fluxos, navegação e componentes para iOS e Android, respeitando as convenções de cada sistema e com áreas de toque e estados pensados para o polegar. Construímo-las na nossa criação de apps.
04
Produto digital e SaaS

Painéis, formulários longos, permissões e uso diário intensivo. Fazemo-lo em casa: o Nexo, a nossa própria plataforma de CRM, projetos, faturação e registo de horas, foi desenhado por nós e usamo-lo todos os dias.
05
Sistemas de design

Biblioteca de componentes, tokens e documentação para que várias equipas ou fornecedores desenhem e programem com as mesmas peças, sem reinventar cada ecrã.
06
Auditorias de UX e de acessibilidade

Revisão heurística, análise de dados e testes com utilizadores sobre o que já tens, com uma lista priorizada de alterações. Se for preciso cumprir a legislação, entra o nosso serviço de acessibilidade web.

Como trabalhamos

Como trabalhamos um projeto de UX/UI

Do que sabemos dos teus utilizadores a um design testado e pronto a construir.

01
Descoberta e investigação

Entrevistas com a tua equipa e com utilizadores, análise da analítica, dos mapas de calor e dos pedidos ao suporte. Daí saem os objetivos, as tarefas-chave e os problemas a resolver.
Conforme o âmbito
02
Arquitetura e fluxos

Mapa de conteúdos, navegação e fluxos de cada tarefa-chave. Decidimos o que vai em cada ecrã, e por que ordem, antes de o desenhar.
Conforme o âmbito
03
Protótipo e testes

Wireframes e protótipo navegável que testamos com pessoas reais. O que não se percebe muda-se aqui, quando custa pouco.
Iterativo
04
Design de interface e sistema de design

Design visual a partir da tua marca, com todos os estados de cada componente e as regras de acessibilidade WCAG 2.2 AA documentadas.
Conforme o âmbito
05
Construção e medição

Acompanhamos o desenvolvimento (o nosso ou o teu), verificamos que o que foi construído respeita o design e medimos com dados o que funciona depois de publicar.
Contínuo

Para quem

É para ti?

O design UX/UI compensa quando há tarefas que as pessoas têm de concluir e dados para medir se o conseguem.

Para quem

Empresas com um site ou uma loja onde as pessoas se perdem, desistem ou telefonam para fazer algo que devia ser simples.
Equipas que vão construir uma aplicação ou um SaaS e querem validar os fluxos antes de programar.
Produtos que cresceram à base de remendos e precisam de um sistema de design para voltarem a ser coerentes.
Organizações que têm de cumprir requisitos de acessibilidade (WCAG 2.2 AA, European Accessibility Act) e preferem desenhá-la desde o início.
Equipas de produto ou de desenvolvimento internas que precisam de designers com critério técnico.

Para quem não

Se só precisas de um site institucional simples que transmita a tua marca: basta um projeto clássico de webdesign.
Se o que falta é a própria identidade de marca (logótipo, cores, tom): começa pelo branding.
Se procuras ecrãs bonitos sem tempo para investigar nem testar com utilizadores: não te daríamos aquilo que vendemos.

Entregáveis

O que entra e o que não entra

O que recebes no fim de um projeto de design UX/UI.

Incluído

Relatório de investigação com as tarefas-chave, os problemas detetados e a sua prioridade
Arquitetura de informação e fluxos das tarefas-chave
Protótipo navegável no Figma e resultados dos testes de usabilidade
Design de todos os ecrãs acordados, em telemóvel, tablet e computador
Sistema de design: componentes com os seus estados, tokens e regras de acessibilidade
Ficheiros de design editáveis e propriedade de tudo o que foi entregue

Não incluído

Desenvolvimento e programação (orçamentados à parte, com a nossa equipa ou com a tua)
Criação de marca e identidade visual de raiz (é um projeto de branding)

A prova

Design que se mede em resultados

No Teatre Nacional de Catalunya fizemos um redesign UX centrado em tarefas: a compra de bilhetes ficou a 2-3 cliques, o LCP em mobile desceu 37 % (de 3,8 para 2,4 s), as páginas por sessão subiram 18 % e o site cumpre as WCAG AA. No Tamarit Beach Resort desenhámos uma reserva mobile em 3 passos sobre o seu motor de reservas próprio, e as reservas diretas cresceram 35 %. Na Fundació Ampans o design inclusivo, com WCAG 2.1 AA, acompanhou um aumento de 200 % nos donativos online. E na TwoPoles o redesign das fichas de produto e das coleções, medido com CRO, levou a conversão de 2,1 para 2,5 %.

2-3 Cliques até à compra de bilhetes (TNC)
3 Passos da reserva mobile (Tamarit)
+35 % Reservas diretas (Tamarit)
5,0 Avaliação no Clutch

Para o CTO

Resumo para o CTO

Como o design encaixa na engenharia.

Desenhamos em componentes com todos os seus estados (normal, foco, erro, vazio, a carregar, desativado) e com tokens de cor, tipografia e espaçamento que passam tal e qual para o código. Assim, o sistema de design e a biblioteca de componentes falam a mesma língua e uma mudança de marca não obriga a rever ecrã a ecrã.

A acessibilidade especifica-se no design: contrastes de 4,5:1 no texto e de 3:1 nos controlos e no foco, área de toque mínima, ordem de foco e semântica de cada componente. Depois mede-se com axe-core e leitores de ecrã, não a olho. E o desempenho também se desenha: peso das imagens, tipos de letra e animações que não comprometam as Core Web Vitals, como no TNC.

Tecnologias

Figma
Tokens de design
Tailwind CSS
axe-core
Lighthouse
VoiceOver
TalkBack
GA4
Hotjar
Microsoft Clarity

Componentes com todos os seus estados, não só o estado ideal
Tokens de design que passam para o código sem reinterpretação
Acessibilidade WCAG 2.2 AA especificada e medida com axe-core
Desempenho tido em conta desde o design (imagens, tipos de letra, animação)
Revisão do design sobre o que foi construído antes de publicar

Riscos e como os cobrimos

Os riscos que evitamos

O que costuma correr mal num projeto de design.

01
Desenhar segundo a opinião de quem manda mais na reunião

Mitigação
Cada decisão importante apoia-se em investigação, dados de utilização ou testes com utilizadores, e fica documentada.
02
Um design bonito que depois não se consegue construir ou se constrói de outra forma

Mitigação
Design e desenvolvimento são a mesma equipa: o design é validado com critério técnico e revemos o que foi construído antes de publicar.
03
Acessibilidade acrescentada no fim, à base de remendos

Mitigação
Contraste, foco, áreas de toque e ordem de leitura definem-se no sistema de design e medem-se com axe-core.
04
Um produto que perde coerência a cada ecrã novo

Mitigação
Um sistema de design com componentes, tokens e regras de utilização que a tua equipa pode continuar a usar sem nós.

Tecnologias

Ferramentas

Com que investigamos, desenhamos e medimos.

Figma
Maze
Hotjar
Microsoft Clarity
GA4
Looker Studio
axe-core
Lighthouse
VoiceOver
TalkBack
NVDA
WCAG 2.2
Tailwind CSS
Tokens de design

Perguntas frequentes

Perguntas frequentes sobre design UX/UI

O que mais nos perguntam antes de começar.

Qual é a diferença entre UX e UI?

A UX (experiência do utilizador) decide como funciona o produto: que tarefas resolve, por que ordem, com que estrutura e com que conteúdo. A UI (interface do utilizador) decide como se apresenta e se usa cada ecrã: componentes, tipografia, cor, estados. Uma boa UI sobre uma má UX continua a ser difícil de usar; por isso trabalhamo-las juntas.

O que faz uma agência de design UX/UI?

Investiga como as pessoas usam o teu produto, organiza a informação, desenha e testa protótipos, cria a interface e um sistema de design, e acompanha o desenvolvimento para que o que se constrói respeite o que foi desenhado. No nosso caso, a mesma equipa pode também construí-lo.

Em que é diferente do webdesign?

O webdesign é o projeto de um site institucional que transmite a tua marca e gera contactos. O design UX/UI centra-se em produtos com tarefas: lojas, reservas, áreas privadas, aplicações ou plataformas SaaS, com investigação e testes com utilizadores. Muitos projetos de webdesign incluem UX; o que muda é a profundidade.

Quanto custa um projeto de design UX/UI?

Depende do número de fluxos e ecrãs, de quanta investigação e quantas rondas de testes forem precisas e de precisares ou não de um sistema de design completo. Não publicamos uma tarifa única: depois de uma primeira sessão de descoberta damos-te um orçamento fechado por fases. Connosco, um site institucional começa nos 4.500 €.

Quanto tempo demora?

Depende do âmbito: uma auditoria de UX a um fluxo concreto não é o mesmo que o design de um SaaS inteiro. Como referência real, o redesign integral do TNC, com design e desenvolvimento, demorou 8 meses. Depois da descoberta damos-te um calendário com marcos.

Fazem testes com utilizadores reais?

Sim. Testamos os protótipos com pessoas parecidas com os teus utilizadores antes de programar e, depois de publicar, medimos com analítica e mapas de calor. O que não se percebe muda-se no protótipo, que é onde mudar custa menos.

O que é um sistema de design e preciso de um?

É a biblioteca de componentes (botões, formulários, cartões, tabelas), com os seus estados, tokens e regras de utilização. Precisas de um se o teu produto tiver muitos ecrãs, se várias pessoas ou fornecedores desenharem e programarem sobre ele, ou se for para crescer. Para um site pequeno basta um guia de estilo.

O design cumpre as WCAG 2.2 AA?

Sim, de origem. Contraste suficiente, foco visível, áreas de toque, ordem de leitura e textos alternativos definem-se no design e medem-se depois com axe-core e leitores de ecrã. Se precisares de uma auditoria formal ou de cumprir o European Accessibility Act, fazemo-lo com o nosso serviço de acessibilidade web.

Podem desenhar e a minha equipa desenvolver?

Sim. Entregamos ficheiros editáveis, sistema de design e especificações, e acompanhamos a tua equipa durante o desenvolvimento. Se preferires que sejamos nós a construir, design e desenvolvimento estão na mesma equipa, sem passagens de testemunho.

Desenham aplicações móveis?

Sim: fluxos, navegação e componentes para iOS e Android, respeitando as convenções de cada sistema. Se também precisares de a construir, vê a nossa criação de apps.

Próximo passo