Use arrow keys to navigate

In the web design industry how often have you come across a statement ‘the website looks simple and good’? Recall some of the most attractive websites that you have visited in the recent times, you will see most of them have a simple and no-nonsense look and feel. From Google to Amazon, this is a unifying trait across all successful websites. Cluttered websites create tension in the minds of the viewers and fail to deliver the message. In this write-up we shall discuss some of the important attributes which contribute to a clean and attractive layout.

It’s all within the grid

A well-structured layout is the key to designing a clean and simple website. By layout we mean the arrangement of different elements in the website such as banner, body, navigation, footer, logo etc. The arrangement of these elements can make or break your website. Professional web designers like to follow the grid structure to make the layout attractive. It is nothing but a set of imaginary horizontal and vertical lines which helps a web designer organize different elements in the website maintaining consistency.

Grid structure isn’t meant only for simple websites with only a few pages of information but can also be applied to sites which are packed with information such as news portals. Let’s take a look at the CNN website; here they have followed a grid structure. Notice how they have maintained the hierarchy within the website by varying the sizes of different sections within the website. Similar grid structure is maintained throughout the inner pages – this makes the site attractive and user-friendly.

Keep simplifying

When it comes to designing a website, there are two approach roads – one where you keep adding different elements and in the other where you start with all the elements do away with the unnecessary ones in the design. Since our target is to design a website which is ‘simpl

e and clean’ adopting the latter approach would be ideal. Make a list of things that you need in your website and put them all in the layout, in most cases you will notice clutter. Now find out elements which don’t add much value to the website and simply keep deleting them. This way you will simply the look and feel of your website.

Images – the spokesperson of your website’s cleanliness!

Images are an integral part of any website and to start with use only a handful number of images that make a statement. There will always be expectations if you are creating an e-commerce website or a photo gallery where you need to fit in maximum number of images in a webpage. Secondly, you need to be consistent with size, resolution and style of the images which in many cases is next to impossible since images are sourced from different places. In such a case you can add consistency by adding graphical elements such as shades, borders to them.

Take a look at the Pinterest website and see how artistically they have used different images with varied background and sizes. The white border used allows users to easily distinguish between the different images that have been used in the website. Also notice that the images carry a description below. Many designers skip the description (not to be confused with the description and the Alt Tag which is hidden) part while using image as a part of content but nonetheless it is useful for the end users.

Compelling fonts – No uphill battle!

The use of font is very vital in having a clean and attractive layout. There isn’t any hard and fast rule which dictates the usage of fonts in a website but using multiple fonts will take away the consistency in design. Stick to a single font or maximum two throughout your website as this will bring in a sense of uniformity. You can always vary with their colors and sizes to highlight the important sections of your website. Along with this you also need to consider proper spacing between the lines to make the content easily readable. Lastly, stick to fonts which are legible from a distance as this will add to the visual appeal of your website. Life in Green Ville has made excellent use of fonts in its layout.

Leverage the world of colors!

Colors are one thing that you need to be very careful about. In the print industry you are often restricted to a single or two colors due to the cost factor. This isn’t the case with web designing as there are dozens of colors and hundreds of shades which create a natural tendency to play with colors, often resulting in amateurish looking site. To make a site look attractive you need to stick to maximum of three colors, though you can definitely make use of different shades.

Vibrant colors should be used for important elements as they grab the visitor’s attention. The colors shouldn’t only look attractive but also echo the site’s message. For example, a website targeting the youth should have brighter and vibrant shades while that of a charity organization should be more sober in nature. Look at the smart use of two colors in the website Urbanoff. Here only two distinctive colors have been used to create an attractive layout.

Don’t reinvent navigation

There isn’t any limit to creativity and imaginative expression in web design but you need to respect convention. Let’s look into automobile industry – it has done numerous advancements in design, but steering wheel is still in the front seat and not in the rear! Similarly when it comes to navigation it is ideal to stick to tradition and have it either on the left hand side or the top of the layout. All of us are use to find menus here, so hiding it somewhere else in the page would only confuse the end users and kill the purpose of your website denying you multiple page views. After all you do want your users to browse deep into the website, don’t you?

White spaces are important… still! This doesn’t literally translate to white space but means empty spaces in a website. Professional web designers consider this as an integral part of designing an attractive website. Remember every inch of your website doesn’t need to be covered to texts or images as this leads to cluttering and spoils the look of the website.

White spaces complement different elements of the website and highlight the important ones. Keep in mind most users don’t read through your website and just scan it thus white spaces become an important tool in keeping the layout simple. Look at the use of white spaces in Yes Nurse and how it adds to the look of the website.Your target audience loves freshness/change, don’t you?

There isn’t anything known as a perfect design and you need to constantly keep playing with design, fonts and placement of images in the layout. You will come across many attractive propositions while changing/modifying the different elements in the website. Keep taking snapshots of each of these tweaks and evaluate the pros and cons of each of them. You can also take views of your friends and colleagues; this will lead you to a design which may not be perfect but closest to perfection!

Conclusion

Clean and simple layout is the single biggest selling point for any website. No wonder this is the commonality among all successful websites in the world. So to attract users always focus on a simple webpage layout. This is however easier said than done and needs a lot of attention to detail.

P.S. Remember there are no rulebooks when it comes to designing a clean website, so take some idea from here, twist it a bit from there, merge everything with what you think is best and there you go!

Check out our previous articles!

We hope you enjoyed this article! Please don’t forget to subscribe to our RSS-feed or follow Inspirationfeed on TwitterGoogle+, and Facebook! If you enjoyed the following article we humbly ask you to comment, and help us spread the word!

Use arrow keys to navigate

Posted by Mark Wilston

Mark Wilston is a Content Writer and marketing professional working with PixelCrayons, a reputed Custom web design & development company India offering offshore cms, ecommerce and mobile apps development services. For more information about PixelCrayons, visit at http://www.pixelcrayons.com/

2 Comments

  1. Great post Sahil, and some good examples. As we always say at our agency, “Simple Sells”.

  2. I agree with your point on Navigation, its good to leave it where people normally like to find it. Great color combinations and great pictures are like adding more spices to the dish, making it more delicious and yummy!

Leave a reply

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