9 Modern Website Design Trends in 2023 (with Examples)

From Facebook and Instagram to Yelp and Google Business, there are a dozen ways for organizations to maintain an online presence. But no matter how many profiles you create across these popular social media and review sites, your audience will want to visit your real home. The one not hosted by Google, Facebook, or Yelp. 

I’m talking about your website. A website gives your business credibility. It’s a place to show off your brand, relay important information, answer FAQs, and publish SEO-rich articles to increase your visibility and value. But you only get a few seconds to make a positive impression when visitors arrive, so make sure it’s effective by using some of these nine modern website design trends.  

1. Accessibility

Website accessibility—that is, making sure site elements like images, links, and even color schemes are kind to visitors with visual or other impairments—is more of a need than a trend. But it’s something that many businesses are only now starting to incorporate into their websites. The CDC estimates that one in four adults in the United States lives with a disability. That’s a quarter of your potential website audience!

How do you make your website more accessible to people with disabilities? Think about high-contrast viewing modes, keyboard navigation options, ARIA labels to provide invisible text descriptions on clickable fields for screen readers to read, meaningful alt text for screen readers describing your images, focus indicators, and video descriptions. 

Patagonia

With high-contrast fonts and colors, descriptive links, and focus indicators on most buttons, the Patagonia website is already accessible to many. But if visitors need additional support, they can navigate to Patagonia’s Accessibility Statement page and Level Access page to download assistive technology.

A screenshot of the page explaining Patagonia’s Level Access assistive technology.
Patagonia goes above and beyond the minimum considerations for accessibility. 

Scope

One of our favorite examples of an accessible website is Scope, a non-profit organization that promotes disability equality in the UK. The website features bold colors, focus indicators, high-contrast fonts, and an accessibility button on the page’s top-left corner, where it’s easy for screen readers and people to find. According to its accessibility page, Scope scans its site for accessibility issues every four months and provides transparency about problem areas and recent updates. 

A screenshot of the Scope website homepage.
With bright, bold, contrasting colors, focus indicators, and an accessibility button, Scope’s website is a great example of what to strive for. 

2. Custom Illustrations

It’s not hard to find a website that features unique illustrations these days. Even SaaS companies like Notion, Todoist, GitHub, and Salesforce use custom imagery to highlight their brand and products. Custom graphics give websites a personal touch. They can be whatever you need to fit your brand’s personality: playful, somber, simple, or complex. 

And they’ve never been easier to make. Tools like Adobe Illustrator help artists and graphic designers create custom vector-based illustrations, drawings, cartoons, and just about any type of artwork a website designer could want. Even those of us with limited design skills can try Adobe Illustrator. Or, you can hire professionals through sites like 99Designs and get something one-of-a-kind from an experienced designer.

Duolingo

Duolingo’s adorable illustrations make learning a new language seem easy and fun. Who wouldn’t want to follow the cute little owl on a new adventure? The images work to make the concept of learning another language much less intimidating.

A screenshot of a Duolingo website page that shows the Duolingo owl engaged in exciting adventures.
Duolingo’s eye-catching illustrations help make the idea of learning a new language seem like the most fun challenge you’ll ever tackle.

Notion

Illustrations don’t have to be colorful to look good, though. The project management software company, Notion, embraces a black-and-white color scheme as part of its brand identity. The web illustrations reflect that choice. 

A screenshot of a Notion webpage showing black-and-white illustrations of people trying to get organized.
Notion’s black-and-white illustrations make the bits of color in the website pop. 

3. Full-Page Hero Images

Gone are the days of limiting your hero image to the upper marquee of a website. Countless websites use full-page hero images that make us want to enter the world on the other side of our screens. The best full-page hero images are layered with just enough text to get the viewer to scroll down or select a menu option. 

Too much text, and the hero image gets obscured. Too little, and a viewer might not know what action the website wants them to take. As smartphone cameras continue to get more powerful and loading speeds keep improving, we predict this 2023 website trend will hold strong for years to come.

Ocean Conservancy

Full-page hero images should support your brand. In other words, avoid stock photos if you can. Take a look at the Ocean Conservancy’s captivating hero image. It makes you feel like you’re underwater with the sea turtle. Who wouldn’t want to help keep oceans healthy after viewing it?

A screenshot of the Ocean Conservancy website that features a sea turtle and a fish swimming underwater.
The Ocean Conservancy hero image makes you feel like you’re under the sea. 

Yelp

