After checking out Awwwards.com, I found three websites that really stand out. Let me break down what makes them so great from a design perspective.
Studio Freight (https://studiofreight.com/)
This site blew me away with how it uses movement. Everything responds to your cursor with these smooth, natural animations that feel almost physical. They’re using WebGL to create these effects, and it just feels right. The typography is super bold with these massive headlines that grab your attention immediately but still remain totally readable.
The color choices are minimal but strategic – they use bright accent colors exactly where needed to draw your eye. And the micro-interactions are everywhere – hover over something and it transforms subtly, scroll down and content reveals itself at the perfect moment. Even the page transitions maintain this sense of continuity that keeps you oriented.
Locomotive (https://locomotive.ca/)
What Locomotive does with scrolling is next-level. They’ve built this custom smooth scrolling that gives them complete control over how you move through the site. The coolest part is how they layer content elements to move at different speeds when you scroll, creating this sense of depth that makes the flat screen feel three-dimensional.
Their typography system is perfectly balanced between expressive display fonts and functional text, with spacing that’s been meticulously fine-tuned. The navigation adapts to different content sections, which is pretty clever. And despite all the complex animations, the site runs at a smooth 60fps even during transitions – that’s seriously impressive technical execution.
Aristide Benoist Portfolio (https://www.aristidebenoist.com/)
This portfolio site does something really different with cursor interactions – your pointer becomes part of the design, changing form and function as you move through the experience. The layout uses this brutalist grid that looks simple at first glance but is actually incredibly precise in how it balances asymmetry and proportions.
The color combinations create visual tension with high contrast while staying accessible. Even the loading states aren’t just functional necessities – they’re meaningful design moments that establish the visual language for the whole site. The most distinctive feature is how they use custom WebGL shaders to transform ordinary photos into unique visuals with texture and dimension.
How I Can Apply These Ideas to My Class Projects
Looking at these sites gives me several ideas for improving my own designs:
- I need to think about motion as a core part of the experience, not just decoration. Like Studio Freight, I should use animations to direct attention and create hierarchy.
- I could be more dramatic with my typography – creating bigger differences between headings and body text would give my designs clearer visual hierarchy.
- My interaction states could be more sophisticated. Instead of basic hover effects, I could add subtle delays, varied easing functions, and context-specific cursor changes to make my interfaces feel more responsive.
- For multi-page projects, I should focus on maintaining spatial continuity during transitions like Locomotive does, helping users keep their mental map of the interface even when moving between sections.
- I need to be smarter about performance. These sites achieve complex visual effects without sacrificing speed by being strategic about where to apply resource-intensive elements – concentrating them at key moments of engagement.
By incorporating these techniques, I can take my class projects beyond basic functionality and create more sophisticated, memorable user experiences.