Subscribe to our Newsletter

Get articles, advice and tips about:

You can read more about our privacy policy and how we use your personal data here.

Web Design Trends 2024

Web Design Trends 2024

by Frida Nyvall

Which web design trends are we looking forward to in 2024? We list our predictions for the year: what’s new, which trends are still around and which trends are out.

Persisting Trends

Many of the trends of previous years are still relevant. Some of these are e.g.:

  • Soft gradients in multiple colours.
  • large typography
  • Maximalism: big headlines, loud imagery, vibrant colours and overlapping elements.
  • Nostalgia and Y2K

3D

This trend has been around for several years, but will evolve further in 2024.

3D Surrealism

3D surrealism has been around for a while, e.g. through various shapeless figures used as design elements. Development is now moving towards the blob starting to move.

Animated 3D blob example from designtrends.click

Flat Design is Over

Skeuomorphism from the 00’s is making a comeback, but in a modern twist. It’s all about creating textures, dimensions, and haptic feedback. There may not be so much imitation leather and wooden bookshelves, but a lighter, cleaner, and more modern style that still conveys 3D and clearly associates the website elements with real objects.

Brian Chesky, Airbnb CEO, states in a tweet that flat design is now outdated:

Depth can e.g. be created using parallax effects, animations, shadows, gradients, overlapping elements, or opacity of various kinds.

The trend can be adapted according to budget and needs – everything from working with shadows to animated 3D models.

One way to create depth is using the still popular trend glassmorphism from 2021.

See the Pen
Frosted Glass Effect with backdrop-filter blur
by Frida Nyvall (@fridanyvall)
on CodePen.

Claymorphism from 2022 is not mentioned as often, perhaps because the style places higher demands on the design elements and thus becomes more expensive to produce.


New Trends 2024

AI: Tool and Content Creator

AI is now included at all levels in the development of websites:

  • AI as a programming aid integrated into code editors.
  • AI is used in functionalities that determine what content should be displayed and how it should be displayed on a web page.
  • AI is used to generate content such as texts, images and videos and language translations.

Thanks to AI, it becomes easier for amateurs to handle tasks related to their websites, that previously needed professional expertise. Platforms like Wix, and products like Adobe Express use AI to enable non-professionals to create web pages and content material.

The cost of creating a website is reduced, as AI can do more work. However, good computer skills are still required to be able to use the various tools required.

As AI offers new opportunities to improve web pages in terms of function and content, our expectations on web sites and what they can deliver will also increase.

Creative Typography and Serifs

Typography in 2024 is predicted to be highly creative, experimental, and playful. Inspiration is taken from the 90s and 00s, and does not have to be as human, kind, and empathetic as during or immediately after the pandemic.

Serifs are trendy again. This could be due to general nostalgia, or simply because they haven’t been popular for quite some time.

Scrolling Animations

Scrolling animations are hot. Techniques such as parallax animations, where the foreground and background move at different speeds, are back in.

See the Pen
Parallax Example: Firewatch Launch Site
by Stephen Koller (@StephenKoller)
on CodePen.

Parallax example by Stephen Koller

Newer techniques make it easier to achieve other animated effects tied to scrolling. For example CSS animations along a path (motion-path).

Example of CSS animation along a path. Read the full article at letsbuildui.dev

Chrome (which now also powers Edge) has developed a new technology for scroll-driven animations using CSS that has received a lot of positive attention.

In addition to simplifying programming of UI and UX patterns that previously required implementation in Javascript, it is also possible to use the technology in various new creative ways to create unique animations and experiences.

Scroll driven animation by Google.

Hopefully, more browsers will implement the technology in the future.


On the Horizon

Augmented Reality

This will become increasingly interesting following the launch of Apple’s Vision Pro. However, given the price tag, it will be some time before the technology is expected to be available to a wider audience.

Sustainable Web

Even a paperless industry burdens the climate. Electricity consumption has become an issue for digital technology as well. Lighter web pages have less impact on the climate because they require less storage and shorter load times. In the future, there may also be environmental certifications for websites and software.

Since the trend is that web pages are expected to have increasingly more of everything – more functions, more animations, more and bigger images and videos, it can be good to remember that everything has a consequence and impact and that nothing is free.

Tags

More posts

img

What’s to know about Baseline

img

Web Design Trends 2023

img

Web Design Trends 2022