Sites e Landing Pages · Design
Design e interface do site: layout que guia o olho até o botão certo
A maior parte das visitas acontece no celular. Por isso o desenho começa por ele.
Efeito Digital · BrasíliaAtualizado em 23 de outubro de 20264 min de leitura
Em resumo
Design de interface é a forma visual do site: hierarquia, layout, componentes, imagens e acessibilidade, pensados para levar o visitante à ação esperada. A Efeito Digital, de Brasília, desenha no Figma a partir da sua identidade visual, começa pela tela do celular, usa o texto real aprovado e entrega um protótipo navegável antes de qualquer linha de código.
IPor que design de site não é só estética
Um site bonito que ninguém entende é decoração. O trabalho do design é organizar a atenção: o que o visitante vê primeiro, o que lê depois e onde clica no fim. Cor, tamanho, espaço e imagem servem a essa ordem.
Começar pelo celular muda as decisões. Na tela pequena não cabe tudo, então o design obriga a escolher o essencial. Quando a versão de celular funciona, a de computador fica fácil. O contrário quase nunca acontece.
A gente desenha com o texto aprovado na etapa de copy. Isso evita o clássico título que ficou perfeito no layout com três palavras de exemplo e quebra em quatro linhas com o texto real.
No Grupo GAP, dono das lojas Simmons e Kasa dos Colchões em Brasília, o site novo da Simmons Brasília fez parte de um trabalho maior, com diagnóstico organizacional, reativação de base e criativos. O design precisou conversar com a marca da loja e com o que o vendedor fala no balcão.
Celular primeiro. Texto real desde a primeira tela.
IISinais de que o design do site está atrapalhando
- Botão escondidoA chamada para ação aparece só no fim da página ou some no celular.
- Texto difícil de lerFonte pequena, pouco contraste ou parágrafos enormes no celular.
- Visual que não parece com a marcaO site usa cores e fontes diferentes das redes e da apresentação comercial.
- Página nova é sempre um projetoNão há componentes reutilizáveis, então cada página nova é desenhada do zero.
- Imagens pesadasFotos lindas que deixam a página lenta.
IIIO que vem dentro do layout aprovado
O entregável é o arquivo do Figma com as telas finais e a biblioteca de componentes. Ele fica com a sua empresa e serve de base para qualquer página nova.
| Item | Conteúdo | Para que serve |
|---|---|---|
| Telas de celular | Cada modelo de página | Aprovação da experiência principal. |
| Telas de computador | Os mesmos modelos adaptados | Versão para quem acessa no escritório. |
| Componentes | Botões, cards, formulários, seções | Criar páginas novas mantendo o padrão. |
| Guia de estilo da web | Cores, tipografia e espaçamentos | Referência para o desenvolvimento. |
| Protótipo | Fluxo clicável | Testar a navegação antes do código. |
IVQuanto tempo leva o design do site
No cronograma padrão de oito semanas, design e protótipo ocupam da terceira à quinta semana. A direção visual é aprovada primeiro, e só então o layout completo é desenhado.
Se a empresa ainda não tem identidade visual definida, vale resolver isso antes, no serviço de branding. Desenhar site sem marca é escolher cores duas vezes.
VComo esta frente se conecta às outras frentes de Sites e Landing Pages
- Copy e narrativaO layout é desenhado com o texto real, que define tamanhos e hierarquia.
- Estratégia e arquiteturaOs wireframes aprovados guiam a ordem dos blocos de cada tela.
- DesenvolvimentoOs componentes do Figma viram componentes de código, com o mesmo nome.
- Publicação e pós-lançamentoO checklist de lançamento confere se o site no ar está fiel ao layout aprovado.
VIErros comuns no design de sites
- Desenhar só para o computadorA versão de celular vira adaptação apertada e perde os botões.
- Animação demaisMovimento que distrai e pesa a página atrapalha a conversão.
- Banco de imagem genéricoFoto de pessoas sorrindo para o notebook não prova nada. Foto real da sua equipe e do seu trabalho prova.
- Ignorar acessibilidadeContraste baixo afasta parte do público e ainda prejudica a leitura de todo mundo no sol.
Passo a passo
Como a gente faz, na ordem
- 01Direção visualReferências e decisões de estilo apresentadas a partir da sua marca e aprovadas antes do layout completo.
- 02Layout em alta fidelidadeTelas finais no Figma para celular e computador, com o texto real da copy aprovada.
- 03Biblioteca de componentesBotões, cards, seções e formulários padronizados, para criar páginas novas sem desenhar do zero.
- 04AcessibilidadeContraste, tamanho de fonte e área de toque conferidos para qualquer pessoa conseguir usar o site.
- 05Imagens e íconesTratamento das suas fotos e escolha de ícones e ilustrações coerentes com a marca, já pensando em peso de arquivo.
- 06Protótipo navegávelVersão clicável no Figma para você aprovar o fluxo no seu próprio celular antes do desenvolvimento.
Na prática
Grupo GAP (Simmons + Kasa dos Colchões)
Duas marcas de colchão, um mesmo dono e uma pergunta: como vender mais sem uma roubar a outra?
De um lado, a Simmons, marca premium. Do outro, a Kasa dos Colchões, popular. Mesmo grupo, mesma cidade.
Ler o case completoPerguntas frequentes
O que costumam perguntar
O que é design mobile first?
É desenhar primeiro a versão de celular do site e depois adaptar para telas maiores. Força a priorizar o essencial e melhora a experiência de quem acessa pelo telefone.
Em que ferramenta o site é desenhado?
No Figma. O arquivo fica com a sua empresa, com telas e biblioteca de componentes.
Posso ver o site antes de ele ser programado?
Sim. O protótipo navegável no Figma permite clicar e navegar pelo fluxo no seu celular antes do desenvolvimento.
Preciso ter identidade visual pronta?
É o ideal. Se a marca ainda não tem logo, cores e tipografia definidos, a Efeito pode fazer a identidade antes, no serviço de branding.
Vocês fazem landing page de campanha também?
Sim. Landing page segue o mesmo processo, em ciclo mais curto: uma página, um objetivo, e componentes que podem ser reaproveitados nas próximas campanhas.
O design considera acessibilidade?
Sim. Contraste, tamanho de fonte e área de toque são conferidos em todas as telas.
Continue
Próximo passo
Vamos começar pelo diagnóstico?
Conta pra gente o momento da sua empresa. A gente responde no WhatsApp, marca uma conversa e, se fizer sentido, audita suas contas antes de qualquer proposta.
- Resposta no mesmo dia útil
- Conversa com quem executa, não com um robô de vendas
- Sem compromisso e sem proposta empurrada