Este projeto é uma proposta de modernização completa para o portal da ASSEFE (Associação dos Servidores do Senado Federal). O objetivo foi transformar um site institucional em uma experiência digital moderna, focada no usuário e alinhada às tendências atuais de design, acessibilidade e performance.
| Site Antigo | Site Novo |
|---|---|
 |
 |
O foco principal do redesign foi Modernidade, Acessibilidade e Transparência, valores centrais da associação.
-
Arquitetura de Informação: Reorganização das seções (Lazer, Institucional, Eventos, Aposentados, Mês a Mês) para facilitar a navegação e descoberta de conteúdo.
-
Identidade Visual: Design moderno com gradientes, cards interativos e uso estratégico de ícones que transmitem profissionalismo e acolhimento.
-
Acessibilidade: Barra de acessibilidade com controle de tamanho de fonte e modo de alto contraste para inclusão de todos os usuários.
-
UX Writing: Textos mais diretos, focados em resolver as necessidades do servidor e seus dependentes.
-
Responsividade: Estrutura "mobile-first" com menu hambúrguer funcional para garantir que o site funcione perfeitamente em qualquer dispositivo.
-
Transparência: Seção "Mês a Mês" dedicada para acompanhamento das manutenções do clube com fotos e relatórios detalhados.
- Frontend: HTML5 / CSS3 / JavaScript (ES6+)
- Framework CSS: Tailwind CSS (CDN) + CSS Personalizado
- Ícones: Font Awesome 6.4.0
- UI Design: Design moderno com foco em acessibilidade e usabilidade
- APIs: Open-Meteo API (Clima em tempo real)
- Mapas: Google Maps Embed + Integração Waze
- Performance: Otimização de ativos para carregamento rápido (Core Web Vitals)
- Hero Section Impactante: Proposta de valor clara com CTA para associação
- Acesso Rápido: Cards interativos para navegação rápida
- Notícias e Eventos: Seção dinâmica com últimas novidades
- Widget de Clima: Informações em tempo real de Brasília
- Localização: Mapa integrado com botões para Google Maps e Waze
- Navegação por Meses: Menu sticky para rápido acesso aos 12 meses
- Grid de Manutenções: Itens organizados com links para fotos
- Transparência Total: Relatório completo das obras e melhorias do clube
- Scroll Spy Navigation: Menu lateral que acompanha a rolagem
- Conselho Deliberativo: Galeria de fotos dos conselheiros
- Nossa Equipe: Apresentação visual dos colaboradores
- Cards de Testemunhos: 11 histórias de aposentados em PDF
- Design Empático: Cores e tipografia pensadas para este público
- Filtro por Categoria: Próximos, Recorrentes e Passados
- Galeria de Imagens: Registro visual dos eventos
- Controle de tamanho de fonte (slider)
- Modo de alto contraste
- Semântica HTML5 para leitores de tela
- Navegação por teclado
O site foi desenvolvido com abordagem mobile-first e testado nos seguintes breakpoints:
- 📱 Mobile: < 768px
- 📱 Tablet: 768px - 1024px
- 💻 Desktop: > 1024px
Maisa Rodrigues