Our work is supported by affiliate commissions. Learn More
Last Updated January 5 2024
I’ve seen web designers praise fully gamified websites or websites with a lot of complex 3D animations as “WOW,” “next generation,” and “really modern.” They praise those for the art of it, the technical details of it, and the “Wow! See what’s possible!” of it.
While such websites sure are “modern websites,” they are not good modern websites. They put aesthetics over function; a good website is always ‘goal & function first, art second.’
Overall, a quality modern website has:
You can see both in these modern websites:
Tip: Use ← and → arrow keys to browse.
Inspired by and located in Kansas City, Jones Bar-B-Q is famous for its delicious flavors. The restaurant started back in 1970 and has since grown to produce sauces that can be purchased online from anywhere in the world.
For the website, they have chosen a red-based color palette that instantly gives visitors the impression of something hot or exciting.
From a hierarchical viewpoint, the first thing anyone will notice is the image of the freshly-made hot sauce. Next, they’ll read the big and bold text—SAUCE MADE WITH LOVE IN KANSAS CITY—that hints at a story behind the sauce, which is unfolded with text and great pictures as the visitor scrolls down_._ Finally, there’s a clear navigation bar and a highlighted call-to-action.
This is a perfect example of a modern website!
Benjamin is a photographer that captures some amazing images of harsh environments that’ll give you the chills just looking at them. His work is often completed in Iceland; you can find images of beautiful landscapes and animals that live in the wild.
If you visit his website, you’ll immediately notice his photography is the hero of the website. The homepage has nothing but full-size photos he clicked. Besides that, there’s just a small navigation bar that’ll take you to other essential pages.
Minna is an organic tea company selling many different tea flavors in individual cans or a variety pack. Their teas are free of the excessive sugar you’ll find in most teas yet still taste light and delicious.
The full-sized header image, the white space throughout the homepage, the CSS parallax scrolling effect, and the appropriate colorful sections…all are examples of modern-day web design trends. Also, minor details like adding nutritional facts and relevant certificates near the “Order Online” CTAs elevate the visitors’ trust in the brand.
One minor error you should avoid : The navigation text isn’t contrasting enough to the background image, so the visitors will struggle to see the “Shop Tea” link.
Avery Cox is located in Texas, where she adds a unique style that is colorful and bold to the spaces she designs. She gained experience working in New York with some big-name designers, allowing her to take what she learned and apply that to her own business.
The colorful image of a well-designed sitting room right at the top immediately captures visitors’ attention. As you scroll down, there’s some copy that can do better from font size and hierarchy viewpoint, but it’s nothing major. Below that, she has added a lot of images of her interior design work, which is fantastic for leads and conversions.
CAS is an international nonprofit founded to advance cellular agriculture. They aim to scientifically farm animal products for humans to eliminate animal slaughter.
Their website is loaded with necessary information and interactive animations, but nothing feels out of place. Visitors can know everything about the project by scrolling from top to bottom. And there’s slightly different-than-normal but easy navigation too.
Dropps sells eco-friendly detergents, softeners, dishcloths, and other laundry and kitchen products through their Shopify store.
Their website follows the template of a typical modern-day website: full-size header image, good copy, good navigation, USPs mentioned right at the top, and minimal and relevantly-placed animations. One thing I particularly liked is their hero image — the image itself says a lot about their products.
Mack and Pouya are wedding photographers. And their website design is as beautiful as their photos.
There are lots of colors and micro-animations and sounds and photos and details going on, yet nothing about the website feels overwhelming. The font choices, the icon choices, and the overall design choice is perfect for a modern-day photography portfolio site.
Josh is from the Bay Area but has traveled throughout the years, sharing his talents in music, dance, and acting. You can find music on his website and links to his YouTube channel on the website.
Josh has categorized everything well and has added relevant, high-quality photographs and portfolios for each category—something that helps potential clients navigate directly to what they’re looking for.
Sasaki has been in the works for over 65 years and only continues to grow. Their design style blends many different outlooks to create a forward-moving design concept with sustainability at the top.
The Sasaki homepage has excellent animation, a ton of social proof, and links to all categories of their work. Visitors can learn about any of Sasaki’s projects in a couple of clicks. Plus, minor details like images slightly zooming on hover enhance the website user experience.
Devon is the Squarespace website design guru. If you need an impressive website, this is your guy. Additionally, he provides training in these departments and additional plugins that may be needed as well.
He obviously has implemented all modern web design principles for this website. For proof, notice the high-quality background video, font hierarchy, and use of animation.
You may have seen Lin-Manual Miranda in the Broadway show “Hamilton.” He is also the creator of that play and has won a ton of awards, including a Grammy, Tony, and an Emmy.
His personal website showcases who he is simply yet brilliantly. It uses a great color scheme, has great photos of him and his work, and is constantly updated with new news pieces about him and links to his work if published on OTT platforms.
As you see on the home page of the website, Fat Choy is located in New York and mixes Chinese and Vegan flavors. They offer dine-in, carry-out, and outdoor dining options for their customer base right from the website.
There’s a clear CTA right at the center of the website hero section, and people can see their menu from the top menu bar. Besides, they use some modern website design elements like unique typography and custom illustrations quite well.
You can figure out this beauty company as it says it all in the name. Super cool skincare products that find their color from natural fruits and are infused with other powerhouses like green tea.
This clean, D2C website focuses on just one thing: Sales! The first three sections of the website focus on selling: 1. The hero section shows the best offers. 2. Below, they have a “Most reviewed” section that showcases best-sellers. 3. Next, they have CTAs for their collections. And sections below that build social proof and uplift their brand—something that compliments the goal of the ecommerce website well.
Besides focusing on the goal, it also follows the modern website design aesthetics elements. For example, it uses a great font, a suitable color palette, high-quality product photos, a hover-to-reveal-further navigation bar, and more.
The Supernatural brand features an exciting, plant-based way to get creative in the kitchen. All of their powder products and recipes are vibrant in color, better for you, and fun to use in the kitchen!
The no-copy, no-CTA hero section gives the website a clean look. And the yellow-based color scheme matches with their packaging and ad & social media post colors, giving it consistent branding.
Feastables is a chocolate bar brand created by MrBeast - one of the most popular and influential YouTubers.
Its website landing page with a semi-flat design uses the classic blue and pink MrBeast color scheme. It also has all the MrBeast elements sprinkled throughout the website - massive giveaways, philanthropy, an image of Jimmy aka MrBeast, quirky reviews from Chandler and other team members, etc.
Other than the whole MrBeast branding and modern web design, the website has snappy and easy navigation, accessibility settings, a live chat/chatbot, social media buttons, logical structure, and perfectly placed CTAs.
Melula is a children’s fashion line from Denmark with a focus on shoes. Their collections are colorful, unique and aim to reflect the fun and imagination of a child.
The minimalist website is one of the best simple modern web designs I’ve seen. The landing page has a negligible amount of text and a few clickable super-high-quality images/visual designs that direct to their ecommerce store. Though there’s comparatively more going on in the Shop section, it also fits the website’s minimalist theme with lots of white space and no visible call-to-action buttons.
From a modern website design trends perspective, it perfectly fits this modern website design examples list. However, I am not sure if the website achieves the goal — sales & conversions — efficiently.
Allbirds sells men’s, women’s, and kid’s super comfy casual shoes. They are made with natural materials like wool and offer a unique style choice.
Their website features excellent copy, really good images, and a natural flow for potential buyers. Plus, everything is optimized for conversions — for example, notice the navigation bar: each link is to a commercial page; the navigation to non-commercial pages like the contact or about page is placed in the footer.
They also have great remarketing in-store: Whenever a visitor visits a product page but doesn’t buy the product, they are shown those products under “Take Another Look” right at the top of the homepage (whether the visitor is logged in or not).
This company offers stylish boot options for both men and women. Their goal was to not only create durable footwear but to have styles that fit into many occasions. They are perfect for work and for casual days on the street.
Though the controllable slideshow images at the top do not quite fit the “modern website design trends,” they compensate for it with great full-size images, a user-friendly navigation menu, and nifty animations.
Oishii is a Japanese-based company featuring the Omakase Berry. The company prides itself on quality over quantity berry farming available at their locations in New York, LA, or New Jersey.
On their website, they use a fast-loading, high-quality, full-size background video for the hero section. The video showcases the freshness and the quality of the berry, which demands the visitor to react: ‘Nice! I want that!’.
Apart from the video, they have a fantastic copy, consistent color scheme, lovely images, and well-placed action buttons.
Alexis Johnson is a self-taught artist located in Minnesota. Her illustrations primarily consist of ink, but she occasionally works with other materials like pastels. She continues her own education by exploring different forms of art with every new project she completes.
Her art portfolio website is minimalistic. On the homepage, she has embedded a gallery of her art—you can click on photos to know more about the pieces. Apart from that, you can navigate to the only two pages on the website—About and Contact—from the navigation menu.
Let’s end the list with Squarespace - the website builder that many websites in this “modern web design inspiration” listicle use.
Obviously, Squarespace understands web design. And I am sure they would’ve explored every modern design and conversion rate optimization idea for building their website through which they sell their website-building SaaS.
On the homepage hero section, there’s a full-screen image and a GIF that showcases the results (i.e., the kind of website) you’ll get by using their product. The navigation menu is flawless and optimized for getting visitors to high-intent pages. Below the hero section, they’ve showcased use-cases, features, social proof, and more with great images, seamless animations, and clear copy.
A modern website is a website that follows the latest web design trends and is typically built using modern technologies.
In the 2024 context, a modern website would mean a responsive and accessible website that features full-size hero images, bold colors, unique typography, custom illustrations, a lot of white space, etc. In the future, it could mean 3D websites that can be best viewed using a 3D headset.
If you want to build a modern website like the examples we showed in the article, using a website builder like Squarespace or Webflow would be the easiest way to go about it.
I would classify a website as outdated if it needs a flash player, is unresponsive, uses generic colors, uses generic fonts, does not use white space to effect, has no on-brand illustrations, or is pretty much tiresome to look at.
All the websites in the above list are made with DIY website builders, so pretty much all you need is a website builder. They provide with everything needed to make a website - customizable templates, web hosting, drag-and-drop editor, etc.