Yelp is another example of full-page hero images put to good use. Known for its local retailer and restaurant reviews, the company also wants to promote automotive, housekeeping, and painting services. Its rotating carousel of full-page header images showcases photos from business owners in each of these fields. 

A screenshot of the Yelp home page featuring a clean countertop with cleaning supplies.
Crisp, authoritative text layered over an image of a clean house helps promote Yelp’s evolving review focus.

4. Playful Fonts

After three difficult years of pandemic-related stress, modern website design is leaning resolutely into an era of playfulness and personality. Fonts are no longer purely functional. With more font choices now than ever, people are picking typefaces that evoke a range of bold, beautiful feelings. 

And with tools like Adobe Illustrator, it’s never been easier to create custom fonts if you’re up for the challenge. Either way, you can employ creative but still readable fonts to give your website a unique look.

CatScarf

CatScarf provides custom, comfortable, high-fashion scarves…for cats. It’s quirky. It’s fun. It’s a little bit serious. The fonts on the CatScarf website reflect these brand characteristics, striking a clever balance of elegance and playfulness.

A screenshot from the CatScarf homepage that shows a green knit scarf and text in a variety of fun and serious fonts.
The playful, serious, and elegant selection of typefaces on the CatScarf website work together to create an immersive brand experience.

The Met

Even though conventional wisdom says to use a maximum of three fonts on a single webpage, The Metropolitan Museum of Art ignores this. Instead, it proudly displays a variety of wildly different fonts. The Met is all about art, and art is bold, diverse, and complex all at once–just like the font choices on The Met’s website. 

A screenshot showing The Met’s website and a showcase of four different exhibits.
A sturdy sans serif font describing each exhibit ties the whole webpage together. 

5. Card Layouts

2023 is the year of cards…at least when it comes to modern website design. Website cards are UI (user interface) units that come in square or rectangular shapes and contain bite-sized pieces of information. A website card can include several elements to display this information, such as a title, image, descriptive text, call-to-action button, link, or hashtag. 

Sites like Pinterest have been using card layouts for a while, but more websites are adopting the trend for themselves these days. And why not? Cards are an easy way to fit lots of information on a page without overwhelming the viewer and provide a level of interactivity with your website. 

The Met

As the nation’s most-visited museum and the largest art museum in the Americas, The Met has an overwhelming amount of information to share with its website visitors. But the site is anything but cluttered. Every bit of information is broken into image-centric cards, and each card is a link that leads the viewer to a whole new webpage.  

A screenshot of The Met’s homepage showing eight cards that act as links between web pages.
The Met uses different sizes of cards to display key information and make it easy to click between web pages. 

SurveyMonkey

On the SurveyMonkey website, cards act as buttons that guide web visitors to the perfect survey template. Each card has a simple illustration that helps you quickly understand what type of survey it links to. It’s a clean way of presenting several options to a site visitor without creating clutter or confusion.

A screenshot of the SurveyMonkey homepage showing six brightly colored cards with simple images and text.
These simple cards on the SurveyMonkey website make choosing a survey template quick and easy.

6. Background Videos 

Modern website design is really embracing background videos instead of classic hero images since so many visitors have better internet connections or data transfer speeds via cell service. Have you noticed that a video will automatically start to play when you navigate to some sites? This puts you right in the center of the action and keeps you on the page. You can’t look away. 

So, you stay on the site and keep watching the video—and then click on the text to learn more. It’s genius. A couple of years ago, background videos were limited to desktop versions of websites. But in 2023, most smartphones have the mobile network capacity they need to quickly load and play automatic background videos. 

Playa Grande 

I could stare at the automatic background video loop on the Playa Grande Golf & Ocean Club website for hours. The club is in the Dominican Republic. Each video clip showcases the activities you can do at the club while surrounded by the gorgeous turquoise waters of the Caribbean Sea.

A screenshot of the Playa Grande home page showing a still from a background video of kite surfers on the Caribbean Sea.
The Playa Grande website uses background videos that make visitors want to book plane tickets immediately.

Beyond Indigo Pets

Beyond Indigo Pets, a content agency for veterinary websites, also uses a loop of background videos to highlight its services. Each clip shows a different animal turning its head to look at the camera. The overlaid text highlights the services Beyond Indigo offers, which are designed—you guessed it—to turn heads.

A screenshot from the Beyond Indigo Pets homepage showing a group of kittens looking at the camera.
Who wouldn’t want to watch an infinite loop of adorable animals turning their heads to look at the camera?

