6 Ways To Take Your Webdesign From Good To Great

By   |  Stashed in Webdesign

6 Ways to Take Your Webdesign From Good to Great Content Jump

  1. Make Subtle Use of Gradients
  2. Add White Space
  3. Stay On A Grid
  4. Improve Your Typography
  5. Have Clear and Effective Navigation
  6. Use An Awesome and Useful Footer

Intro

The difference between good and great webdesign is relatively small. The average person may not be able to explain the tangible differences that make up great design, but they can usually spot a design they like. By examining some awesome sites, I’ll attempt to put my finger on some of the small details that make up the difference.

A little while back I wrote an article about the 4 Principles of Good Design for Websites, this article is somewhat of a continuation of those principles. In that article I went into detail about the important roles that contrast, repetition, alignment and proximity play in web design. This article will piggy back on those principles as I examine 6 ways you can take your webdesign 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.

1. Make Subtle Use of Gradients

I’m not sure if there is an effect that can be butchered and make your site look more amateurish than poor use of gradients. Nothing screams bad design quite like a rainbow gradient (well perhaps blinking text is of equal prowess). That being said, the use of subtle gradients will go a long way toward making your site look great. The key is using them sparingly within the flow of the design.

Gradient Meets Bokeh Effect

The Newism site features a colorful, but subtle gradient that is seamlessly mixed with a faint bokeh effect. It’s visually stunning. Just as a side note, if you are interested in recreating a bokeh effect in Photoshop, be sure to check out Abduzeedo’s tutorial on it.

Newism

Subtle Gradients, Shadows and Textures… Oh My!

The guys at OnWired flat-out make awesome websites, so it stands to reason their personal site would be top notch. To go along with plenty of personality throughout, the design itself is spot-on. Check out the use of subtle gradients and shadows in the design. I also love the touch of grunge and texture that is sprinkled in.

OnWired

2. Add White Space

The term white space is often misunderstood to literally mean white space. In terms of design it is more accurately described as the space between elements. To break it down even further here is how the folks at A List Apart define it.

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.

It cannot be understated just how important it is to let elements breathe in your design. This is probably the single biggest issue for young designers. It’s human nature to try to cram every design element into a small area, fortunately for webdesigners (despite every clients unrelenting belief) there is no such thing as a fold in webdesign, that’s what scroll bars are for… /* end rant */

Excellent Spacing & Subtle Line Breaks

Snook provides a comfy level of padding to break up all the post entries. Also notice the faint line breaks that provide separation, but are easy on the eyes and flow with the overall design.

Snook

Beautiful Minimalistic Approach

Made By Sofa features a beautiful minimalistic approach. The spacing is fluent, and they use an image with no background or clutter to speak loudly.

We are Sofa

3. Stay On A Grid

The inspiration for grid based designs can best be attributed to newspapers, but if you look closer you can find grids in all kinds of things. From most websites to traffic grids.

The 960 grid and Blueprint are probably the two most popular grid frameworks. I personally love the 960 grid, it’s simple, light weight and a nice starting point. I design with it a lot of the time, but a grid just means that you have some rhyme and reason to your site elements. Alignment plays an intricate role in making your site look refined. Nothing in webdesign should be placed without purpose or alignment to another element.

Griding A Portfolio

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

Poccuo

Columns Within A Design Blog

I love how Web Design Ledger presents their posts on their home page. The newest post is large and featured at the top, the next few are shown in a 3 column grid.

Web Design Ledger

Lots of Equal Length Columns

Ecoki is a beautiful grid design layout. The 4 column, 2 row layout is obvious, but the slideshow/thumbnails and latest reviews are also on a grid.

Ecoki

4. Improve Your Typography

Typography is an artform that is obsessed on by most good designers. It is of prime importance when trying to bring your designs to the next level. Of course it plays an important role in readability, but it’s also quite important to design and mood.

Using Contrast To Direct Attention

SimpleBits does a wonderful job of varying contrasts to direct the viewer’s attention. In typography contrast can be altered through font choices, color variances, and size differential.

Simple Bits

Nothing Says Typography Like Ampersand Signs

