The 29 Dominating Web Design Trends for 2024

Your web site is a essential a part of your advertising efforts and plan — or it ought to be. As expertise evolves, one of the simplest ways to make sure you have a web site that stands out from the competitors is to pay attention to the newest internet design tendencies. 

You don’t have to make use of each single internet design pattern. In truth, you shouldn’t. Nevertheless, it’s necessary to pay attention to a number of the choices on the market. 

Why does it matter? Effectively, your web site homes the knowledge your prospects have to find out about your product and make a purchase order. So, ensuring your web site takes benefit of the suitable internet design tendencies in your {industry} is without doubt one of the most necessary methods you possibly can construct belief along with your viewers. 

Experimental navigation, scrolling results, and kinetic typography are just some methods you possibly can stage up your web site. Try the complete checklist of tendencies that may dominate web sites this 12 months.

 

One main theme amongst these web site design tendencies is movement, from scrolling results to micro-animation. Try this video, which particulars some well-liked web site design tendencies for this 12 months.

 

1. Experimental Navigation

Once we focus on experimental navigation, we’re speaking concerning the navigation patterns that subvert the normal, which is all-caps navigation on the highest of the display screen in a sans serif font.) As a substitute, experimental patterns transfer in a extra inventive path, producing visible curiosity and guiding customers to navigate the location in a selected method.

Take What is Missing, for instance. Along with having an all-black intro that creates a big impact, the principle web page has a dynamic round menu so you possibly can discover their web site.  

What I like: This 12 months, you’re invited to show your navigation into an extension of your web site’s distinctive branding. That’s all because of experimental navigation.

Image Source

2. Kinetic Typography

Kinetic typography — or shifting textual content — is an animation method that gained momentum within the 60s when characteristic movies started utilizing animated opening titles. You need to use it for the same function in web site design to instantly seize the customer’s consideration as soon as they land on the homepage.

You may as well harness the ability of kinetic typography to focus on necessary sections, information the customer as they scroll, and steadily reveal data, like on Gravity Global. 

What I like: Kinetic typography can delight guests and assist them digest your content material. Plus, it’s visually enticing and fascinating. 

Image Source

3. Drag Interplay

Gone are the times when customers don’t have management over their expertise in your web site. 

Drag interactions are designed to imitate an precise, bodily motion. They basically permit guests to select up and transfer objects on the display screen. Any such gesture interplay is gaining momentum with extra web sites. It’s an particularly well-liked choice in case you have an ecommerce or portfolio web site.

Take Robin Mastromarino’s portfolio site for instance. Along with clicking on the controls of the homepage slider, you possibly can drag and drop the completely different slides to browse his featured tasks. The web page transitions and animations are primarily based on drag pace to provide customers a way of management over these results.

What I like: Drag interplay provides guests a way of customization and management over their expertise in your web site.

Image Source

4. Structured Typography

Increasingly more firms are utilizing structured typography to headline their house pages. In a post-pandemic world, customers crave construction and stability — each of which structured typography is harking back to. (Assume: All capital letters and powerful, strong shapes.)

Right here’s a wonderful instance of how structured typography may look in your web site. The Awwwards homepage reveals how a lot of an impression structured fonts could make.

What I like: Structured typography tells the guests’ eyes exactly what they need to be taking a look at.

Image Source

5. Cinemagraphs

Movement is the secret in internet design tendencies this 12 months. Cinemagraphs are not any exception. Cinemagraphs are high-quality movies or GIFs that run on a easy, steady loop. They’ve develop into well-liked so as to add motion and visible curiosity to in any other case static pages.

Whereas full-screen loops have been extra well-liked up to now, this 12 months, you’ll see smaller animations sprinkled all through complicated layouts. The addition of those cinemagraphs attracts the attention and helps your readers preserve scrolling, like on this instance from the design and expertise studio Grafik.

What I like: Cinemagraphs can assist draw the customer’s eye across the web page, even in essentially the most complicated layouts.

Image Source

6. Brutalism

Some designers go for extra eclectic, convention-defying buildings to face out in a sea of tidy, organized web sites. Whereas it could actually appear jarring at first, many well-liked manufacturers are actually incorporating brutalist parts. 

