Telerik blogs

2024 will be the year of revolutionary and reactionary design. In this post, we’ll look at seven new web design trends: sci-fi inspired design, textured design, hyper-minimalism, adaptive headers, multiplanar scrolling, hand-drawn logo elements and teleprompter typography.

With 2023 coming to a close, it’s time to look ahead and see what the realm of web design has in store for us. Or, rather, what sorts of changes we’ll be bringing to the web as we design and redesign our digital products.

Some of 2024’s web design trends will evolve from current design trends. Others, though, will be reactionary. As opposed to building on what’s been popular in recent years, some of these trends will take us in a different or opposing direction. But that’s the way it goes. When consumers (and designers) get enough of a trend, it’s not uncommon to see a drastic change in the following year.

So with that said, let’s have a look at what’s on the horizon for 2024 in web design.

1. Sci-Fi-Inspired Design

We are living in interesting times right now. While we don’t have flying cars or robot maids as some movies and TV shows predicted we would, we do have things like:

  • Generative AI like ChatGPT
  • Robot-manned restaurants
  • High-powered, pocket-sized computers (i.e., smartphones)
  • Biometric authentication
  • VR headsets

There’s definitely a demand for high-tech solutions in both the consumer and professional spaces. As such, I think we’re going to see brands in these big tech spaces (like fintech and healthtech) design their websites and apps so that they feel more futuristic.

Level One Fund is a venture capital fund looking for companies to invest in over the long term. Their dark themed website contains graphics that look like something out of a video game or the movie Tron. The whole website isn’t designed this way, though, which makes it more impactful and memorable when users encounter them.

A GIF showing what the dark themed homepage of the Level One Fund looks like. Most of it is all black. The exceptions are the hero section that looks like a playable video game with glowing orbs for Fintech, Foodtech, Consumer, Biotech, AI, and Space. The footer also has a Tron-inspired digital landscape look to it.

DNA Capital is an investment company for healthcare and healthtech. This website also uses a dark theme. The space-inspired background and the shape resembling the DNA double helix stand out nicely against it. It also suggests to users that this company isn’t focused on the traditional healthcare space as much as it is the future-proof solutions being developed now.

A GIF showing the homepage of the DNA Capital website. The background is dark with floating particles on it, making it resemble outer space. On top of the background and behind the text is a blue and purple dotted shape that resembles a rotating DNA double helix.

2. Textured Design

Even though AI and Big Tech are taking over a ton of businesses, many people long for some sense of realism and humanity when they’re browsing the web.

So while we’ll see tech companies adopting more futuristic looking designs, we’re going to see other brands go in the opposite direction. Rather than have websites full of flat graphics, neon colors and animations, they’ll bring some texture and depth to theirs.

Brands that make physical products or provide real world services are most likely going to be the ones to adopt this approach.

Bellroy is an ecommerce company that sells durable and sustainable leather and fabric products like wallets and phone cases. The video in the hero section doesn’t just show off various products, it gives shoppers a close-up look at the tactility of them. It also demonstrates how durable the products are. For example, we see one of the products with water on it.

A GIF showing the video in the background of the Bellroy website’s hero section. The text reads “The latest tech. Covered.” The video shows the various leather products getting covered in water and being opened up. You can also see the close-up details of some of their leather and fabric products.

3. Hyper-Minimalism

Here’s another web design trend that I think is reactionary in nature. Rather than embrace the bold, boundary-pushing styles that the age of AI has inspired, I think some brands are going to say “enough is enough” and go way back to the basics.

Hyper-minimalism won’t be about creating websites that are devoid of color, imagery or attractiveness though. It’ll be more about embracing white space and allowing it to give visitors the space and time to breathe and let everything soak in.

Not every brand will be able to put this trend to use. However, I think we’ll see it quite a bit on websites for local businesses as well as individuals and entrepreneurs.

