Capturando um Legado, Uma Geração de Cada Vez

Hero Section

A hero foi concebida como o momento de maior impacto da experiência. Mais do que uma imagem estática, ela funciona como um ponto de ativação emocional.

No centro da composição, o capacete icônico de Ayrton Senna ganha protagonismo absoluto. Ao passar o mouse, uma animação 3D é ativada, criando um efeito dinâmico que reage à interação do usuário. O movimento sutil de profundidade e iluminação gera sensação de presença física, como se o legado estivesse literalmente “ganhando vida” na tela.

Esse micro-movimento transforma o usuário de espectador passivo em participante ativo da experiência.

A tipografia condensada em caixa alta reforça força e monumentalidade, enquanto a assinatura manuscrita adiciona humanidade e proximidade equilibrando potência e emoção. O contraste entre fundo preto profundo e os tons vibrantes do capacete intensifica o foco visual e cria uma atmosfera dramática, quase cinematográfica.

Do Legado à Transformação Social

Essa parte do projeto marca a transição do ícone das pistas para o impacto que ultrapassa o esporte. A composição foi pensada como uma evolução narrativa: da conquista individual ao impacto coletivo.

A primeira estrutura, em duas colunas, equilibra fotografia histórica e texto institucional. A imagem com o troféu simboliza vitória, excelência e reconhecimento mundial. Já o bloco textual introduz a missão do Instituto, apresentando o legado como algo vivo e atuante.

Na sequência, o design ganha uma linguagem mais vibrante e contemporânea. O uso estratégico de azul, amarelo e verde reforça identidade nacional e cria contraste energético dentro da página.

Os cards funcionam como micro-histórias visuais:

• Educação como motor de transformação

• Futuro como construção contínua

• Impacto traduzido em números reais

A composição modular facilita escaneabilidade e cria ritmo visual, tornando o conteúdo institucional mais acessível e envolvente.

Intenção de Design

• Mostrar a evolução do legado: da conquista nas pistas ao impacto social

• Equilibrar emoção histórica com clareza institucional

• Transformar dados e propósito em uma narrativa visual dinâmica

• Criar contraste entre momentos solenes e momentos vibrantes

Do Legado Histórico à Conexão Institucional

Essa parte do projeto foi pensada como o momento de consolidação da experiência. Primeiro, a emoção. Depois, a clareza.

A seção de galeria funciona como uma pausa contemplativa dentro da navegação. A composição utiliza profundidade visual, contraste intenso e iluminação estratégica para criar atmosfera. A imagem central iluminada simboliza protagonismo e permanência — como se o legado estivesse eternamente em destaque.

As imagens laterais posicionadas em perspectiva criam sensação de linha do tempo e continuidade histórica, reforçando a ideia de que cada momento construiu algo maior. O usuário não apenas vê imagens, ele percorre marcos.

Na sequência, a experiência evolui para um espaço mais funcional e informativo. A seção de perguntas frequentes foi desenhada com foco em organização e clareza. O contraste entre fundo escuro e cards claros mantém a coerência visual da página, ao mesmo tempo em que facilita leitura e escaneabilidade.

O uso de accordion reduz ruído visual, mantém a interface limpa e permite que o conteúdo institucional seja acessado de forma objetiva e intuitiva.

Intenção de Design

• Criar uma transição natural entre emoção e informação

• Transformar a galeria em uma experiência quase museológica

• Garantir clareza e transparência sem quebrar a identidade visual

• Encerrar a jornada com sensação de confiança e solidez institucional

Encerramento & Continuidade

O footer foi projetado como a consolidação final da narrativa. Mais do que um bloco funcional de navegação, ele atua como extensão da identidade visual e reforço institucional do projeto.

A hierarquia foi cuidadosamente organizada para dividir claramente:

• Informações institucionais

• Links de navegação

• Acesso rápido às principais seções

• Conexão com redes sociais

O fundo escuro mantém a atmosfera construída desde a hero, garantindo continuidade estética e coerência visual. A tipografia aplicada em larga escala no background cria profundidade e presença, funcionando quase como uma assinatura visual silenciosa forte, mas não invasiva.

O espaçamento generoso e a organização em colunas equilibram densidade de informação com leveza visual, evitando sobrecarga cognitiva no momento final da navegação.

Além disso, o footer atua como ponto estratégico de confiança: ele consolida identidade, transmite autoridade institucional e oferece múltiplos caminhos de continuidade para o usuário.

Intenção de Design

• Encerrar a experiência sem perder impacto visual

• Reforçar autoridade e credibilidade institucional

• Manter coerência estética até o último scroll

• Oferecer continuidade de navegação de forma clara e organizada

Decisão Estratégica

