making a clean website design

By April 24, 2015Web Design

Clean website design, what is it?

A clean website design is one that has a simple layout with minimal design elements and usually features a few stand-out elements, but largely relies on a simple color scheme and negative space to invoke users and create interest in the page. A simple color scheme usually consist of three main colors, however there are always exceptions such as hovers and actives.

Utilizing a clean design that features minimal elements and an easy to navigate layout will invokes users to explore a website more. This creates interest in the site and encourages users to return or seek further information.

How do we make a clean website?

Limited Elements

Website design has drastically changed in the last decade, sites are showing less content and more space. For a clean design, information should be clear, concise, and easily viewable, users should not have to search for the purpose of a page. Using more white space and limiting the amount of elements on a page directs users to the most important information. You can learn more about how to create user friendly landing pages in my previous post about how to create a better user experience with a nice landing page design.

Take Microsoft’s website for example; here are two screenshots of their home page, one from 2007, the other from this month. The original page was filled with text elements that had no hierarchy, and a background that meshed with the elements it needed to feature. However, looking at the current page design you can see the layout is simple, directs the users to the most important information, and showcases the most recent item developed.

Microsoft Homepage – April 2007

web-design-hd-user-friendly-designs8

Microsoft Homepage – April 2015

web-design-hd-user-friendly-designs7
Screenshots taken from web.archive.org.

The removal of unnecessary elements and a simple layout helps deliver the necessary information without cluttering the page and distracting users from what is relevant.

Always go above and beyond, the fold that is

Above the fold refers to the content that is seen without the need to scroll down. The godfather of this is Apple, having their homepage design be almost strictly above the fold since the early 2000’s. Having content above the fold makes it easy for users to directly see the entire pages content without the need to scroll, making users focus all their attention on the content in front of them.

Studies have shown that the majority of people will spend most of their time on the web above the fold, so it’s vital to sell your business without the need to scroll down. Some ways to do this is by having an image slider with information and links that rotates to reveal more content. Utilizing tabs and accordions is another great way to include more information above the fold, increasing users interactions before scrolling. Having a purchase button above the fold is always recommend for e-commerce website designs.

Minimal Color Scheme

As we saw with Microsoft’s old vs. new website, utilizing limited colors can direct a user’s attention to the important information of a page. Adding to this, using a color hierarchy for important info such as links or buttons will assist users in navigating a page and finding the right information. Subtle shades and a limited colour scheme will not only simplify your site, but improve the overall look and brand of your site.

A good color scheme starts with finding a starting color. For this I like to utilize the online tool Coolors, this awesome website allows you to find new colors that you can save, compare, and even edit the color codes to find the perfect color scheme. Another great tool for finding colors for flat designs is FlatUiColorPicker.

Design every page with a goal

A clean website design is not just about the overall look, but how the design functions and interacts with users. A clean website design is meant to engage users and usually has a single end goal, whether that is to contact you, make a purchase, or just read more articles.

Every page should be designed with a goal in mind, if it’s selling a product, call to actions should be used to attract users attentions and get them to make the purchase. Even subpages such as your company’s About Us should be designed to sell. With the introduction of search engines like Google, Yahoo, and Bing, users are no longer just directly visiting website’s home pages, but users are going directly pages that relate to their search terms.

The effect

Having a clean website design makes it easier for users to view content that is important and navigate to the end goal. It’s not hard to see why either, utilizing a clean design directs users to what’s important faster without the distraction of fluffy content and copy. Below are some ways a clean design can improve a websites effectiveness.

  1. Usability
    • a clean website design is easier to use
    • ease of use encourages users to explore more
    • better usability means more users are able to utilize the site
  2. Legibility
    • a clean design is usually much easier on the eyes
    • utilizing clean typography makes it easier for users to read content
    • a good color scheme makes it easy for users to find the info they need
  3. Direct
    • while other designs are filled with content, clean designs are direct and to the point
    • a direct approach gets users attention and drives them to the end goal
    • being able to find info immediately allows users to get what they want right away
    • having content above the fold increases the chances of grabbing users attention

Some websites with a clean design

Box

web-design-hd-user-friendly-designs6

Intersection

web-design-hd-user-friendly-designs5

Spotify

web-design-hd-user-friendly-designs3

Project Fi

web-design-hd-user-friendly-designs2

InVision

web-design-hd-user-friendly-designs

Audio Verite

web-design-hd-user-friendly-designs4

Other Resources

Take a look at these other online resources on website design and development.