Resumo

Como UI/UX Designer e desenvolvedor, trabalhei na criação do Fitness&Life, um portal voltado para promover um estilo de vida mais saudável por meio de conteúdo acessível e motivador. Meu objetivo foi desenvolver uma experiência intuitiva e envolvente, garantindo que os usuários encontrassem informações confiáveis sobre exercícios, nutrição e bem-estar de forma clara e inspiradora. Lembrando que o conteúdo do site é fictício, tentando apenas simular um case de estudo.

Com um design pensado na usabilidade e na experiência do leitor, estruturei o blog para facilitar a navegação e incentivar a ação, tornando a jornada de mudança mais simples e acessível.

O Desafio

Criar um portal de saúde que centralizasse conteúdo sobre exercícios, nutrição e bem-estar em uma experiência clara, responsiva e envolvente — com navegação intuitiva, seção de histórias reais e filtros por categoria, incentivando o leitor a explorar e aplicar as dicas no dia a dia.

O Fitness&Life

O Fitness&Life é um portal dedicado à saúde, bem-estar e qualidade de vida, oferecendo conteúdos acessíveis e confiáveis sobre exercícios físicos, nutrição e hábitos saudáveis. Com artigos educativos, dicas práticas e histórias reais de transformação, o blog busca motivar e orientar pessoas que desejam adotar um estilo de vida mais saudável, independentemente do seu nível de experiência.

Style Guide

Desde o início, a atenção ao style guide foi fundamental. Optei pela tipografia Inter, conhecida por ser excepcional para aplicativos mobile e leitura em telas. As cores escolhidas seguiram uma paleta harmoniosa que refletia a identidade vibrante do aplicativo, garantindo consistência visual em todas as seções.

Portal no desktop — "Bem-vindo ao seu guia para uma vida mais Saudável e Ativa!"

Design do Site

O design do Fitness&Life foi pensado para oferecer uma experiência intuitiva e organizada, facilitando a navegação e o acesso às informações mais relevantes para cada usuário.

A estrutura do blog é dividida em duas principais seções:

• Seção de Conteúdos — Os artigos são categorizados de forma clara, permitindo que os leitores filtrem por temas como Exercícios, Nutrição e Bem-estar. Há filtros específicos para diferentes níveis de experiência, como iniciantes e avançados, garantindo que cada visitante encontre conteúdos adequados às suas necessidades.
• Seção de Histórias — Uma área dedicada a histórias reais de pessoas que transformaram suas vidas com novos hábitos saudáveis. Essas narrativas servem como inspiração para os leitores, mostrando que qualquer um pode alcançar seus objetivos com as orientações certas.

O design aposta em uma interface limpa e responsiva, com tipografia legível, imagens inspiradoras e chamadas para ação estratégicas, incentivando o leitor a se aprofundar nos conteúdos e aplicar as dicas no seu dia a dia.

Seção de histórias — relatos reais de transformação como inspiração para os leitores

Conclusão

Depois de criar todo esse website posso afirmar que essa jornada foi extremamente enriquecedora, proporcionando um grande aprendizado sobre o uso do Framer e suas ferramentas avançadas para criação de sites interativos. Ao longo desse projeto, coloquei em prática diversos conceitos e técnicas que fortaleceram minha compreensão do design moderno e responsivo.

Utilizei styleguides para manter a consistência visual em todas as seções, garantindo que a identidade do site permanecesse coesa e atraente. Trabalhei com uma paleta de cores estrategicamente escolhida, que não só refletia a identidade vibrante do aplicativo, mas também ajudava a destacar elementos importantes, como botões de call to action (CTAs) e seções de destaque. A aplicação cuidadosa de CTAs foi fundamental para guiar o usuário de forma intuitiva e incentivá-lo a interagir com o conteúdo.

Todo o processo me ensinou a importância de criar interfaces que não apenas sejam visualmente atrativas, mas também funcionais e voltadas para conversão. A experiência com o Framer me proporcionou mais confiança e habilidade para desenvolver projetos futuros com mais criatividade e precisão.

Layout responsivo — design adaptado para dispositivos móveis