Congaree and Penn is a farm located outside of Jacksonville. In addition to welcoming people to visit and dine on the farm, they host various events throughout the year. They also provide a serene backdrop for weddings, small gatherings and other occasions. The ultra-minimalist website does a good job of reflecting the general vibe of the place.

The ultra-minimalist hero section on the Congaree and Penn website. There is a Menu link in the top-left, logo in the middle, and Cart link in the top right. In the center of the page it reads “Congaree and Penn is a Florida farm and restaurant dedicated to agriculture & culinary endeavors, and gathering the community to enjoy both.” That’s all the content there is.

Leen Heyne is a jewelry designer. The homepage includes the occasional sentence or two to explain her work along with minimalist images of her jewelry. The overall design does a great job of embodying the concept of hyper-minimalism and gives the website a feeling of elegance and purposefulness.

The hero section from the Leen Heyne website. Atop the oversized beige background is a dark photo of a model’s face and hands. There’s a single line of light shining through to reveal one of the jewelry artist’s rings.

4. Adaptive Headers

Although transparent header design can look really cool, how realistic is it that the logo, text and button will stand out clearly against every section background they pass over? One solution is to do away with the sticky header. But then you risk decreasing the usability of the website by forcing users to scroll to the top whenever they want to peruse other pages.

Another solution is to turn the transparent header solid once the visitor passes the hero section. However, that can cause a break in the seamlessness of the web design, which is part of the reason for the transparency in the first place. It can also turn the header into an eyesore if the color contrasts too much with the rest of the design.

I’ve started to notice a new trend that fixes this issue. These adaptive headers take on the appearance of whatever background they pass over. While it might not be ideal for websites with lots of backgrounds containing busy images and videos, it works great on ones full of color.

Total Management Group is an events and travel management agency. All throughout the website, visitors will find that the background of the header changes any time it passes over a new section and color. The same thing happens when colorful overlays appear.

A GIF shows what happens to the header design on the Total Management Group website. When visitors hover over the Events, Travel, and Studio links in the hero section, a new background color appears and the header color changes along with it. The same thing happens to the header as the user scrolls downwards and a black background replaces the natural-color background.

Torii Studio is a digital studio dealing in design and development. Their website is another example of what an adaptive header can do. This one, however, doesn’t always take on the color (or gradient) of the section it appears over nor is it transparent. Many times, it transforms into a complementary color.

A GIF showing part of the homepage on the Torii Studio website. The header changes color every time it passes over a new section. It doesn’t always take on the some color though. For instance, when it passes over a greenish gradient, the header turns teal.

5. Multiplanar Scrolling

Typically when a user scrolls down a page, content keeps moving in the same direction from top to bottom. There may be some moments where the page seems to stop moving as animations play out, but it all stays within that y-axis.

Biplanar and multiplanar scrolling is going to change that. As users scroll down webpages, they may now start to encounter content that moves across the x-axis as well. It looks like what you’d see in an old-school Mario game—moving up and down, left and right.

Multiplanar scrolling is where the content moves backwards along the z-axis. It’s not as common. However, I could see it catching on in the coming years. Imagine content being pushed backward as new content slides into its place in the foreground. Or the reverse—content sliding offscreen while new content emerges from the back.

GSAP is a JavaScript animation library. The website for it demonstrates the vast variety of animations included within that library. This includes the silky-smooth horizontal scrolling that takes place about midway down the page.

The website for the GSAP JavaScript animation library is a creative showcase of the different types of animations available to designers and developers. One example we see play out is the silky-smooth storytelling scroll. As users scroll downwards on the page, the scroll moves horizontal and reveals a line of text that reads: Nice and Easy / Easing / Add personality to your animations with a huge variety of Super Plug-and-play eases, or build your own custom curves / Choreograph animation sequences in a snap

Genevoism is a consultancy that deals in out-of-home (OOH) media planning and buying. The homepage scroll is an adventurous one and fits well with their brand. While it’s not completely multiplanar, the zoom-out you see with some of the images simulates the feeling that content is being moved forward or backward in space.

