An example of minimal web design

A lot of my recent articles have talked about simplifying your website and reducing unessarry elements in order to deliver a clearer message. Well this post talks about the key to this issue: minimalism. In an age where the client often pushes more and more content upon you, it can often seem a herculean task to produce a minimal design. But even in this situation we can apply principles of minimalism to improve the design.

History.
Minimalsim came about as a revolt against abstract expressionism and can be summised by anything wich is stripped down to its essentials. In art painters from the Bahaus stripped pieces down to there very orgins applying the analogy that if you stripped a human of all it’s material things (clothes, bling etc) then it’s true beauty will be revealed in its purest form.

There are certain techniques which you can use to employ a minamilist approach to your site. For instance with images you could use a sillouette or an outline of the shape…or how about using a single shape rather than a cluster of shapes.

Benefits of minimalism
The are certain techniques you can use to simplify your web page. Look at it like this shops entrances use large spacious stands to promote special offers which are intended to entice the shopper in and funnel them into busier areas of the shop.

A key trait of minimalism is whitespace; which I’ve already talked about in depth in a previous article: design psychology.

Your colour palette can also be kept minimal. Also don’t confuse minimal design with plain and faceless design. Complex elements can be featured if used subtley. For instance a tiled background, subtle shadows etc.

Stripping your design down to its origins
There was once a designer who knew Photoshop inside out and therefore he had a myriad of techniques at his disposal. However this designer couldn’t understand why having applied more and more of his techniques the design showed no signs of improvement…in fact it became worse. The moral of the story is the key to good design is knowing when to apply these techniques , to understand the subtleties and nuances of design, hierarchy and the like. Know why you using a technique and question whether it is there for a reason.

Minimal design is calming…reducing noise and distractions…creating calm. The less you say the more people will listen (as long as you speak sense!) and minimal design assumes the form of the dalai lama: speaking a few words of enlightenment, wisdom and sense.

The polar opposite of this is bad design.They say people talk too much in order to mask there insecurities…well bad design has many faults and insecurities…and it speaks with more frequency and volume than anyone else in the room.

Business Card Style Websites
Clear out the junk and clutter from your design – in fact agencies such as Headscape have streamlined their content to fit on just one page. Simplifying your approach to a site has also become a trend as seen in business card style sites which simply contain essential information. These style of sites reduce the site down to its fundamental elements. It is so tempting to pile every piece of information into your site but these sort of sites  push minimalism to the extreme in terms of website design.

Minimal Business Card style sites could help differeciate yourselves from the crowd.

Concerntrate on having just on having just one clear message.

The Human Brain
The human brain can only process six or seven pieces of information simualtaneously and the less information you give the more likely it is able to be processed.  It’s kind of when you first learnt to drive a car, at the start it is information overload which is why the process is slow, but once you have learnt how to change gear, which mirrors you need to check before pulling out etc, these actions become instinctive and therefore no longer need your brain to operate (you are on autopilot effectively!).

My Site is already overdesigned…but it’s not too late:
As I’ve said before “Realign instead of redesign”. In some instances when redesigning the best solution often lies in removing content from the page in order to simplify the message.

In order to simplify your site, there are three techniques which you can use:

• Delete
• Hide
• Shrink

Delete
Think about what elements are not essential within your webdesign. Each element should serve a purpose; if it doesn’t then get rid; delete it!

Hide
Okay so the client has argued that all 100 paragraphs of text are essential; simply they must be included in the site. In this instance it is okay to compromise. Not all content has to be visible instantaneously. Using javasript libraries such as Jquery there are a variety of show / hide techniques we can use. Here are a few ways for you to try:

Rotating Banner images
Often you can use a selection of stunning visual banners to draw users in to the best relevant pages on your site.Think about keeping this up to date with seasonal special offer sales if you are a shop or latest articles if you write a blog.

Scrolling images are a great device to draw attention to key content

Rotating Text
This is often a good technique to use for elements such as testimonials. Instead of dedicating a whole page to your testimonials try using them as a supporting element.

Tabbed content:
This is possibly the best technique for fitting mass content onto a page. By categorising this content we can set up a plethora of tabs whereby only one piece of content is even seen at one time.

How tabs should be used

Drop Downs:
Usually used for drop down menus, drop downs can also be used on inner content.

Pull Out:
By placing intriguing tabs on the edge of our pages, more content can be revealed. You could even use tabs with a chord on which say ‘pull me!’

Pull Downs are an intriguing way to show / hide content.

Hover Over:
Hover over’s can be used to reveal more information. For instance when a user hovers over a titlew more info about that title is revealed. Tool tips also work in a similar way to this and are another useful technique which you can use.

This site uses hover overs to dramatic effect

Shrink
Make elements smaller, be careful how you adopt this approach though. You probably only need to make less important elements smaller in order to create a page hierarchy. As always hierarchy is essential to a good design.

Minimal Design for maximum benefits.
The case for minimal design is very much the opposite of minimal. If you’d like to speak to me about how you can use minimalist techniques to improve your site please just drop an email to chris@ihm.co.uk and I’d be more than happy to advise you on ways you can use minimalism….and you will only have to listen to one clear voice I promise you!

 |    |