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.

Pedro is a 27 year old mammal from Buenos Aires, Argentina. He is a Web Designer because that’s what he has been doing for the past 13 years. He loves design but, to be honest, in his ideal world he would define himself as a Musician. He thinks the Internet will change the course of humanity in a very positive way and he would like to contribute to this change as much as he can.

Comments

  1. / Reply

    I’m so huge fan of minimalism especially on web, where every minimalistic site likes a breath of fresh air.
    Thank you for your article

  2. / Reply

    Nice article! Well explained. Keep posting.

    • Asad,
    • July 11, 2012
    / Reply

    Thanks for Nice article

    • Marc,
    • July 12, 2012
    / Reply

    Well defined article

    • Saya,
    • July 12, 2012
    / Reply

    Design IS a communication tool and that means it should be functional and create a relationship so there is no need to be either functional or beautiful. if there is on one side then your design failed.
    I really like the simple geometrical shape for the starting point. But have to make sure when adding colors, type or content we keep the main shape in mind

  3. / Reply

    I appreciate that this article is about minimalism, but takes time to add that minimalism isn’t for every site. I would like to start a movement of intentionalism – where every element of the site is placed with thought and purpose. A site need not be sparse to be effective and need to be crammed full of information to be helpful. As the sample sites show, some minimalist sites have little content on the home page and the design is intended to draw you in to the site. In other cases, where users will most certainly be looking for information, it is important to place a summary of the site’s contents on the home page. Having said that, I would like to see intentionalism overtake minimalism in design trends as minimalism is often trendy and inappropriate in the way it is executed.

    1. / Reply

      @Stephen I agree with you almost completely. If you read the Conlusion of the article you will see that I expressed that Minimalism is not always the best choice.

  4. / Reply

    Minimalism is a growing trend at the moment. It gives off a vibe of professionalism. Minimalist websites are pretty hard to design because they’re so simple. Many people want to keep adding things to their website that they feel is important, but the more they add, the further they’re getting from the minimalist design. It’s hard to restrain ourselves from overloading the website with elements. Great article and examples. Thanks.

  5. / Reply

    It’s hard to get minimalist right but when you do it really stands out in terms of design and professionalism.

  6. / Reply

    Thank you for your example of using synthesis in design. I think this is truly a minimalist techniques as it maximizes the amount of useful information that can included in a limited space.

    Not only this but it is difficult to be original, and thus memorable, if you are not utilizing synthetic elements.

  7. / Reply

    Nice analogy.

    The thing is that minimalist web design is used more an more in these days. A simple website will always show the visitor what he was expecting for, but can we implement minimal style in every design?

    For the future – I will not like to see all the website in black and white, or to be designed around only two colors.

  8. / Reply

    Thanks for sharing. I think that minimalist website design is great. It looks more professional.

  9. / Reply

    Shaun thanks for the concise tips on minimal design. Less is more if done right!

Leave a Reply

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

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.