Design UX/UI: o verdadeiro processo da pesquisa à entrega

UX vs UI: a diferença que custa dinheiro

UX é como um site funciona. UI é como ele parece. Um bom design começa com o problema de um usuário, não com uma paleta de cores.Se alguém não consegue dizer onde clicar, a interface mais bonita não vai te salvar — eles fecham a aba e vão para um concorrente cujo botão estava visível.

Formalmente, experiência do usuário é toda a jornada: como uma pessoa chegou, o que estava procurando, o que encontrou, quantos passos foram necessários, onde tropeçou, como se sentiu no final. UI é a camada visual dessa jornada: tipografia, cor, grade, estados de botão, ícones, espaçamento. As camadas estão conectadas, mas resolvem problemas diferentes.

Por que a diferença é comercial, não acadêmica

Imagine duas lojas online. A primeira parece simples, mas os filtros respondem instantaneamente, os preços são visíveis de imediato e o checkout leva três campos. A segunda tem animação bonita, fotografias enormes e um carrinho que exige registro antes de mostrar os custos de envio. A primeira vende mais. Não porque a aparência não importa, mas porque a receita vem de uma ação completada, não de uma impressão.

Então aqui está a fórmula de trabalho: UX decide se alguém atinge o objetivo, UI decide se eles confiam em você no caminho. Você precisa de ambos. Mas quando você tem que escolher o que consertar primeiro, conserte a lógica.

O que o design não faz

• Ele não resgata um produto ruim. Se seu preço está acima do mercado sem explicação, o layout não vai esconder isso.
• Ele não substitui o tráfego. Um forte Design UX/UI aumenta a conversão de visitante para consulta, mas alguém ainda precisa trazer os visitantes.
• Ele não lê mentes. Sem dados sobre os clientes, um designer adivinha — e adivinhar custa mais do que pesquisa.

É por isso que em nossos serviços de estúdio o design nunca aparece como um item isolado chamado "desenhar um mockup". Ele corre ao lado de análises, conteúdo e desenvolvimento — caso contrário, você obtém uma imagem cara que ninguém consegue realmente construir.

Passo 1. Pesquisa, metas e uma revisão de concorrentes

O design começa com a pergunta "o que deve acontecer neste site", não "qual cor você gosta". Até que isso seja respondido, cada revisão é discutida com base no gosto — e gosto é uma discussão que ninguém vence.

O que estabelecemos de antemão

• O objetivo do negócio. Consultas? Pedidos? Reservas? Candidaturas a empregos? Um objetivo é primário; os demais são secundários.
• A ação alvo. O botão específico que uma pessoa deve pressionar. Se houver cinco e todos eles forem "o principal", nenhum será pressionado.
• O público. Quem eles são, quanto sabem sobre o assunto, qual dispositivo usam, o que já sabem sobre você.
• As objeções.Por que hesitam: muito caro, muito lento, pouco claro, "eles vão fazer meu tipo de trabalho".
• As restrições.Prazos, orçamento, CRM existente, identidade da marca, requisitos legais.

Os dados não precisam ser caros. Gravações de chamadas de vendas, conversas de chat, consultas de busca no site, mapas de calor, as perguntas que os clientes fazem com mais frequência — isso já é o suficiente para parar de adivinhar. Se a análise estiver em execução, veja onde as pessoas desistem e em qual etapa.

Revisão de concorrentes — não para copiar

Você olha para os concorrentes para aprender as regras do mercado e encontrar as lacunas. As regras são o que um usuário espera por padrão: preço, prazos, o que está incluído, avaliações. As lacunas são o que ninguém oferece: uma calculadora, prazos honestos, fotos reais em vez de imagens de banco, uma explicação simples do processo. Copiar o layout de alguém é inútil — você não sabe se funciona para eles, e herda os erros deles junto com suas decisões.

Uma revisão heurística

