Why to Break the Design Grid in 2021, and How to Not Screw it Up
A rising trend in UI design is madcap visuals that break the grid.
Seirim suggests “smooth, fluid lines and using organic inspirations.” UXStudio advocates “moving elements and unexpected animations.”
Even Instagram design trends are offbeat, layering gritty texture with gradients and curving text wildly.
This is smart, but also requires careful handling. Here’s why.
Psychologically, handling unexpected visuals makes us proud of ourselves right now.
We’ve been through chaos the past year (pandemic, riots, recession, and all the personal repercussions, you know the list). We’ve learned to very much value resilience.
Designing interfaces is all about pleasing users. Give them what they need, where they need it. Yes, the content is chosen to meet business goals, but it’s carefully presented in ways to make users feel good.
Handling the surprise of exuberant design makes users feel good about themselves.
But there’s two important sides to this coin.
On One Side: Get a Little Fun and Exciting (Cosmetically)
We’ve all been on sites and apps for endless hours - our work (for many), shopping, and social life are all digital now. We’ve seen the same old formats over and over, and we’re BORED.
We can’t party in person, so bringing a little celebration to your interface is just delightful.
Here are a few examples going around:
Story of the Week From Zhenya Rynzhuk
The Mad Optimist’s Grid-Defying Illustrations
I even added tippy flourishes that ignored my bootstrap columns to a retail site I mocked up:
But the key: keep it surface-level.
On the Other: Keep the Important Stuff EXACTLY the Same
Jumbly design, no matter how pleased it makes us feel with ourselves, is a bit stressful. Each deviation from the norm is surprising, so slightly disorienting, slightly anxiety-raising.
After 2020, no one ACTUALLY wants more anxiety. So keep it decorative ONLY.
Absolutely key:
1. Don’t Whack Out Your Icons and CTAs
Keep interactions VERY easily recognizable.
Users will react well to something familiar because it is like a security blanket.
Profiles/accounts look like little headshots, and go in the top right on a web page, the bottom nav on mobile, and in a hamburger menu if absolutely necessary. Now is not the time to shake that up. Remember the Principle of Least Astonishment.
2. As Always, Keep Navigation as Intuitive as Possible
Housekeeping (privacy policy, careers link) on the bottom or tucked away. Main site sections as tabs across the top, bottom nav on mobile, or in a hamburger menu. Key calls to action in big, bold buttons (floating, if appropriate).
Don’t make anyone hunt for anything. Slightly zany design is meant to amuse, not disorient.
3. Don’t Kill with Your Colors
Yes, bold is in. The brightest pastels I’ve ever seen are sliding around in gradients. Glassmorphism even keeps color under white areas.
But please, don’t throw basic color theory to the wind. Jarring and aggressive combos are not only hurt the eyes, they can be bad for accessibility and drive people away.
Brutalism might say this is great, but please, just don’t (lovely sentiment, though):
Instead, do like Prakhar Neel Sharma:
Questions, Comments, Snide Remarks?
I had a history teacher who used to ask that every class. He really was open to all three. I’d love to discuss this topic further, so please feel free to leave your thoughts!
