Projetos

2026

Capa do projeto: o novo site do IPPES em um navegador e em um celular, com o hero de ipês amarelos, sobre fundo vinho.

IPPES

  • Design de sites
  • UX/UI
  • Design system

Uma presença digital à altura da pesquisa científica.

Projeto para o Instituto de Pesquisa, Prevenção e Estudos em Suicídio, com foco em organizar informações, comunicar sua atuação e tornar o conteúdo institucional mais claro e acessível.

Ano
2026
Papel
UX/UI Designer
Estúdio
Estúdio Sync
Entregas
Interface, design system e protótipo navegável, em desktop e celular

Contexto

O IPPES é um instituto de pesquisa e formação em prevenção e posvenção do suicídio. O site antigo estava defasado: todo o conteúdo tinha o mesmo peso, a navegação era feita por abas apertadas no topo e a página nem tinha um título principal. Ao mesmo tempo, é pelo celular que o público se inscreve nos cursos. O projeto foi feito com o Estúdio Sync, que levantou as necessidades e aprovou a estrutura em wireframe com a cliente; meu trabalho foi transformar essa estrutura em interface, sistema visual e protótipo navegável.

Desafio

Modernizar sem sair do padrão institucional: a cliente queria um site atual e interativo, mas que continuasse lendo como IPPES, com as cores da marca. Era preciso organizar muito conteúdo longo e acadêmico, dar destaque central ao curso de Capacitação, dar a cada programa logo e espaço próprios e garantir uma boa experiência no celular.

Página inicial do novo site no desktop, com o hero de ipês, e a mesma página no celular.
Design system: escala tipográfica, paleta de cores e botões.
Listagem de cursos da Formação, com filtros e os selos de inscrição.
Página da Capacitação em perspectiva e, abaixo, o menu lateral no celular, os selos de situação das inscrições e o modal de cadastro.
Quatro telas no celular (página inicial, institucional, loja e menu), uma das fotos do site e três produtos da Loja Virtual.
Páginas internas: institucional e listagem de notícias.
Ícones do site em destaque, com o frasco de pesquisa ampliado e a grade de ícones de conteúdo.

O que foi feito

Interface
Layout das páginas principais (Home, Formação e Capacitação) em desktop e celular, com menu lateral, busca, modal de cadastro, filtros de cursos e formulário de inscrição. Na rodada seguinte, as páginas internas: institucional, notícia, programas e loja. Tudo ligado em um protótipo navegável completo, nos dois formatos.
Design system
Tipografia com escala definida (Poppins nos títulos e Inter no texto), paleta vinho e prata com dez tons cada, e componentes que se repetem no site inteiro: botões, selos, chips, cards de curso, notícia e programa, campos e ícones.

Decisões importantes

  • Menu lateral deslizante no lugar das abas do topo, com acordeão em até três níveis, para acomodar a quantidade de programas e páginas.
  • Hierarquia tipográfica e respiro pensados para leitura longa, com contraste adequado para um público amplo.
  • Componentes desenhados como sistema, porque cards, selos e botões se repetem em todas as páginas.
  • Situação das inscrições como selo no card do curso, no lugar da tarja diagonal sobre a capa.
  • Um banner da Capacitação na home, com o mesmo visual da página do curso, para ligar as duas.
  • Paleta preparada para ganhar um modo escuro, e espaço reservado no cabeçalho para a versão em inglês.

Próximo projeto

Capa da estratégia de marca do Ranqueado: o logotipo em verde-neon sobre a foto de um estudante concentrado diante do notebook, em tons de azul.

Ranqueado2025

Simulados de concurso com dados que orientam a evolução.

Plataforma de preparação para concursos públicos que conecta simulados, correção automática, diagnóstico por matéria e ranking. Cofundador do produto, participo da construção da experiência, da interface e da evolução da plataforma.

  • Branding
  • Estratégia de produto
  • UX/UI