Se um site já existe, analise-o com base nos princípios básicos usabilidade de site antes que alguém desenhe qualquer coisa: está claro onde você está; o status do sistema é visível; uma ação pode ser desfeita; os erros são compreensíveis; a interface fala a língua do cliente; você precisa manter as coisas na sua cabeça entre as telas. Dois dias disso produzem uma lista de problemas, metade dos quais pode ser corrigida sem um redesign.

Passo 2. Cenários de usuário em vez de páginas

As pessoas não vêm "a um site" — elas vêm para fazer algo.Então você projeta cenários, não páginas: o que uma pessoa faz, passo a passo, da chegada ao resultado.

Um cenário cabe em uma frase simples. "Um pai está procurando um clube pós-escola perto de casa, quer ver o cronograma e o preço, e reservar uma sessão experimental de um telefone em cinco minutos." É isso. Só a partir dessa frase você pode ver os requisitos: um filtro de localização, um cronograma legível, um preço sem "entre em contato conosco para mais detalhes", um formulário curto e um número de telefone clicável.

Quantos cenários você precisa

Para um site de serviços, geralmente de três a cinco. Mais e você se espalha; menos e você está perdendo algo. Um conjunto típico: "nunca ouvi falar desta empresa, apenas pesquisando", "comparando com um concorrente, procurando uma razão para escolher um", "já decidido, quero entrar em contato rapidamente", "cliente existente, preciso de um contato ou um documento".

Estados diferentes, telas diferentes

Designers juniores desenham apenas o estado perfeito: catálogo completo, nomes curtos, cada foto no lugar. A realidade é mais rica. Cada tela chave precisa de estados:

• Vazio — o filtro não encontrou nada, o carrinho está vazio, ainda não há pedidos. O que a pessoa vê e para onde ela vai a seguir?
• Carregando — o que está na tela enquanto os dados viajam.
• Erro — o servidor está fora do ar, o pagamento falhou, um campo está errado.
• Transbordo — um nome de produto de três linhas, 40 itens, uma resenha de 2.000 caracteres.
• Sucesso — o formulário foi enviado. E agora? "Obrigado" não é uma resposta; as pessoas querem saber quando alguém vai ligar.

Os estados são a parte mais chata e mais valiosa do trabalho. Eles são exatamente o que separa um mockup que você pode construir de um mockup que faz seu desenvolvedor te contatar a cada meia hora.

Passo 3. Arquitetura da informação

A arquitetura da informação é onde as coisas vivem e como são chamadas. Ela resolve metade dos seus problemas de navegação antes que o primeiro pixel exista.

O trabalho parece simples e é tedioso na prática: coletar todo o conteúdo, agrupá-lo por significado, nomear os grupos com as palavras do cliente, definir a prioridade. A parte chave é as palavras do cliente. "Soluções" faz sentido para você; a pessoa está procurando por "reparo de geladeira". Seu organograma interno nunca deve vazar para o menu.

Regras que economizam tempo

• O menu não é um depósito. Cinco a sete itens de nível superior. Se não couber, o agrupamento está errado.
• Profundidade de três cliques no máximo para qualquer página importante. Além disso, você perde pessoas.
• Um significado, uma página.Duas páginas semelhantes competem entre si na navegação e na busca.
• O rótulo é a consulta.Um item de menu deve corresponder à forma como uma pessoa realmente pensa e fala sobre isso.

Prioridade dentro da página

Dentro de uma página, a mesma lógica se aplica: responda primeiro, depois detalhe, depois prove, depois aja. Um visitante decide em segundos se está no lugar certo, e decide a partir da primeira tela. Se o topo da página diz "Bem-vindo ao nosso site", você gastou seu espaço mais valioso em um espaço reservado.

A ordem dos blocos também é design — e é a parte que mais movimenta dinheiro. Analisamos a lógica da sequência de blocos em nosso artigo sobre estrutura da página de destino: mesmas mecânicas, comprimidas em uma única página.