Brutalism emerged as a reaction to the increasing standardization of web design and is usually characterised by stark, asymmetrical, nonconformist visuals, and a definite lack of hierarchy and order. In different phrases, it is onerous to explain, however you know it when you see it — just like the beneath instance from Chrissie Abbott.

What I like: Brutalism prioritizes simplicity and performance — pillars of the consumer expertise.

Image Source

7. Layering

Layering photographs, colours, shapes, animations, and different parts add depth and texture to a web site that doesn’t have lots of textual content. Under is a trendy instance from the singer-songwriter SIRUP. 

What I like: Layering can assist add depth to a web site and inform the model’s story. 

Image Source

 

8. Textual content-Solely

In 2024, we’ll see extra internet designers embracing minimalist design. Some are experimenting with reducing out photographs and distinguished navigation sections altogether, counting on a couple of selection strains of simple textual content to tell guests about their firm.

Danish company B14 makes use of the hero part of its homepage to explain its mission assertion merely.

It’s a contemporary, uncluttered strategy to presenting data that gives a stark distinction to its portfolio part, which makes use of cinemagraphs, hover animations, and an animated cursor impact. 

What I like: This minimalist strategy ensures guests solely get essentially the most important data. 

Image Source

9. Animated Illustrations

Extra firms are turning to illustrators and graphic artists to create bespoke illustrations for his or her web sites as a result of it is one of many newest internet design tendencies.

“Illustration works nicely to convey extra complicated concepts that way of life images aren’t all the time capable of seize,” Kendra Pembroke, a Visible Designer at Purple Ventures said.

These illustrations are sometimes animated so as to add interactivity. For instance, should you hover over one of many illustrations on the NewActon web site (designed by Australian digital company ED), the illustration and people within the surrounding space will wiggle. 

Then, solely the illustration you are hovering over will proceed to maneuver in a small circle. This design can also be practical: every illustration represents one of many classes from the navigation menu on the suitable.

What I like: Animated illustrations assist convey complicated concepts and add some persona to a web site. 

Image Source

10. Extremely-Minimalism

Taking traditional minimalism to the intense, some designers and companies defy conventions of what an internet site must appear like, displaying simply the naked requirements. This pattern of internet design, referred to as “ultra-minimalism,” will be nice for the consumer expertise and cargo occasions.

The positioning from We Ain’t Plastic is straightforward in coloration and design, making it hyper-clear what they provide. And with the picture of the iceberg, it slows individuals’s minds down and attracts curiosity.

What I like: Extremely-minimalism can positively affect the consumer expertise and web site efficiency. The one cause we’re shifting it to earlier web site design tendencies is that we’re seeing it much more usually on websites all over the world. 

11. Mixing Horizontal and Vertical Textual content

Releasing textual content from its traditional horizontal alignment and inserting it vertically on a web page provides some refreshing dimension. Take this instance from motion sports activities video producers Prime Park Sessions, which mixes horizontal and vertical textual content alignments on a minimal web page.

What we like: Mixing horizontal and vertical textual content defies conference and may due to this fact delight and intrigue some customers. 

Image Source

12. Geometric Shapes and Patterns

Whimsical patterns and shapes are popping up extra incessantly on web sites, including some aptitude to a panorama in any other case dominated by flat and material design. Canadian design studio MSDS makes use of daring, patterned letters on their homepage. They provide a extra inventive aesthetic that’s eye-catching and visually fascinating.

What I like: Geometric shapes and patterns can direct guests’ consideration to sure merchandise or CTAs.

Image Source

13. 3D Design 

This 12 months, web site design is big on creating an immersive expertise for the location customer. That’s why 3D paintings is gaining momentum.

Adobe’s 3D Modeler makes it straightforward for anybody to discover 3D design. Essentially the most industry-popular 3D modeler is Maya, however this takes some extra experience. Blender can also be an important choice as it’s a free 3D design software program software. 

If you wish to embody a 3D design in your web site however are overwhelmed by the scope of the mission, there are many freelance 3D modelers on Fiverr and UpWork. Simply take a look at a number of the examples on Dribbble. 

This model has hints of Japanese Kawaii, a tradition of cuteness that focuses on childlike objects and pastel coloring. 

What I like: Cute and playful, this design is each fascinating to take a look at and can preserve your prospects in your web page longer as their eyes discover all the weather. 

