I want to discuss some of the key principles of design. When I teach design to school kids I use the acronym CRAP for them to remember, which stand for: Contrast, Repetition, Alignment and Proximity. These terms come from the book The Non Designers Design Book. If you evaluate a design using these terms, you can see how they are almost always present in well designed sites and print.
Contrast - the difference in visual properties that makes an object distinguishable from other objects and the background. - Source: Wiki
Original theme used at Skelliewag Grid Focus
Skelliewag makes very good use of contrast. The dark text and page elements make them easily distinguishable from the background, and there is also a contrast in size used in the logo where the .org font is much smaller than that rest of the letters.
Repetition - repeat styles down the page for a cohesive feel. Source: Vitamin Features
Among other good design features Mosaiko makes good use of repetition. There is a button section in the side panel where the color of all the logos have been altered to keep the color scheme repetitive. The color scheme is consistent throughout. The article image header shape and size is repeated throughout. Font sizes and design are repeated also. Overall, a very effective site design.
Alignment - Everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements. Source: Vitamin Features
A strength in Brian Gardner Wordpress themes is that they all seem to have very good alignment. Have a look at his homepage and any of his themes to see good use of alignment.
Proximity - Proximity creates related meaning: elements that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different. Source: Vitamin Features
One of the main strengths of John Chow’s new theme is the effective placement of page elements, which gives the site good proximity. The four blocks visible in the screenshot show related objects grouped together effectively.
Final Thoughts
Evaluating your design work using the CRAP design principles is good way to double-check your work. If you constantly question the details of your design work, good habits will develop.
25 Responses to “Is Your Web Design CRAP?”
- 15 Common Web Design Mistakes That You Should Avoid : Pingable.org | Blogging & Design
- 15 errori di web design
- zappad » Blog Archive » 15 errori di web design
- 15 errori di web design « gp
- Is Your Web Design CRAP?
Leave a Reply
Thanks for the write up, Simon. I think this will be a really useful resource of people looking to dip their toes in design, or judge whether a theme is a good choice or not :).
John chow dot com is a horrible example of good web design. I thought it was an example of bad design at first.
Yes, he pushes a copious amount of advertising on his users and his posts of recent have little to no substance in them, however, I think the designer of his new blog Nate Whitehill has done a good job. Specifically it makes good use of proximity by grouping elements together in box’s. So although I agree with you in some ways Sam, I feel the screen shot still serves it purpose to show good use proximity… even if you don’t agree the overall design is good. I really need to stop using his name in posts though. Cheers.
Very instructive! Totally by coincidence I discovered Skelliewag blog just a few minutes ago and thought, very nice layout. I like the use of images–they really draw you in, whereas John Chow is visually unappealing to me.
Yes, I totally agree that Skelliewag has a great all around layout. I am starting to think it may not have been such a great idea to use such a high profile, controversial blogger, JC as an example screen though.
Well, no matter what you think of Chow’s design, you can’t argue with success. People see things differently. With Skelliewag, my eyes go right to the post title, and it’s a good one. Then I see a dramatic image and I’m drawn in–I want to read the post. On Chow’s site, I don’t know what to look at first. To me, the images compete with one another.
nice post!
but i think you should link back http://5thirtyone.com/grid-focus and not Skelliewag.
and there is one more great site that is modified from Grid Focus theme,
http://ilovetypography.com/
Thanks for the info Wallace, Yes the designer does deserve some credit for grid focus, although skellieway does make very good use of the theme, with great use of photos and an a good logo, which was part of my explanation of ways to under contrast.
I am not a Web Designer by profession. After reading your post I just tried to check my own design (http://software-testing-zone.blogspot.com) and it turned out to be holy CRAP!!!
Any Comments? 
@ Software Testing Zone - I think your site has some good aspects of design, it’s certainly not all bad. You have a strong readership and plenty of comments, so it can’t be all bad. Some suggestions would be to make a slightly larger gap between you article and the side bar, it is a little close and makes the page a little crowded. You could also work on emphasis. Your heading block has a lot of information, maybe too much for one to take in at a glance, perhaps you could narrow that down a little. Just little small tweaks and you will have a solid design! Also if you want free images to use that look slightly more pro and less clip art like check out some of the sources at: Free Stock Image Sites
Simon,
I tried to figure out your above comment. As I could see no comments from any “Software Design Team”, so I am assuming that the above comment was for me (http://software-testing-zone.blogspot.com). Please correct me if I am wrong. In case your above comment was not about my blog design, kindly try to find time to visit it and comment your ideas about the design. Thanks in advance.
-Software Testing Zone
Yes sorry, I am not sure how I managed to type the wrong name, I was doing a few things at once, the commment was directed at you
Thanks so much…
Those are 4 great concepts to keep in mind. I think John Chow’s site is just fine, it’s obviously successful. Also, The Cow’s site is pretty spiffy in terms of design as is Problogger..Just my 2 cents!
Thanks for the tips. Design is a challenge for me and I think these recommendations will help me judge themes in the future. I love the use of the word crap by the way!
Thanks for this article, really helps me a lot…
Hope you can post and share your thoughts about on web designs.. cheers!
Nice article, a sound concept which should help a lot of designers - if they would just pay attention to it!
The title of article really get into me..haha
Really need to improve more..
- just a newbies, need to learn more -
Well, it’s really hard to judge web designing mainly because when may look bad to one person may look amazing to another. I think as long as the design is not “cluttered” and the font is legible than you’ll be alright.
Some good points on a good web design. I can not tell you how many people make site blend in too much and space rows wrong. If you can not pick out different articles on site because they do not use good contrast people will not stay on site very long.