Design

6 Rules Every Minimalist Web Designer Should Live By

Disclosure: Our content is reader-supported, which means we earn commissions from links on Crazy Egg. Commissions do not affect our editorial evaluations or opinions.

Mies van der Rohe is famous for the applying his motto “less is more” to design in architecture. Since his time, designers of all types have adopted and applied the same mentality to their work. Let’s look at how can we apply this “less is more” principle to web design.

It’s important to remember that adding more elements to your design doesn’t equate to adding more value. Elements omitted from your design are just as important as what is kept. Just as in any discipline, design shouldn’t be superfluous.

Statistics show you have about 5 seconds to grab a viewer’s attention.

If you’re site is so cluttered that the viewer can’t figure out what your offer is in 5 seconds, you’ve lost a potential client.

Creating a clean, simple, minimalist design will quickly show your visitor what your offer is and get your message across efficiently.

1. Focus on the content.

Effectively communicating your content should be the main focus of your design. A beautiful design that has no enticing copy writing, no call to action and no relevant content isn’t going to get many results.

Design should be used to help communicate the content effectively – the difference between a bulleted list and an interactive, pictorial display of information. Both options can be simple and clean, but the latter would be more focused on the content than the former – simple, but not oversimplified or under-designed.

http://timeline.verite.co/

Timeline JS is a great example of a minimalist timeline plugin that focuses on content.

2. Ensure usability.

When dealing with a website, function is nearly always more important than form. Much to “form over function” theorists’ chagrin, if your website isn’t usable, it’s pointless.

Your design should be intuitive for the user to navigate. Be creative with styles and design treatments, but be conscious of how the user will interact with the site.

On the web, links are an incredibly important functional element.  The viewer should be able to easily tell what elements are links and should always be able to navigate back to previous pages.

http://www.pentagram.com/work/#/all/all/newest/

Pentagram’s website has a lot of content, but they manage to pull off very simple and intuitive navigation.

Minimalist design is often stereotyped as tiny, illegible text in a black and white design template. This doesn’t have to be the case. Be sure the viewer can read all the text on your site on all platforms including mobile and tablet.

3. Refine, refine, refine.

You should work through multiple iterations of your design refining and taking away any unnecessary elements that don’t add to the design. Anything that is not adding value is subtracting value.

While designing, ask yourself whether or not you really need each element you’ve included or are thinking about adding.

https://www.google.com/chrome/index.html

Google chrome’s download page is very apple-esque in its simplicity. They’ve refined the design down to only the elements absolutely necessary and have come away with a successful, minimalist  page.

Even after your site launches, you can view user analytics data (such as Crazy Egg) to see which design elements are infrequently clicked and evaluate removing them or moving them to a new location.

4. Be sure everything is intentional.

Every element in your design needs to be cohesive and intentional. The same colors, typefaces, and other design elements should be applied to the entire site. When an element stands out, it should do so intentionally and still fit in with the overall look and feel.

http://www.xprimegroupe.com/

 X-Prime Groupe sticks with just a few splash colors to call attention to select design elements in their portfolio.

Use colors intentionally to denote importance and add hierarchy. Minimalist design doesn’t have to be black and white, but color palettes should be simplified. Using too many colors on a single page can be confusing.

5. Leave room for whitespace.

Just because there is room to add something, doesn’t mean you should! Ever hear a client say, “Let’s get rid of that empty space” or “There’s too much white space”? That’s why they’ve hired you to be the designer! Stick to your guns and communicate that every design element needs room to breath.

http://www.kohler.com/corporate/business/kitchen-and-bath.html

Kohler pairs a large image of a product with simple text and navigation rather than overwhelming the viewer with multiple product offers and heavy copy.

Adding too many design elements on a single page or in a single design will be ineffective. White space helps define content areas and ensures elements don’t become jumbled together. It also helps viewers navigate though the design.

6. Use a grid.

Designing around a grid is also important to aid the viewer in navigating through your site. Designing around an underlying grid – whether it ends up being very apparent or not in the live design – will ensure all design elements align properly and will also aid in establishing hierarchy.

http://www.stof-e-ring.com/

An underlying grid system is still at work even when the grid is broken with a sharp diagonal to add interest and draw the eye around the content.

For more tips and techniques about using a grid – and how to break it (without breaking your design) – see my blog post here.

As with most things, one size doesn’t fit all. If you or you’re client have a brand identity that’s anything but minimalistic, a minimalist website wouldn’t be fitting. Always evaluate your brand identity, target audience and product or service offering before deciding which design style will work best for you.

Know of any websites where less is more? Or perhaps more is not more? Please comment!


Make your website better. Instantly.

Over 300,000 websites use Crazy Egg to improve what's working, fix what isn't and test new ideas.

Free 30-day Trial