True Minimalism in Web Design

True Minimalism in Web Design

In this article I want to share a few basic tips to achieve minimalism in web design. I will use a website I designed recently as an example, and then provide some other inspirational designs. It may seem really simple to design minimalist websites, and it really is. But it’s not intuitive as there is a general tendency to over-embellish designs, and sometimes this is detrimental to the content. I believe simple sites tend to be more effective because you are not underestimating your users or clients, you are not trying to convince them or sell them something with shiny lights.

I could add several fortune cookie phrases now, like ‘sometimes less is more‘, but I prefer not to.

True Minimalism in Web Design

True Minimalism in Web Design

Conceptual Basis

Wikipedia describes the goal of Minimalism as follows:

“the work is set out to expose the essence, essentials or identity of a subject through eliminating all non-essential forms, features or concepts.

This is the most important rule of thumb: Every element in your website should be there for a practical and obvious reason. You must avoid graphical elements unless there is a good reason for them to exist. A reason other than “It looks nice”.

Borders, textures, patterns & gradients should be avoided. You will find that these are not really that important to order the content visually. Go through every element and detail on your design and consider if it’s absolutely indispensable. This is an interesting exercise even if you are not aiming for absolute simplicity.

Information Hierarchy, Geometrical Shapes & Balance

Once you have defined the elements that you want to feature you should think how relevant each one is and then position them. It is good practice to use simple geometrical shapes as placeholders for this. The site I will use as an example is YouTHinKNow.

YouTHinKNow

So, in this case the original geometrical mock up looked like this:

Geometrical

I find it useful to color the placeholder shapes according to the “weight” I want them to have on the page. It is very important to balance all the elements carefully. The fewer elements, the more important it becomes to balance them perfectly. Once the geometrical mock up is ready, it’s time to replace it with the actual content.

Balance

Synthesis

All the graphical elements – Logo, icons, etc.- should be as synthetic as possible, a combination of the concepts and functions they represent. The YouTHiNKnow Logo is a good example. The site features random thoughts that can be added by users. The main concepts of the site are: “thinking” and “thoughts transmission”. Graphically, “thinking” is associated with the human brain, and “thoughts transmission” with dialogue balloons. So you can see in the next example how the logo is a synthesis of those shapes:

Synthesis

Use of colors

Another important tool to order the content is the smart use of colors. A good strategy is using a combination of gray scale and a bright and saturated palette. I recommend to use the gray scale for text, and apply subtle variations – Approx. from RGB (180) to RGB (0) – according to the importance of each piece of text. As for the bright colors, use them for the functional elements such as navigation, buttons, etc.

Nathan Borror’s personal site is a great example of this technique.

Nathan Borror

Fonts

The selection of the font/s you will use is also very important. Nowadays, it is very easy to use custom fonts with the Google fonts API. So be sure to choose fonts that make sense with your content. There are many good examples online that you can consult. Like this one:

Google Fonts

Using standard ‘web-safe’ fonts like Arial or Verdana is always a valid choice, but you should consider thoroughly if it’s the right way to go. CSS properties like letter-spacing, text-align and font-variant are your best friends.

No Rules

You can use over sized or extra small font sizes, you can use 20 colors or just one. The main container element must not necessarily be centered. Forget the usual Web Design rules, only keep to absolute simplicity and do whatever you think is best to express the essence of the site you are designing.

The following is a great example of unorthodox design achieving a positive effect.

Design Influence

Technologies

Be minimalist in your coding as well. HTML5, CSS3, JS and AJAX is the best combo for simple coding. Try to avoid loading the whole page again for different sections, use AJAX and JS to hide and show content.

Here you have a useful graphic guide with the basics on how to write clean HTML.

Clean HTML

More examples

We Were Sofa
We Were Sofa

Modularlab
Modularlab

Shaun Inman
Shaun Inman

Best Awards
Best Awards

Creative Journal
Creative Journal

Postmachina
Postmachina

Peter Rozek
Peter Rozek

Strange Beautiful
Strange Beautiful

Voce antica
Voce antica

Smile
Smile

Studio Antwork
Studio Antwork

A Way Back
A Way Back

Minimal Sites
Minimal websites archive (lots of examples here).

Minimal Sites

Google
A new site I found!

Google

Conclusion

I have covered only a few basic tips of minimalism in web design. Minimalism is a great option for some projects. It’s not suitable for sites with poor content. Like it or not, there are some websites that need smoke and mirrors. There are some websites that have a complex essence so minimalism is not an option either.

It is a great option when something clear has to be expressed in the most direct way possible. Which are your favorite minimalist sites? Please share them!

Which kind of sites do you think are ideal for minimalism? What do you think of the balance between functionality and aesthetics in design? I would love to hear your thoughts.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.