This site looks so nice and effortless, but you can tell a lot of thought and reason went into the whole process, and that’s especially evident with the typography. The spacing and font choices are flawless, and I’m enamored with the clever use of Baskerville on the ampersand signs.

Bunton

5. Have Clear and Effective Navigation

Good navigation is so important in design. If a user can’t find what they are looking for quick enough, they are probably moving onto the next site. It’s something I’m very weary of, and I know that MyInkBlog could use some improvement on, and it should be drastically improved in the coming redesign.

Blog Navigation Via Categories

Far too often, blog navigation focuses on pages and leaves the categories as a secondary thought somewhere along the sidebar. Tutorial9 does a fantastic job of realizing users care much more about finding out where their Photoshop tutorials are, than where their about us page is. Check out their flawless 2 level navigation with active category highlighting.

Tutorial 9

Effective Icon Hover Effect

Icons can definitely be hit or miss on websites. The web is filled with the remnants of this web 2.0 trend, but not all trends are completely bad. The reason web 2.0 got ugly was because of it’s overuse and amateur use. As with most things, when done properly it really can be quite effective. Carsonified displays a clever icon hover effect for it’s navigation. It’s simple and monochromatic and ties in flawlessly with the rest of the site design.

Carsonified

6. Use An Awesome and Useful Footer

When the web first started footers were tossed into the junk pile of useless things. They were minor, but necessary evils that needed to be displayed, but little thought went into the design of them. Now they’ve become more and more important to the overall design of a site. Don’t miss out on the opportunity to brand and complete your design through the use of a good footer.

Lots of Info & Credentials

The main purpose of a footer is to display necessary info about the site and copyright info. Brian Hoff adds more personality and interest to his through a 3 column look that displays everything from what he’s working on to books he recommends.

Brian Hoff

Search Functionality In A Footer?

Elliot Jay Stock’s site features an oversized search form in his footer. It’s definitely not a typical place for one, but I think it works for his site. He is also one of the many designers who have taken to featuring their tweets in the footer.

Elliot Jay Stocks

Final Thoughts

I’d love to hear your thoughts on the subject. What separates great design? What little things do you key on?

About the Author

Andrew is a primary contributer for MyInkBlog. He is a full time web developer for Niagara University. When he's not working there, he's a blogger, twitter'er, wordpress'er, silverstripe advocate, blessed father and husband.

More posts by

