4 Principles of Good Design for Websites

By   |  Stashed in Webdesign

4-principles-lg

One of my absolute favorite design books is, Robin Williams Design Workshop. It looks into practical design theories and showcases awesome examples. One of the areas of focus that I’ve taken into all my designs are the four major design principles. They include: contrast, repetition, alignment, and proximity.

This post will discuss those four principles as they relate to web design. By keeping these design theories fresh in your mind, you will be sure to design cleaner, more aesthetically pleasing sites.

1. Contrast

Great contrast can leave a very good first impression on a user. Without a focal point, the viewer is generally lost in a sea of equally-sized elements and typography. It’s the designer’s job to create visual elements of significance that guide the user’s experience. You can achieve great contrast on your site by choosing your images, colors and fonts wisely.

Contrast With Images

It’s often very effective to showcase a large illustration next to smaller elements. Here’s what I mean:

The Invoice Machine

This site utilizes a large image to bring in the reader’s attention. Also the monochromatic nature of the site allows the limited use of blue to play a bigger role.

invoice-machine1

Instabox

Do the eye test on this site. What do you notice first? More than likely it’s the star on the box. Just like The Invoice Machine, they’ve created a focal point using a large image and limited color.

instabox1

Contrast With Colors

Sprinkling in color at just the right amount is another way to create effective contrast within a website. It can be created using a different color in headers and text copy, as well as within the colors of an image or illustration.

Fatburgr

This site is a fantastic example of almost all of the design principles. For color contrast take a look at the large yellow header versus the smaller light gray copy. Alignment, image contrast, repetition and proximity are all strong throughout.

fatburgr

I Love Typography

Is it any surprise that a website built to showcase typography would give us a great example right in its own header? I love their font choice and how the green color plays nicely off the darker gray.

i-love-typography

Contrast With Fonts

If you are trying to create contrast with fonts you should avoid using two very similar font faces and sizes. The similarity of the fonts tends to create confusion and blur the design. However, it can be very effective if you make the font sizes very different, or mix the lightest version of the font in combination with the boldest. Also, you’ll be surprised at the visually impressive combos you can create by using two very different fonts in tandem. For instance a san serif font with a hand-written font.

Fixie Consulting

Wow! I love the typography and colors on this site. Check out all the size and stroke variations on their slogan. I also love the grunge that is sprinkled in, and the limited use of blue.

fixie-consulting

2. Repetition

Repetition in print design is much more common than it is in web design, however it can be equally effective. Repeating design elements helps create a consistent look and improves branding. In web design a great way to achieve this is by repeating elements in the header and footer. Check out a couple of examples below.

Ten24 Media

Ten24 Media uses a creative grass illustration in both the header and footer.

ten24-media

Silverback

This site is just awesome! I definitely could have showcased it in the contrast section, but it works just as well here because the theme and branding are clearly used throughout. Check out the use of the bananas as bullets, and the forest illustration at the header and footer.

silverback

3. Alignment

Alignment plays an intricate role in taking your site designs from looking amateur to professional. I’ve recently become a huge advocate for designing sites using a grid. Doing so cleans up your designs and gives you an awesome framework to work from. If you’re interested in learning more about designing for a grid, check out my recent post (insert shameless self promotion here), Design A Fresh Blog Theme On The 960 Grid.

Black Estate Vineyard

This site is showcased on the 960 Grid website. It’s alignment is consistent and striking. I love the way the main content is left justified and flush in its column, however some of the larger level headings break the rule and shift into the left sidebar. They also do a good job with generous amounts of white space and contrasting sized fonts.

estate-black1

A List Apart

A List Apart features a visually obvious grid. The columns are well defined and contain everything in very readable chunks. Studies have shown that really wide columns drastically reduce readability. Your eyes will get tired when trying to follow text across wide column widths. A List Apart also features a fantastic article that argues, Good Designers Redesign, Great Designers Realign.

a-list-apart1

4. Proximity

The last principle is proximity. This has to do with grouping like elements together and separating those that are not. It can really ruin user experience if you group everything into one lump text block. That’s why its very important to use header tags and proper spacing.

Envato

