Minimalist design. What is it? How To Do? A lot of questions about it. Here’s the thing about minimalist design in a complete guide: it’s beautiful when you do it well. When you do it wrong, it’s hideous for the same reasons. Getting it right is a balancing act of just a handful of design elements.
Like many art and design, it can take a keen eye to tell the difference between something that will just work and something that just does not.
And those things just don’t work you want to avoid in your web design. If you’re working toward minimalism and want your site to elicit an ooh from visitors instead of an eww, I’ve got you covered with a lot of what you should do (and a lot of what you shouldn’t).
Do: Use Color!
People tend to think that minimalist design is monochromatic, or even worse—black-and-white and/or greyscale. No, no, no. No.
Minimalist design is not, almost paradoxically, about having very little; it’s about maximizing very little. Your intent should be to make the most you can from what little you’ve got.
That means when it comes to colors, you should…use color. Look at this example from Epoch Design: The use of color here is minimal, but the designer has maximized its use to ensure you see it.
Don’ts of the Minimalist Design Guide: Use ALL the Color!
On the other side of those delightful designs, minimalists harbor a lot of dark impulses to use all the colors, only replacing the cleanness of their designs with pretty much every shade on the spectrum.
Okay, so maybe it’s not that bad, but the overuse of color with other minimalist aesthetics can be incredibly distracting and self-defeating.
Such as Rogue + Co. They try to use minimalism’s clean lines and asymmetrical card sizes to draw the user’s attention. But they added superfluous colors to everything and animated it for no reason. It marks the user away from the content rather than drawing them in.
And then there’s Bolden, who understands minimalism. Except for the color thing. Too many colors and trying to be too clever made them have to add superfluous animation. You have to mouse over the corners of the screen to see the text.
Do: Use Animation
You see, those animations above… don’t matter. They don’t add anything to the website. But cinema graphs like Rogue & Co use can work; they just need to enhance the site, not clutter it.
Mostly, micro interactions will work—a hover on a button or a highlighted emphasis on a card. Even loading, scrolling, or background animations that aren’t obtrusive can enhance the minimalist design you’re going for.
The biggest hurdle is making sure the animation fits your design. Don’t just add them where they don’t belong. See how the footer expanding on our Divi page draws your attention as you scroll but doesn’t detract from how you use the page.
Dos of The Minimalist Design Guide: Use Whitespace
Like pops of color, whitespace (or negative space) can be one of the most valuable weapons in your arsenal. For instance, the absurdly popular Medium is almost all whitespace and works.
And see how the only color is used to draw your attention to the necessary buttons and links.
There’s a balance to using whitespace effectively. You want to balance readability and utility with aesthetic appeal. Whitespace is unbelievably powerful in making your minimalist design memorable when used effectively. A cough Google cough cough
Don’t: Use only Whitespace
On the opposite end of the spectrum, overusing whitespace makes using your site nearly unusable to visitors. You see, Google’s use of whitespace highlights how they want you to use the site: type something in the box.
If, however, your use of whitespace doesn’t either direct the user to your site’s purpose or make them have a better experience on your site, you might need more graphic elements to handle them.
For instance, Thru You Too is a fantastic project. But it took me a long time to figure out how to use it (you have to hover on the big text in the center, which I didn’t do because I was drawn to the upper right corner). While the navigation is simple when you get it, the whitespace didn’t direct me there.
Dos of the Minimalist Design Guide: Use Appropriately Awesome Fonts
One thing that pretty much all minimalist design relies on is the effective use of fonts. Picking the right typeface for your site is how you show your personality and that of your product or company.
So you want a font that oozes your brand identity from the moment folks see it. Clean lines with sleek lettering. Rough edges and maybe some brush strokes. Elegant and classy. Make sure you pick a font to match whatever you’re going for.
Look at Squarespace for instance. You know exactly what to expect out of their company by simply looking at the signup form and the fonts used. Clean, simple, and straightforward. It exudes the sleekness they advertise, primarily through the font they chose. (Because that’s the only design element you can see here.)
And the folks at Folks are going for a folksy feel, so they found a font that feels fine. Their audience is apparent, as is their take on their products. And it isn’t explicitly stated.
Don’t use INAPPROPRIATELY Awesome Fonts
On the opposite end of that spectrum, choosing a font that is too bold can pack the wrong kind of wallop. Everyone wants their site to be unique and to stand out. But you don’t want it to stand out for the wrong reasons.
Imagine looking for a crisis line to help a family member in need and finding a site that looked like this:
What about a doctor who wanted to ensure you knew she was the best choice to save your life?
Or if you were looking for a fantastic, contemporary web designer and all you saw was this:
Okay, so I couldn’t resist a Comic Sans dig. Sue me. But you get my point: font choice matters, especially when you’re using a minimalist design, because your choice of typeface might be the most significant part of the design.
Go Forth and Minimize!
And minify, too, but that’s a different article. #iamadelight
Joking aside, remember that color, typefaces, and negative space are design fundamentals. You just have to practice discretion so that you use them correctly. As long as you do as I say, not what I don’t when it comes to minimalist design, you shouldn’t have anything to worry about.
What are your guidelines when you’re designing minimalist sites?
