Design & UX
Article

Making Minimalism Work in Mobile and Web

By Gabrielle Gosha

“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

Mockup wireframes

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.

Phone mockups

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)

Simplicity

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.

Mimimal Music Quiz song titles distilled

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

Tembo website: offers only 5 options.

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.

consciously limited menu options

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

Designers love typography, my friend

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.

Three iPhone screens on the Invy Event Scheduling App

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

One pager promoting the new single 'Glimmerman' from rising Zimbabwean hip-hop artist 'Asaph'.

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.

iPhone: Minimal weather app.

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?

  • http://uk.linkedin.com/in/karlbrownactor Karl Brown

    A really good article about minimalist design! Thanks, Gabrielle. I’m redesigning my own site at the moment, and this will definitely help me get the design right for the target audience.

    • http://bloggerever.com/ Mohammad Hamza

      Same thoughts from my side. Indeed a good article.

    • Gabrielle Gosha

      Thanks Karl! Nice to know you have found the article helpful. Good luck on your redesign!

  • Aggie Deberny

    Thank you for a great article and many useful tips. Minimal design is beautiful and can be tricky :p

    • Gabrielle Gosha

      No problem Aggie, thanks so much for taking the time to comment.

  • Joshua Rodgers

    It’s almost like someone was reading mind. I’ve become obsessed with the idea of minimalist web design over the past couple of months. I’ve even been simplifying my code and looking for more ways to modularize and do more with less programmatically; it’s amazingly refreshing. Awesome article.

    • Gabrielle Gosha

      Thanks Joshua! Glad to hear your thoughts but minimalism can really become obsessive, it’s almost like spring cleaning and getting a new start.

  • http://www.ncodetechnologies.com Amit Patel

    Thanks for the article. Minimal Design is growing and it will be the leading design pattern. It’s because people always like clean and and simple website which make it easy to navigate and use. Minimal design provide this with it’s simplicity. Hope this trend will stay for long time.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.