3 Essential Design Trends, June 2024

Today

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

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.

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.

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?)

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?

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.

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.

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.

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.

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.

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.