Are you bored with some of your current design projects? This month’s collection of website design trends can help you break out of that craze with fun and funky alternatives.
And all these options are nothing but boring. From visual display to technique, these trends create a diverse set of challenges.
Here’s a design habit this month.
1. Layers upon Layers
These website designs have so many layers of information that you never know where to look or where the design elements start and stop.
This can be a complex technique to work with due to the number of elements competing for the same attention in design.
Among the things you will probably see with this design is an image or video background with some motion but not anything that truly requires attention. Then add some still images in smaller frames throughout the design. Layer on the text as well for a three-depth effect.
If you interact with these designs, you will find that they are not fair either. They all include animated features, hover states, and interactions that help guide you through the layers of design that can be a little complicated.
The Western National Parks Association uses a background image, center images with animation, and multiple text layers (some on the pictures 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 incorporate motion. With lots of scrolling animations and layers that go in front of and behind other elements, engagement helps make this site work.
The Shipwreck Survey uses the same basic layer layout with slightly more overlap between elements and less full animation. The main animation effect on the home page is the scrollbar.
2. Click Guided Actions
This interesting website design trend can be extremely useful or a wasted element – targeted click actions. These are buttons, icons and animations that tell you to click somewhere in the design to move to the next stage of the interaction.
The direct approach ensures that users see and have the best chance at what the design is intended to do. On the other hand, if you need so much tutorial, is the design too complicated? Or is there a medium ground where this trend looks great and is usable?
In each of the examples below, these targeted click actions are slightly different.
HUG Co has a large circle to click in the bottom third of the screen. It’s designed almost like a bullseye, and you can’t miss it. The interesting thing here is that most of the video falls under the scrollbar. The click action also has two emojis to indicate action – a smiling face or a pointer when you’re ready to click. (The click extends the video to full screen.)
ThinkOvery also uses a similar circular click icon. It also takes you to the next screen in one movement so you can continue exploring the design.
Living with OCD takes a different approach with scrolls and back-to-top icons paired in the bottom right corner. The scrollbar option includes words that will help create direction and instruction. 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 really a button, and you use a traditional scrollbar to interact.
3. Word Break
If you are a sticker on readability, this design trend may make you cringe.
In each of these designs, words are broken across lines – some with some without links. For the most part, there’s not much confusion about what words are, but it makes you pause and think during the page experience.
Why would this be a design trend?
It’s a combination of great typography, using long words, and finding a solution to create a shared experience between big screens and small screens. Many of these words would not fit on mobile screens, for example, with the same weight, scale, and impact as their desktop counterparts.
So the word break solution. It creates a consistent user experience across devices.
This technique should only be used if you think your audience is intelligent enough to understand what you are trying to communicate with the word break. It can be a tricky proposition!
Plantarium breaks down by “plant” with a word made up. But with the images and supporting terms, you immediately know what the design is all about.
Michelle Beatty takes a common word and breaks it. Because “photo” and “raper” are the only letters on the screen, it’s pretty easy to figure out. Interestingly, the syllable is not word-breaking, but the letters stack nicely with this pause visually.
Wreel Collective breaks a word with a hyphen in capital letters – something we rarely see in website design. Hyphens are rarely used in this medium. Because of this, it grabs your attention and makes you think about the words and the design.
Conclusion
There are many rule breaking trends in this month’s collection. They are interesting, fun, and require a certain level of risk to execute.
Will you find yourself (or your clients) choosing a design that has one of these trends? Time will tell whether the demand for these visual compositions increases or if they begin to decline rapidly.
