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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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?
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
March 21, 2009
just like K.I.S.S. – simple principles lead to great results. Great article!
March 21, 2009
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…
March 21, 2009
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
March 21, 2009
Some new ideas here. Good examples too.
March 21, 2009
Spot on! Very useful article
March 21, 2009
Good work useful, inspirational.
T-Law´s last post was… Photo manipulations inspiration: Li Wei
March 21, 2009
great post! spot on!
Sean
http://twitter.com/SeanNieuwoudt
March 21, 2009
Great article!
AJ Troxell´s last post was… 10 Useful Twitter Articles
March 21, 2009
I always loved Robin William’s books. Basic concepts that we all sometimes forget.Great post.
March 21, 2009
Great post! Gratz :)
March 21, 2009
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.
March 21, 2009
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.
March 21, 2009
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
March 21, 2009
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
March 21, 2009
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.
March 22, 2009
Great site, will use it for my classmates
March 22, 2009
This is CRAP!
I mean Contrast, Repetition, Alignment and Proximity!
U hv KISSed it! LOL!
March 22, 2009
nice basics! :)
March 22, 2009
@srinin Yeah I noticed that acronym too, I was wondering if anyone else would :) Sure makes them easy to remember!
March 22, 2009
Great article.
You should have posted this article before one week!
I just redesigned my site. :P
March 22, 2009
nice list and important to remember when designing a new website!
March 22, 2009
Thanks for this article, very helpful.
March 22, 2009
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?
March 22, 2009
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!
March 22, 2009
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
March 23, 2009
very good article. i like your objective perspective. great examples. thank you.
Aaron´s last post was… Try a new perspective.
March 23, 2009
Good read, thanks!
March 23, 2009
Very useful post indeed. Thanks for clearly explaining each point with examples.
roma´s last post was… OUTLIERS by Malcolm Gladwell– A Review
March 23, 2009
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
March 23, 2009
Good list, I like this post!
Anh dep´s last post was… Ảnh đẹp cầu vồng-Awesome rainbow photos
March 23, 2009
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
March 23, 2009
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.
March 23, 2009
Nice hints, thanks. I love the Black Estate example, very classy.
March 23, 2009
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.
March 24, 2009
Very good work, very useful!
March 24, 2009
Great article, some of these sites are very inspiring.
tim´s last post was… Lightbox Extension For BlogEngine.NET
March 26, 2009
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.
March 26, 2009
Very good!!!!
Redsan´s last post was… Logofi, logos à gogo!
March 26, 2009
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
March 26, 2009
Neat article :)
March 26, 2009
Awesome post andrew!! I needed something like this!
March 27, 2009
Very interesting article!
Tanaka13 – Créations du Net´s last post was… The Legacy
March 27, 2009
I enjoyed this. Thanks!
Johnson Koh´s last post was… Create Powerball Effect for Movie Poster
March 29, 2009
aka CRAP! =D
April 1, 2009
Excellent article. Thanx a lot for sharing your thoughts.
Andris´s last post was… Kris Roe of The Ataris plays Blue Skies…
April 8, 2009
principles of crap!
April 20, 2009
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
April 24, 2009
Thanks for the inspiration: great ideas!
Tiph´s last post was… explanations, please
April 29, 2009
Kool, great idea
May 6, 2009
Thanx a lot for the post…It was of great help for me….
May 13, 2009
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
May 27, 2009
very very good article!
web agency´s last post was… fishermilano.it
June 3, 2009
Super-Duper site! I am loving it!! Will come back again – taking you feeds also, Thanks.
June 15, 2009
Cool. I Like it. Thanks :)
.-= Binoj Xavier´s last blog ..Running iPod / iPhone OS on Mac Pro =-.
June 15, 2009
Awesome article. Going to use some of these tips in our redesign. Thank you.
June 15, 2009
Nice and simple – as design should (often) be.
.-= Nikolai´s last blog ..External Link Icon =-.
June 15, 2009
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! =-.
June 15, 2009
Nice summary – Design 101 :)
June 15, 2009
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.
June 15, 2009
amazing stuff… very useful and worth the bookmark!
.-= Revenue Robot´s last blog ..How to view someones URL Statistics on Bit.ly =-.
June 15, 2009
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 =-.
June 15, 2009
oh yes, you are correct.
June 15, 2009
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.
June 15, 2009
Nice guys! this is cool!
.-= Chetan Madaan´s last blog ..The JM-Experts =-.
June 15, 2009
@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.
June 15, 2009
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/
June 15, 2009
Great tips, I will definitely try and use these in all future sites I deisgn :)
June 16, 2009
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.
June 16, 2009
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.. =-.
June 16, 2009
Thank you for the article! Great work — keep it up!
June 16, 2009
envato website is really very clean
June 17, 2009
Out of this world, fantastic andrew!
June 18, 2009
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 =-.
June 18, 2009
Great article has a lot of good tips, some are pretty obvious however it is always good to reinforce the basics.
June 18, 2009
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 =-.
June 19, 2009
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
June 20, 2009
really nice tips…keep the good work up
.-= PelFusion´s last blog ..15 Free High Quality Magento Templates =-.
June 24, 2009
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!
June 25, 2009
Nice.
June 26, 2009
Very interesting article, with some exceptional examples! Thanks for posting :)
June 26, 2009
Good Stuff.
Kourtesy’s Blog
June 30, 2009
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
July 7, 2009
Love it. Bookmarked it. Digged it. Tweeted it. Thanks.
July 20, 2009
Great article… Bookmarked!
Keep up the great work!
.-= london web designers´s last blog ..How to Use Keyword Research to Boost Search Engine Rankings =-.
July 22, 2009
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
July 25, 2009
Very interesting article, with some exceptional examples!
.-= HGH´s last blog ..The Real Truth About HGH That You Must Know =-.
August 14, 2009
Great examples, I like the gorilla and the easy invoice website the most.
August 19, 2009
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 =-.
August 24, 2009
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
August 25, 2009
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
September 12, 2009
This is good information for us.
This info help us.
September 21, 2009
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
October 7, 2009
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.
October 17, 2009
Awesome blog! Very nice!
October 19, 2009
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).
October 30, 2009
good fonts make a website, naff fonts ruin a good design.
November 6, 2009
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!
November 9, 2009
Great post. I love clean designs, and this article has reaffirmed that less is certainly more.
November 29, 2009
nice info..this is great knowledge..
November 29, 2009
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.
December 2, 2009
BRAVO!!! GREAT INFORMATION, THIS WILL COME IN HANDY SOMEDAY FOR ME!! THANKS!!!
December 10, 2009
Great article, thanks
December 14, 2009
Love the styles… especially the first three. Nice Job!
December 17, 2009
Great Article! Some times you just forget the basics when you have a deadline to meet. You have just solved my problem.
December 18, 2009
That is good post keep it up thanks
December 21, 2009
Great article. Thanks for sharing.
December 22, 2009
This has been the most tremendous post someone on the top mentioned that in order to meet the the deadlines we sometimes miss the basics which is very important..
Thanks mate!!
December 26, 2009
Excellent post. thank you very much for the collection.
December 30, 2009
Awesome post. Thanks!
January 4, 2010
Hi, having just got into Web Design seriously, I’ve been realising just how important it can be to keep it simple. This article really outlines all the key things for creating a website without having to write technically challenging code :). Thank you
January 7, 2010
This is really a very good post. Liked the way you have presented this.
January 13, 2010
Excellent !!
Color contrast and color choice may differ visitor to visitor, so i take vote. When I design a layout i design more than two then I show it to my client and my friends and my co workers asking their opinion on color selection and typography, i just take vote and the design get much vote I complete it for my client.
January 16, 2010
Incredible post I am such a big believer in white space. It can have such a huge impact on your design and how easy it is to read.
January 17, 2010
white space, is back , a few years ago people where just craming stuff in , now any website that wants to look sleek needs some clean lines
January 17, 2010
Thanks for offer great principles of good designing.
January 19, 2010
Great Stuff, A good resource for everyone who is not well versed with this side of things.
January 21, 2010
These are very cool designs.I will have to say that indeed, contrast is one of the most important aspects of design.
January 23, 2010
The Silverback site is fantastic, if only I could come up with ideas like that!
January 27, 2010
Great article and selection of websites, thanks!
February 1, 2010
Hi Andrew,
Thanks for this article. Good solid points and well illustrated with some great looking site.
Thanks
Colin :-)
February 2, 2010
Hey great information. Thanks for sharing.
February 6, 2010
There is alot to learn when it comes to GOOD web site design and I think you have pretty much hit the nail on the head here.. keep up the good work!