An interactive annual industry report exploring the transformation from the Attention Economy to the Intention Economy. This data-driven visualization synthesizes insights from 5,000+ digital products to map the new standard of anticipatory, calm, and sustainable design.
- 5 Major Trends Explored:
- Neomorphic Tactility 2.0
- Fluid Bento Grids
- Eco-Minimalism
- Generative UI
- Scrollytelling
- Live visual snippets for each trend
- Radar chart metrics for aesthetic, functionality, innovation, accessibility, and performance
- Dynamic tag system for trend characteristics
- Interactive Charts powered by Chart.js:
- Bar charts comparing legacy vs. modern design impact
- Doughnut charts showing device usage distribution
- Radar charts for trend metrics
- Filterable Data Views: Toggle between user retention and tech performance metrics
- Real-time Updates: Charts animate smoothly when switching between data sets
- 2026 Prediction Timeline: Interactive roadmap covering:
- Q1: The Biometric Web
- Q2: Depth Democratization
- Q3: The End of Search Bars
- Hover effects reveal detailed predictions
- Visual timeline with animated transitions
- Organic Modernism Palette: Warm, professional color scheme
- Responsive Layout: Optimized for mobile, tablet, desktop, and spatial devices
- Premium Typography: Plus Jakarta Sans and Space Mono fonts
- Smooth Animations: CSS transitions and JavaScript-driven interactions
- Custom Scrollbar: Branded scrollbar styling
Visit the live website: resonance-2025.github.io
| Technology | Purpose |
|---|---|
| HTML5 | Semantic structure and SEO optimization |
| Tailwind CSS | Utility-first styling via CDN |
| Chart.js | Interactive data visualizations |
| Google Fonts | Plus Jakarta Sans & Space Mono typography |
| JavaScript | Dynamic interactions and state management |
- 92% AI Adoption in modern design
- -40% Reduction in cognitive load
- 150% Growth in spatial/AR devices since 2023
- 5,000+ Digital products analyzed
- Background:
#FDFCF8(Warm off-white) - Text:
#2D2A26(Soft charcoal) - Accent:
#D97757(Terracotta) - Secondary:
#8DA399(Sage green)
- Adaptive Calm: Minimalist, distraction-free interface
- Data Storytelling: Complex information presented intuitively
- Progressive Disclosure: Information revealed through interaction
- Accessibility First: High contrast, readable typography, semantic HTML
resonance-2025/
├── index.html # Main application file
├── README.md # Project documentation
└── .github/
└── workflows/
└── deploy.yml # GitHub Pages deployment workflow
-
Clone the repository:
git clone https://github.com/wilkerHop/resonance-2025.git cd resonance-2025 -
Open in browser:
open index.html # or python3 -m http.server 8000 -
View locally: Navigate to
http://localhost:8000in your browser
This project is automatically deployed to GitHub Pages via GitHub Actions:
- Trigger: Push to
mainbranch - Build: Static site deployment
- URL:
https://wilkerhop.github.io/resonance-2025/
This repository covers the following topics:
- Interactive Design Trends
- Data Visualization Best Practices
- Web Animation Techniques
- Sustainable Web Design
- Future of UX/UI
Contributions are welcome! To contribute:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is open source and available under the MIT License.
Wilker Ribeiro
- GitHub: @wilkerHop
- Design inspiration from modern minimalist and neo-brutalist movements
- Chart.js for powerful visualization capabilities
- Tailwind CSS for rapid UI development
- The design community for pushing boundaries in web experiences
Built with ❤️ for the future of web design