O celular é onde o cliente decide
A maior parte das buscas por serviço local acontece no celular. Design responsivo não é encolher o site de computador: é pensar a tela pequena primeiro, com telefone e WhatsApp ao alcance do polegar.
Capacidade · Design UX UI
Design UX UI: experiência que faz o visitante virar cliente
Não é curso nem portfólio de tela bonita. Aqui, design UX UI é o desenho do site de uma empresa para o visitante achar o serviço, confiar e pedir orçamento — no celular, com acessibilidade AA e sem tropeço. Design UX UI: o que é, como fazemos e o que você recebe.
Capacidade da Rankup · Experiência e conversão · entra em Criação de sites
Definição
O que é Design UX UI
Design UX UI é o trabalho de desenhar a experiência do usuário (UX: o caminho, a lógica e a facilidade de uso) e a interface do usuário (UI: cores, tipografia, botões e espaçamento) de um site ou aplicativo. O UX decide o que a pessoa precisa fazer; o UI decide como isso aparece na tela.
Se a pergunta é o que é design UX UI num site de empresa, a resposta curta é: hierarquia visual que leva ao contato. Web design UX UI bom não chama atenção para si — mostra o serviço, a prova e o botão certo, na ordem certa. Ele parte de uma mensagem definida antes (o BrandScript) e é medido pela otimização de conversão.
Design UX UI
Por que isso muda o seu resultado
Usabilidade ruim parece empresa ruim
Menu confuso, texto cinza-claro e botão que não parece botão passam descuido. Quem procura uma marcenaria sob medida julga o acabamento do serviço pelo acabamento do site.
Acessibilidade amplia o público e ajuda o SEO
Contraste, tamanho de toque, texto alternativo e navegação por teclado atendem quem tem baixa visão ou usa leitor de tela — e são sinais que o Google e as IAs também usam para ler a página.
Design UX UI na prática
Como fazemos
Jornada e arquitetura
O processo de design UX UI começa pelas buscas e dúvidas reais do cliente: o que ele procura, o que precisa ver para confiar e qual ação deve tomar. Isso vira a arquitetura de cada página.
jornada definidaWireframe
Esqueleto da página em cinza, sem cor nem foto: ordem das seções, hierarquia visual e posição dos CTAs. É onde se corrige a estrutura — barato e rápido.
estrutura aprovadaProtótipo e design system
Protótipo navegável no Figma, com design system próprio — cores, tipografia, botões e componentes reutilizáveis — desenhado primeiro na tela do celular.
mobile-firstAcessibilidade e entrega
Contraste, foco, áreas de toque e textos alternativos conferidos no padrão WCAG AA antes de ir para o código da criação de sites ou da criação de landing pages.
WCAG AA
Ferramentas e critérios
Ferramentas e critérios que usamos
- FigmaWireframe, protótipo navegável e design system no mesmo arquivo.
- WCAG 2.2 nível AAO padrão de acessibilidade que seguimos: contraste, foco visível, áreas de toque e alternativas de texto.
- Lighthouse e axeAuditoria automática de acessibilidade em cada página publicada.
- Microsoft ClarityMapa de calor e gravação de sessão para ver a usabilidade real, não a imaginada.
- Teste em aparelho realAndroid de entrada e iPhone, em rede 4G, antes de aprovar cada tela.
Entregáveis
O que você recebe
- ✓Mapa de páginas e jornada do usuário
- ✓Wireframes das páginas-chave
- ✓Protótipo navegável no Figma, versão celular e computador
- ✓Design system com cores, tipografia e componentes
- ✓Relatório de acessibilidade AA por página
Agência de design UX UI ou tema pronto?
Tema pronto x design UX UI sob medida
Tema pronto resolve a aparência, não o caminho até o contato. Veja projetos reais em cases ou peça o diagnóstico SEO gratuito para saber onde o seu site trava.
| Critério | Tema pronto | Design UX UI da Rankup |
|---|---|---|
| Estrutura | A que o tema trouxe | Pensada para a busca e para o contato |
| Celular | Versão encolhida | Desenhado primeiro no celular |
| Acessibilidade | Não verificada | WCAG AA conferido |
| Componentes | Genéricos | Design system da marca |
| Velocidade | Scripts sobrando | Só o que a página usa |
No seu projeto
Página-mãeCriação de sitesVer o serviço →Onde o design UX UI entra no seu projeto
É a etapa opcional — e recomendada — da criação de sites: vem depois do BrandScript e antes do código. Num site que já existe, entra como ajuste das telas onde a análise mostra que o visitante trava. É assim que a agência de SEO entrega um site focado em conversão, não só bonito.
Capacidades que andam junto
Perguntas frequentes
Perguntas frequentes sobre Design UX UI
O que é design UX e UI?
UX (user experience) é a experiência do usuário: o caminho, a lógica e a facilidade de chegar ao objetivo. UI (user interface) é a interface: o visual de cada tela. Num site, os dois juntos decidem se o visitante encontra o que procura e entra em contato.
O que o UI Designer faz?
Desenha a parte visual das telas: cores, tipografia, ícones, botões e espaçamento, organizados num design system. Num projeto da Rankup, o UI vem depois do wireframe aprovado — primeiro a estrutura, depois a aparência.
UX UI designer: o que faz num site de empresa?
Traduz o que o cliente procura em páginas fáceis de usar: define a ordem das seções, onde fica o CTA, como o menu funciona no celular e como o site fica acessível. O objetivo é o contato, não um prêmio de design.
O design de UX é difícil?
O difícil não é a ferramenta, é decidir com base no usuário e não no gosto. Por isso o processo começa por dados — buscas, mapa de calor, dúvidas que chegam ao comercial — e passa pelo wireframe antes da cor.
Todo site precisa de design UX UI sob medida?
Não. Na Rankup o design é opcional: um bom tema, bem configurado, atende muitos negócios. O sob medida compensa quando a empresa tem vários serviços, público exigente ou uma página que precisa converter muito, como a de uma empresa de energia solar.
Qual a diferença entre wireframe e protótipo?
Wireframe é o esqueleto estático da página, sem cor nem foto, para aprovar a estrutura. Protótipo é a versão navegável, já com o visual, para testar o uso antes de programar.
Diagnóstico gratuito
Veja onde o seu site atrapalha o cliente
O diagnóstico gratuito aponta os pontos de usabilidade, celular e acessibilidade que mais custam contato — e o que redesenhar primeiro.