This site does a beautiful job of organizing it’s content into three major categories. They are well spaced and clearly defined.

envato

Paradigm Reborn

This site is well structured. The headers are clear and concise. The spacing is good and the content is separated into logical chunks.

paradigm-reborn

Final Thoughts

It’s unbelievable how much better your designs will become when you take into consideration these four basic principles. There are always more things to consider, but a foundation of contrast, repetition, alignment and proximity will improve your designs dramatically.

Your Turn

Join the discussion. What do you think of these design principles? Are there more that you’d like to share?

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://sashaendoh.blogspot.com/) Sasha

    just like K.I.S.S. – simple principles lead to great results. Great article!

  • http://www.creativewhirlwind.com brian

    Great List! I know quite a few businesses that could do well to pay attention to these principles.

    brian´s last post was… If you don’t know who Paul Rand is…

  • http://www.suberapps.com Ben

    Very good article, all the good principles of design has been explained here, I can’t agree more with having enough contrast in a site to make it more appealing.

    Ben´s last post was… Lounge – Twitter App for Mac and iPhone

  • http://www.wpdone.com WPDONE

    Some new ideas here. Good examples too.

  • http://www.redcubemarketing.com Gemma Went

    Spot on! Very useful article

  • http://iniwoo.net T-Law

    Good work useful, inspirational.

    T-Law´s last post was… Photo manipulations inspiration: Li Wei

  • http://www.isean.co.za Sean Nieuwoudt

    great post! spot on!

    Sean
    http://twitter.com/SeanNieuwoudt

  • http://phiredesign.net AJ Troxell

    Great article!

    AJ Troxell´s last post was… 10 Useful Twitter Articles

  • http://tutsearch.net Art Webb

    I always loved Robin William’s books. Basic concepts that we all sometimes forget.Great post.

  • http://www.thonyconde.com Thony Conde

    Great post! Gratz :)

  • http://www.metropoliscreative.com Michael Flint

    Nice collection of nice designs. Of course, your principles apply to print design as well. One more and you’ve got all of the Gestault Principals.

  • http://www.element3media.com joshua murphy

    Great post, great sites and great advice. I hope that people really listen up and start to impliment these things in to their own sites very soon.

  • http://www.thisinspires.me Brandon Cox

    It’s pretty obvious you’ve put a lot of time and effort into this article – awesome work! Gonna feature it in my favs tomorrow!

    Brandon Cox´s last post was… Inspiring Design Links for Creatives for 2009-03-21

  • http://www.janpaultenwolde.nl/ Jan Paul ten Wolde

    It is such a good collection I am actually sending it around to inspire my web designers. Thanks!

    And a nice plugin below you have!

    Jan Paul ten Wolde´s last post was… Coder needed #1

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

    Love all the great feedback on this post, thanks guys!

    @Brandon Thanks for the feature :)

    @Jan Thanks so much, I hope it does inspire some good design, remembering these principles has always helped me.

  • http://osweb.dk Michael

    Great site, will use it for my classmates

  • srinin

    This is CRAP!

    I mean Contrast, Repetition, Alignment and Proximity!

    U hv KISSed it! LOL!

  • http://misterfaster.com MisterFaster

    nice basics! :)

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

    @srinin Yeah I noticed that acronym too, I was wondering if anyone else would :) Sure makes them easy to remember!

  • http://thedesignsuperhero.com aravind

    Great article.
    You should have posted this article before one week!
    I just redesigned my site. :P

  • http://www.1klang.de frank katzer | 1klang.de internetagentur / fulda petersberg

    nice list and important to remember when designing a new website!

  • Meshach

    Thanks for this article, very helpful.

  • http://chedonline.com Ched

    Well said. Great examples. While websites IMHO don’t all have to follow these principles to be effective, these are tried and true principles that speak the language of web design.

    Ched´s last post was… Magazines Reborn in Music Video Form?

  • http://www.teddy-o-ted.com teddY

    I’ve seen long lists of what it takes for a design to be considered good – and yours is simple, short, concise, elegant and easy to remember. I will have to say that indeed, contrast is one of the most important aspects of design. We aren’t lacking any negative examples of contrast (I bet everyone would have stumbled on at least one webpage that has pink background and lime-green fonts) and typography (Comic Sans MS, anyone?) out there, but when it comes to getting awesome examples, they’re hard to come by. You’ve listed excellent examples of webpages that can proudly strut their stuff :) thank you so much for sharing!

    *Note to self – when I’m in for a redesign, I’ll definitely return and read this article over again, just in case.

    teddY´s last post was… Tilt-shift Time Lapse Photography Video – Oh my darling!

  • http://alankun.com Alan

    Thanks a lot Andrew! I’m a self-taught web designer, not even an intermediate but this post is awesome, I’ve bookmarked it as soon as I read it, congratulations, you’ve taught me a lot in this post and I’ve suscribed to your blog.

    Cheers :-)

    Alan´s last post was… Spotify, música gratis y la revolución musical

  • http://aarondommer.com Aaron

    very good article. i like your objective perspective. great examples. thank you.

    Aaron´s last post was… Try a new perspective.

  • SS

    Good read, thanks!

  • http://romaspace.wordpress.com roma

    Very useful post indeed. Thanks for clearly explaining each point with examples.

    roma´s last post was… OUTLIERS by Malcolm Gladwell– A Review

  • http://www.frigidhair.com Rebecca Geiger

    Great Post! I have homework to do and perhaps overhaul my website. Thanks for the post I found this an inspiration and new goals to achieve.
    Rebecca

  • http://xemanhdep.com Anh dep

    Good list, I like this post!

    Anh dep´s last post was… Ảnh đẹp cầu vồng-Awesome rainbow photos

  • http://www.csskarma.com Tim Wright

    Good list. I’d like to see more than 4, but overall pretty good.

    Tim Wright´s last post was… SXSW Notes pt. 4 – Managing “Expert” Clients

  • http://www.cancelbubble.com cancel bubble

    Ah yes, the C.R.A.P design principle, very fundamental. It’s interesting how many designers don’t know this – at least from interviews I’ve been in on.

  • http://www.thebaublegarden.com Angela

    Nice hints, thanks. I love the Black Estate example, very classy.

  • http://thecartoons.net Donna Barstow

    I love Robin Williams’ books, too, although I haven’t read this one. But she has those rules in her early ones, but I believe she calls them CARP…or at least, I’ll take that, since a commenter recently suggested I sell carp rather than cartoons.

    Donna Barstow´s last post was… I only use Paul Newman’s legendary salad dressing.

  • http://www.wordpressgala.net WORDPRESSGALA

    Very good work, very useful!

  • http://dailycycle.co.uk tim

    Great article, some of these sites are very inspiring.

    tim´s last post was… Lightbox Extension For BlogEngine.NET

  • http://www.faridhadi.com Farid Hadi

    Although these might just be the basics, I found this article as a helpful reminder. Being more of developer I’m constantly trying to improve my design skills.
    Thanks for a really great article Andrew!

    Farid Hadi´s last post was… PIXY gone CRAZY! Post your Freelance Gigs on PixyJobs for $1. Offer valid till 1st April 2009.

  • http://www.redsan.com Redsan

    Very good!!!!

    Redsan´s last post was… Logofi, logos à gogo!

  • http://www.zenelements.co.uk/blog/ Zen Elements

    Great article and I especially like the point that was raised with image size / placement against text when discussing contrast.

    Keep up the great work!

    Alex

    Zen Elements´s last post was… Coding XHTML & CSS Sprite Navigation

  • http://www.DreadKnight666.com Dread Knight

    Neat article :)

  • http://www.timothybsmith.com Tim Smith

    Awesome post andrew!! I needed something like this!

  • http://www.flickr.com/photos/danielgilles/ Tanaka13 – Créations du Net

    Very interesting article!

    Tanaka13 – Créations du Net´s last post was… The Legacy

  • http://10steps.sg/ Johnson Koh

    I enjoyed this. Thanks!

    Johnson Koh´s last post was… Create Powerball Effect for Movie Poster

  • http://alisonfoxall.com Alison

    aka CRAP! =D

  • http://www.andrislinz.ch Andris

    Excellent article. Thanx a lot for sharing your thoughts.

    Andris´s last post was… Kris Roe of The Ataris plays Blue Skies…

  • Matt

    principles of crap!

  • http://designmovesme.com Roy Vergara

    these are actually the basic principles of design. these would apply to anything you’re designing.

    Roy Vergara´s last post was… 40 Beautiful PSD Slicing Websites

  • http://sharpiechronicles.blogspot.com Tiph

    Thanks for the inspiration: great ideas!

    Tiph´s last post was… explanations, please

  • http://www.batterylink.us jane

    Kool, great idea

  • http://www.arunjlab.com Arun J

    Thanx a lot for the post…It was of great help for me….

  • http://www.crearedesign.co.uk Danielle Ingram

    Having just started to get into web design I have found that there is a lot to learn.

    Previously, I have played around with creating websites of my own and one of the main things that I have learnt is that simplicity is key.

    This is a great post, it outlines everything you need to know in order to create a professional looking website without necessarily being a technical whizz!

    Thanks

  • http://www.cdweb.it web agency

    very very good article!

    web agency´s last post was… fishermilano.it

  • http://www.justsimple.com.au John

    Super-Duper site! I am loving it!! Will come back again – taking you feeds also, Thanks.

  • http://www.webdesigner-kochi.blogspot.com/ Binoj Xavier

    Cool. I Like it. Thanks :)
    .-= Binoj Xavier´s last blog ..Running iPod / iPhone OS on Mac Pro =-.

  • http://www.mcrrentals.com Rob Lewicki

    Awesome article. Going to use some of these tips in our redesign. Thank you.

  • http://www.webdesign-guru.co.uk/icon/ Nikolai

    Nice and simple – as design should (often) be.
    .-= Nikolai´s last blog ..External Link Icon =-.

  • http://www.wichmandesign.com Nick Wichman

    I like this article. It gives a great overview of a couple of the foundations of the web design process. These are just a few of the things to think about when designing. I think “repetition” would be better titled CONSISTENCY since it is referring to the design style of a site being overall consistent. Great article, though!

    @nickwichman
    .-= Nick Wichman´s last blog ..Design for client, not yourself! =-.

  • http://www.nburmandesign.com Media Designer

    Nice summary – Design 101 :)

  • Nope

    This to me seems like a duplicate article I read on Smashing Magazine…from the content to the example sites used. You very well could have been the original author, but mentioning it was posted somewhere else would be nice. Unless you stole the idea.

  • http://revenuerobot.com Revenue Robot

    amazing stuff… very useful and worth the bookmark!
    .-= Revenue Robot´s last blog ..How to view someones URL Statistics on Bit.ly =-.

  • http://www.luisramirez.org Luis Ramirez

    love the article forwarding it on to a couple of folks that can benefit from these examples… i may have to give the book a go as well.
    .-= Luis Ramirez´s last blog ..Coburn Yoshida Award =-.

  • http://www.redesignyourbiz.com/ I Love My Work

    oh yes, you are correct.

  • http://www.granercreative.com AC Graner

    I hate, abhor and detest reverse type, especially on the web. Studies prove reverse type is hard to read–and often isn’t. (You can look it up.) Sure, designers love reverse type because it looks cool. But the purpose of communications is to communicate, and anything that inhibits that is a waste of time and money.

  • http://www.jm-experts.com Chetan Madaan

    Nice guys! this is cool!
    .-= Chetan Madaan´s last blog ..The JM-Experts =-.

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

    @Nope – The article was not stolen from anywhere, to say that you’ve found other articles on what makes up good design is like saying you’ve found another design blog. This post was inspired mostly by the book that I clearly mention right at the beginning of the post. I did a quick search for a Smashing Mag article you may have been referring to, and found this: http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ It’s a very good write up, but by no means did I steal any content from it.

    @AC – I suppose if you are making a corporate type site you may want to avoid reverse type, however, I still like it. And certainly with designer sites, apps sites, and personal blogs, reverse type works quite well.

  • http://www.haul.com.au/_catalog_38702/MacBook_Sleeves Scott Kilmartin

    Andrew,

    A very timely piece. We are in the midst of redesigning the haul website to both build brand and sell product. Often this is a hard balance to find.
    Your article simplifies key points very well.

    Our web designers will enjoy this post.

    http://twitter.com/ScottKilmartin
    http://haul.com.au/

  • http://www.singleviews.com Derek Leblanc

    Great tips, I will definitely try and use these in all future sites I deisgn :)

  • http://www.russelluresti.com Russell Uresti

    C.R.A.P., or Contrast, Repetition, Alignment, and Proximity are often taught as the 4 basic principles of design. That’s all design, and not just web design. This article might better be titled as examples of how those 4 principles of design are used effectively in web design.

    This article is well constructed, and uses good examples. The explanations are simple and easy to understand. I think it’s a good article for beginners. Often people think “web design” is “look what I can do in photoshop” and don’t pay attention to the actual principles and elements of design. So it’s good to remind people that there is a starting formula for what you create.

    I think some of the explanations are a bit lacking. You did a good job covering Contrast, explaining that you can create contrast via size (though you spoke only about images, ignoring that you can also use different sized fonts), color, and typography.

    The description of Repetition I find to be extremely lacking. You only talk about repeating elements in a header and footer, though you do mention that it’s important for consistency. Repetition is used tons of ways on a site. For example, making all the headers the same / color. Or making all the links the same color and all hover with the same decoration. Or having a certain treatment to the horizontal rules you use to divide the content sections of your site. Or using icons in the navigation and then repeating them in the content. There are tons of examples of Repetition in web site design, and you skipped over quite a bit of it.

    Alignment you covered well. I feel there’s not too much you can actually say about alignment, other than “Hey, make sure your s*** lines up!”. The examples were good examples, and I definitely agree with using a grid as the starting point of a design (I always start my designs with a 3, 5, or 7 column grid).

    Proximity is also well described with good examples.

    When I was in school, I was actually taught 7 principles of design. Balance, Contrast, Emphasis, Movement, Rhythm, Pattern, and Unity. Others teach things like Gradation. There is actually no official “Elements of Design”. They seem to vary from philosophy to philosophy.

    I really think Emphasis and Movement are principles of design that are worth stressing. Emphasis being the focal point (what’s the first thing you see when you come to a site), and Movement being how the eye travels along the page from one content section to another (does anything tie the sections together, or are they kept apart). They’re both extremely important in effective web design.

    But this post has definitely given me an idea or two, so thanks for posting.

  • http://www.twitter.com/sr77in shine

    Nice ones..Especially I like the typo one and Instabox…but can’t agree on fatburgr..
    .-= shine´s last blog ..sr77in: wify had her first day in school as a teacher..her long nursing dream come true.. =-.

  • http://www.graticle.com Shawn Hooghkirk

    Thank you for the article! Great work — keep it up!

  • http://www.orphicpixel.com Mars

    envato website is really very clean

  • http://www.2xpertsdesign.com Akhtar

    Out of this world, fantastic andrew!

  • http://www.gigglecomputer.com Phaoloo

    Great principles. They are all basic stuff but if you follow all of them, your design will rock!
    .-= Phaoloo´s last blog ..PeaZip – Flexible And Powerful Archive Manager For Bloggers =-.

  • George

    Great article has a lot of good tips, some are pretty obvious however it is always good to reinforce the basics.

  • http://twitter.com/dSine_Lab d*Sine Lab

    Can’t skip the basics. I’ve seen some amazingly complicated artwork for websites that lack the basic math.
    .-= d*Sine Lab´s last blog ..dSine_Lab: Working on the Mac today. Ahhhh, miss these expedient shortcuts. #apple =-.

  • http://www.stage5studio.com Danny Silva

    Hey Andrew,

    Nice write up, and thanks for the kind words. First time stumbling across your blog…good stuff. I’ll have to stop by more often.

    D

  • http://pelfusion.com PelFusion

    really nice tips…keep the good work up
    .-= PelFusion´s last blog ..15 Free High Quality Magento Templates =-.

  • http://www.daydesignz.com dayaday

    This a wonderful article, I’m a self taught web developer that went to school for Information systems. I didn’t formally go to school for design so this article is essential for some of my new projects. Thanks so much for this!

  • http://divyasharad.blogspot.com div

    Nice.

  • http://www.sjlwebdesign.co.uk Sam

    Very interesting article, with some exceptional examples! Thanks for posting :)

  • http://kourtesy.blogspot.com Kourtesy
  • http://www.vinfotech.com/ Viscus

    Hello,

    These are really good design principles. Although at first sight they may not look so great but these rules are quite significant for a good website design. Amateur designers should memorize these design principles

  • http://www.northstar-website-design.com/ Fred Campbell

    Love it. Bookmarked it. Digged it. Tweeted it. Thanks.

  • http://www.webdesignfromscratch.com/ london web designers

    Great article… Bookmarked!

    Keep up the great work!
    .-= london web designers´s last blog ..How to Use Keyword Research to Boost Search Engine Rankings =-.

  • joseph m bott

    I like using concepts such as contrast, alignment, repetition and proximity and can see how they are valuable tools. One thing I noticed in the examples is there appears to be a relationship between each concept and page space when rendered. This relationship appears to be a 3 to 1 ratio. To achieve the desired focal point is the page conceptually divided into thirds and each section divided into thirds again? Will continuing dividing the area into this golden ratio produce alignment, repetition and proximity?
    Is contrast associated with objects shapes as well as color.

    Some thoughts about the article. joe

  • http://www.hgh-growthhormone.com HGH

    Very interesting article, with some exceptional examples!
    .-= HGH´s last blog ..The Real Truth About HGH That You Must Know =-.

  • http://www.samsungomniapro.nl samsung omnia pro

    Great examples, I like the gorilla and the easy invoice website the most.

  • http://www.vouchersmarter.co.uk voucher codes

    Very helpful! one thing I noticed in the examples is there appears to be a relationship between each concept and page space when rendered.

    Thanks,
    Sharon
    .-= voucher codes´s last blog ..CC Fashion voucher codes =-.

  • http://www.neotericuk.co.uk Website design

    Beautiful collection of designs i truly agree with the fact that contrast, font selection both are crucial half of the job is done if we choose the right colors and right font , the one here i liked is envato and the first one black design i liked them very much

  • http://- Scott Carson

    Hi – I am a secondary teacher teaching basic website design to yr 8′s using Dreamweaver. This site is fantastic. A free site that actually is useful. Well done!!! I will use this to explain the Principles of Design to my Yr 8′s (CRAP)!

    Thanks again,

    Scott

  • http://www.nomiinfotech.com/ Web Development India

    This is good information for us.
    This info help us.

  • http://www.psprint.com/postcards Ashley Adams : Postcard Printing

    Wow……now this is what I call an informative article. I just loved the way you have explained each principle. Great effort. I believe both the beginners and the professionals will benefit from these examples. Thanks

  • http://www.lekmer.se/ Schleich

    Good article. The website examples you showed had great designs. It´s reminds me that I have to work on my design knowledge and this was a start.

  • http://onlineparfume.dk Nikolaj Bomann Mertz

    Awesome blog! Very nice!

  • http://stevenwscott.com Steven W Scott

    For typography I like Arial font (it looks real nice) or if you really people to read your words then Georgia font is great because that font is specifically designed for people to read print (similiar to some major newspapers).

  • http://www.discountmole.co.uk/ Discount Mole

    good fonts make a website, naff fonts ruin a good design.

  • http://www.timecenter.com/blog/ Daniel The Scheduling Wizard

    I love these kind of lists. I have seen The Invoice Machine before, it’s really pure. The buttons remind me of Nintendo Wii. =)

    I think the hardest part is to find the design language that will suit the purpose of the site. But at the same time being different enough to get noticed. +1 Follower on Twitter!

  • http://www.owendevelopment.co.uk Manchester Web Design

    Great post. I love clean designs, and this article has reaffirmed that less is certainly more.

  • bivinci

    nice info..this is great knowledge..

  • http://www.blogigo.co.uk/Composite_Doors composite door news

    For color contrast take a look at the large yellow header versus the smaller light gray copy. Alignment, image contrast, repetition and proximity are all strong throughout.