Pular para o conteúdo
Diego Ferreirados Santos
Projeto conceitualWeb design e UI/UX

SereinSite de bem-estar

Um site responsivo para um estúdio de bem-estar, com navegação clara, descoberta de aulas e uma jornada de agendamento objetiva.

Design do site de bem-estar Serein com o título “Make room for yourself”, uma foto de estúdio de yoga ensolarado e cards de aula.
Imagem conceitual gerada por IA

Conceito autoral. Os visuais são conceitos de direção de arte gerados por IA, não trabalhos concluídos para clientes.

Público-alvo

Pessoas em busca de aulas de yoga e bem-estar que querem agendar com rapidez e tranquilidade.

Objetivo criativo

Transformar a atmosfera serena da marca em uma interface acessível, legível e simples de usar.

Direção visual

Marfim quente e verde-sálvia suave, um título serifado elegante, uma foto de estúdio banhado de sol e cards de aula organizados em um grid preciso.

O que a prévia apresentada demonstra

Uma imagem de direção de arte gerada por IA e uma prévia animada curta que move uma câmera sobre essa imagem. Juntas, elas mostram composição, paleta, tipografia e clima.

Elas não mostram animação finalizada, software funcional nem arquivos de produção editáveis.

Design do site de bem-estar Serein com o título “Make room for yourself”, uma foto de estúdio de yoga ensolarado e cards de aula.Prévia animada do conceito
Um loop curto de movimento de câmera sobre a imagem conceitual — não é um filme finalizado.

Escopo proposto para a produção completa

Entregáveis que uma produção real deste conceito incluiria.

  • Telas desktop e mobile
  • Biblioteca de componentes
  • Protótipo clicável de agendamento

Abordagem de produção

Projetar layouts responsivos com bom contraste, estados de foco claros e estados vazios e de erro bem pensados. Um back-end de agendamento funcional é um escopo à parte.

Stack de produção sugerido

  • Figma
  • Photoshop

Ferramentas propostas para produzir os entregáveis reais. A prévia não afirma que elas foram usadas.

Design digital

Telas, estados e objetivos de interação

Design de interface avaliado pela clareza com que as pessoas conseguem agir, não só pela aparência.

  1. Estados responsivos

    Layouts pensados para mobile, tablet e desktop desde o início.

  2. Objetivos de interação

    Uma ação principal clara por tela, com estados de foco visíveis.

  3. Casos extremos

    Estados de carregamento, vazio e erro projetados junto com o fluxo ideal.

Detalhes

Recortes feitos diretamente da imagem conceitual.

  • Recorte de detalhe 1 do conceito Serein
  • Recorte de detalhe 2 do conceito Serein
  • Recorte de detalhe 3 do conceito Serein