Sometimes the designs that make the most impact do a lot of unexpected things and break some of the most tried and true rules of visual theory.
Sometimes these design elements work brilliantly, and other times they are fleeting or fall flat. This month all of the examples here seem to break some conventional design rules. Here’s what’s trending in design this month…
1. Alternative Homepage Image/Video Crops
This trend breaks some traditional standards and is pretty refreshing – alternative homepage crops for images and video.
The full screen or 16:9 aspect ratio is out the window with vertical and square options that prove you can do more with your photo collection.
What’s great about this trend is that it’s super attention-getting because of the interesting use of space and imagery. Almost any design without the full-width hero header will grab your attention because it is different. These examples prove that point, and each design does it differently.
Now here’s the challenge: You have to make sure that this style has a solid fallback for mobile so that the result is equally impressive.
Janmaat Fotografie does a great job accounting for interesting photo shapes and flips the script on mobile. (Rather than what you might expect with text then photos because of the desktop placement, the photo stack uses the same shape and layering and is above the text on mobile.) The result is phenomenal.
N3 uses a very vertical image in an almost split-screen style design. It’s a sharp contrast to many of the other split screens we are accustomed to with an equal divide. The distinct shape of the image is interesting and intriguing. It’s definitely not a shape we see in website design frequently.
Bounce uses a similar split-screen effect in the opposite manner as the example above, with the tall, vertical space as an “empty” area and the right side filled with a square video. The shapes help push and pull your eyes across the screen to look at all of the elements and take in the overall design. It’s one of those ideas that if you only talked about it, you might talk yourself out of it, but here, it’s pretty striking.
2. On-Screen “Stickers”
Stickers are a design trend that has made its way from social media to website design.
These website stickers break design rules because they cover content or seem to be put on the canvas haphazardly. And that’s why they are so attention-getting!
The benefit to these stickers is that they can highlight specific items or content or help focus a call to action.
Friesday uses stickers in conjunction with hover effects to keep users interacting with the design. Multiple stickers can even pop onto the screen in the same location. The animation is simple and fun and feels like a digital sticker book.
August Eighth uses a center sticker as a call to action. It’s a true focal point in the center of the screen with an almost three-dimensional effect that lifts it off the background video. It’s a borderline dark pattern since the only way to get the box off the screen is to click through to the shopping part of the website.
EasyGreen has a bright yellow sticker in the bottom corner that feels almost like the sticker on a piece of fruit. This style and placement work well for the content and product featured. It’s bringing the digital and real-world a little closer with this design element.
3. Breaking Design “Rules”
The third trend this month is kind of a catch-all for general rule-breaking. While the other trends show certain design elements that aren’t the norm, each of these examples really tosses everything you traditionally think about design out the window. (And that’s ok.)
The trick to a rule-breaking design is that it has to be focused and simple enough to keep users interested and provide intuitive elements that tell them how to interact with the design. It’s a delicate balance.
Here’s how these sites do just that.
Supercontinent has a lot going on. At least four typefaces on the screen at a time, movement (using different shapes and aspect ratios), overlapping elements, hidden navigation, and you may even find a few more broken rules if you look closely. And somehow, it still works.
What’s pulling this design together is a key unbroken rule – the chaos is rooted in a grid system that keeps it all somewhat organized. Plus, there’s plenty of white space to keep elements from feeling crowded and overwhelming.
Source of Plastic Waste combines elements in unexpected ways. There’s no real navigation; the site is just a continuous scroll. That’s a big website usability rule broken right out of the gate. There are other design elements as well, from the “header”/logo moving to the top right corner to the almost over-designed transparent box for text elements. There are a lot of scroll elements and actions happening and layers of text on text in some of the screens.
But here’s the thing about this design. As many rules as it breaks, the story is interesting enough to keep you scrolling. The question is, how long and how far do you go without getting lost or confused.
The Debris of Attention is designed to show “bad design” with elements that are frustrating and annoying on websites. The gamified design allows you to hover on each element to remove it and clean up the design.
While this site breaks the rules on purpose, it is still an experiment in how long a user will hang on with so many visual effects happening at once.
Conclusion
While most of the time, people think about “breaking the rules” as a bad thing, that’s not always true in the design space. Sometimes breaking the rules can result in an unexpected delight.
The challenge is to make sure that when you break the rules, the design is still usable, functional, and understandable. If so, you’ve found a winning combination.
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}
The post 3 Essential Design Trends, August 2021 first appeared on Webdesigner Depot.
