Design

How to make a Great Web Design

webdesign

Intro

Their is relatively a very small difference between good and great web design. An average person may not be able to tell the tangible differences that make a great design. By examining some of the awesome websites, I’ll attempt to describe the small details that make up the great difference.

In that article I will tell you in detail about the important role that contrast, repetition, alignment and proximity plays in web design. This article which is based on 6 basic principles will take your web design from good to great.
This post is chock full of awesome examples. I made a conscience effort to only pick sites that were great all the way around.

Contents

  1. Subtle Use of Gradients
  2. Use of White Space
  3. Stay On A Grid
  4. Good Typography
  5. Effective and Clear Navigation
  6. Create a Useful and an Awesome Footer

1. Subtle Use of Gradients

I don’t know if there is any other effect that can make your website look more amateurish than poor use of gradients. Nothing screams bad design like a rainbow gradient. So, it may elaborated that the use of subtle gradients will result in a long way in making your site look great. The key is that you should use them sparingly within the flow of design.

Bokeh Effect with Gradients
The Newism site features a colorful, but subtle gradient that is mixed with a bokeh effect. It’s visually stunning. If you are interested in creating a bokeh effect in Photoshop, check out Abduzeedo’s tutorial on it.

2. White Space

The term white space is usually misunderstood to mean white space. But in terms of design, it is more accurately described as the space between elements.
A List Apart define it as

Whitespace, or negative space is the space between elements in a composition. More specifically, the space between major elements in a composition is macro whitespace. Micro whitespace, is “yes, you’ve guessed it” the space between smaller elements: between list items, between a caption and an image, or between words and letters. The itty-bitty stuff.

Excellent Spacing & Subtle Line Breaks
Snook provides a comfortable level of padding to break up all the entries. You may also notice the faint line that provide separation and flow with the overall design.

3. Stay On A Grid

The grid based designs can best for newspapers, but if you look closer you can find grids in all kinds of things.
The 960 grid and Blueprint are the two most popular grid frameworks. I personally use 960 grid system, it’s simple, light weight. Grid just means that you have some rhyme and reason to your site elements. Alignment plays an important role in making your website look perfect and refined. Not even a single element in webdesign should be placed without purpose or alignment to another element.

Portfolio Grid
Poccuo features their portfolio on their home page. They used beautiful mix of 3 column and 5 column look. It’s well spaced and visually appealing.

Equal Length Columns
Ecoki is a awesome grid design layout. The 4 column, 2 row layout is obvious, but the slideshow/thumbnails and latest reviews which are available makes it more stunning.

4. Good Typography
Typography is the art and technique of arranging type, type design, and modifying type glyphs. It is of prime importance when you try to bring your designs to the next level. Of course, it plays an vital role in readability, but it’s also important for the design.

 

The spacing and font choices are flawless, and I love the clever use of Baskerville on the ampersand signs. You can see here an example of good typography.

5. Effective and Clear Navigation

Good navigation is very important in design. If a user is unable to find what they are looking for, they are probably moving onto the next site.

Blog Navigation and Categories
Blog navigation focuses on pages and leaves the categories as a secondary thought somewhere along the sidebar. Tutorial9 does a great job of realizing users care much more about finding out their Photoshop tutorials, than where their about us page is.

 

Icon Hover Effect
Icons can definitely be hit or miss on the websites. Carsonified display a beautiful icon hover effect for it’s navigation. It’s simple & monochromatic & absolutely perfect with the rest of the design.

 

6. Create a Useful and an Awesome Footer

Firstly, the footers were use for just useless things. They were small, but necessary needed to be displayed, but now thoughts have been changed regarding the footer and their design. Now more important is given on the footer design with the overall design of a site. So create an awesome footer to complete your design.

Information & Credentials
Usually footer is used to display necessary information about the website and copyright info. Brian Hoff adds more interest personality to his 3 column footer that displays everything from what he’s working on to books he recommend.

 

Final Thoughts
I would love get back your thoughts, what you think about designs? What little things you consider while making a design? What is a great design in your opinion?

4 Comments

4 Comments

  1. Logo design

    December 5, 2011 at 6:13 pm

    Nice work. Please keep us informed with such useful information.

  2. Kinza

    March 27, 2011 at 9:18 am

    Thanx for sharing such a fascinating, informative and wonderful article. I'm feeling lucky 🙂

  3. Guilherme Cristofani

    March 14, 2011 at 5:08 am

    I really appreciate your professional approach.
    Your article very interesting, I have introduced a lot of friends look at this article, the content of the articles there will be a lot of attractive people to appreciate.:D

  4. Brynhildur

    March 11, 2011 at 3:47 am

    Really enjoyed trying this out

Leave a Reply

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

To Top

Get More Stuff Like This
IN YOUR INBOX

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

This information will never be shared for third part