O briefing
Transformar uma ideia numa landing page simples em HTML, CSS e leves animações com JS, usando Bootstrap 5 e garantindo a responsividade.
Projeto 11 /Landing page para App de Pilates / 2026
Sobre o projeto
Do briefingao ar.
A Serena é uma app de pilates e wellness, e esta página é a sua porta de entrada. Tinha de explicar do que se trata e mostrar as vantagens, sem revelar tudo. O objetivo era simples: deixar a curiosidade suficiente para que quem lê queira descarregar a app.
O objetivo
Explicar a app e as suas vantagens, e levar as pessoas a descarregá-la, sem contar tudo à partida.
A solução
Página leve e clean, com conteúdos finais das clientes e fotos reais do estúdio usando a paleta de cores da app.
Paleta de cores
clica na cor para copiar o código
Texto / Fundo
Regaliz
Fundo
Dark Grège
Texto / Fundo
Marfim
Fundo
Branco Neve
AaDM Sans
800 / 400
800 / 400
Desafios
O Ladomenos fácil.
(e como resolvi)
o problema
Sem informações base
O ponto de partida era apenas uma imagem da app e uma ideia com um site de referência. Não sabia nada: as cores, as funcionalidades ou informações da app, o propósito, nem os blocos necessários. Também não tinha conteúdos escritos nem imagens... Não havia bem uma ideia do que se queria dizer, como dizer, nem de que forma.
a solução
Pesquisa e testes
Usei como base a pesquisa de vários sites da área — para estudar a dinâmica dos conteúdos escritos, as funcionalidades mais comuns e os blocos que fizessem sentido para uma app de Pilates. A partir daí, criei um layout simples, clean e alinhado com as cores da imagem inicial da app.
o problema
Conteúdos finais tardios
Apenas no fim de todo o layout e da apresentação é que obtive as informações pretendidas. No entanto, acredito que visualizar a estrutura e o layout ajudou bastante a esclarecer o caminho e a determinar quais os conteúdos necessários para a página.
a solução
Adaptar sem refazer
Reescrevi o HTML e o CSS para os novos conteúdos, mantendo ao máximo a estrutura e o estilo que já existiam, mas adaptando-os às necessidades finais.
o problema
Explicar sem revelar tudo
Um desafio que senti no inicio foi: A página tinha de dizer do que trata a app e quais as vantagens, sem esgotar o assunto nem revelar demasiado.
a solução
Curiosidade a favor
Optei inicialmente por mensagens curtas e capturas de ecrã selecionadas para mostrar o essencial e deixar o resto para quem descarregar a app.
o problema
Passagem de fotos genéricas para fotos reais
Para os banners iniciais, criei com IA imagens genéricas da prática de Pilates nos tons da paleta do site. Contudo, as clientes queriam uma maior presença e identidade própria na página.
a solução
Edição das fotos reais
Como e onde as encaixar? O conteúdo já estava fechado e as cores das fotos originais não mantinham a harmonia visual da paleta inicial. A solução foi editar cada imagem para aproximar os tons à paleta do site, distribuindo-as de forma estratégica ao longo do layout para que fizessem sentido e não parecessem apenas "coladas". O resultado final ficou muito mais coeso.
Cartões de embarque
Fui eu.Não fui eu.
Cada projeto leva muita gente a bordo. Aqui fica claro quem pilotou o quê.
Foi comigo
Responsabilidade
Design da página
A escolha das cores, a criação dos ícones, a organização e a estrutura...
Piloto
Ângela
Responsabilidade
Desenvolvimento front-end
HTML, CSS e JS com Bootstrap 5
Piloto
Ângela
Responsabilidade
Layout responsivo
Do design em imagem à página final
Piloto
Ângela
Responsabilidade
Integração de conteúdos
Adaptação do layout aos textos finais fornecidos pelas clientes
Piloto
Ângela
Responsabilidade
Integração e edição de fotografias
Adaptação do layout às fotos de estúdio escolhidas e edição de cor para a paleta do site
Piloto
Ângela
Responsabilidade
Domínio e Alojamento
Aquisição, configuração e preparação do site para ficar live
Piloto
Ângela
Não foi comigo
Fora do meu âmbito
Textos e conteúdos
Operado por: Clientes
Piloto
Clientes
Fora do meu âmbito
Fotografia de estúdio
Operado por: Clientes
Piloto
Clientes
Vários Viewports
Atravessa
o projeto.
continua a fazer scroll ↓
A página, toda
Do topoao rodapé.
Scroll 0%
Chegamos
Brevemente
online.
www.serenapilateswellness.pt