“Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius – and a lot of courage – to move in the opposite direction.”
This quote is attributed to a gentleman by the name of Ernst Schumacher, an influential thinker, economist and author of ‘Small Is Beautiful: a study of economics as if people mattered’. The Times listed it among the 100 most influential books published since World War II.
Ernst was mostly talking about financial systems but the quote should resonate with a lot of designers and UX people. Often the simplest designs – created with the fewest elements – can provide the largest bang for your buck. Of course, we are talking about minimalism.
As the time-honored maxim goes, “less is more” and no matter whether you’re designing for tiny mobile apps or gigantic retina screens there are some effective tips and tricks, dos and don’ts that will help you get the most out of the design bits you’re using.
Wireframe Usage
There are really no hard and fast rules with minimalism aside from downsizing your content but one of the most effective steps you can take to achieve the minimal effect in your work actually happens before you start throwing down all of your elements. This is the step of using a wireframe.
It is a lot easier to start with a blueprint than going in swinging when it comes to scaling back and down. The great thing about this process is it can be done anytime, anywhere and on anything, unless of course you’re trying to write on someone’s walls then I amend my previous statement.
While you may already know the power of prototyping you must understand that with minimalism your sketch requires more attention to detail. Because you are going for a specific style it is important to understand the function of each and every element you place down. One thing that should be at the top of your consideration list while in this phase is your layout. Unique, non-traditional setups have chances of rendering a stunning design when you start subtracting your elements.
DO for Web
Go for modular, column and hierarchical layouts as this will yield you a better flow to your final look. Remember that manuscript grids or box looks in minimal design, while still effective in its own right, can have your design looking flat and boring.
DO for Mobile
Use an online wireframe tool for better planning. This will allow you to avoid layout issues if you go ahead and plan for each specific mobile device instead of working from paper to digital only to find out your minimal look isn’t exactly minimal.
DON’T for Web and Mobile
Never go into the wireframing stage without a list of the content that you need to have in the final design and don’t forget to experiment with more than one layout.
Refine & Simplify (or simplify until it breaks)
They say “You break it, you buy it” but if your site is on the brink of breaking then it’s likely you’ve just nailed the best minimalistic look your design could yield. That, or you are seriously into a punk rock ethos and just like breaking stuff.
When you are designing you need to make sure that everything has a purpose. If you can’t find a reason why a certain item is there then you need to get rid of it. With minimalism designing it really is okay to start big and scale down. In fact it is a lot easier than starting with absolutely nothing.
Think of the removal stage as some good old fashion spring cleaning. Look at everything as a whole and then start throwing those fifteen plus pillows out the window, you really don’t need all of them and your design is going to reflect that. Essentially the key here is to dial back as much as you can. If you’re not sure if you have “broken” your design you simply need to run some functionality tests and see if your design’s meaning is still in tact.
DOs for Web
Create purpose within your design. Remember that a minimal website design isn’t about dumbing down your site’s content. It is about reducing unnecessary content so visitors can get to the good parts without missing anything.
DOs for Mobile
Due to the nature of mobile devices, smaller screens, you want to make sure that the spacing between your elements doesn’t look like you’ve just deleted something and forgot to place something there. You’re simplifying to create a clear eye path, not to show gaps.
DON’Ts for Web and Mobile
Never remove so much that your design doesn’t have a focal point anymore. When you are simplifying there should always be a “look at me” element. This will allow you to design AROUND the focal point instead of designing FOR it.
Option Limitations
In this day and age we are accustomed to having a plethora of options at our fingertips so it may be a little weird when I tell you to put a cap on what can or cannot be done. But to do so in minimalism design is just as smart as using a wireframe to plan everything out in the beginning.
With reduced limitations you not only keep your site’s visitors from being overwhelmed with options and more than likely a busy layout but you subsequently keep them focused which consequently increases conversion rates. You see there is a science behind minimal design when you get passed the silly notion still floating around that minimalism is for “lazy designers”.
Note that when I refer to option limitation I’m mainly referring to your navigation menu and other similar buttons that are often found on the landing pages.
DOs for Web
Try to keep navigation options around the 3-4 mark. This will keep viewers on track and allow you a nicer layout in the long run.
DOs for Mobile
Reducing options in mobile doesn’t actually mean hiding it under the “hamburger icon” so when reducing in mobile do go for another method that doesn’t just hide your options. Remember “what’s out of sight is out of mind”.
DON’Ts for Web and Mobile
While reducing options may be necessary never reduce options that effect your user functionality. Make sure that in reduction you keep everything clear. Don’t make your users guess.
Smart Design Elements
When working with a minimalistic based design your design elements can be your enemy but they can also be your friend if you utilize them the way they are meant to be used. The big one is white space because without white space it is really hard to get that minimal look. This is where your wireframe plays a crucial role. Giving your content breathing room also creates a legible path of where the eye should go next.
Embracing flat design no matter how played out it may seem nowadays is a good idea. Flat design itself is a minimalistic entity. It throws out the extra to yield a really simple and if designed nicely, cool design. Big typography along with flat designed graphics can really bring life to your bare bones look. Keeping your type a pretty good size and on top of that legible has been shown to make some pretty eye catching designs.
Contrast, balance and alignment also play a big role in smart design for minimal looks. Just like with white space you can create something effective by giving a couple of more minutes to your wireframe to tweak the balance and alignment of items.
DOs for Web
Use multiple sizes of large type when working with sites with minimal content. This will help balance any other graphics that may be in place.
DOs for Mobile
Use big typography to bring attention to imporant aspects but don’t go overboard as mobile devices utilize smaller screens so large typography might not always look good.
DONTs for Web and Mobile
Forgetting about the balance of your design can end up making your site look incomplete. Paying attention will help your site design maintain a visible and clear visual hierarchy.
Patterns and Colors
While you should reduce the number of options your site provides in minimal based designs you also should consider limiting the amount of color you use. This isn’t to say that you should stick to a neutral color palette but staying in a three color limit can help accentuate parts of your design that would otherwise be “just there”.
Using patterns in your design can help offset minimal color palettes. Adding emphasis to the background with some type of repeating design cannot only make up for color but patterns and textures can help break up content.
By adding in small pools of colors and patterns you can highlight the imporant parts of your content. It is also just a lot more visually appealing then going the white background and color filled typography route.
DOs for Web
Use seamless patterns when implementing them in web design as non seamless patterns can be distracting due to breaks in design that can be easily seen on larger screens.
DOs for Mobile
Mute color palettes tend to be really effective in mobile device designs so think about cooling down your color choices when conceptualizing.
DON’Ts for Web and Mobile
It is easy to go overboard with color, patterns and textures especially when you think your design is lacking but don’t do it. Keep these elements subtle as you aren’t trying to distract your users.
Conclusion
Minimalism seems to be a trend that is going to be staying a little while longer. Luckily following some simple tips and tricks as shown above can make minimalism seem like a good friend instead of unwanted neighbor.
Are you a fan of minimal design in web and mobile? If so, are there some other tricks that designers should know of?
Gabrielle GoshaGabrielle is a creative type who specializes in graphic design, animation and photography.