Testando a arquitetura sem maquete

Dê a lista de nomes de seções a cinco pessoas fora do projeto, peça que as classifiquem em grupos e digam o que esperariam encontrar onde. As discordâncias mostrarão os pontos problemáticos em uma hora. É barato e é melhor do que discutir em uma sala de reunião.

Passo 4. Wireframes: o esqueleto sem maquiagem

Um wireframe é um esquema em preto e branco de uma tela: o que vem depois do que, o que importa mais, onde está a ação.Sem tipos sofisticados, sem sombras, sem fotografias. Deliberadamente.

O objetivo da tonalidade cinza é eliminar tudo que distrai da estrutura. Mostre uma maquete colorida e o cliente inevitavelmente dirá "faça o botão mais brilhante", e a conversa sobre o botão estar no lugar errado nunca acontece. Um wireframepuxa a discussão de volta para a substância: está claro o que esta empresa é, o que oferece, por que confiar nela e o que fazer a seguir.

O que pertence a um wireframe

• Títulos e rótulos reais, não Lorem ipsum. Texto fictício mente sobre comprimento e significado.
• O número real de elementos: se o catálogo tem 12 itens, não desenhe três.
• Cada estado chave do passo anterior.
• Versões móveis e de desktop das telas chave imediatamente, não "vamos adaptar isso depois".

Quantas telas desenhar

Não todas elas. Você desenha tipos de página: página inicial, página de serviço, catálogo, página de item, formulário, artigo, contato, páginas utilitárias (404, agradecimento). Tudo o mais se monta a partir dos mesmos blocos. Se cada nova página precisa de um novo mockup, você não tem um sistema — você tem uma pilha de imagens.

Este é o lugar mais barato para discutir

Mover um bloco em um wireframe leva minutos. Mover em um site construído, conectado ao CMS, leva dias e dinheiro. Então, é exatamente aqui que você deve se opor, fazer perguntas desconfortáveis e exigir justificativas. A partir daqui, o preço de uma mudança sobe a cada passo.

Passo 5. O conceito de UI: como a confiança se parece

Uma vez que a estrutura é acordada, a camada visual chega. Seu trabalho não é decoração — é tornar a estrutura óbvia e conquistar confiança.

A confiança em uma interface é construída a partir de coisas entediantes: uma grade organizada, espaçamento consistente, texto legível, fotos reais em vez de imagens de banco, números honestos, uma ausência de ruído visual. Ninguém pensa "eu amo essa grade modular" — eles simplesmente sentem que as coisas aqui estão em ordem, então o trabalho provavelmente também estará em ordem. O inverso é verdadeiro: logotipos de clientes desalinhados e três azuis diferentes são lidos como "jogados juntos".

Do que é feito um conceito de UI

• Tipografia.A combinação de tipos, tamanhos, altura da linha, comprimento da linha. Isso é 80% de como um site se sente, porque um site é principalmente texto.
• Cor.Uma base neutra, um acento reservado para a ação alvo, cores funcionais para erros e sucesso. Gaste o acento apenas no que importa, ou ele para de funcionar.
• Grade e ritmo.Um passo de espaçamento (um múltiplo de 4 ou 8, por exemplo) em vez de medir cada espaço a olho.
• Imagens.Suas próprias fotos do trabalho e das pessoas superam imagens de banco perfeitas, porque ninguém acredita em imagens de banco.
• Tom.A interface fala: formal, amigável, técnica. Essa é uma decisão, não um acidente.

Um conceito é uma tela, não todo o site

Geralmente, você apresenta a página inicial ou uma página de serviço chave em duas ou três direções. O objetivo é concordar com uma linguagem, não aprovar uma versão final. Como essa linguagem se parece em projetos reais é mais fácil de ver no portfólio: setores diferentes precisam de um tom visual diferente, embora o processo por trás deles seja idêntico.