14. Damaged Grids

Whereas grids are arguably essentially the most environment friendly option to show textual content and pictures, damaged grids proceed to make their manner into mainstream websites and provide a change-up from the norm. 

Try the web site for HealHaus, for instance. Its homepage options photographs and textual content blocks that overlap. It’s visually pleasing and simple on the eyes. Plus, it provides a way of movement to pages with out slow-loading animations.

What I like: This convention-defying method could make normal web site pages or sections extra fascinating.  

Image Source

15. Natural Shapes

Sharp edges are out, and curved strains are in. Natural shapes are set to dominate internet design in 2024. “Natural shapes can assist add some playfulness with out affecting the best way the knowledge is displayed,” Pembroke mentioned.

Within the instance beneath from Origin 63, the natural shapes within the hero part are ornamental and assist reinforce the model’s identification and promise. 

What I like: Natural shapes add persona and motion with out distracting from the content material. 

Image Source

16. Grid Traces

Grid strains started cropping up in the previous few years, and with good cause — they provide web site guests a sense of order and ease. Including grid strains makes your web site simpler to digest whereas including a contemporary, visually fascinating aesthetic. On the Foundations for a Better Oregon website, grid strains are used to create a transparent structure that appears futuristic.

What I like: This pattern isn’t simply visually partaking — it additionally provides your web site a precious sense of group.

Image Source

17. Y2K Impressed Design

The resurgence of the Y2K aesthetic that began in 2020 is right here to remain for a minimum of a bit longer. In 2024, you will notice web sites including nods to the coveted Y2K model to evoke a way of nostalgia. Even celebrities channel the aesthetic on their artist web sites — have a look at singer and actress Olivia Rodrigo’s site for a wholesome dose of inspiration.

What I like: This playful aesthetic doesn’t take itself too significantly.

Image Source

18. Scrapbook Aesthetic

If you happen to want extra proof that web site guests are leaning into nostalgia, contemplate that the scrapbook aesthetic is coming again. However this is not the identical scrapbook aesthetic we noticed well-liked within the early 2010s when this internet design pattern emerged. 

Right this moment’s scrapbook aesthetic is an up to date, buzzy model. In some instances, like this Gucci website, it is interactive. 

What I like: Now you can convey your scrapbook-style web site to life.

Image Source

19. Gamified Design

Gamified design is in all places today, making it one of the vital prevalent web site design tendencies this 12 months. Gamification is a superb thought as a result of it provides a component of human emotion for guests. 

As an example, once they arrive in your web site, they’ve the expertise of partaking along with your content material in a singular, memorable method. This example by PrettyDamnQuick demonstrates precisely what we imply.

What I like: This playful pattern is greater than enjoyable — it’s genius from a consumer engagement standpoint.

Image Source

20. Emphasis on Product Images

2024 is the 12 months of product images reigning supreme for ecommerce web sites. From magnificence firms to clothes manufacturers and past, product images might be entrance and middle in 2024. This instance from skincare brand BYOMA exhibits how impactful preserving your model’s merchandise centerstage will be.

What I like: Guests don’t need to seek out photographs of what you’re promoting — they’re immersed in it from the second they arrive in your web site.

Image Source

21. Minimal Classic

Of their report, InDesign Expertise claims that minimal classic might be an necessary graphic design factor in 2024. Just like minimalist styling in print design, minimal classic focuses on a retro coloration palette and kind model. 

Minimal classic may not immediately look old-school. Relatively, it subtly nods to completely different a long time of yesteryear, reminiscent of this design from Deco Hause.

What I like: This pattern invokes the nostalgic feeling of previous ads.

Image Source

22. Goofy Sans Serif Typography

Goofy sans serif typography is good for manufacturers that need to present they’re fun-loving and never too severe. This optimistic typeface is cartoon-inspired with a contact of retro enjoyable. 

When together with Goofy sans serif typography in your content material or in your web site, make sure to let or not it’s entrance and middle, so it doesn’t need to compete with different parts. Gumroad’s font is daring and enjoyable.

What I like: This font is a whimsical strategy to scrub strains and ease. 

Image Source

23. Sci-Fi Impressed Design