A GIF shows the home page of the Genevoism website. We see how, even as users scroll down the page, content moves left, right, and even backwards to make room for new content.

6. Hand-Drawn Logo Elements

For a while there, it felt as though many logos were being overly digitized and given the flat, simplified treatment. We saw this a lot initially with big tech companies and then everyone else seemed to follow suit.

In 2024 and beyond, we’re going to see brands breaking away from the digital flat logo and embracing something that feels more raw and relatable. In some cases, the hand-drawn component will be a letter or shape within the logo. In other cases, the entire logo will appear hand-drawn.

Arrais Ballet is a ballet and pilates studio outside of Boston. The logo contains two hand-drawn elements: the “i” in Arrais and the “t” in Ballet. You might not recognize what those shapes are just by looking at the small logo on the site. However, you’ll find larger versions of them throughout the design and will quickly notice that they’re very rough sketches of a dancer in motion.

In the top-left corner of the Arrais Ballet website is the logo. Amidst the lettering are two shapes. One takes the place of the “I” and the other takes the place of the “T”. Both are meant to symbolize a ballerina in motion.

Y’all is a digital marketing agency that works in the DTC and SaaS spaces. The logo in the top-left corner of the site isn’t just hand-drawn, it’s animated and interactive. If someone wanted to return home from one of the internal pages, they’d see the logo come to life once again after hovering over it.

In the top-left corner of the Y’all website, we see the brand’s logo. When the site first loads, the logo looks as if it’s being written by hand. When someone hovers over it, the logo animates again, turning to the other side and has a line drawn around it to form a squiggly circle.

7. Teleprompter Typography

One of the issues we face when creating content for websites is to not write so much that people don’t want to read it all. It’s not that users don’t want to learn about what a website is selling—that’s why they’re there. It’s just that people have short attention spans and can easily feel overwhelmed when you give them too much at once.

In some cases, though, it’s not possible to write short, snappy snippets. Some designers have figured out a solution for this problem and I suspect we’re going to see a lot of this in 2024.

It doesn’t work exactly like a teleprompter, but the end result is similar. With a teleprompter, text is slowly fed to a screen while someone speaks. This allows them to speak to the audience as if the words were coming off the top of their heads. With teleprompter typography, the text goes from a not-so-readable light or semi-transparent to a very readable black and opaque as the user scrolls down the page.

Homage is a brand agency with a typography-based homepage. Save for a video at the bottom of the page, it’s all text. That’s why the teleprompter typography is so useful here. It allows users to focus on one section at a time before moving onto the next.

A GIF shows the typography-based homepage for Homage. Above the fold and just below the fold, the text is all in black. Below these sections, though, the text appears as a light grey color. Only when the user scrolls down the page does the subsequent header or section turn black and become readable.

Reitsema + Partners is an architecture and interior design firm. Although it’s important to show off their work through imagery, it’s just as valuable to provide context for their architectural work and mission. The teleprompter typography effect first allows visitors’ eyes to focus on the impressive imagery. It then draws them over to the surrounding text as bit by bit of it gets revealed.

A GIF shows the homepage of Reitsema + Partners. As users scroll down the page, they’ll find text that accompanies images of their architectural work. Initially, the text is light grey. As the user scrolls, each new section turns black.


These aren’t the only trends we’ll see in web design 2024. However, if you’re looking for new trends to shake up your designs, this is a good collection to start with. You have revolutionary trends like teleprompter typography which solves a common problem with the user experience. You also have evolutionary trends like sci-fi-inspired design, which will enable high-tech brands to give their websites a futuristic and wow-inducing gloss.

About the Author

Suzanne Scacca

A former project manager and web design agency manager, Suzanne Scacca now writes about the changing landscape of design, development and software.

Related Posts


Comments are disabled in preview mode.