E a parte essencial: um conceito é julgado pelo "serve ao objetivo", não pelo "gosto disso". Mais sobre isso na seção de feedback.

Passo 6. Sistema de design e componentes

Um sistema de design é um conjunto de blocos prontos mais as regras para construir com eles.Botões, campos, cartões, cabeçalhos, espaçamento, estados — definidos uma vez e reutilizados em todos os lugares.

Sem um sistema, cada nova tela é desenhada do zero. Seis meses depois, o site abriga sete tons de cinza, quatro tamanhos de botão e três tipos de cartão de produto, e ninguém se lembra do porquê. Com um sistema, uma nova página se monta em horas em vez de dias e parece parte do todo.

O que há em um sistema

• Tokens.Cores, tamanhos de fonte, raios, sombras, o passo de espaçamento — como variáveis nomeadas, não valores inventados na hora.
• Componentes.Um botão com cada estado (padrão, hover, foco, pressionado, carregando, desativado), uma entrada com erro e dica, um cartão, um modal, uma tabela, paginação.
• Regras de composição.Qual cabeçalho quando, quanto espaço entre blocos, como os elementos se comportam em caso de transbordamento.
• Padrões.Formulários, filtros, checkout — montagens padrão construídas a partir de componentes.

Por que o cliente deve se importar, não apenas o designer

Um sistema é economia para o seu futuro. Um novo serviço, uma página de destino de campanha, uma seção extra — tudo isso se monta a partir do que existe e não precisa de um novo projeto de design. Também impede que o site se desintegre ao longo do tempo à medida que diferentes pessoas fazem edições.

A escala depende do projeto: um pequeno site de brochura precisa de uma única página de regras, um grande catálogo ou produto precisa de uma biblioteca adequada. No projeto Astrina o sistema de componentes é exatamente o que manteve cada tipo de página com uma aparência consistente sem desenhar cada tela separadamente.

Passo 7. Protótipo, entrega para desenvolvedores e QA de design

Um protótipo é um mockup clicável no qual você pode percorrer todo um cenário antes que uma única linha de código exista. Ele responde à pergunta que uma imagem estática não pode: "o que acontece quando eu pressiono isso?"

Protótipos capturam erros caros: um passo redundante em um formulário, um beco sem saída após a submissão, um caminho confuso de volta, um filtro que se redefine. Cinco pessoas percorrendo o cenário em voz alta ensinam mais do que um mês de debate interno. Você não precisa de um laboratório — você precisa de alguém da audiência, uma tarefa e um observador que fique em silêncio.

O que uma entrega realmente contém

• Mockups em duas ou três larguras-chave: móvel, tablet/intermediário, desktop.
• Cada componente e estado de tela.
• Tokens e regras: cores, tipo, passo de espaçamento, comportamento de overflow.
• Comportamento: o que é clicável, o que abre, o que anima e em quantos milissegundos.
• Cópia final, não cópia de espaço reservado. Ativos: ícones, imagens, logotipos nos formatos corretos.
• Casos extremos: um título muito longo, uma foto faltando, zero resultados.

Uma boa entrega não é "aqui está um link para o arquivo". É uma reunião onde o designer e o desenvolvedor percorrem os mockups e dizem as partes não óbvias em voz alta. Meia hora de conversa economiza uma semana de mensagens.

QA de design: a verificação após a construção

Uma vez que o site está montado, o designer o revisita — desta vez em um navegador. Espaçamento, quebra de texto, estados, comportamento com dados reais, foco, velocidade de animação, comportamento do formulário. É uma fase curta, mas se você pular, sempre haverá uma lacuna entre o mockup e o site ao vivo. A regra é simples: até que o QA de design seja aprovado, o projeto não está terminado.

Mobile-first e acessibilidade em linguagem simples

Você começa a projetar na tela do telefone — não porque é da moda, mas porque as restrições são mais rigorosas lá.Se o conteúdo se encaixa e funciona a 360 pixels de largura, ele se desdobrará no desktop sem problemas. A outra direção quase nunca funciona.

