3 essential design trends, June 2022

Posted on

Are you bored with some of your current design projects? This month’s collection of web design trends can help you get out of that rut with some fun and awesome alternatives.

And all of these options are anything but boring. From visual display to technical, these trends present a different set of challenges.

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

1. Layers upon layers

These website designs have so many layers of information that you hardly know where to look or where the design elements start and end.

This can be a complex technique to make work due to the number of elements competing for the same attention in the design.

What you’re likely to see with this design includes an image or video background with a bit of movement, but nothing that really demands attention. Then add a few still images in smaller frames throughout the design. Also overlay the text for a three depth effect.

If you interact with these designs, you will find that they are not flat either. They all include animated elements, hover states, and interactions that help navigate you through the layers of what can be a somewhat complex design.

Western National Parks Association uses a background image, intermediate images with animations, and several text layers (some on the images and some on the background). There is also a scrolling animation to help build the design. There’s a lot going on, but it doesn’t feel too busy.

WIP Architects is another design with layers that interact with each other and include movement. With lots of scrolling animations and layers that move in front and behind other elements, engagement helps this site work.

The shipwreck investigation uses the same basic layer outline with a bit more overlap between elements and less overall animation. The main animation effect on the home page is the scroll bar.

2. Directed Click Actions

This interesting trend in web design can be incredibly useful or a wasted element – directed click actions. These are buttons, icons, and animations that tell you to click somewhere in the design to take the next step in the interaction.

The direct approach ensures that users see and have the best chance of doing what the design is intended for. On the other hand, if you need so many instructions, is the design too complicated? Or is there a middle ground where this trend looks great and is usable?

In each of the examples below, these directed click actions are a little different.

Cie HUG has a large clickable circle in the lower third of the screen. It’s almost designed like a bull’s eye, and you can’t miss it. What’s interesting here is that most of the video falls under the scroll. The click action also has two emojis to indicate the action – a smiley face or a pointer when you’re ready to click. (The click expands the video to full screen.)

ThinkOvery also uses a similar circular click icon. It also takes you to the next screen in one motion so you can continue exploring the design.

Living with OCD has a different take on it with paired scroll and back to top icons in the lower right corner. The scrolling option includes words to help create direction and instructions. It consists of a small animation and an interactive hover state when you approach the interactive element. The interesting thing here is that it’s not actually a button and you’re using traditional scrolling to interact.

3. Hyphenation

If you’re a fan of readability, this design trend might make you cringe.

In each of these designs, the words are spread over multiple lines – some with and some without dashes. For the most part, there isn’t much confusion about what the words are, but it does make you pause and think during the page experience.

Why would this be a design trend?

It’s a combination of using big typography, long words, and finding a solution to create a common experience between big and small screens. Many of these words wouldn’t fit on mobile screens, for example, with the same weight, scale and impact as their desktop counterparts.

Hence, the word breaking solution. It creates a consistent user experience across all devices.

This technique should only be used if you think your audience is savvy enough to understand what you’re trying to communicate with the word break. This can be a tricky proposition!

Plantarium breaks to “crash” with a made-up word. But with the pictures and the supporting terms, you always know immediately what the design is about.

Michelle Beatty takes a common word and breaks it up. Because “photog” and “rapher” are the only letters on the screen, it’s pretty easy to understand. What’s interesting is that the word break is not on the syllable, but the letters stack nicely with that break visually.

Wreel Collective breaks a word with a hyphen in giant letters – something we rarely see in web design. Hyphens are not often used in this medium. For this reason, it grabs your attention and makes you think about words and design.


There are plenty of rule-breaking trends in this month’s collection. They are interesting, fun, and require a certain level of risk to perform.

Could you see yourself (or your clients) opting for a design that showcases one of these trends? Time will tell if these visual compositions gain traction or start to fade quickly.

Leave a Reply

Your email address will not be published.