Awwwards Site Anatomy

When to use this

• You are building a portfolio, agency, or brand site intended to reach award-level craft.
• You need to understand the structural pattern that award-winning sites share beneath their surface variety.
• You want to analyze what makes a specific site feel "expensive" and extract the repeatable techniques.
• You are choosing a tech stack for a highly custom, animation-heavy marketing site.
• Do NOT use this when you need a specific audit rubric for detecting AI-generated frontend; use anti-ai-slop-audit instead.

Mental model

Award-winning sites share a narrative structure. They are not pages; they are performances. The structure has five acts:

Act 1: The loading sequence. The site announces itself before the content appears. A counter ticking from 0 to 100%, a logo drawing itself, a curtain rising. This is not just a progress bar; it sets the tempo and tells the user this site was built differently. 2-4 seconds maximum. The best loaders do real work (preloading fonts, images, WebGL textures) while performing.

Act 2: The hero beat. The first viewport is a single powerful moment. One headline, one image or motion piece, minimal navigation. It makes an emotional impression before the user scrolls. The hero has a micro-interaction: a cursor follower, a parallax tilt, a word that animates on hover. This signals interactivity.

Act 3: The scroll journey. Content unfolds in scenes, not sections. Each scene has a dominant visual, supporting text, and a transition to the next scene. The transitions are the signature: horizontal slides, vertical reveals, scale shifts, color changes. Scroll-triggered animations are paced so each scene gets 300-500px of scroll distance to develop.

Act 4: The signature interaction. One moment in the scroll journey has an interaction that is unique to this site. A 3D product viewer. A custom cursor that morphs. A text reveal that responds to mouse position. This is the "remember this" moment, and it is usually the part that gets screenshotted for social media.