Sci-fi is having a second proper now with a number of new sci-fi films popping out, so I feel it’s going to proceed to rise this 12 months. Why? Manufacturers that use this internet design pattern place themselves as futuristic, which makes it a powerful selection for tech manufacturers. 

Vivid colours and metallic tones can assist you obtain this look, however don’t be afraid so as to add a touch of 80s retro to essentially seal the deal. Matt Romo’s design for the MROM bot hits the nail on the pinnacle. 

What I like: Sci-fi-inspired internet and model designs usually are not afraid of coloration and tech-related parts.

Image Source

24. Pure and Natural Textures

Pure textures make an important background for a enjoyable however easy font. Select pure textures that relate to your {industry} and assist your viewer envision your merchandise. Simply take Horizontal Design for instance. 

Pure textures may place your organization as eco-friendly or a enterprise that cares about pure sources. 

What I like: Natural textures infuse your design with vivid tactile-ness and new life. 

Image Source

25. Consumer Expertise

Though cell usability is a pattern that’s in all places now, in 2024, I anticipate we’ll see an extra shift towards consumer expertise (UX) as a essential web site design pattern. 

Ryan VonBergen, vice chairman of design at Media Junction, had some nice insights right here, saying, “Design tendencies are an important place to begin to information path, however leading edge doesn’t all the time imply good. You additionally need to ensure that your aesthetic decisions improve usability and accessibility to create an important expertise for all.”

Taking this pattern even additional, extra firms will prioritize a self-help part that makes it straightforward for his or her customers to get self-service, whether or not they use generative AI, user-generated content material, or mini-articles that reply essentially the most incessantly requested questions.

And, Media Junction’s web site does an important job of reinforcing this — it’s straightforward for individuals to grasp what they do and to seek out the knowledge they’re searching for. 

What I like: Easy messaging, high-contrast textual content and graphics, and streamlined navigation present an important consumer expertise. And there’s some flash, with the suitable half of the house web page that includes rotating photographs and graphics.

Image Source<26. Conversion Technique

As advertising departments in all places get laser-focused on profitability and the underside line, I anticipate we’ll proceed to see the next emphasis on conversion technique as an online design pattern. Sure, it is all the time going to be about attracting your viewers, however in 2024 and past, we’ll see extra effort positioned into changing them as nicely.

Angela Pointon, president of 11outof11 agrees, saying, “ Regardless of how visually interesting or interactive an internet site’s design could also be, contemplating conversion technique for the web site continues to be essential. The query should not be: will we just like the design? The query ought to be: will the design allow extra conversions?”

So, what’s going to this appear like as a pattern? You’ll possible see extra data-driven copy and design choices, extra copy-led design, and extra efforts to grasp your target market and what they need so you possibly can converse to them with phrases and aesthetics. You might also see this present up with sticky contacts and progressive lead nurturing, or it may merely be a deal with extra intuitive design.

One nice instance of a conversion-focused web site is Cognism. By specializing in a transparent message and worth proposition, backing up their statements with stats and social proof, and providing particular CTAs, it’s a real gross sales software.

What I like: Leaning into conversion technique helps be certain that your web site can assist your online business with clear ROI.

Image Source<27. Dynamic Cursor

Dynamic cursors are FUN. They’re a good way to distinguish your web site out of your opponents and may result in a greater consumer expertise. Some websites do that with in-your-face daring adjustments just like the Pest Stop Boys, the place the cursor acts like a magnifying glass the place you “discover” pests.

What I like: Dynamic cursors create a enjoyable, playful, and interactive factor that makes customers need to interact extra along with your web site.

Image Source

To share one other instance that’s barely much less daring, take a look at Spring Invest’s web site, the place the cursor is barely greater than a traditional web site’s and has an animation that follows your mouse round and grows while you click on.

Image Source<28. Customized Illustrations and Animations

Customized illustrations and animations can add to the playful aesthetic of an internet site with out taking away from the performance. They add motion that provides to the model story and messaging whereas contributing to how customers work together with the location.

SmartBug makes use of a customized illustration and animation on their web site the place the rocket picture contributes to the message “All Methods, Develop.” It additionally makes use of shifting molecules for example their severe, granular strategy.

What I like: Customized animations could make your web site come to life, enhancing the best way individuals work together with out distracting them from the usability.

Image Source<29. Chatbots

