Awwwards-Level Web Design
This skill guides creation of truly exceptional websites—the kind that win awards, get shared, and make people stop scrolling. These aren't just good websites; they're experiences.
Philosophy: What Makes a Site Unforgettable
Award-winning sites share common traits that separate them from the millions of forgettable pages:
1. Intentional Storytelling
Every scroll, every click, every hover tells part of a story. The site guides users through a narrative, not just a collection of sections. Content reveals progressively, creating anticipation and reward.
2. Choreographed Motion
Animations aren't decoration—they're communication. Each movement has purpose: guiding attention, providing feedback, creating continuity, or building emotional resonance. The timing, easing, and sequencing are meticulously orchestrated.
3. Sensory Richness
These sites engage multiple senses. Custom cursors create tactile feedback. Sound design (when appropriate) adds depth. Textures, gradients, and lighting effects create atmosphere. The experience feels
physical despite being digital.
4. Technical Craftsmanship
Smooth 60fps animations. Fast load times despite rich visuals. Graceful degradation on slower devices. The engineering is invisible but essential.
5. Breaking Conventions Intentionally
Award-winning sites know the rules well enough to break them deliberately. Unconventional layouts, unexpected interactions, rule-breaking typography—but always in service of the experience, never random.
The Awwwards Evaluation Criteria
Sites are judged on four dimensions:
- 1. Design (8.5+ for SOTD): Visual aesthetics, composition, color, typography, imagery
- Usability (8.5+ for SOTD): Navigation, accessibility, responsiveness, intuitive UX
- Creativity (8.5+ for SOTD): Innovation, uniqueness, memorable moments
- Content (8.5+ for SOTD): Quality, storytelling, relevance, engagement
To win Site of the Day, you need excellence across ALL four. A beautiful site with poor usability won't win.
Core Animation Techniques
1. Scroll-Triggered Animations
The foundation of immersive web experiences. Elements animate in response to scroll position, creating a sense of discovery.
Key Patterns:
- - Reveal on Enter: Elements fade/slide/scale into view as they enter the viewport
- Scrubbed Animations: Animation progress tied directly to scroll position (not just triggered)
- Parallax Layers: Background and foreground elements move at different speeds, creating depth
- Horizontal Scroll Sections: Vertical scrolling translates to horizontal movement
- Pinned Sections: Elements stay fixed while content scrolls through them
Implementation Stack:
CODEBLOCK0
Code Pattern (GSAP):
CODEBLOCK1
2. Text Splitting & Typography Animation
Award-winning sites treat text as a design element, not just content. Individual characters, words, and lines become animatable units.
Key Patterns:
- - Character-by-character reveals: Letters animate in sequentially
- Word stagger: Words cascade in with varying delays
- Line-by-line reveals: Each line slides or fades independently
- Scramble/decode effects: Text appears to decode or unscramble
- Kinetic typography: Text that moves, rotates, or transforms with scroll/interaction
Implementation:
CODEBLOCK2
Code Pattern:
CODEBLOCK3
Typography Choices for Impact:
- - Display fonts with character: Neue Machina, Monument Extended, PP Mori, Clash Display, Satoshi
- Variable fonts for animation: Weight, width, and slant can animate smoothly
- Extreme sizes: Hero text at 15-25vw creates immediate impact
- Mixed weights and sizes within a single headline
3. Micro-Interactions & Hover States
The details that create delight. Every interactive element should respond to user input in satisfying ways.
Key Patterns:
- - Magnetic buttons: Elements that pull toward the cursor
- Reveal on hover: Hidden content or effects that appear on interaction
- Morphing shapes: Elements that transform shape on hover
- Ripple effects: Click feedback that radiates from touch point
- State machines: Complex multi-state animations (idle → hover → active → complete)
Implementation:
CODEBLOCK4
Code Pattern (Magnetic Effect):
CODEBLOCK5
4. Page Transitions
Seamless transitions between pages create a native-app feel and maintain immersion.
Key Patterns:
- - Crossfade with motion: Old page fades while new slides in
- Shared element transitions: Images or elements morph between pages
- Wipe/reveal transitions: Content sweeps across screen
- Zoom transitions: Click target expands to fill screen
- Overlay transitions: Colored layer sweeps over before revealing new content
Implementation:
CODEBLOCK6
5. Custom Cursors
Replace the default cursor with something that reinforces the brand and adds interactivity.
Key Patterns:
- - Follower cursor: A shape that follows with slight lag (lerping)
- Context-aware cursor: Changes based on what it's hovering
- Magnetic cursor: Snaps to interactive elements
- Blob cursor: Morphing organic shape
- Text cursor: Words that follow the pointer
- Trail effects: Multiple elements following in sequence
Code Pattern:
CODEBLOCK7
6. Easing & Timing
The secret sauce. Proper easing transforms mechanical movement into organic motion.
Essential Easing Functions:
CODEBLOCK8
Timing Principles:
- - Stagger delays: 0.02-0.05s between sequential elements
- Hover transitions: 0.2-0.4s (fast enough to feel responsive)
- Page transitions: 0.6-1.2s (long enough to appreciate, not too slow)
- Scroll animations: Duration tied to scroll distance, or 0.8-1.5s for triggered
The Golden Rule: Fast in, slow out. Most movements should decelerate into their final position.
Visual Techniques
Gradients & Color
Mesh Gradients: Complex multi-point gradients that feel organic
CODEBLOCK9
Animated Gradients: Shifting colors that create movement
CODEBLOCK10
Texture & Depth
Grain/Noise Overlays: Add organic texture
CODEBLOCK11
Glassmorphism: Frosted glass effects
CODEBLOCK12
Shadows for Depth: Layered, soft shadows
CODEBLOCK13
Layout Breaking
Overlapping Elements: Break the grid intentionally
Diagonal/Angular Sections: Clip-path for non-rectangular sections
Asymmetric Compositions: Deliberate imbalance creates tension
Full-bleed Media: Images/video that escape containers
Mixed Grid Systems: Combine different column structures
3D & WebGL
For truly next-level sites, 3D elements create unforgettable experiences.
Implementation Stack:
CODEBLOCK14
Common Patterns:
- - 3D product viewers with orbit controls
- Particle systems responding to scroll/mouse
- Shader effects (distortion, ripple, noise)
- 3D text and typography
- Environment scenes with camera movement
Performance Note: 3D is expensive. Use sparingly, optimize aggressively, and always provide fallbacks.
Technical Requirements
Performance Targets
- - First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Total Blocking Time: < 200ms
- Animation frame rate: Consistent 60fps
Optimization Strategies
- - Lazy load below-fold content
- Preload critical assets
- Use
will-change sparingly and correctly - Debounce scroll handlers
- Use
requestAnimationFrame for JS animations - Prefer CSS transforms over layout-triggering properties
- Compress and optimize all media
Accessibility
Award-winning sites must be usable by everyone:
- - Respect INLINECODE2
- Maintain keyboard navigation
- Ensure sufficient color contrast
- Provide text alternatives for visual content
- Test with screen readers
CODEBLOCK15
Implementation Checklist
Before considering a site "award-worthy," verify:
Animation
- - [ ] Scroll-triggered reveals with staggered timing
- [ ] Smooth scroll (Lenis or equivalent)
- [ ] Custom easing on all animations
- [ ] Page/section transitions
- [ ] Hover states on all interactive elements
- [ ] Loading animation/sequence
Visual
- - [ ] Distinctive typography (not Inter/Roboto)
- [ ] Custom cursor (if appropriate)
- [ ] Texture/grain overlay
- [ ] Considered color palette with intention
- [ ] Atmospheric backgrounds (gradients, effects)
- [ ] Consistent visual language throughout
Technical
- - [ ] 60fps animation performance
- [ ] Mobile responsive with adapted interactions
- [ ] Reduced motion support
- [ ] Fast initial load
- [ ] No layout shift during load
Content
- - [ ] Clear narrative/story structure
- [ ] Purposeful content hierarchy
- [ ] Engaging copywriting
- [ ] High-quality imagery/media
Reference Sites
Study these for inspiration (search on Awwwards):
- - Immersive storytelling: Apple product pages, Stripe
- Creative agency: Resn, Active Theory, Locomotive
- Portfolio: Bruno Simon, Aristide Benoist, Dennis Snellenberg
- Product: Linear, Vercel, Raycast
- Editorial: The Pudding, NYT Interactives
When NOT to Use This Approach
Award-winning design isn't always appropriate:
- - E-commerce with conversion goals: Simplicity often wins
- Information-heavy sites: Clarity over creativity
- Accessibility-first contexts: Heavy animation can be exclusionary
- Limited budget/timeline: This takes significant time to execute well
Use these techniques when the goal is to create a memorable brand experience, showcase creative work, or make a statement. For utility-focused sites, the standard frontend-design skill may be more appropriate.
Remember: Award-winning sites aren't just technically impressive—they're emotionally resonant. Every animation, every interaction, every visual choice should serve the story you're telling. Technical skill without creative vision produces impressive-but-forgettable work. The goal is to make someone feel something.
Awwwards级别网页设计
本技能指导创建真正卓越的网站——那种能获奖、被分享、让人停止滚动的网站。这些不仅仅是好网站，它们是体验。
理念：什么让一个网站令人难忘
获奖网站拥有共同的特质，使它们从数百万个容易被遗忘的页面中脱颖而出：
1. 有意图的故事叙述
每一次滚动、每一次点击、每一次悬停都在讲述故事的一部分。网站引导用户经历一个叙事，而不仅仅是一系列板块的集合。内容逐步揭示，创造期待和回报。
2. 精心编排的动态
动画不是装饰——它们是沟通。每个动作都有目的：引导注意力、提供反馈、创造连续性或建立情感共鸣。时机、缓动和顺序都经过精心编排。
3. 感官丰富性
这些网站调动多种感官。自定义光标创造触觉反馈。音效设计（在适当的时候）增加深度。纹理、渐变和光照效果营造氛围。尽管是数字化的，但体验感觉
有质感。
4. 技术工艺
流畅的60fps动画。尽管视觉效果丰富，但加载速度快。在较慢设备上优雅降级。工程是隐形的，但至关重要。
5. 有意图地打破常规
获奖网站足够了解规则，从而有意识地打破它们。非常规布局、意外交互、打破规则的排版——但始终服务于体验，从不随意。
Awwwards评审标准
网站从四个维度进行评判：
- 1. 设计（SOTD需8.5+）：视觉美学、构图、色彩、排版、图像
- 可用性（SOTD需8.5+）：导航、可访问性、响应式、直观用户体验
- 创意（SOTD需8.5+）：创新、独特性、令人难忘的时刻
- 内容（SOTD需8.5+）：质量、故事叙述、相关性、参与度
要赢得当日最佳网站，你需要在所有四个方面都表现出色。一个设计精美但可用性差的网站不会获奖。
核心动画技术
1. 滚动触发动画
沉浸式网页体验的基础。元素根据滚动位置进行动画，创造发现感。
关键模式：
- - 进入时揭示：元素在进入视口时淡入/滑入/缩放
- 擦洗动画：动画进度直接与滚动位置关联（不仅仅是触发）
- 视差层：背景和前景元素以不同速度移动，创造深度
- 水平滚动区域：垂直滚动转化为水平移动
- 固定区域：元素保持固定，内容在其间滚动
技术栈：
主要：GSAP + ScrollTrigger（行业标准）
平滑滚动：Lenis 或 GSAP ScrollSmoother
React：Framer Motion + useScroll hook
代码模式（GSAP）：
javascript
gsap.registerPlugin(ScrollTrigger);
// 基本揭示
gsap.from(.reveal-element, {
opacity: 0,
y: 100,
duration: 1,
ease: power3.out,
scrollTrigger: {
trigger: .reveal-element,
start: top 80%,
end: top 20%,
toggleActions: play none none reverse
}
});
// 擦洗动画（与滚动位置关联）
gsap.to(.parallax-bg, {
y: -200,
ease: none,
scrollTrigger: {
trigger: .parallax-section,
start: top bottom,
end: bottom top,
scrub: true
}
});
2. 文本拆分与排版动画
获奖网站将文本视为设计元素，而不仅仅是内容。单个字符、单词和行成为可动画单元。
关键模式：
- - 逐字符揭示：字母依次动画进入
- 单词交错：单词以不同延迟级联进入
- 逐行揭示：每行独立滑动或淡入
- 乱码/解码效果：文本似乎被解码或解乱
- 动态排版：随滚动/交互移动、旋转或变换的文本
实现方式：
GSAP SplitText（高级但强大）
SplitType（免费替代方案）
Splitting.js（轻量级）
代码模式：
javascript
// 使用 SplitType + GSAP
const text = new SplitType(.hero-title, { types: chars, words });
gsap.from(text.chars, {
opacity: 0,
y: 50,
rotateX: -90,
stagger: 0.02,
duration: 0.8,
ease: back.out(1.7)
});
有影响力的排版选择：
- - 有特色的展示字体：Neue Machina、Monument Extended、PP Mori、Clash Display、Satoshi
- 用于动画的可变字体：字重、字宽和倾斜可以平滑动画
- 极端尺寸：15-25vw的主标题文字立即产生冲击力
- 单个标题内的混合字重和尺寸
3. 微交互与悬停状态
创造愉悦的细节。每个交互元素都应以令人满意的方式响应用户输入。
关键模式：
- - 磁吸按钮：向光标拉近的元素
- 悬停揭示：交互时出现的隐藏内容或效果
- 变形形状：悬停时变换形状的元素
- 涟漪效果：从触摸点辐射的点击反馈
- 状态机：复杂的多状态动画（空闲→悬停→激活→完成）
实现方式：
Rive（用于复杂的状态驱动动画）
Lottie（After Effects → 网页）
GSAP（程序化控制）
CSS过渡（简单状态）
代码模式（磁吸效果）：
javascript
const magneticElements = document.querySelectorAll(.magnetic);
magneticElements.forEach(el => {
el.addEventListener(mousemove, (e) => {
const rect = el.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
gsap.to(el, {
x: x * 0.3,
y: y * 0.3,
duration: 0.3,
ease: power2.out
});
});
el.addEventListener(mouseleave, () => {
gsap.to(el, {
x: 0,
y: 0,
duration: 0.5,
ease: elastic.out(1, 0.3)
});
});
});
4. 页面过渡
页面之间的无缝过渡创造原生应用般的感觉并保持沉浸感。
关键模式：
- - 带动态的交叉淡入：旧页面淡出，新页面滑入
- 共享元素过渡：图像或元素在页面间变形
- 擦除/揭示过渡：内容扫过屏幕
- 缩放过渡：点击目标展开填满屏幕
- 覆盖过渡：彩色层扫过，然后揭示新内容
实现方式：
Barba.js + GSAP（多页面网站）
Next.js + Framer Motion（React应用）
Astro + View Transitions API（现代方法）
5. 自定义光标
用能强化品牌并增加交互性的内容替换默认光标。
关键模式：
- - 跟随光标：一个形状以轻微延迟跟随（插值）
- 上下文感知光标：根据悬停内容变化
- 磁吸光标：吸附到交互元素
- 斑点光标：变形的有机形状
- 文字光标：跟随指针的单词
- 轨迹效果：多个元素依次跟随
代码模式：
javascript
const cursor = document.querySelector(.cursor);
let mouseX = 0, mouseY = 0;
let cursorX = 0, cursorY = 0;
document.addEventListener(mousemove, (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
// 带插值的平滑跟随
function animate() {
cursorX += (mouseX - cursorX) * 0.1;
cursorY += (mouseY - cursorY) * 0.1;
cursor.style.transform = translate(${cursorX}px, ${cursorY}px);
requestAnimationFrame(animate);
}
animate();
// 上下文变化
document.querySelectorAll(a, button).forEach(el => {
el.addEventListener(mouseenter, () => cursor.classList.add(cursor--hover));
el.addEventListener(mouseleave, () => cursor.classList.remove(cursor--hover));
});
6. 缓动与时机
秘诀所在。适当的缓动将机械运动转化为有机动态。
基本缓动函数：
power2.out / power3.out — 自然减速（最常见）
power2.inOut — 平滑加速和减速
back.out(1.7) — 轻微过冲，然后稳定（俏皮）
elastic.out(1, 0.3) — 有弹性，充满活力
expo.out — 戏剧性的快开始，慢结束