Mobile-first é uma disciplina de prioridades. Em uma tela pequena, você não pode mostrar tudo de uma vez, então é forçado a responder honestamente o que importa mais. Essa resposta também melhora a versão para desktop.

O que verificar no mobile

• Alvos de toque não menores que a ponta do dedo. Links pequenos amontoados produzem toques errados e irritação.
• Nada sai da borda; não há rolagem horizontal.
• O número de telefone disca, o endereço abre um mapa, os campos do formulário convocam o teclado certo.
• A ação importante é acessível sem rolagem infinita.
• Imagens pesadas não prejudicam o carregamento em uma conexão móvel.

Acessibilidade: quatro coisas que lhe dão 80% do resultado

• Contraste.Texto cinza claro em branco parece elegante em um mockup e é ilegível ao ar livre sob a luz do sol. O contraste ajuda pessoas com baixa visão — e ajuda você, em uma tela barata, em movimento.
• Foco.Ao navegar com um teclado, você pode ver em qual elemento está. Remover o anel de foco "porque é feio" é um erro comum e sério.
• Teclado.Todo o formulário pode ser preenchido e enviado sem tocar em um mouse. Um modal pode ser fechado; um menu pode ser escapado.
• Texto alternativo.Uma descrição curta do que uma imagem significa. Ajuda usuários cegos e motores de busca.

A acessibilidade não é uma fase separada e cara. É um conjunto de hábitos: nunca confie apenas na cor para transmitir significado, rotule os campos em vez de depender de espaços reservados, escreva mensagens de erro que um humano possa agir. Incorporado no tempo de design, custa centavos. Adicionado após o lançamento, custa dinheiro de verdade.

O texto é parte do design

Uma interface é feita de palavras mais do que de gráficos.O cabeçalho, o rótulo do campo, o texto do botão, a mensagem de erro — todas essas são decisões de design que estão escritas em letras.

O que nos dá uma regra: projetar sem conteúdo finalizado é adivinhação. O designer inventa um cabeçalho de três palavras; o do cliente tem doze. Inventa três benefícios; os reais são dois, e são diferentes. O mockup desmorona na fase de conteúdo, e todos ficam surpresos.

Palavras que consertam interfaces

• Botões descrevem o resultado."Obter uma cotação" é melhor que "Enviar". Uma pessoa deve saber o que acontece após o clique.
• Os títulos respondem, não provocam."Sites para clínicas médicas" funciona; "Criamos o futuro" não funciona.
• Erros dizem o que fazer."Formato inválido" é ruim. "Digite o número de telefone como +44..." é bom.
• Rótulos superam suposições.Se um campo precisa de algo específico, diga isso antes do erro, não depois.
• Menos palavras, mesmo significado.Cada frase extra diminui as chances de que a necessária seja lida.

Uma prática economiza semanas: redija o texto para telas-chave antes de qualquer coisa ser desenhada — mesmo que de forma aproximada, em uma planilha. Então o designer trabalha com comprimentos reais e significados reais em vez de distorcer a realidade para se ajustar a um layout.

Como dar feedback útil e quantas rodadas de revisão são normais

A causa mais comum de projetos arrastados não é "um designer ruim" — é o feedback expresso como gosto."Não me atrai", "faça mais moderno", "minha esposa não gostou" — você não pode responder a isso com trabalho, apenas com outra tentativa de adivinhar.

A fórmula para um comentário útil

Fale sobre o problema, não sobre a solução. A forma é: o que vejo → o que me preocupa → o que isso arrisca. Por exemplo: "A primeira tela não diz que trabalhamos em todo o país. Os clientes perguntam sobre isso na primeira ligação — temo que alguns deles não cheguem ao formulário de jeito nenhum." Isso é algo com que um designer pode trabalhar. "Faça o botão vermelho" é uma solução finalizada, e provavelmente não se trata do botão.