Chatbots have been round for some time, so should you’re questioning why I’m together with them as a 2024 design pattern, I get it. However right here’s the factor — as generative AI turns into simpler to include along with your CRM and information, I anticipate we’ll see extra companies utilizing them. And okay, so it’s not technically an online design pattern, however it’s one thing that extra firms might be utilizing this 12 months and past, together with your opponents.

To not toot our personal horn, however you don’t need to look additional than HubSpot’s site to fulfill our very personal chatbot that we’ve named HubBot.

What we like: Generative AI makes chatbots extra human, extra intuitive, and simpler to make use of than ever earlier than. What’s extra, it means that you can reinforce your model message and consumer expertise, and which means it’s not a pattern that’s going away anytime quickly.

Earlier Web site Design Developments That Are Widespread Now

Let’s be clear, I’m not advocating that any of the tendencies on this checklist are passé. Quite the opposite, most of them stay fairly well-liked. Nevertheless, as a result of they’re extra commonplace, we’re shifting them to a brand new part of this checklist.

1. Scrolling Results

Scrolling results — animations triggered by scroll motion — create extra dynamic internet experiences, which is why they’re arguably one of the vital well-liked trending internet design parts this 12 months. 

These are more and more used on interactive web sites to intrigue readers to maintain scrolling, signify a break in content material, and create a three-dimensional expertise.

Engineered Floors does simply that, combining horizontal and vertical scrolling.

For instance, when the consumer lands on the homepage, they see a picture of what seems to be a chair on the suitable. Because the consumer scrolls, this picture zooms out to disclose a front room, which is steadily coated in carpet. This 3D expertise is pleasant and informative. 

What I like: Scrolling results can stimulate guests and encourage them to proceed scrolling even beneath the fold.

Image Source

2. Colourful Gradients

From Instagram to web sites to ads and past, likelihood is you’ve seen your fair proportion of gradients in the previous few years. Gradients have been all the fashion recently, and we’re seeing this extra generally in the present day.

Cannot determine what colours to make use of in your web site? Use HubSpot’s Color Palette Generator to discover a coloration scheme that fits your model. The Colour Palette Generator is straightforward to make use of: first, choose your model’s major coloration. 

Then, select complementary colours. The software program will present a number of full-color palette choices that add impartial tones to your major and complementary colours. You possibly can customise your coloration palette to your liking.

Try this attractive and visually interesting instance by ROSE Wrapped for gradient design inspiration. It pairs a colourful gradient with kinetic typography for the last word visible affect.

What I like:Gradients are visually thrilling and, when used correctly, not distracting.

Image Source

3. Overlapping Textual content and Photographs

Textual content that barely overlaps accompanying photographs has develop into a preferred impact for blogs and portfolios. Freelance artwork director and front-end developerThibault Pailloux demonstrates how by inserting overlapping textual content with a colourful underline beneath every title.

What I like: Overlapping textual content and pictures maximize area on the web page.

Image Source

4. Net Textures

Net textures are background photographs that visually resemble a three-dimensional floor. Whenever you use them proper, you should use internet textures to immerse guests in your web site by partaking the tactile sense. 

Want proof? Simply take a look at this instance from the Color Of Change web site — the background evokes a duct-tape-like texture.

What I like: Net textures draw consideration to a specific part on an internet site.

Image Source

5. Pastel Colours

Pastel colours have been well-liked in web site design. Pastels are vivid, heat, and eccentric — a robust reprieve from the bleakness of the early 2020s. This portfolio created by Cédric Pereira reveals precisely how visually impactful pastel colours will be.

What I like: Pastels add a component of levity to your web site.

Image Source

Design Developments You Can Use on Your Web site

As VonBergen says, “Design tendencies come and go however making a human connection along with your guests will make a long-lasting impression. Be certain your aesthetic decisions match the expertise you need to present to that splendid customer.” 

In fact, you don’t want to include all of those tendencies to construct among the best web site designs in 2024 — we doubt that’s even potential. 

Even including a few these web site design tendencies as distinguished elements or subtler particulars can enhance your web site’s UX considerably, resulting in larger engagement, extra CTA clicks, and a greater end result for your online business.

Editor’s word: This submit was initially printed in January 2018 and has been up to date for comprehensiveness.