One Page – estética empório
SITE INSTITUCIONAL
| CATEGORIAS | Front-end Development |
|---|---|
| RECURSOS | FIGMA, PHOTOSHOP, HTML e CSS |
| PROJETO | VER PROJETO |
- Compartilhe
Introdução ao Projeto
O projeto consistiu no desenvolvimento de uma página única (one page) para o salão de beleza estética empório. A marca já possuía identidade visual consolidada, o que orientou as escolhas de cor, tipografia e estilo geral do layout. O objetivo foi criar uma página moderna e direta, seguindo a tradição dos sites institucionais bem estruturados, mas com recursos atuais que reforçam presença digital e credibilidade.
O visual precisava transmitir profissionalismo, cuidado estético e clareza, valores centrais para negócios da área da beleza. O resultado foi uma página simples, mas organizada e fiel à essência da marca.
Etapas do Processo de Design e Desenvolvimento Front-end
1. Análise e preparação
Foi realizada a leitura da identidade visual já existente, isso serviu como guia para garantir coerência entre marca física e ambiente digital. A partir desse estudo, foram definidas hierarquias tipográficas, combinações de cor e padrões de espaçamento.
2. Estruturação do conteúdo
O site segue a lógica tradicional de navegação vertical em seções: Hero, Sobre Nós, Diferenciais, Serviços, botão call to action para contato WhatsApp, carrossel de marcas, Instagram e Rodapé com informações de endereço, telefones, horário de funcionamento, redes sociais e direitos autoriais. Cada bloco foi pensado para reforçar credibilidade e facilitar a leitura, sem excessos visuais.
3. Prototipação no Figma
O wireframe evoluiu para um layout de alta fidelidade. A construção no Figma permitiu organizar grade, ritmo visual e equilíbrio entre texto e imagem. O objetivo foi manter um design limpo, mas com personalidade, aproveitando os tons quentes da marca para reforçar sensações de acolhimento e cuidado.
4. Desenvolvimento em HTML e CSS
A codificação seguiu princípios clássicos do front-end: HTML semântico, CSS organizado e alinhamento consistente do grid. A página é responsiva, adaptando-se a diferentes telas sem perda de identidade ou legibilidade.
Foi implementado:
- Carrossel de marcas com logos dos produtos que o salão trabalha;
- Seção Instagram com imagens linkadas diretamente às publicações; e
- Estrutura otimizada para SEO técnico: tags corretas, organização clara e carregamento leve.