7. Creative Cursors

Many web designers are embracing unique cursors to add value to their websites. Instead of featuring tiny arrows, hands, or magnifying glasses that we barely see because we’re so used to them, designers are choosing bold, creative cursors. 

Some contain images or text that enrich the viewer’s experience. Others activate fascinating visual and UX effects. When done well, creative cursors keep web visitors on a page just a little bit longer—and make a page unforgettable. 

Kite Festival

When you hover over the name of one of the musicians performing in the UK’s Kite Festival, your cursor will turn into a bright circle with a photograph of the musician inside. This helps personalize an otherwise unremarkable-looking list of names and gives each artist a slice of the spotlight. 

A screenshot of Kite Festival UK’s homepage showing a circle cursor with an image of DJ Sofia Kourtesis inside.
The photo in the bright circle of your cursor changes as you hover over different names.

Advanced Team

Advanced Team is a boutique website design agency, and its creative cursor showcases the best of its design abilities by leaving a pattern in the wake of cursor movements. It’s so cool that I just want to sit at my laptop and create swirl patterns all day. Yes, that green swirl you see is the cursor moving across the page! 

A screenshot of the Advanced Team Portfolio page that features a green swirl created by the cursor.
I highly suggest testing out this amazing cursor yourself. 

8. Augmented and Virtual Reality 

From face filters on Instagram to Home Depot’s 3D Augmented Reality feature, we’ve been using AR for a while. But the trend is only getting stronger in 2023, with sites refining and adding to their AR capabilities. Websites are also starting to implement Web VR, a type of virtual reality that allows you to step into immersive experiences with or without a VR headset.

Augmented and virtual reality can help us decide which paint colors to choose, which furniture to buy, and find places to explore. And it’s only going to get more sophisticated from here. 

Google Earth

Google continues to add features and updates to Google Earth VR, a mixed-reality experience that lets you walk through Florence or fly through the Grand Canyon. You can enjoy some of the magic on your computer screen or strap on your headset for the full experience. 

A screenshot showing a woman using a VR headset to fly over the earth in Google Earth VR.
Use Google Earth VR to explore places you might never get to see in real life.

The Home Depot

The Home Depot introduced AR in 2015, but the technology gets better every year. You can now use the Home Depot app to visualize every detail of a build or remodel before making a single purchase. 

A screenshot from the Home Depot website with two hands held up showing a living room being designed and tested via AR.
The Home Depot’s AR feature helps you see how home decor products, paint colors, flooring, and furniture will look in your home, saving you time and money.

9. Chatbots

Chatbots are popping up—literally—on more and more websites every day. They’re particularly helpful on ecommerce or SaaS sites, where the friendly little AI-powered conversational agents can answer questions or connect you with a real human. 

Whether you find them annoying or helpful, they’re here to stay. And they’re getting more capable, too. Instead of only being activated when you respond to them by typing a question, chatbot developers are starting to adopt voice-enabled technology. 

Slack

Chatbot developers got smart. It’s harder than ever to make a chatbot say silly things by asking it random questions. The Slack chatbot, for example, asks you questions and provides a range of answers for you to choose from. You can’t just type a question, and you won’t need to.

A screenshot showing an interaction with the Slack chatbot.
The Slack chatbot helps you decide whether or not Slack is right for you.

Snatchbot

Tools like Snatchbot are making it easier for people who aren’t chatbot developers or experienced coders to include chatbots on their websites to field questions from visitors and connect them with salespeople. You can even create a Snatchbot chatbot that speaks in one of 60 languages. 

A screenshot showing the SnatchBot chatbot-creating tool with the text “Hi, how are you, Rosie?” inside.
SnatchBot helps you create a chatbot that speaks in English, Spanish, Hindi, Chinese, French, or another language.

Final Thoughts About Modern Website Design 

If you’re designing a new website or reimagining a site you haven’t touched in years, consider incorporating some of these trends to bring it into the modern ages and vie for the attention of visitors better than your competitors. 

Voice-activated chatbots can increase your website’s accessibility level. Background videos showcase the best things about your brand. Playful fonts and cursors help your content stick in the mind of your web visitors. And those are just a few basic examples of how to utilize the trends we’ve spotlighted in this article. 

Our guide to designing your website can help you get started more confidently. You can also take a look at the 13 best design practices for 2023 to help you create the coolest and most modern website around. 


Source: quicksprout

9 Modern Website Design Trends in 2023 (with Examples)