Minimalism in Web Design

Minimalism is the latest fashion on the web. In this article I look at what it is, some good examples of it, a bad example of it, and discuss how to go about creating your very own minimalist website.

Minimalism in Web Design

Back in 1998, when I first set out into the world of design, I did some work for a college in Nottingham. There I learnt how to make a good looking website, 1998 style. The main trick: Tiny fonts. I mean TINY. Barely legible! It was all the rage at the time.

But not now. Look around the web and you’ll see everything has changed. Now the trick is to be bold. Be big. And don’t bore your readers with too much text. So here’s a picture:

Screenshot of Baseline blog - minimalism in web design

Note how the text is huge and has plenty of line-height, almost like a kid who wants to make his essay look longer than it really is. This is great: It makes everything so much more readable, and allows for easy skimming. The design is broken up and punctuated by the use of the macro font on the left, and the information is contained in the sensible font on the right.

But if we’re using up so much more space, how do we fit everything in? Minimalism.

“Minimalism describes movements in various forms … where the work is set out to expose the essence, essentials or identity of a subject through eliminating all non-essential forms, features or concepts.”

Wikipedia

To my mind it’s not so much about taking away the things you don’t need: It’s more about having never put them in to begin with. I’ve been asked by companies in the past how best they could simplify their existing website. My answer: Start again! People don’t like that answer, but it’s my honest opinion. It’s easier to rebuild without the extraneous elements than to try and strip them from an established design.

Alien Bike Frame - Minimalism in web design

Alien Bikes gets got [website has gone now] this right: A simple background, a nice big bold product image, a simple navigation menu. Everything you need is there, and nothing more.

With all the clutter gone the user is left with no distractions. There are no boxes, no sections with massive fancy headings, just what you need: The products and the menu.

But it’s important not to forget that, with minimalism, all aspects of the site should reflect the minimalist attitude: There is little sense in a website that is minimalist with an over-embellished logo design.

Screenshot of Intuition Events website - minimalism in web design

Check out the Intuition Events website, their logo is brutally simple and in no way distracts the user from the all important task of getting the information they are seeking. The 4 main site sections are shown up-front, bigger than anything else on the page, even the logo. It makes a bold statement: Your ability to find information on our website is more important than our brand image.

From a usability perspective it also scores big points. People with motor impairment, such as that caused by Parkinson’s Disease, struggle with finickety little menus and links. This website lays it out so that anyone can navigate through the site.

But is it possible to go too far? To have a too minimalist website? I think once you reach the stage where a user could honestly describe your website as “abstract”, you have gone too far. What do I mean?

Abstract web design example - minimalism in web design

I have literally no idea what these guys do. They say software design, but clicking those icons just loads up more icons. And clicking those icons loads more icons still. It goes on and on and on like that. This is an example of mystery meat navigation and should definitely be avoided!

How To Create A Minimalist Website

Ultimately creating something is a very personal process, but I find a process like the one outlined below works well.

Put some calm music on and start by working out what you want to convey on your website. Make a big list of everything you want on there. Now whittle it down, on a new piece of paper, to just the most important things you want to show. You’re aiming for about 5-10 things here, something like:

  • Logo
  • Contact details
  • If it can’t be made obvious from other elements on the page, then something that tells people who you are/what you are/what you do
  • Your main offering (product or service)
  • Small navigation

Now, still on paper, start arranging them in a way that’s pleasing to the eye. If it looks cluttered, remove things or find ways of grouping related and/or similar items together. Consider hiding less important elements, and having them appear by clicking on something or hovering. But be careful not to go too far and end up with a site where the user doesn’t know how to go about using it.

Keep going like this until you can look at your design on paper and say you truly love it. Then, tape it to a wall (along with any other competing designs you also liked) and stand on the other side of the room. Does the design hang together well? Is it clear what the site is about? You need to be able to look at it from a distance and be happy.

And then I can turn it into a website?

No. Sleep on it. Not literally (unless you really want to, or are simply so exhausted that you just slump onto it). Give yourself a good night’s rest, then look at it again.

If you’re happy with it at this point, then by all means translate it to the screen. Once you’ve got it on the screen, repeat the process of looking at it from a distance and sleeping on it to make sure it still works well in digital form. Many ideas look great on paper but awful on screen.

Web design done properly takes time and effort, never forget this!

About Matt Lowe

Matt Lowe is a WordPress web designer / developer based in Newbury, Berkshire. After 8 years of doing the nine-to-five for other companies and watching them make the same mistakes over and over he set out in business on his own, forming Squelch Design to help businesses get online and make money.

Leave a Reply

Your email address will not be published. Required fields are marked *