People ask me: What do you consider a clean, modern web design aesthetic? Modern web design really codified a lot of how it looks and feels in just the last few years, especially as many of today’s modern vanguard sites attempt to separate themselves from the e-commerce generation of websites that came before them.
How can it be described?
Getting to the heart of modern web design is in fact difficult to describe, but you know it when you see it.
Here is an ongoing list that I keep of other people’s clean, modern websites that I personally admire the aesthetic of. I have enumerated specific aesthetic styles of the site to call out attention to the modernist details.
To make this list I have to think your site is truly outstanding — a 9 or 10— have a modern feel, and have the je ne se quoi that makes it “pop.”
Theses sites have it. Here is a list of design elements you should know about and learn.
Elements of Good Web Design
Bold, immersive backgrounds and Light-Dark color schemes: Bold colors go from the left edge to the right edge of the window, either as a sold color, a gradient, or a hero image. Bold immersive backgrounds became very popular around 2018 and with the post-Web 2.0 vanguard websites.
Fades and Soft-white: Ask any colorist and they will tell you when painting a house: don’t paint with white-white. A slightly off-white look and faded look has become very popular with modern design.
Fly outs: Specific elements fly out as you scroll. Fly outs became more popular in the late 2010s.
Carousel: The classic tried & true go-to standard for landing pages, the carousel has been popular since around 2009. (Indeed, it was because of the advent of the V8 Javascript engine developed by Google in 2008 that much of these animations are even possible at all.)
Multistep animation sequences: The secret sauce of modern web animation are 15+ part (step) animations. Typically these produce a real “wow” effect.
Classic 3-Up: The classic 3-up has been around forever and there isn’t anything too modern about it. It’s still widely believed since back to the Greek times that there is something “magic” about presenting choices in three: A, B, C. Scientists and marketers don’t say “magic,” we just say, this works because our human lizard brains are tricked into thinking repetition coveys trust and importance. There really is good psychological science behind presenting ideas in the rule of three. That’s why you see it everywhere. “Marketing rule of three” means you present things a choice between three options. “3-up” simply refers to the visual design pattern of having 3 columns, like 3 boxes, spaced along the horizontal axis.
Curves & Diagonal Elements: Another aesthetic I’ve seen a lot of lately is curved elements and/or diagonal elements. If you go with curves or diagonals, you’d better be a very skilled designer to pull it off. I’d also recommend you pick a consistent look & feel for it and implement it everywhere. Frankly, a site with curves and diagonals is comparably more difficult to build in CSS.
Microsite: A microsite is typically a 1-page website, or possible a landing page with a few interactive options. Specifically, many websites switch into “microsite mode” when you arrive at them through an advertising channel. That’s because the best converting pages don’t have a lot of options for the user to get distracted or leave the page. For most websites, this means you should hide your navigation and make clicking on your logo NOT take you to the home page, as is commonly expected. You should give the user as few opportunities to leave the page as possible, including navigating to other external websites too. (Unless absolutely necessary, I try not to put any external links on a microsite page. If I do, it is using _target="blank" so that it opens in a new browser window.)
infograpia.com
- Excellent use of alternating colored background (notice how it moves from light to dark and back to light) with consistent bold green-blue color scheme.
- They used to have a two-way bidirectional carousel here but I think that is temporarily gone.
marketerhire.com
- Basic fades on softwhite.
- Bold color scheme.
- No animations here.
babylist.com
- Curved boundaries, strong color backgrounds (pink-green, blue-offwhite-yellow)
- At the very bottom, we have square boxes with 90° angles.
ralphlauren.com/pride-feat
An amazing parallax microsite for a corporate fundraising initiative. I have to admit I found out about this from my friend Jarrett Lucas, the Executive Director of the Stonewall Foundation, who collaborated with Ralph Lauren on its design. You’ve really got to experience this site to believe it. Notice how, as you scroll, the site switches between a top-bottom scroll and the parallax effect: The showcasing animation getting to its peak right near the top: It dramatically brings the multi-color “pride” display of the iconic Ralph Lauren polo rider into the center, blending the many colors of the LGBTQ rainbow into one RL logo — quite literally exploding with what is presumed to be a lesbian couple and their child.
whispir.com/workflows (2020 + 2021)
There’s not really any animations here and the whole background is softwhite, but I really like the shadow fading on the softwhite and also I particularly like this spiral dot effect that joins the sections together as you scroll.
Unfortunately I did not capture this website before it went away in 2021.
netlify.com
Really great fade-ins. Several “pop” places with small graceful fade-ins.
render.com
- Not many animations but good use of a diagonal/curve shaped boundaries and soft gradients against semi-white backgrounds
- Nice hover animations.
spatial.chat
I personally love this competitor to Zoom — it’s a fantastic alternative that lets each individual move around. That’s the spatial.chat app itself which I understand is popular in Europe.
But it’s the home page which gets my nomination for beautiful design site of the internet. Check out this beauty!
cybri.com
Strong light-dark color schemes. Nice use of 3-up layouts.