O objetivo foi evitar um “fim abrupto”.
O footer funciona como um espaço de transição não apenas encerrando a página, mas convidando o usuário a continuar explorando o legado.

Porque quando o conceito central é legado, a experiência não pode simplesmente terminar. Ela precisa continuar.

Experiência Responsiva Impacto Consistente em Todas as Telas

O projeto foi concebido com abordagem responsiva desde o início, garantindo que a experiência mantivesse força visual, clareza narrativa e impacto emocional em desktop, tablet e mobile. Mais do que simplesmente reorganizar elementos, a proposta foi adaptar hierarquia, ritmo visual e interação de acordo com o contexto de uso de cada dispositivo.

No desktop, a experiência assume caráter mais imersivo e cinematográfico. A hero com animação 3D interativa ganha profundidade e presença, aproveitando o espaço horizontal para criar impacto visual amplo e sensação de escala. As seções utilizam layouts em múltiplas colunas, com respiro estratégico e contraste bem definido, criando uma navegação sofisticada e envolvente.

No mobile, a estrutura foi reorganizada para priorizar leitura vertical e fluidez. Elementos visuais foram redimensionados de forma inteligente para manter impacto sem comprometer performance. A hierarquia tipográfica foi ajustada para máxima legibilidade, enquanto os CTAs receberam maior destaque e área de toque. A interação da hero foi otimizada para preservar o efeito visual com eficiência e usabilidade.

Já no tablet, a experiência funciona como um ponto de equilíbrio entre imersão e mobilidade. A composição mantém parte da estrutura em colunas, com ajustes de proporção e espaçamento que favorecem navegação por toque sem perder profundidade visual.

A estratégia adotada garante consistência estética, coerência narrativa e performance otimizada em todos os dispositivos, reforçando que o legado apresentado na landing page mantém sua força independentemente da tela utilizada.

Identidade Visual, Tipografia & Cores

A construção visual da landing page foi guiada por uma combinação estratégica de tipografia expressiva e uma paleta inspirada na bandeira do Brasil, reforçando identidade, legado e contexto histórico.

Sistema Tipográfico

A hierarquia tipográfica foi pensada para equilibrar impacto, elegância e legibilidade:

• Satoshi: utilizada para textos menores como descrições, subtítulos e conteúdos informativos. Moderna e limpa, garante ótima leitura e suporte estrutural ao layout.

• New Title: aplicada nos grandes títulos de destaque, trazendo presença, personalidade e força visual nas áreas principais da página.

• Anton: utilizada em alguns títulos de seções para criar contraste e intensidade, reforçando momentos estratégicos da narrativa.

• Chamount Script: aplicada em trechos específicos em amarelo, adicionando um toque mais humano e expressivo, quase como uma assinatura emocional dentro da composição.

A combinação cria ritmo visual, contraste de peso e diferentes camadas de leitura, mantendo a experiência dinâmica sem perder consistência.

Paleta de Cores

A escolha de cores foi inspirada diretamente na bandeira do Brasil, reforçando identidade nacional e conexão com a trajetória do Senna.

• Azul — representando profundidade, técnica e legado.

• Amarelo — símbolo de energia, velocidade e destaque visual.

• Branco — usado para equilíbrio e respiro na composição.

O background preto foi adotado como base principal para criar contraste dramático, intensificar o impacto das cores vibrantes e trazer atmosfera mais imersiva e premium.

Para textos secundários e informações complementares:

• Cinza claro com 80% de opacidade para descrições mais sutis.

• Cinza mais escuro para informações menores e apoio visual.

Essa estrutura garante hierarquia clara, contraste forte e leitura confortável, além de reforçar a estética esportiva e sofisticada do projeto.

Aprendizados & Exploração Criativa

O desenvolvimento desta landing page foi também um laboratório de experimentação técnica e criativa. Um dos principais desafios foi criar uma animação com efeito 3D interativo na hero, onde o capacete reage ao movimento do mouse, gerando sensação de profundidade e presença. Essa implementação exigiu estudo de comportamento visual, microinterações e equilíbrio entre impacto estético e performance.

Além da parte interativa, o projeto explorou o uso de GenAI para gerar algumas imagens conceituais do Senna, sempre com foco em manter coerência visual e identidade estética. A inteligência artificial foi utilizada como ferramenta criativa complementar acelerando ideação, testes visuais e composição sem substituir o direcionamento estratégico de design.

Esse processo reforçou alguns pontos importantes:

• A importância de alinhar tecnologia e narrativa

• Como microinterações elevam percepção de qualidade

• O papel da IA como apoio criativo dentro de um fluxo autoral

• A necessidade de pensar performance desde a concepção da experiência

Mais do que um exercício visual, o projeto se tornou um estudo sobre imersão digital, memória visual e como traduzir legado em experiência interativa contemporânea.