Estudo de caso · projeto fictício de portfólio
Uma clínica que enxerga o todo.
Como a VidaPlena foi pensada: uma experiência digital premium e acolhedora para uma clínica integrada que não existe — criada para mostrar processo de design, interação e código front-end.
- Escopo
- Identidade visual, interface, interação e front-end
- Tecnologia
- HTML, CSS e JavaScript, sem frameworks
- Versão
- 2.0 · novembro de 2026
- Status
- Demonstração: sem atendimento, dados ou agendamentos reais
O desafio
Sites de clínica costumam ser frios ou confusos.
Muitos sites de saúde ou parecem catálogos burocráticos ou apostam em fotos genéricas que não explicam nada. Quem chega quer entender três coisas rápido: o que a clínica cuida, quem vai atender e como marcar.
O objetivo da VidaPlena foi responder a essas perguntas com uma experiência que transmita calma e cuidado — mais perto de um ambiente acolhedor do que de um formulário.
Decisões de design
Quatro escolhas que definem a experiência.
Noite e dia
A abertura em azul-petróleo profundo, com luz quente, cria impacto e foco; as seções seguintes passam a porcelana e champanhe, mais calmas para a leitura. A curva entre as duas marca a mudança de ritmo.
Uma figura que explica
Em vez de fotos genéricas, uma figura translúcida apresenta as especialidades: o órgão de cada área acende, a câmera se aproxima e o painel muda junto. A rotação de 6 s pausa sozinha quando a pessoa interage e pode ser desligada.
Agendamento em três passos
Atendimento, data e horário, revisão. O resumo fica sempre visível, horários indisponíveis aparecem riscados e nenhum dado pessoal é pedido — a agenda é fictícia e gerada de forma determinística.
Pessoas, sem credenciais falsas
A equipe humaniza a clínica, mas é apresentada como personagens ilustrativos: retratos gerados por IA, nenhum registro profissional e avisos visíveis onde as pessoas aparecem.
Acessibilidade
Bonito, e para todo mundo.
- Especialidades, jornada e agendamento navegáveis só pelo teclado, com foco visível e devolvido ao lugar certo.
- Abas e diálogo com papéis ARIA; mudanças anunciadas a leitores de tela.
- Contraste medido: menu a 13,5:1 sobre o cabeçalho; textos e botões acima de 4,5:1.
- Movimento reduzido respeitado: sem zoom, rotação automática ou animações.
- Sem JavaScript, todo o conteúdo continua disponível em sequência.
- Alvos de toque de pelo menos 44 px e agendamento em tela cheia no celular.
Engenharia
A V2.0 reescreveu a base sem mudar o visual.
!important — os 7 restantes são de acessibilidadeCada versão anterior acrescentava uma camada de CSS que sobrescrevia a anterior com !important. Para reescrever sem arriscar a aparência, a cascata foi analisada no próprio navegador: para cada elemento, em 26 larguras de tela e nos estados de interação, foi registrada qual declaração realmente vence.
Declarações que nunca vencem foram removidas; regras só foram fundidas ou movidas de módulo quando a análise mostrou que nenhum resultado mudaria. Ao final, o estilo calculado de cada elemento foi comparado com o da versão anterior.
O JavaScript também foi separado por responsabilidade: figura, interação da hero, exames, especialidades, jornada, agendamento e cabeçalho. Os dados de exames ficam num lugar só e alimentam o guia e o agendamento.
As páginas de especialidade saem de um único modelo, preenchido por um arquivo de dados — cabeçalho, rodapé e agendamento são copiados da página inicial a cada geração.
Evolução
Do protótipo à versão 2.0.
- V0.1–V0.2.2A hero: figura com máscaras por região, rotação acessível e câmera com zoom orientado por especialidade.
- V1.1Página inicial completa na identidade azul-petróleo, com guia de exames e dúvidas frequentes.
- V1.2Equipe, experiência do paciente em três fases e agendamento demonstrativo reconstruídos.
- V1.3Cabeçalho mais nítido, figura em destaque, transição em curva suave e hero sem cortes.
- V2.0Retratos em alta resolução, base de código reescrita, páginas de especialidade e este estudo de caso.
Qualidade e limites
O que foi verificado — e o que ainda não.
Verificado: testes automatizados no Chrome cobrem cabeçalho, hero em várias larguras, jornada, agendamento completo por mouse, teclado e toque, contraste, movimento reduzido e ausência de rolagem horizontal.
Ainda não: Safari, Firefox e aparelhos reais; leitores de tela reais; medição oficial de desempenho (Lighthouse) em rede real. A figura anatômica é artística e o conteúdo de saúde não passou por validação médica.
Imagens: a figura e os retratos foram gerados por inteligência artificial. Fontes: Cormorant Garamond e Manrope (Google Fonts, licença SIL Open Font).