elite-inspiration
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseElite Inspiration
精英灵感库
Curated references from Awwwards, FWA, and CSS Design Awards.
精选自Awwwards、FWA和CSS Design Awards的参考案例。
Quick Reference
快速参考
| Pattern | Reference File |
|---|---|
| Horizontal Scroll | horizontal-scroll-sites.md |
| Bento Grids | bento-grid-sites.md |
| Text Animations | text-animation-sites.md |
| Parallax | parallax-sites.md |
| Product Configurators | product-configurators.md |
| Agency Portfolios | agency-portfolios.md |
| Micro-interactions | micro-interactions.md |
| 设计模式 | 参考文档 |
|---|---|
| 横向滚动 | horizontal-scroll-sites.md |
| 便当式网格 | bento-grid-sites.md |
| 文字动画 | text-animation-sites.md |
| 视差效果 | parallax-sites.md |
| 产品配置器 | product-configurators.md |
| 工作室作品集 | agency-portfolios.md |
| 微交互 | micro-interactions.md |
How to Study Inspiration
如何研究灵感案例
Don't Copy, Understand
不要复制，要理解
When studying award-winning sites:
- Identify the technique - What animation/layout is used?
- Understand the purpose - Why this technique? What does it communicate?
- Analyze timing - Note easing, duration, stagger patterns
- Map to implementation - How would you build it?
- 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
Awwwards
Best for: Cutting-edge techniques, design trends, agency work
Key sections:
FWA (Favourite Website Awards)
FWA（最受欢迎网站奖）
CSS Design Awards
CSS Design Awards
Best for: CSS-focused design, clean implementations
最适合：聚焦CSS的设计、简洁的实现方案
Godly
Godly
Best for: Curated landing pages, SaaS design inspiration
最适合：精选落地页、SaaS设计灵感
Landbook
Landbook
Best for: Landing page patterns, conversion-focused design
最适合：落地页模式、转化导向型设计
SaaS Landing Page
SaaS Landing Page
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
适用场景：作品集、案例研究、叙事类网站
核心技术：
- GSAP ScrollTrigger 固定定位
- CSS scroll-snap
- 进度指示器
- 移动端回退为垂直滚动
研究案例 → 查看 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
适用场景：功能展示、产品页、仪表盘
核心技术：
- 带跨列的CSS Grid
- 响应式重排
- 卡片悬停效果
- 用于筛选的FLIP动画
研究案例 → 查看 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
适用场景：Hero区域、标题、叙事内容
核心技术：
- SplitText 字符/单词动画
- 遮罩式渐显
- 交错模式
- 滚动联动渐显
研究案例 → 查看 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
适用场景：营造深度、沉浸感、叙事
核心技术：
- 多层深度结构
- 基于滚动的变换
- 粘性区块
- CSS perspective
研究案例 → 查看 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
适用场景：电商、SaaS、定制类网站
核心技术：
- 3D模型集成
- 颜色/选项切换
- 实时预览
- FLIP过渡动画
研究案例 → 查看 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
适用场景：创意工作室、自由职业者
核心技术：
- 案例研究导航
- 项目悬停预览
- 自定义光标
- 页面过渡效果
研究案例 → 查看 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
适用场景：按钮、表单、导航、反馈
核心技术：
- 状态过渡
- 加载状态
- 悬停反馈
- 成功/错误状态
研究案例 → 查看 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 |
| 工作室 | 专长领域 | 所在地 |
|---|---|---|
| Active Theory | WebGL、交互式体验 | 美国洛杉矶 |
| Build in Amsterdam | 流畅动画 | 阿姆斯特丹 |
| Locomotive | 滚动体验 | 蒙特利尔 |
| Resn | 实验性作品 | 惠灵顿 |
| Studio Freight | 动态设计 | 布鲁克林 |
| Basement Studio | 前沿技术 | 布宜诺斯艾利斯 |
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 |
| 工作室 | 专长领域 | 所在地 |
|---|---|---|
| Basic/Dept | 简洁极简风格 | 圣迭戈 |
| Huge | 企业级规模项目 | 布鲁克林 |
| Fantasy | 产品设计 | 旧金山 |
| Ueno | 品牌体验 | 雷克雅未克 |
| Rally | 初创企业项目 | 旧金山 |
Technology Patterns
技术模式
GSAP Usage
GSAP 用法
Most award-winning sites use GSAP for:
- Scroll-driven animations (ScrollTrigger)
- Text reveals (SplitText)
- Layout changes (Flip)
- Timeline orchestration
大多数获奖网站使用GSAP实现：
- 滚动驱动动画（ScrollTrigger）
- 文字渐显（SplitText）
- 布局变更（Flip）
- 时间线编排
WebGL/Three.js
WebGL/Three.js
Common in:
- 3D product showcases
- Interactive backgrounds
- Particle effects
- Shader-based visuals
常见应用场景：
- 3D产品展示
- 交互式背景
- 粒子效果
- 基于着色器的视觉效果
Frameworks
框架
Common stacks:
- Next.js - React SSR, performance
- Nuxt - Vue SSR
- SvelteKit - Svelte SSR
- Astro - Static-first, partial hydration
常用技术栈：
- Next.js - React SSR、性能优化
- Nuxt - Vue SSR
- SvelteKit - Svelte SSR
- Astro - 静态优先、部分 hydration
Evaluation Criteria
评审标准
How awards judge sites:
奖项评选网站的标准：
Awwwards Criteria
Awwwards 评审标准
| 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 |
| 类别 | 权重 | 评审要点 |
|---|---|---|
| 设计 | 40% | 视觉冲击力、创意性、趋势契合度 |
| 可用性 | 30% | 导航、可访问性、移动端适配 |
| 创意 | 15% | 创新性、独特性 |
| 内容 | 15% | 质量、相关性 |
What Makes "SOTD" (Site of the Day)
如何成为“每日最佳网站”（SOTD）
- Visual excellence - Striking first impression
- Technical innovation - Novel techniques
- Purposeful motion - Animation supports content
- Cross-device - Works on mobile
- Performance - Fast load, smooth scroll
- Attention to detail - Micro-interactions, polish
- 视觉卓越 - 令人惊艳的第一印象
- 技术创新 - 新颖的技术手段
- 有意义的动效 - 动画为内容服务
- 跨设备适配 - 移动端表现良好
- 性能优异 - 加载快、滚动流畅
- 细节到位 - 微交互、打磨精细
Research Workflow
研究工作流
When Starting a Project
项目启动时
- Define the pattern - What type of site? (portfolio, SaaS, e-commerce)
- Search Awwwards - Filter by category, color, tech
- Collect 5-10 references - Screenshot key moments
- Analyze techniques - Note what makes each special
- Identify common threads - What do great examples share?
- Adapt to project - How can these inspire your approach?
- 明确模式类型 - 网站类型是什么？（作品集、SaaS、电商）
- 搜索Awwwards - 按类别、颜色、技术筛选
- 收集5-10个参考案例 - 截图关键场景
- 分析技术手段 - 记录每个案例的亮点
- 识别共性特征 - 优秀案例有哪些共同点？
- 适配项目需求 - 这些灵感如何启发你的方案？
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)
按以下维度整理灵感：
- 模式类型（横向滚动、便当式网格等）
- 技术手段（滚动动画、3D、文字效果）
- 行业领域（SaaS、时尚、工作室）
- 复杂度（简单、中等、高级）
Staying Current
保持与时俱进
Follow
关注账号
- @awwwards on Twitter/X
- @thefwa on Twitter/X
- r/web_design on Reddit
- GSAP forums and showcase
- Twitter/X上的@awwwards
- Twitter/X上的@thefwa
- Reddit上的r/web_design
- GSAP论坛和展示区
Events
活动
- Awwwards Conferences
- OFFF Festival
- Beyond Tellerrand
- Awwwards 大会
- OFFF Festival
- Beyond Tellerrand
Newsletters
通讯简报
- Awwwards weekly digest
- Codrops Collective
- Web Design Weekly
- Awwwards 每周摘要
- Codrops Collective
- Web Design Weekly