3 Essential Design Trends, June 2024

Carrie Cousins.
May 27, 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

3 Essential Design Trends, June 2024.


With the first official summer month on the horizon, we’re featuring some hot website design trends this month. From visual effects to text trends to animated elements, there’s something new to try in your projects here. Have fun!

Here’s what’s trending in design this month:

1. Big Faces

A big face, eyes you can stare into, and endless expressions are some design elements creating big drama this month. (And we really like it.)

Whether faces are real or created doesn’t matter. The commonality is feeling like you are connecting with the “person” on the screen.

You can do this in plenty of different ways – photo or video, animated or realistic, still or moving – all with equal showstopping ability.

Fruitful takes on this trend with a nice set of video faces that seem to smile right at you. This approach creates connection and warmth.

Fruitful

Carlos Munnoz has created a cartoon version of what we would guess is his face. The wow factor here is that the face changes expression and even eye movement in the direction of your mouse.

Carlos Munnoz

Augen goes in a totally different direction with a still image that doesn’t look directly at the user. It’s a soft, almost calming image that toes the line between reality and artificial intelligence. (Is the person in the image real?)

Augen

2. Obscured Headlines

If a headline is hidden behind another visual element, is it even a headline at all? Of course it is!

Many website designers are toeing the careful line between funky obscured headlines on the homepage and readability. This can be a challenging design choice, especially when it comes to responsive breakpoints and maintaining readability.

The secret to working with obscured text elements is that there has to be enough visibility to make a solid guess as to what the words say or have almost irrelevant words for comprehending the message on the screen.

There’s a lot of variance regarding how much letters are obscured. Each of these examples tries something very different.

Style Port might be the least readable of the featured designs here. With both obscured and moving text, the user has to hang around with the homepage for a while to read everything on the screen. That begs the question: Is your attention span long enough?

Style Port

Bike Time goes in the opposite direction with obscured lettering, although color contrast doesn’t help readability any here. There are some additional hover effects with the lettering in this design if you want to explore it deeper.

Bike Time

A./Chen goes big with lettering and even bigger with the image that covers part of his name. Here, the obstruction doesn’t matter that much. With his name also in the top left corner, there’s no worry about missing out on words or lettering, and you are immediately ready to click through to different elements on the site.

A./Chen


3. Nifty UX Animations

The last in our trio of website design trends this month is a set of nifty user experience animations that just create a lot of interest. (Click through these examples to get the full effect of how each one works and encourages you to keep playing with it.)

Animation can be one of the most difficult user experience elements because every user can react differently to it. Too much animation can create a dizzying effect, while too little animation might be missed altogether. The sweet spot is in animations that seem purposeful and help the user in their journey with the design.

If you are planning an animated project, start with the goal in mind. Then, add the effect to make it work. Don’t forget that it’s okay to abandon an animation concept if it doesn't work.

Unveil is a portfolio site that showcases many projects on the home page. Animation is helpful here in that as you hover over a project, it pops out to let you know it is clickable. You have no question about what you have selected or what project will open next.

Unveil

RXK Studio uses animation in a similar way, although visually, it feels nothing like the previous example. The portfolio has both still and animated blocks; the still blocks animate on hover to denote a clickable element. They also move from black and white to color. Portfolio pieces move in an animated reel after the click.

RXK Studios

Studio Iro doesn’t lead with the animation; it happens with the click. (There is a quick-loading animation.) The motion on click is simple and elegant and fits the feel of the interior design studio beautifully. The speed is slower than you might expect, but it works well because you have time to really look at each image as it comes onto the screen.

Studio Iro

Conclusion

Every one of the trends this month is drastically different, and they aren’t things you’ll likely use together. One commonality is that each website design option features a big effect that will likely dominate the visual. Stick to one cool trick when playing with these trends to ensure that your projects don’t have an overpowering user experience.

Carrie Cousins

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousins.

Read Next

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Has AI Killed User Testing?

Web designers employ user testing to evaluate a website’s functionality and overall UX (user experience). Various…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…