Content Jump
- Make Subtle Use of Gradients
- Add White Space
- Stay On A Grid
- Improve Your Typography
- Have Clear and Effective Navigation
- 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 webdesign. 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Final Thoughts
I’d love to hear your thoughts on the subject. What separates great design? What little things do you key on?
Sharing is Caring
If this post was helpful to you, please consider sharing it with others, it's a great way of saying thanks.
MyInkBlog
Email Updates
Twitter
Facebook
Flickr
Designmoo
Digg
Stumble Upon
November 2, 2009
Thanks for the helpful tips! I already apply some of these to my themes, and I will try out some of the other ones.
November 2, 2009
thanks for the. great post
November 2, 2009
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.
November 3, 2009
Excellent tips man, the best way to improve a website is making attention to details, like you explained here.
Thanks
November 3, 2009
Those are some great tips. Thanks for sharing!
November 3, 2009
thanks for the tips
November 3, 2009
thanks for the post! :)
November 3, 2009
One of the best articles I’ve read!! Great job :D I’m gonna spam this on Twitter!!
November 3, 2009
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.
November 3, 2009
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?
November 3, 2009
great article with loads of good tips for in my future designs and websites
November 3, 2009
i just say that great，great ideas
November 3, 2009
Thanks Andrew for the great post!.
I will definitely use these tips on my upcoming personal website.
November 3, 2009
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.
November 3, 2009
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.
November 3, 2009
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 :)
November 3, 2009
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.
November 3, 2009
Wow, such a great post with plenty of info!
November 3, 2009
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.
November 3, 2009
absolutely an amazing post very useful and lost of great resources!
November 3, 2009
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.
November 3, 2009
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 :)
November 3, 2009
Great tips. Thanks.
November 3, 2009
@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!
November 3, 2009
Great tips, I wouldn’t expect anything less from MyInkBlog :)
November 3, 2009
Thanks for considering our navigation to be a good enough example to show here Andrew :) It’s an honor! Great post!
November 3, 2009
Awesome explanation.Great post.
November 3, 2009
Thanks for the post. Good finds on Footer design and footer information.
November 3, 2009
Great post with good examples! Thanks for sharing.
November 3, 2009
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!!! :)
November 3, 2009
Nice list. Search bar in the footer… Baskerville ampersands… GENIUS!
November 3, 2009
Really great post, I already got lots of idea’s in mind!
~ Michael
November 3, 2009
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!
November 3, 2009
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!
November 3, 2009
If more people knew about true webdesign during the times of Geocities, there would have been less blindness cases.
November 3, 2009
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…
November 3, 2009
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.
November 3, 2009
Very nice article. Thanks
November 3, 2009
superb read … :)
November 3, 2009
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.
November 3, 2009
I really like the bokeh effect. Thanks for sharing this.
November 3, 2009
Great work buddy!
November 3, 2009
Have to say you have a very high amount of patience and talent , excellent post with great examples .Awesome job
November 3, 2009
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!
November 3, 2009
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.
November 3, 2009
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..
November 3, 2009
What a brilliant post! loved it, enjoyed it and shared it. Thanks for the enlightenment.
November 3, 2009
Nice and informative. Excellent tips.
November 3, 2009
Good advices and links on use of gradients.
November 3, 2009
Well done and useful article.
November 3, 2009
Great post! I like how you demonstrated all the little subtleties that make for a great design. Thanks for the information.
November 3, 2009
i am really happy you shared this. :)
November 4, 2009
Great post :) Awesome !!! cool tips for avoiding stupid mistakes on websites :)
November 4, 2009
great post..excellent tips..well done
November 4, 2009
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!
November 4, 2009
Fantastic post, a lot of it is common sense but a lot there that some people wouldn’t immediately consider. Great job.
November 4, 2009
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.
November 4, 2009
excellent post! thanks!
November 4, 2009
Some nice tips here.
Will be applying some of these to future projects :-)
November 4, 2009
Fantastic article! I particularly liked the references to: http://www.poccuo.com/
http://www.snook.ca/
http://www.madebysofa.com
Great stuff! :-)
Regards
Karl
November 4, 2009
Loved this post! Got some great tips that designers should think about before creating a design!
November 4, 2009
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
November 4, 2009
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!!
November 4, 2009
Sharing with the design staff. Great tips. We will study them as implement them if possible.
November 4, 2009
WoW :) Nice post. Very informative. Thanks for sharing this awesome post.
November 4, 2009
@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!
November 5, 2009
Thats is nice………
November 5, 2009
Ideafry! helpful~ thank..
November 5, 2009
congrats,
a very good post with a lot of useful information.
thx for this
November 5, 2009
The fold does exist. Or at least management thinks it does…
http://www.codinghorror.com/blog/archives/001307.html
November 6, 2009
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.
November 6, 2009
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 :)
November 6, 2009
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.
November 8, 2009
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!
November 9, 2009
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.
November 11, 2009
Great job covered the basic thing in nice manner,these basic things we do not think about sometimes.
November 11, 2009
Very help helpful post, thanks :)
November 12, 2009
wow, thanks for these helpful post, I will use these tips for my website. thanks!!
November 16, 2009
your web design articles are awesome.
November 16, 2009
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!)
November 18, 2009
Nice article. Especially “2. Add white space” section. In my view excellent spacing and minimalistic approach are the most popular trends in web design.
November 19, 2009
Awesome post yet again Andrew.
November 20, 2009
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!
November 26, 2009
I totally agree about the subtle shadows and gradients. Great ways to make your site even better.
November 29, 2009
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.
December 7, 2009
Very nice post!
Keep up the great work!
Ovi Dogar
AbsoluteCovers.com
December 9, 2009
It is a very good post…
Keep blogging we are waiting for the next one…
December 9, 2009
Thanks 4 the best helpful tricks!! awsum !! :)
December 14, 2009
been really impressed by the quality of all site exemples!
thx, keep on producing that type of content, it’s gr8!!
December 18, 2009
Great, useful tips. It might help for all those who use default Wordpress theme for their blog :)
Thanks for another great post.
December 22, 2009
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
December 27, 2009
Very good ideas and at the same time good advise.
December 30, 2009
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.
December 31, 2009
Those are great tips man. This certainly inspires me. All the best for new year 2010.
January 2, 2010
Great tips! Thaanks a lot! =)
January 5, 2010
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!)
January 6, 2010
thanks for sharing they are all really wonderful
January 7, 2010
Thanks for the brilliant post
January 8, 2010
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.
January 14, 2010
Good work and very useful tips for the techie (who haven’t practiced those creative design skills yet)!
January 15, 2010
Great tips to add that wow factor!
January 19, 2010
Nice post.. :)
keep it up dude..
January 21, 2010
Thanks for the awesomeness, certainly gonna use this in my next design!
January 22, 2010
thanks for the tip and really useful tips
January 26, 2010
This is a nice post…spaecially adding white space to website..