There are many websites that claim to be modern, but today you’ll discover sites that push the boundaries of creativity and innovation to an entirely different level.
1. ferrumpipe.com
What better way to kick things off than with a modern website about… metal gates. The subject is not particularly glamorous, which is exactly why you need to see this site to understand the impact a truly modern site can have.
Animations & technologies used:
- Scroll effect
- jQuery
- GSAP
(Showcase website)
2. Pioneer – Corn Revolutionized
The go.pioneer.com/cornrevolution/ site features a modern website about corn seeds. The design is exceptional — and even more impressive on mobile.
Animations & technologies used:
- Landing page
- Scroll effect
- 3D
(Landing page)
3. zen.ly
Zenly is an app connecting all kinds of people. Their website design is exceptional, blending rich 3D visuals with a stunning menu.
Animations & technologies used:
- Application
- Scroll effect
- 3D – WebGL & Three.js
- GSAP Animation
- Vue.js
- Nuxt.js
(Showcase website)
4. proxy.com
Proxy is a Covid-related app. Its design is genuinely interesting — very clean, with animations that unfold progressively as you scroll.
Animations & technologies used:
- Application
- Scroll effect
- React
- Gatsby
- Motion design
(Showcase website)
5. yolele.com
Want to see what a modern e-commerce website looks like? This is the site for you. Its design is compelling enough to make you want to buy their products — visitor retention through design at its finest.
Animations & technologies used:
- E-commerce
- Scroll effect
- Parallax
- WordPress
- GSAP Animation
- Nuxt.js
- Gatsby
(E-commerce website)
6. Google Pixel 5
Still in the e-commerce category, the Google Pixel 5 landing page is packed with stunning and exceptional animations. (https://store.google.com/us/product/pixel_5?hl=en-US)
Animations & technologies used:
- E-commerce
- Scroll effect
- 3D
- Motion design
(E-commerce website)
7. evolution.depositphotos.com
This website is probably one of the most innovative you’ll encounter. Creativity has no limits here, and you’re completely immersed in the world of photography. If you love design, this site will more than satisfy you.
Animations & technologies used:
- Photography
- Scroll effect
- WebGL
- Node.js
- GSAP Animation
- Three.js
- GLSL
- Webpack
(Landing page)
8. Webflow
In this page, Webflow — the world’s best CMS for creating animations — retraces the history of design. A one-of-a-kind page with incredibly beautiful illustrations and equally impressive animations. (https://webflow.com/web-design-art-history)
Animations & technologies used:
- Scroll effect
- Webflow
(Landing page)
9. whirlybirdie.com
When a typeface gets the spotlight it deserves. A superb page showcasing every dimension of their typography, filled with unique illustrations and beautiful scroll effects.
Animations & technologies used:
- Typography
- Scroll effect
- tween.js
(Showcase website)
10. A site that retraces History
https://genocide.greatarmenia.org/intro/ is a page that recounts a horrific chapter in History involving inhumane acts. The creators of this page have masterfully captured a dark atmosphere with an absolutely exceptional design — the work that went into it is immeasurable.
Animations & technologies used:
- Scroll effect
- WebGL
- GSAP Animation
(Cultural & educational website)
Summary of the best websites
I also invite you to browse our web design services to see a bit more of what modern web design can achieve. If you loved these sites, you’ll love what we can build for you — don’t hesitate to get in touch!
If you’d like to see the best portfolios, I invite you to check that out too.
Finally, if you want to get a modern website quickly, I recommend reading this article: Modern templates for WordPress.
If you think I missed one of the most beautiful sites out there, feel free to suggest it in the comments.