6 Ways To Take Your Webdesign From Good To Great

By   |  Stashed in Webdesign

6 Ways to Take Your Webdesign From Good to GreatContent 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://fwebde.com/ Eric B.

    Thanks for the helpful tips! I already apply some of these to my themes, and I will try out some of the other ones.

  • http://www.designfollow.com designfollow

    thanks for the. great post

  • http://tookooldoggies.blogspot.com Elena

    You really have some useful tips here. I think that gradients are everywhere these days but when you hardly notice they are a gradient, the design really seems to pop. I totally agree with you about whitespace and typography. With @font-face not in full force yet, it’s good to think outside the box to make your typography stand out. Thanks for the excellent post.

  • http://www.blog.exxcorpio.com Luis Lopez

    Excellent tips man, the best way to improve a website is making attention to details, like you explained here.

    Thanks

  • http://www.thepeachdesign.com Peach

    Those are some great tips. Thanks for sharing!

  • http://www.itsselvam.com Selvam

    thanks for the tips

  • http://twitter.com/HeziAbrass/ Hezi

    thanks for the post! :)

  • http://www.aha-reclame.nl Daniel

    One of the best articles I’ve read!! Great job :D I’m gonna spam this on Twitter!!

  • http://www.cutelittlefactory.com Andrea Austoni

    Rule #1 is definitely out of place here. Subtle gradients are a design trend (to which I too am guilty of subscribing) and not a general rule for great design.
    The same goes for big search boxes and lots of info. How does that help the design?

    These are not so much rules for great designs as an analysis of current blog trends, both design- and content-wise.

  • http://www.withinmedia.nl Mettin

    Great article. On the footer i would like to add the google translate widget for international visitors. I also did that on my portfolio (wich is in dutch) and i find it a great improvement. What do you think?

  • http://www.lodeschoors.be Lode

    great article with loads of good tips for in my future designs and websites

  • http://www.alive77.cn z.Yleo77

    i just say that great,great ideas

  • http://animusmedia.com Raj

    Thanks Andrew for the great post!.
    I will definitely use these tips on my upcoming personal website.

  • http://www.papermoviebooks.com SheenaEbersohn

    Nice tut, thank you.

    My biggest struggle is to translate the website goal into the design. Especially for sites that have a lot going on, such as media sites.

  • Jen

    I’ve never been a fan of the giant footer. I like how it’s done in some cases but hate the ones where the footer height is more than the content of the page.

  • http://www.ogvidius.com/ Oggy

    I agree with Andrea. Subtle gradients look great but are becoming very overused, and stereotypical. I’m guilty of it too, but I’m working on a redesign that’s a little more original and trying to leave certain web trends behind. A little more detail would have been nice too. For example, in the typography section, maybe explain a little on some of the top fonts used as headings, and ways of embedding custom fonts etc. That aside though, it was a great article and definitely some useful hints in there. Good job. The images were really nice too :)

  • http://www.myinkblog.com Andrew Houle

    Wow, thanks for the great response everyone!

    @Elana – I agree. Using @font-face for free commercial fonts is a great way to separate your designs.

    @Andrea – These 6 examples weren’t so much rules as they are helpful tips. I would agree that subtle gradients are a trend, but they are useful for improving the aesthetics of a site. And if I geared toward blog design… well you caught me there :) It’s what I spend most of my time on the web looking at.

  • http://circleboxblog.com/ Callum Chapman

    Wow, such a great post with plenty of info!

  • Chris

    Great post man! An excellent summary of some great tips. However, in “Effective Icon Hover Effect” you make a malapropism. The word you meant is remnants (I believe). Remanence is a technical word related to magnetic induction, which I think you did not intend to say lol.

  • Brayden Styles

    absolutely an amazing post very useful and lost of great resources!

  • http://www.janodaniel.com Jan O’Daniel

    Love this. As an interactive copywriter, my clients constantly ask me about design and I love to point them to credible resources like this. You’ve provided some ideas for really clear, true and tangible design improvements.

  • http://savedelete.com Jaspal

    i like the footer concept very much … its the one thing every designer should be emphasized on … of course header can make a dead blog to a live one …

    gr8 post .. keep them coming :)

  • http://www.pancakeseven.com Thorsten

    Great tips. Thanks.

  • http://www.myinkblog.com Andrew Houle

    @Chris – Wow, thanks for catching that, and thanks for giving me a new word to lookup :) Here’s to adding malapropism into my every day vocabulary!

  • http://www.insidethewebb.com/ Inside the Webb

    Great tips, I wouldn’t expect anything less from MyInkBlog :)

  • http://www.tutorial9.net David Leggett

    Thanks for considering our navigation to be a good enough example to show here Andrew :) It’s an honor! Great post!

  • http://www.dotndot.com dotndot

    Awesome explanation.Great post.

  • Brian Jones

    Thanks for the post. Good finds on Footer design and footer information.

  • http://www.amtstudios.nl Alfons

    Great post with good examples! Thanks for sharing.

  • Christina

    Andrew, thanx! It’s great post is very-very useful for me! Thanx again! Good luck and waiting for another cool and useful and interesting posts!!! :)

  • http://sosmedia.org sos media web design

    Nice list. Search bar in the footer… Baskerville ampersands… GENIUS!

  • http://blueicegraphix.com Michael

    Really great post, I already got lots of idea’s in mind!

    ~ Michael

  • http://www.crearecommunications.co.uk Damian Web

    Some really useful tips here, and fantastic websites. Ive never used the bokeh effect before but might try it out, I like minimalist sites but think would work really nice in the background of a simple site with a semi transparent div floating over it.

    the idea of having a separate styling for ampersands is an awsome idea too.

    Top post, thanks Andrew!

  • http://designinformer.com Design Informer

    Great post. I definitely love that Bunton site.

    The examples that you used are perfect and goes a long way in illustrating your points. Good job!

  • http://www.online-guitar-tuition.com/ Online Guitar Tuition

    If more people knew about true webdesign during the times of Geocities, there would have been less blindness cases.

  • http://adcoffee.info Ad Coffee

    good post. I should agree with most of steps. I’d like to recommend to all starting designers – learn, learn, learn… don’t copy, be originall. If everyone just use copypaste idea or element, we will never reach higher web design level…

  • http://richerimage.co.uk/blog Richard Barratt

    Thank you for the informative post. The grid spacing and typography sections were my personal favourites and I think the whole online world could do a lot worse than to read the whitespace section!

    Felt a little at odds with you over the importance of the fold though…

    Thanks again for this article.

  • http://www.gregprogramming.com Greg

    Very nice article. Thanks

  • http://seoandy.com Andy Kinsey

    superb read … :)

  • http://anthonyarmendariz.carbonmade.com Anthony

    While this is a good observation of elements that web designers use, I do not think that using these makes a great design. For example using a grid is important, but so is breaking a grid. A great design comes from pure obsessiveness to perfection and comes from all of the little details.

  • Bert

    I really like the bokeh effect. Thanks for sharing this.

  • http://www.bcm-websolutions.de Chris

    Great work buddy!

  • http://procopyblogger.blogspot.com/ kalyan

    Have to say you have a very high amount of patience and talent , excellent post with great examples .Awesome job

  • http://www.danielin.com Dan

    I love these tips! I already have started using some of them, but after reading this post, I really want to try the other ones as well! Thanks again!

  • http://www.studio625.net Chris

    Awesome tips! I really like the way you’ve presented them, too- blurring the rest of the design and making a clear little areas on the focal points.

  • http://quemasmefalta.blogspot.com JcMIB

    thanks for all this tips, im gonna use’em for my new project in class! (web design) i like very much the rounded corners and the gradients..

  • http://www.bebop-cafe.com BebopDesigner

    What a brilliant post! loved it, enjoyed it and shared it. Thanks for the enlightenment.

  • http://www.mywebsiteworkout.com Shafi

    Nice and informative. Excellent tips.

  • http://newmediaproduce.com John Browning

    Good advices and links on use of gradients.

  • http://www.webcottagedesigns.com Angie

    Well done and useful article.

  • http://www.animedia.com Ken Lasher

    Great post! I like how you demonstrated all the little subtleties that make for a great design. Thanks for the information.

  • http://www.veempiire.com veemp

    i am really happy you shared this. :)

  • http://rl-creative.com Roland

    Great post :) Awesome !!! cool tips for avoiding stupid mistakes on websites :)

  • http://www.vizstreamstudios.com Yvonne

    great post..excellent tips..well done

  • http://www.wagnermatos.co.uk Wagner Matos

    I think your article is spot on. I would only add that most great web designs they also have personality, little graphic details embedded within the design that can make the user get into the brand mood, create a connection and make things flow. Thanks for the article!

  • http://www.varitek.co.uk/ Jason

    Fantastic post, a lot of it is common sense but a lot there that some people wouldn’t immediately consider. Great job.

  • http://www.graphicdesignblog.org Graphic Design Blog

    Thanks for sharing these 6 ways to make our site/blog good to great and I totally believe that following these steps will surely help us make a great design.

  • http://www.vicobiscotti.it Vico

    excellent post! thanks!

  • http://www.karlbowers.co.uk Karl Bowers

    Some nice tips here.
    Will be applying some of these to future projects :-)

  • http://www.karlbowers.co.uk Karl Bowers

    Fantastic article! I particularly liked the references to: http://www.poccuo.com/
    http://www.snook.ca/
    http://www.madebysofa.com

    Great stuff! :-)

    Regards

    Karl

  • http://www.threestyles.com Shane Jeffers

    Loved this post! Got some great tips that designers should think about before creating a design!

  • http://NewportManners.com Didi Lorillard

    I’m looking to update and freshen up my site. This is the third time that I’ve updated in six years and this time I would like to get it right. I would really appreciate your input. If you could take a look at my site and off the top of your head let me know how I could improve it, I would greatly appreciate your help. Thanking you in advance.

    I live on an island and we don’t have access to your kind of talent, which is why I am seeking advice.

    Many thanks, Didi
    NewportManners.com

  • http://www.elevenwest.co.uk Isaac

    So helpful, i’ll be looking through my web design, trying to find some areas to make use of some of these ideas. thank you!!

  • http://www.blackberrycross.com Blackberry&Cross

    Sharing with the design staff. Great tips. We will study them as implement them if possible.

  • http://www.clippingimages.com clippingimages

    WoW :) Nice post. Very informative. Thanks for sharing this awesome post.

  • http://www.myinkblog.com Andrew Houle

    @Didi – Thanks for sharing, I took a look at your site. It looks nice. Here are a couple of quick suggestions that I thought of: Try a jQuery slider for the slideshow, try more contrast (in font, color or size) between the logo and tagline, be a little more subtle on the drop shadows, try a sticky footer. There’s are just suggestions on first impression, please take them with a grain of salt. I hope the redesign goes great, feel free to get back in touch with me to show off what you come up with!

  • http://www.newsiteseveryday.blogspot.com/ muth_u2001

    Thats is nice………

  • http://journal.oceanjay.net Ocean

    Ideafry! helpful~ thank..

  • http://twitter.com/wladesign Walter

    congrats,
    a very good post with a lot of useful information.
    thx for this

  • Mal

    The fold does exist. Or at least management thinks it does…

    http://www.codinghorror.com/blog/archives/001307.html

  • http://yannesposito.com Yogsototh

    Nice list.

    Except the stay on the grid, I don’t get this for now. If it is aligned it should be sufficient. But worse, putting so much information of the design into the Html seems to be a bad thing.

    http://www.madebysofa.com/ is by far the best looking website given in example thought.

  • mirna

    really nice way of highlighting the important…. my final paper in my design studies was on white space and its importance.. i would put it before the use of gradient :)
    good luck with your work and thank you :)

  • http://attaikede.wordpress.com Swapna

    I just fell in love with the creator of the “good to great” graphic at the very top of this article. It’s unspeakably perfect.

    Sigh.

  • http://www.jasonhollandesign.com Jason

    Great post! Your examples, and mention, show that we’ve moved past Web 2.0 (as abstract as a definition as it was). Thanks for the examples!

  • http://xpirtdesign.com Xpirt Design

    Great job on the article. I really like the way you organize all of the information, as well as the awesome graphics you apply to the post. Just amazing! Thanks for sharing, i’m looking forward to see your next post.

  • http://vobliq.com sandesh

    Great job covered the basic thing in nice manner,these basic things we do not think about sometimes.

  • http://www.andersrosenberg.dk Anders Rosenberg

    Very help helpful post, thanks :)

  • http://photoshopvip.net sean

    wow, thanks for these helpful post, I will use these tips for my website. thanks!!

  • http://www.thelayoutspot.net Myspace Layouts

    your web design articles are awesome.

  • http://terramedia.com.au Matt

    I quite like your footer thoughts, it can be a big challenge to really make an effective and useful footer that ties in well with the rest of the design. You don’t really know whats missing though until you get a good one put together and all of a sudden everything seems right in the world (or at least on that one site anyway!)

  • http://www.iflexion.com Iflexion

    Nice article. Especially “2. Add white space” section. In my view excellent spacing and minimalistic approach are the most popular trends in web design.

  • http://www.williamaktin.com William Atkin

    Awesome post yet again Andrew.

  • http://sinthux.deviantart.com Dalton Hurd

    I think the things that you listed are things that made your example sites great, but I don’t think a lot of these are what makes design great.

    A decent portion of the items listed are really just personal style preference. Such as the bokeh effect for example. It’s a nice technique, but it’s not really something you use on every design to turn it from good to great.

    Despite the issues mentioned above, I think it’s a quality post, and very informative. Thanks!

  • http://erage.nl Webdesign Roosendaal

    I totally agree about the subtle shadows and gradients. Great ways to make your site even better.

  • http://www.lyonssolutions.co.uk Lyons Solutions Web Design

    I’ve got used to using grids. However, I think it’s more important to have the website clearly defined first and thats what would make it more impressive to visitors.

  • http://www.absolutecovers.com Ovi Dogar

    Very nice post!

    Keep up the great work!

    Ovi Dogar
    AbsoluteCovers.com

  • http://www.embassyit.com web design bangalore

    It is a very good post…

    Keep blogging we are waiting for the next one…

  • http://www.asimsidiqi.deviantart.com Asim Siddiqui

    Thanks 4 the best helpful tricks!! awsum !! :)

  • carine

    been really impressed by the quality of all site exemples!
    thx, keep on producing that type of content, it’s gr8!!

  • http://www.darcva.com Kamila – Darc Vanilla Design

    Great, useful tips. It might help for all those who use default WordPress theme for their blog :)
    Thanks for another great post.

  • http://www.pierrevanderpol.com Pierre Vanderpol

    Very nice indeed !
    Do not forget vector arts or vector stocks ! They can really help you like on one of my design for the swedish church (see the header and the footer)
    http://www.konfastockholm.se/

    the whole webdesign case study is here
    http://www.pierrevanderpol.com/2009/12/09/webbdesign-case-study/konfastockholm-case-study-283

  • http://www.privatedimension.at/feel_good.html Christa

    Very good ideas and at the same time good advise.

  • http://shadedpixel.com ShadedPixel.com

    These are great! you are on the right track with these ideas. there are so many bad sites out there, it will keep us all in buisness for a lfetime.

  • http://www.iastron.com/5000 Kulin

    Those are great tips man. This certainly inspires me. All the best for new year 2010.

  • http://twitter.com/lucianacns Luciana Nunes

    Great tips! Thaanks a lot! =)

  • http://www.sannaleeconsulting.blogspot.com Sanna

    Hi – Thanks for the great post. A friend of mine found this while searching for something entirely unrelated, and forwarded the article on to me… I appreciate your tips, and plan to refer back to this blog tomorrow when I begin working on the layout for my new site (and probably again when I’m working in the future!)

  • http://www.techacs.com Long Island Web Design

    thanks for sharing they are all really wonderful

  • http://www.marketharboroughmagazine.co.uk/ Market Harborough Magazine

    Thanks for the brilliant post

  • http://www.migratedesign.com Laurent Jouvin

    White space… YES! Use more white space!
    I am so tired of seeing those busy sites with too much information, all jam packed in a small area of the page. Surf the internet and get a pounding headache guarantied. Visual space is an important aspect of web design and it needs to be seriously considered in the overall layout of a page.

  • http://blog.ituniv.org Marcus

    Good work and very useful tips for the techie (who haven’t practiced those creative design skills yet)!

  • 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!