Stop designing the same old shit
A guide to making your design stand out. Last article for 2021 🎄
Today's topic is very personal to me, so I wrote just over 2,000 words to express all of my thoughts. Hope you enjoy it! We'll be in touch next year!
A few years ago, Boris Müller wrote the article "Why Do All Websites Look the Same?" which gained a lot of attention in the design community. He states that today's internet is bland, and all interfaces have started to look the same.
Everything looks the same: generic fonts, no layouts to speak of, interchangeable pages, and an absence of expressive visual language. Even micro-typography is a mess.
And he was right. Many others also have noticed the same patterns.
It's the end of 2021, and the interface design isn't getting any better (mostly). The maturity of UX design, usage of templates, UI kits, and frameworks seems to be killing the unique expressions of websites and apps. The affordance squeezed experimentation and innovation in favor of what's expected.
Don't get me wrong. It isn't necessarily all bad. The design has been generic because those patterns have been proven to work. And when design achieves its purpose – it's a good design.
But I believe that effective design shouldn't exclude unique expressions and vice versa. Innovation doesn't have to fight for its place on a table with affordance. There have to be ways to stand out from the crowd without sacrificing design quality.
How did we arrive at this point of interface mediocrity? And how do we get out of it? Let's get started.
Why do we make the same design?
Let's start our journey and look at how the design looked like 10-15 years ago. The internet was the World Wild Web – no laws, all experiments. We made sites using Flash (oh my) with weird navigations and sounds and animations. We did it because we could. All these new technologies were exciting, and we were hungry for experimentation.
Later on, everyone got more serious. Businesses started to understand the benefits and the opportunity of reaching their customers using the internet. Having a website went from an impressive extra to a core necessity for many businesses. And looking cool didn't align with the business priorities of converting more customers.
The design has transformed from unique and valuable to practical and easy to scale.
The era of themes and templates
The explosion of CMSs like WordPress created many websites using mass-market fit-in-any-use-case themes and templates. These templates aimed to work for various uses and were content-agnostic. It was their enormous strength but even more significant weakness.
A core aspect of successful UX design is the close relationship between content and form. When you divide the two, you attempt to fit everyone into a single framework instead of allowing business goals to dictate a unique set of design requirements.
Rather than form following function, function follows form. That's not design, and it's resulted in millions of websites that look the same and aren't suited for the purpose.
Reusability and scalability
As people began to build larger applications online with increased complexity, the necessity for scale systems arrived. Building unique websites and apps takes far too long, so generic but applicable frameworks like Bootstrap became very popular. They enabled individuals with less technical experience to make things fast and at scale.
At the same time, companies like Apple and Google started to set trends by providing design systems with extensive documentation and guidelines so that anyone can jump in and start using them. It made things easier, but it also made them look the same.
Trend bubbles
I loved Dribbble and Behance when I just joined the platforms. It was great to see the work of others to inspire oneself to do a better job or reuse some patterns in the design.
But if you go on Dribbble or Behance today, you'll find that their homepages are filled with the same trends. Glowing buttons, playful illustrations, neomorphism 🤢.
Before everyone fell into the trap of sameness, we used to tell the difference between the Swiss and Japanese designs. You could mean the difference between tech companies, fashion brands, or small family businesses.
Stock imagery
Aren't you tired of seeing the same Unsplash photos everywhere you go? (I'm guilty! I've been using some of those images across this blog, too.) If the picture speaks a thousand words, then we're all saying the same thing. I get that professional photography or custom illustrations are expensive. And stock photos are cheap (or even free), easy to find, and high quality. And they're killing the uniqueness of every project we're using them for.
Data-driven UX
A part of the process of UX maturation was the deeper integration of data-driven decisions into the design. Today, we're doing less guesswork than ever and can leverage user insights, analytics, and testing to decide which design options perform better.
Does this look familiar: A landing page with a full-screen hero image overlaid with a heavy header, minor description, and a single call-to-action? We all know at least a few landing pages that look like this. And there's a reason for it – the formula outlined in these landing pages has been proved to work. So why should you re-invent the wheel when you have something that already works?
We're placing our logos on the top left, navigation sticks horizontally to the top, and prominent call-to-action in the corner. Users have learned to recognize these patterns over the years, and we're a part of the problem because we taught them to use those.
These patterns developed by people allow us designers to use something without overthinking it. Deviating from those accepted patterns can be a risk because performance dominates creativity.
Responsive design
Before smartphones and tablets were real, web design was similar to print design. The designer could pick a canvas of a favorite size and design a single experience that all the users will see in the same way.
But when the responsive design came into the game, the interface had to become a fluid system that adapts to the screen size. And eventually, all the design elements at some point, had to be re-built into the single-column layout. But complex interfaces are hard to design for mobile, so we took the lazy path and started using the same patterns across all projects. And we reused them again and again without even thinking about how to make them different or better.
Adopting the mobile-first approach allowed designers to create responsive interfaces that proved to work faster and cheaper. But this also made our jobs as designers more boring.
Is design sameness a problem?
My opinion on this is very straightforward. Because every company and user is different, they have other goals and needs. That means no one-size-fits-all approach can cover the differences in what we want to achieve on the internet.
When everything looks the same – nothing stands out. Nothing is unique. Do you want your company to blend into the crowd of the same-looking websites or apps? Or are you willing to take a risk and rise above the average and break new ground for new trends?
Today's technology allows us designers to do more exciting and experimental stuff than we could imagine just a few years ago. But instead, we choose the A.I. generated, professionally-looking but generically designed interfaces.
How to overcome design sameness?
It's much easier to reuse the same processes and duplicate solutions that work rather than discover if there's something better. Here are a few ideas to try to keep your design thinking fresh.
Get rid of design inspiration
We, as designers, need a much broader perspective of the design world than what's hot on Dribbble.
After I read the article "The day you became a better designer" by Tobias van Schneider, I realized that the best projects I've designed were projects for which I didn't use any design inspiration.
Our view narrows as we limit our field. By restricting our friend circle to others who think just like us, we fail to challenge ideas or beliefs contradictory to our own. While it makes us feel comfortable and protected, it can also be an inspirational trap.
And then, I realized that the biggest inspiration comes when we're looking outside the design field. Look at games, books, buildings, nature, history, technology, handmade products, etc. A broader inspiration creates a greater variety and helps you create timeless design.
Don't do what your customers ask you to
We all know this old saying:
"If I had asked people what they wanted, they would have said a faster horse."
This is an excellent explanation of why Henry Ford didn't build horses — he knew of a better combustion-powered future.
Your clients might want to make more horses and make them faster and better looking. But is it what their business really needs? Be the one to open the room for innovation in their eyes, rather than blindly copying existing solutions.
Follow trends to be able to break them
I don't mean you should abandon Dribble entirely by saying to take inspiration from a wider variety of resources. You need to stay on top of the trends to study why people get engrossed in specific design solutions so you know how to stand out when it's time to be different.
Being aware of these trends can help designers move in a different direction and try new things. Awareness of trends can help us to respond to a brief in the most appropriate way – step in line or swerve. — Hilary Archer
Think before using stock
I completely agree that not every project will have the budget to have a professional photographer create assets. But you might be surprised at how effective a few custom images can be to make the design stand out.
You can art-direct a small photoshoot or work closely with an illustrator. If your brand language allows it, you can even use memes. (I've been testing those out with a few past articles on this newsletter and people seem to be liking them.)
Main point: avoid stock (when you can) and take a ticket to unique expression.
Experiment with tools
I'm a tool nerd, encouraging you to try new things for each new project: WebGL, variable fonts, kinetic typography, and CSS animations. There's almost nothing we can't do on the web nowadays.
Don't be afraid to design something you're unsure how to build and push devs to catch up. Remember, if we all played it safe, we'd be creating the same stuff we did ten years ago. Your work becomes outdated the second it goes live.
Always question your assumptions
You can keep using a 12-column grid that works well, but explore when and where you can break it to create a variety in the grid instead of using the same line every time. Before you choose the cool wide font that looks like Dropbox or Figma are using, consider whether it suits the needs of a project.
Take time to experiment and break the rules and constraints. You might discover an unexpectedly fresh take on an old problem.
Practice device-friendly design
I don't always use a mobile-first approach for my projects, and that's fine. Instead of "How can I for this same content on a smaller device?" focus on "How this experience needs to change so it will be suitable for a great experience on a device of this size?"
Go an extra mile
If you want to break the chains from design monotony, you may need to put in extra effort and resources. A few more hours of testing or a phone call to persuade your clients. Take that risk. Make an extra effort to create something remarkable as often as possible, even if it is not the easiest path. You'll never be sorry.
There's no shame in making something that operates effectively but isn't original. However, laziness can be the quiet murderer of a designer's career. When the opportunity arises, we must continue to strive for newer and better.
Let's leave all monotony this year and make the next one when we break free from design sameness.
That’s it for today and this year.
Have a great holiday season, and I’ll see you on January 3rd!
Alex