Pular para o conteúdo
Samara Alanna
PAPEL
UX/UI Designer & Desenvolvedora
CLIENTE
Projeto próprio
STACK
PHP, HTML, CSS, JS vanilla
TIME
Sozinha
PERÍODO
2026
Antes - 2025
Primeira versão do site do BORDA, de 2025, com a chamada Nunca foi tão fácil ter um site próprio
Depois - 2026
Site novo do BORDA, de 2026, com a chamada Se sua empresa não tem um site, você está perdendo dinheiro, sobre o fundo animado

01. Contexto

Redesign visual

Lancei a primeira versão do site em maio de 2025, com quiz, troca de idioma e CV para baixar. O site era bom, mas 1 ano se passou, meus conhecimentos e técnicas melhoraram, então o site novo nasceu!

02. Estrutura

A página conta a venda em ordem

Comecei pelo problema do cliente: antes de chamar alguém, a pessoa pesquisa no Google e compara. Depois mostro o que muda com um site e só então os serviços, com o preço aberto. Tirei o que não ajudava a decidir (quiz, inglês e CV), e cada botão de contato abre o WhatsApp com a mensagem certa para o serviço escolhido.

  1. Hero
  2. A busca no Google
  3. O que muda com um site
  4. Serviços e preços
  5. O que vem em todo site
  6. Projetos
  7. Como funciona
  8. Sobre
  9. Dúvidas
  10. CTA

03. Tela

Navegação limpa

No computador, cada seção ocupa a tela inteira, então a pessoa lê um assunto por vez sem precisar rolar a tela para terminar de ler ou ver alguma imagem. Em projetos, a rolagem passa os sites para o lado; em como funciona, ela troca as etapas do processo, uma de cada vez. No celular, tudo volta a rolar normalmente.

Seção de projetos do site novo do BORDA, com os sites lado a lado para a rolagem passar

04. Desempenho

Bonito sem ficar lento

O fundo animado do topo é o que dá a cara premium do site, e também o que mais pesaria. Fiz ele carregar só depois que o resto da página aparece, pausar quando sai da tela e ficar parado para quem prefere menos movimento. O resto do site não usa nenhuma biblioteca pronta.

1
Biblioteca de terceiros em todo o site, a do fundo animado
4
Fontes guardadas no próprio site, sem depender do Google
0
Redesenhos da tela durante as animações, medido no navegador

05. Medição

Sei de onde vem cada contato, com a permissão de quem visita

Nenhuma ferramenta do Google ou da Meta carrega antes de a pessoa aceitar os cookies, como pede a LGPD. Quem aceita me ajuda a saber qual serviço gera mais conversa: cada clique no WhatsApp registra de qual parte do site ele veio.

  1. Visita
  2. Aceite de cookies
  3. Gerenciador de tags
  4. Clique no WhatsApp com a origem
PRÓXIMO PROJETORemake do CRUD de permissões