Web Design Trends in 2024

Has AI already taken over the field of design?

Definitely not, is the quick answer. When ChatGPT and image generators like DALL·E, Midjourney, and Stable Diffusion started gaining wider popularity around last New Year’s, there was a lot of excitement and anxiety in the air—and it indeed caused a storm in the fields of illustration and photography. However, by the end of 2023, AI hasn’t really made a significant impact on the field of UX/UI design. Statistics also show that AI is only used to a small extent for UI design. AI simply hasn’t yet made its way into UI design tools—it’s mostly helpful for background tasks and content generation.

So, what do we actually have for a UX/UI designer? Framer has an AI generator that builds a website right in front of the designer’s eyes based on a prompt. But the results tend to look quite similar—it focuses more on generating content like text and images. There are actually several such tools, and even better ones. For example, 10Web, a website builder with WordPress content management—while you can’t really design much yourself, it’s pretty great for quickly setting up a site for a typical business owner. Or tools like Style and Durable. In Wix Studio, AI can help make the website responsive—automatically adapting the design to different screen widths.

Uizard can turn sketches into UI designs, making it great for quick prototyping. There’s also been some buzz on Twitter about a Figma plugin in development that generates a website layout. It seems like there’s a lot happening in the no-code and low-code space right now, and just today, I saw one no-code app builder launch its own AI generator.

Basically, every week we get a new generator. The existing tools are suitable for idea generation, content creation, or at best, putting a website together in some form. Imitation, not creation. So far, I haven’t seen a serious tool that would send designers on vacation.

There are many testers. Given the general AI race, could it ironically happen that, for example, Microsoft ends up creating the best web-building tool? With Bing Chat, they’ve managed to make even simple GPT confusing and annoying for users, so it’s likely that the solution will come from a more designer-friendly organization. Adobe and Figma are already experimenting together, and Figma’s CEO has a vision. Something might come out of that, once the hype fog clears and they get a clearer picture of what users actually need.

While writing this article, ChatGPT opened up the possibility of creating personal GPTs, or apps. It’s likely that something more practical for UX/UI design will come from this.

The web user environment is changing

Lately, projects have been emerging that ask more general questions about where we use the web, what the web even is for the average user, and how it can be improved.

There’s a discussion that today, a browser is quite a clunky interface through which we, as users, essentially have to fight our way through the digital world with “boxing gloves” on, trying to connect and organize things. Browsers and operating systems in general treat each web app as a separate entity with its own rules. In reality, the digital experience could be much more seamless, where the entire system adapts to the user. Systems should be able to exchange data in the background, and users should be able to freely move data around as needed.

There have been alternative browsers created for tech enthusiasts before, but now, the Arc browser has gained significant attention. This browser is advocating for such a philosophy, looks great, and is even converting some Mac users to its cause. (See its review.)

Dot and Space OS aim to do the same at the operating system level. Flexibility, personalization, AI-generated micro-apps on the fly based on the user’s needs, etc. Gradually, all major browsers and operating systems are doing this, for example, AI support called Copilot is already built into Windows, including Edge.

The announcement of Apple’s Vision Pro brought the VR/AR topic back into the news cycle. It will likely remain a playground for enthusiasts. As a side note, does anyone even remember the hype about Meta’s parallel world migration? Jokingly: even elderly people were scared into thinking it would be happening soon, as they were told on Vikerraadio in broad daylight that they’d have to leave soon, no matter what…

In design circles fond of effects, visionOS’s detailed spatial UI solution and its promotional images, in general, sparked a new wave of glassmorphism. Semi-transparent matte glass surfaces, subtle spatial effects, and similar elements are still popular even on regular websites.

Overview of Visual Trends

The large footer

An disproportionately large footer is now a trend. Just stretch the logo from one edge of the page to the other, and you’re good to go! You can explore footer design at a dedicated website for footers, footer.design.

Menu Island

Following the iPhone’s Dynamic Island, it’s becoming more common to see menus positioned on a separate “island” rather than spanning from edge to edge as a block. This concept has been seen before, but when Apple introduces something, it often quickly influences web design trends as well.

Dark mode

Dark mode is increasingly becoming the default solution. The style that’s prevalent comes from the gaming world, notably the Linear website, with features like glows, lighting effects, flashlight beams in the dark, gradient lines, bento grids, microanimations, and deep aesthetics. Partly as an ironic move, a gallery has even been created to document websites using this style: linears.art.

Bento grid

Once again, Apple’s website has popularized the masonry-style layout, which is now widespread. It features rounded, irregularly sized boxes, each containing its own information, often accompanied by annoying microanimations.

Visually intriguing, but too often designed in a way that makes it hard to focus your attention quickly. There’s a lot of irregularly shaped content with equal weight, and sometimes a box is a link, sometimes it’s not.

This technique has been heavily used in graphic design as well. You can find dozens of examples of it.

Gradient

Multi-colored gradients are still very much in style. Adding a bit of “noise” gives extra texture and tactility, making the design visually more interesting and dynamic. – This paragraph was copied from last year’s article, but it’s still true 😀

Pixel enjoys attention

Pixel backgrounds, graphics, and effects were already hot by the end of 2022, and now they’re even more widespread. Pixel art was also a trend in the late ’90s, as well as in the ’80s. Back then, it was due to technical limitations (to reduce image size), but now it’s used as a decorative technique. Lo-fi retro, which, thanks to technical advancements, is now actually quite cool in animated effects.

In typography, there has been a focus on experimenting with geometric elements and unusual shapes.

Frames and Distinct Surfaces

Related to the lo-fi and brutalist aesthetic, but not limited to it, is the use of strong frames to differentiate content blocks and elements. Additionally, content sections are often distinguished by surfaces in different colors.

Y2K Retro

The ’80s and ’90s are still present, but now also the Y2K aesthetics – holograms, semi-transparent plastic and matte glass surfaces, pearlescent liquids, viscous waves, iMac G3, bubbles, spheres, ellipses, outer space, cyberfuture, sparkling plasma, and typographic elements with rounded, diamond-shaped futuristic star designs, along with visible grids. This style is found on websites related to music, fashion, culture, and cryptocurrency, but not in the mainstream.

Animation, 3D, and Immersive Environments

Always in trend because movement and spatiality simply captivate users. It’s especially effective when it’s part of storytelling.

It’s easier for designers to create now than it was just a few years ago. Apps like Spline and Vectary are more user-friendly than hardcore 3D programs, and Figma now has plugins that can turn regular graphics into 3D-like products.

By the way, a pleasant experience can also be designed with small details; it doesn’t need to be an overwhelming visual or motion experience. For example, check how an object in an image moves out of the frame, etc.

Summary

Trends come and go, web design tools are becoming increasingly accessible and understandable even to non-designers, and the understanding of design’s importance has reached a wider audience. But the most important thing remains the message and content.

Contact us, and we will bring your ideas to life!