Website      

  • http://www.loopwhole.co.uk web design suffolk

    Great tips to add that wow factor!

  • http://www.faisalshahzad.com Faisal Shahzad

    Nice post.. :)
    keep it up dude..

  • Andreas

    Thanks for the awesomeness, certainly gonna use this in my next design!

  • http://www.animhut.com/ sriganesh

    thanks for the tip and really useful tips

  • http://www.Loudable.com Abhishek Kumar

    This is a nice post…spaecially adding white space to website..

  • http://www.sccssurvey.co.uk/category/show/39 Rotary Laser Level Expert Rich

    Great post Andrew.
    It’s this sort of attention to detail that sorts the great from the OK in terms of design.

    Knowing this sort of info will at least move me a bit further up the ladder – but still a long way to go :)

  • http://www.crearedesign.co.uk Damian Smith

    I agree with everything on here. Its all well and good knowing everything you can do in photoshop such as shadows, gradients, textures and all the rest, but throwing them all into one design just because you want to use them can destroy any design.

    They can all be used together quite successfully as OnWired have shown in their really well presented website. All these things usually work best when they don’t stand out, and just site nicely in the background whilst your eyes are drawn to the text… Which is why typography is key.

    I never use more than 3 fonts per design, and they are usually helvetica, Georgia, sans serif and Gill sans. I use others but usually as graphics as a lot of them are not web safe unfortunately! :[

    Some really nice examples here anyway. Always good to see inspiration whilst sat at work thinking about my next design!

  • http://NpXp.com NpXp

    Well I am not sure if anyone noticed the fact that simple themes are more efficient.

    I always opt for something which is clear indicator of simplicity. Nor I advice my clients to go for something flashy or full of colors.

  • http://www.fwwebsitedesign.co.uk FW Website Design

    Great ideas, Thanks for the post.

  • http://www.beverleyhall.co.uk Beverley Hall

    I love what they’ve done with the “We are Sofa” site. I think they have approached it perfectly, given that attention span is short when searching for the right product. They’re definately on my list for inspiration.

  • Bird

    People who write about web design have a weird fetish for rounded corners.

  • http://www.zweipunkt-marketing.de Webdesign Bayern

    Good article. I think the most important things for a great webdesign are the points with the spaces and beautiful fonts. Additionally i would add the point “A color schema that fits”.

  • http://www.webcreationuk.com/ Web Design

    Made by sofa is a splendid creation, I always admired that site. However, brilliant tips you shared, thanks!

  • http://www.erage.nl Webdesign Bergen op Zoom

    Good article. I totally agree: everybody should use more gradients, shadows and even rounded corners. However, it takes a lot more effort to display those effects with CSS ,especially when the website needs to be scalable as well.

    Therefore I’d like to use CSS3 (boxshadow, border-radius and gradient) where possible. I use Microsoft filters for IE6, IE7 and IE8. It works fine in my opinion!

  • http://www.smallbizexpress.com Small Business Web Designer

    great post… simplicity in any website would be liked by everyone…and i agree with you that the usage of proper font, spacing and subtle gradients would definitely help to take websites to good to great…… thanks

    Steve

  • http://www.privilegedsoftware.com Website design in Lincolnshire

    Great post, really enjoyed reading this!

    Love the use of shadows and gradients, really useful! im sure ill be back to view this again :)

    Colin Jensen

  • http://www.drkdesign.com Debbie

    Great article. You have a way of bring everything together. I do some of this already but this article has given me new ideas.

  • http://www.webfeuer.at Webdesign Wien

    Awesome article! Very useful information. I had some of those advices already in mind, but there are some great additions.

  • http://www.ixdownload.com/news/ Adrian

    Alot of ideas comes to mind, good resource when you “think” your website already is done, its not.

    Well done gathering these pointers to improve the looks and details of a website.

    Im also fond of simplicity with details.

  • http://www.e11world.com e11world

    I follow this list now before designing any site. Very useful! Thanks!!

  • http://www.webdesign-gm.co.uk Website Design Bristol

    I’ve always found that its the small things that can really finish a design off and spending that little bit of extra time getting others to critic the design is a good idea.

  • http://esvelte.com Web Design Sheffield

    Bokeh, Depth of Field and subtle transparency are some of my favourites. Although web design, like almost everything else, is subject to fashion trends!

  • http://www.lapietradaterra.com.ar Martín

    Pure CSS text gradient (no PNGs), it sort of took me by surprise for a second but finally

  • http://www.twitter.com/aramsahai Annand

    All the images for this article are broken.

  • http://www.aaronmoody.co.uk Aaron Moody

    Some really usefull info there, thanks for posting.
    I’m trying to move to a mre minimalistic style of design, whcih the majority of the links you posted to use.

    -Aaron

  • http://www.i4visualmedia.co.uk Essex Website Designers

    You ahve made some really great points, these 6 things are also really important to just get right!
    I think white space is the main problem for a lot of sites, no one likes a huge gap.

  • http://www.xtence.be Xtence

    Great post, these are the details who make great designs !

  • http://www.susnet.co.uk/ Essex Web Design

    Some really good points here, if you stick to the above you will no doubt see improvements. Just don’t go over the top with gradients and shadows, can look a bit tacky if you over cook it!

  • http://www.waterkokerkopen.nl Waterkoker

    I Like the “use whitespace” tip!

  • http://www.mosettistudios.it Promozione siti web

    I think many web designer should read this post. Every point you mentioned is really fundamental to get a strong and nice web site layout. The idea of bokeh effect on the gradient is interesting, I usually like to mix vector elements or decorative elements/pattern to the gradient with the same intent.
    Thanks for the post.
    ciao
    Francy

  • http://www.securityking.com Craig

    Great article, and its great that you have collected all the information all together here, and this has given me some new ideas. Thanks!

  • Jennette Khoun

    @nick haha no i actually did try it and it did work. so i recommend you go on and try it yourself ;) http://tinyurl. com/3yrh3qo

  • Onitsuka Tiger

    very nice post, i clearly love this site, continue on it.

  • Web Design

    Brilliant article. Website design is definitely something that everybody should know!