311 lines
7.6 KiB
Markdown
311 lines
7.6 KiB
Markdown
---
|
|
name: elite-inspiration
|
|
description: |
|
|
Curated collection of award-winning websites organized by pattern and technique. Use when asked about: inspiration, examples, Awwwards, FWA, reference sites, what do top sites look like, or when researching how leading studios approach specific patterns. Archetype case studies cross-reference patterns from elite-gsap, elite-css-animations, elite-layouts, elite-design-core, and elite-ux-strategy.
|
|
---
|
|
|
|
# Elite Inspiration
|
|
|
|
Curated references from Awwwards, FWA, and CSS Design Awards.
|
|
|
|
## Quick Reference
|
|
|
|
| Pattern | Reference File |
|
|
|---------|---------------|
|
|
| Horizontal Scroll | [horizontal-scroll-sites.md](references/horizontal-scroll-sites.md) |
|
|
| Bento Grids | [bento-grid-sites.md](references/bento-grid-sites.md) |
|
|
| Text Animations | [text-animation-sites.md](references/text-animation-sites.md) |
|
|
| Parallax | [parallax-sites.md](references/parallax-sites.md) |
|
|
| Product Configurators | [product-configurators.md](references/product-configurators.md) |
|
|
| Agency Portfolios | [agency-portfolios.md](references/agency-portfolios.md) |
|
|
| Micro-interactions | [micro-interactions.md](references/micro-interactions.md) |
|
|
| Archetype case studies | [archetype-case-studies.md](references/archetype-case-studies.md) |
|
|
|
|
---
|
|
|
|
## How to Study Inspiration
|
|
|
|
### Don't Copy, Understand
|
|
|
|
When studying award-winning sites:
|
|
|
|
1. **Identify the technique** - What animation/layout is used?
|
|
2. **Understand the purpose** - Why this technique? What does it communicate?
|
|
3. **Analyze timing** - Note easing, duration, stagger patterns
|
|
4. **Map to implementation** - How would you build it?
|
|
5. **Adapt to context** - How does it fit your project?
|
|
|
|
### Questions to Ask
|
|
|
|
- What makes this feel premium?
|
|
- How does animation support content?
|
|
- What's the hierarchy of movement?
|
|
- How does it handle mobile?
|
|
- What accessibility considerations exist?
|
|
|
|
---
|
|
|
|
## Award Platforms
|
|
|
|
### Awwwards
|
|
**URL**: https://www.awwwards.com
|
|
|
|
Best for: Cutting-edge techniques, design trends, agency work
|
|
|
|
Key sections:
|
|
- [Sites of the Day](https://www.awwwards.com/websites/sites_of_the_day/)
|
|
- [Honorable Mentions](https://www.awwwards.com/websites/honorable-mentions/)
|
|
- [Developer Awards](https://www.awwwards.com/websites/developer/)
|
|
|
|
### FWA (Favourite Website Awards)
|
|
**URL**: https://thefwa.com
|
|
|
|
Best for: Experimental work, interactive experiences, WebGL
|
|
|
|
Key sections:
|
|
- [Site of the Day](https://thefwa.com/site-of-the-day)
|
|
- [Mobile of the Day](https://thefwa.com/mobile-of-the-day)
|
|
|
|
### CSS Design Awards
|
|
**URL**: https://www.cssdesignawards.com
|
|
|
|
Best for: CSS-focused design, clean implementations
|
|
|
|
### Godly
|
|
**URL**: https://godly.website
|
|
|
|
Best for: Curated landing pages, SaaS design inspiration
|
|
|
|
### Landbook
|
|
**URL**: https://land-book.com
|
|
|
|
Best for: Landing page patterns, conversion-focused design
|
|
|
|
### SaaS Landing Page
|
|
**URL**: https://saaslandingpage.com
|
|
|
|
Best for: B2B SaaS design patterns
|
|
|
|
---
|
|
|
|
## Pattern Categories
|
|
|
|
### Horizontal Scroll
|
|
|
|
Used for: Portfolios, case studies, storytelling
|
|
|
|
Key techniques:
|
|
- GSAP ScrollTrigger pin
|
|
- CSS scroll-snap
|
|
- Progress indicators
|
|
- Mobile fallback to vertical
|
|
|
|
**Study these** → See [horizontal-scroll-sites.md](references/horizontal-scroll-sites.md)
|
|
|
|
---
|
|
|
|
### Bento Grids
|
|
|
|
Used for: Feature showcases, product pages, dashboards
|
|
|
|
Key techniques:
|
|
- CSS Grid with spans
|
|
- Responsive reflow
|
|
- Card hover effects
|
|
- FLIP animations for filtering
|
|
|
|
**Study these** → See [bento-grid-sites.md](references/bento-grid-sites.md)
|
|
|
|
---
|
|
|
|
### Text Animations
|
|
|
|
Used for: Hero sections, headlines, storytelling
|
|
|
|
Key techniques:
|
|
- SplitText character/word animation
|
|
- Masked reveals
|
|
- Stagger patterns
|
|
- Scroll-linked reveals
|
|
|
|
**Study these** → See [text-animation-sites.md](references/text-animation-sites.md)
|
|
|
|
---
|
|
|
|
### Parallax Effects
|
|
|
|
Used for: Depth, immersion, storytelling
|
|
|
|
Key techniques:
|
|
- Multi-layer depth
|
|
- Scroll-based transforms
|
|
- Sticky sections
|
|
- CSS perspective
|
|
|
|
**Study these** → See [parallax-sites.md](references/parallax-sites.md)
|
|
|
|
---
|
|
|
|
### Product Configurators
|
|
|
|
Used for: E-commerce, SaaS, customization
|
|
|
|
Key techniques:
|
|
- 3D model integration
|
|
- Color/option switching
|
|
- Real-time preview
|
|
- FLIP transitions
|
|
|
|
**Study these** → See [product-configurators.md](references/product-configurators.md)
|
|
|
|
---
|
|
|
|
### Agency Portfolios
|
|
|
|
Used for: Creative studios, freelancers
|
|
|
|
Key techniques:
|
|
- Case study navigation
|
|
- Project hover previews
|
|
- Custom cursors
|
|
- Page transitions
|
|
|
|
**Study these** → See [agency-portfolios.md](references/agency-portfolios.md)
|
|
|
|
---
|
|
|
|
### Micro-interactions
|
|
|
|
Used for: Buttons, forms, navigation, feedback
|
|
|
|
Key techniques:
|
|
- State transitions
|
|
- Loading states
|
|
- Hover feedback
|
|
- Success/error states
|
|
|
|
**Study these** → See [micro-interactions.md](references/micro-interactions.md)
|
|
|
|
---
|
|
|
|
## Leading Studios
|
|
|
|
These studios consistently produce award-winning work:
|
|
|
|
### Development-Focused
|
|
|
|
| Studio | Known For | Location |
|
|
|--------|-----------|----------|
|
|
| **Active Theory** | WebGL, interactive | LA, USA |
|
|
| **Build in Amsterdam** | Smooth animations | Amsterdam |
|
|
| **Locomotive** | Scroll experiences | Montreal |
|
|
| **Resn** | Experimental | Wellington |
|
|
| **Studio Freight** | Motion design | Brooklyn |
|
|
| **Basement Studio** | Cutting-edge tech | Buenos Aires |
|
|
|
|
### Design-Focused
|
|
|
|
| Studio | Known For | Location |
|
|
|--------|-----------|----------|
|
|
| **Basic/Dept** | Clean, minimal | San Diego |
|
|
| **Huge** | Enterprise scale | Brooklyn |
|
|
| **Fantasy** | Product design | SF |
|
|
| **Ueno** | Brand experiences | Reykjavik |
|
|
| **Rally** | Startups | SF |
|
|
|
|
---
|
|
|
|
## Technology Patterns
|
|
|
|
### GSAP Usage
|
|
|
|
Most award-winning sites use GSAP for:
|
|
- Scroll-driven animations (ScrollTrigger)
|
|
- Text reveals (SplitText)
|
|
- Layout changes (Flip)
|
|
- Timeline orchestration
|
|
|
|
### WebGL/Three.js
|
|
|
|
Common in:
|
|
- 3D product showcases
|
|
- Interactive backgrounds
|
|
- Particle effects
|
|
- Shader-based visuals
|
|
|
|
### Frameworks
|
|
|
|
Common stacks:
|
|
- **Next.js** - React SSR, performance
|
|
- **Nuxt** - Vue SSR
|
|
- **SvelteKit** - Svelte SSR
|
|
- **Astro** - Static-first, partial hydration
|
|
|
|
---
|
|
|
|
## Evaluation Criteria
|
|
|
|
How awards judge sites:
|
|
|
|
### Awwwards Criteria
|
|
|
|
| Category | Weight | What They Look For |
|
|
|----------|--------|-------------------|
|
|
| Design | 40% | Visual impact, creativity, trends |
|
|
| Usability | 30% | Navigation, accessibility, mobile |
|
|
| Creativity | 15% | Innovation, uniqueness |
|
|
| Content | 15% | Quality, relevance |
|
|
|
|
### What Makes "SOTD" (Site of the Day)
|
|
|
|
1. **Visual excellence** - Striking first impression
|
|
2. **Technical innovation** - Novel techniques
|
|
3. **Purposeful motion** - Animation supports content
|
|
4. **Cross-device** - Works on mobile
|
|
5. **Performance** - Fast load, smooth scroll
|
|
6. **Attention to detail** - Micro-interactions, polish
|
|
|
|
---
|
|
|
|
## Research Workflow
|
|
|
|
### When Starting a Project
|
|
|
|
1. **Define the pattern** - What type of site? (portfolio, SaaS, e-commerce)
|
|
2. **Search Awwwards** - Filter by category, color, tech
|
|
3. **Collect 5-10 references** - Screenshot key moments
|
|
4. **Analyze techniques** - Note what makes each special
|
|
5. **Identify common threads** - What do great examples share?
|
|
6. **Adapt to project** - How can these inspire your approach?
|
|
|
|
### Bookmarking System
|
|
|
|
Organize inspiration by:
|
|
- **Pattern type** (horizontal scroll, bento, etc.)
|
|
- **Technique** (scroll animation, 3D, text effects)
|
|
- **Industry** (SaaS, fashion, agency)
|
|
- **Complexity** (simple, medium, advanced)
|
|
|
|
---
|
|
|
|
## Staying Current
|
|
|
|
### Follow
|
|
|
|
- [@awwwards](https://twitter.com/awwwards) on Twitter/X
|
|
- [@thefwa](https://twitter.com/thefwa) on Twitter/X
|
|
- [r/web_design](https://reddit.com/r/web_design) on Reddit
|
|
- GSAP forums and showcase
|
|
|
|
### Events
|
|
|
|
- Awwwards Conferences
|
|
- OFFF Festival
|
|
- Beyond Tellerrand
|
|
|
|
### Newsletters
|
|
|
|
- Awwwards weekly digest
|
|
- Codrops Collective
|
|
- Web Design Weekly
|