Regras que aceleram a aprovação

• Colete revisões em uma única lista de todos os envolvidos, em vez de deixá-las pingar no chat o dia todo.
• Nomeie um único tomador de decisão. Se cinco pessoas aprovam, o mockup se torna uma média — e médias não vendem.
• Veja no seu próprio telefone, não apenas em um grande monitor. É assim que seus clientes veem.
• Não reabra decisões já estabelecidas. Uma estrutura acordada se reabre para novos fatos, não para um novo humor.

Quantas rodadas são normais

Prática comum: duas rodadas de revisões por etapa (estrutura, conceito, mockups) mais um polimento final. Isso não é avareza do estúdio — protege o projeto. Rodadas intermináveis quase sempre significam que o objetivo não está acordado, não os pixels. Se a terceira rodada é uma discussão sobre a mesma coisa, o problema reside na etapa de pesquisa, e é lá que você deve voltar.

Erros caros e comuns

• Projetar sem conteúdo. Um mockup construído com texto fictício desmorona quando o texto real chega. Sempre.
• Copiando um concorrente. Você está copiando uma imagem sem saber se funciona para eles.
• Decoração em vez de clareza. Animação, paralaxe e sliders em vez de responder "o que você vende".
• Muitos objetivos em uma tela.Cinco botões igualmente ponderados equivalem a zero cliques.
• Projetando para o júri.Um mockup de prêmios e um mockup de vendas são gêneros diferentes.
• Ninguém possui a aceitação.Um projeto sem um responsável pela decisão se arrasta por meses.

Lista de verificação: avaliando um design antes de ir para o desenvolvimento

Antes que os mockups vão para a construção, execute esta lista. Cada item é uma mudança que custa minutos agora e dias depois.

Significado

• Em 5 segundos, a primeira tela te diz: qual é a empresa, o que ela oferece, para quem e o que fazer a seguir.
• Cada tela tem uma ação principal, e é visualmente a principal.
• Objeções chave são respondidas: preço ou uma faixa de preço, prazos, garantias, quem você é.
• Cada afirmação é respaldada: estudos de caso, avaliações com nomes, números que você pode realmente provar.

Estrutura

• Os blocos seguem "resposta → detalhe → prova → ação".
• Navegação: 5–7 itens, rótulos nas palavras do cliente, qualquer coisa importante em até 3 cliques.
• Nenhuma duas páginas sobre a mesma coisa.

Completude

• Há uma versão móvel de cada tipo de página, não apenas desktop.
• Estados são desenhados: vazio, carregando, erro, sucesso, texto longo, muitos itens.
• O texto é final, as imagens são reais, sem Lorem ipsum em lugar algum.
• Páginas utilitárias existem: 404, agradecimento, falha de pagamento se você precisar de uma.

Sistema e acessibilidade

• Botões, campos e cartões vêm de um único conjunto em vez de serem redesenhados por tela.
• O espaçamento segue um único passo; há exatamente tantas cores quanto necessário.
• O contraste do texto é suficiente, o foco é visível, o formulário pode ser completado pelo teclado.
• Imagens têm descrições alt, campos têm rótulos, erros têm texto humano.

Prontidão para construção

• Um desenvolvedor revisou os mockups antes da aprovação e confirmou que é viável construir dentro do cronograma.
• O comportamento está documentado: cliques, aberturas, animações, comportamento do formulário.
• Está claro o que é editável no admin e o que está codificado.
• Alguém é nomeado para aceitar a QA de design após a construção.

Se cada item for um sim, entregue com confiança. Se mais de três forem não, você não está pronto — e a construção não vai consertar esses buracos, vai cimentá-los. Quer uma visão externa do seu site atual ou dos mockups que alguém desenhou para você?Entre em contato — nós vamos comparar com esta mesma lista e dizer honestamente o que consertar primeiro.

FAQ