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.
59 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.
I really like the Skelliewag design - looks very stylish. In stark contrast to the John Chow blog which looks quite cluttered - mainly with advertising.
Man Mosaiko is the nicest blog design I have ever seen I love the 3D effect.
I would have to agree with Sam, John Chow’s site is so crammed with ads and loads so slowly because of all the extra crap (the real kind :)). It is at least usable with AdBlock.
Great little checklist. I’m afraid I agree with the comments that the johnchow site is far too busy to be considered good design. Although space is precious on websites, I think it’s still important to let elements ‘breathe’.
Not a designer and even not good in aesthetics. But really useful check list. At least will help to evaluate to finalize the design for the web site.
Thank you so much!
I’m not a design expert but I have always preferred the good use of space… Above the fold and good use of the right hand columns. You’re right that John Chow makes good proximity of his advertising… No space left unused. In fact, he just revamped his site again. I think I like it… I never understood his use of the car. People say it’s his brand he rarely blogged about cars. He did however continuously go on about fine dining
The best of the four designs has to go to Brian Gardner. He too has a new blog theme too. Excerpt style, no nonsense and ultra clean. At least that’s my preference.
I think alignment and proper placement of topic or post above the fold make the most difference in web design. For some reason i never liked pages with more than 2 rows they seem to busy to me. I like Skelliewag site the best.
I’m a fan of Brian Gardner. He always made a nice, neat and tidy WP themes. And the best, most the free themes is seo friendly. I learned a lot from him.
My business site themes were sourced from Brian. Not only does he do great themes - he does great support too!
Ian
I like mosaiko the best. Good layout and not too crowded with links or ads.
I am a web code developer right now, but I’d love to get into more of the visual design aspect of it. This CRAP tutorial is just what I needed, I don’t think I will forget that anagram.
Contrast and Proximity are most important in my mind. If site is hard to read with little contrast and content is spread all over the place people will just leave.
I think some sites have to much on a page. Sometimes simple is best. If your site has to much going on it is hard to draw persons eyes to what you want.
It is always a good idea to develop rules while you go into web designing and make sure each design abides by those rules. Yes, John Chow has made good use of page elements, while at the same time maintaining simplicity.
great comment about business
Sometimes simple design is better. if you have to much on poage people might find it hard to find what they are looking for. Also it might take longer for page to load and people will leave before they see what they looked for.
I think that Mosaiko is phenomenal! The layout is clean, and the graphic work up top is truly original.
On the other hand, I’m surprised to see John Cow used as an example of good element placement. I understand that bloggers have to make the most of their real estate, but the amount of stuff on there is insane. Not even a borderline case.
Then the site takes forever to load, and nothing comes up until most of it has loaded.
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.
Yes the designer does deserve some credit for grid focus, although Skelly 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.Also it might take longer for page to load and people will leave before they see what they looked for.
If people have hard time finding what they searched for on your site they usualy leave fast. Make it easy to find what they want and give them all the information you can and they will come back more often.
Wow, this article is simple yet well thought-out. Newbie designers would do best to keep these qualities in mind when designing. Actually, those four qualities are considered the “basics” of art and design, and are taught as foundation subjects in most art and design schools. Somewhere along the way, I think students tend to forget or disregard them.
I particularly like the Mosaiko design, very appealing and fresh, professional yet fun at the same time. John Chow is too cluttered in my opinion, and you probably could have found a better example than that.
But overall great article!
I’ve always preferred usable design to fanatical design. Function over for,
Hi Simon, I am totally convinced with your CRAP principal. Many of the great designers make some silly mistakes in web designing. This CRSP thing will be a good cross check to them.
Thanks for the great post.
Most people don’t know the importance of having a really great looking website. It’s the image that will be associated with it. Which could be an important reason to whether you get a customer or just a web visitor.
Skelliewag really does have a nice design–very clean and simple. I always appreciate posts on why certain designs are more pleasing than others. You can always tell when a site looks good or bad, but it’s nice to actually get a better understanding of why you feel that way.
Great post! Thanks!
I think the most important part of a design is selling (or at least it is for me). Sometimes a nice professional design is what is required to get people focused in, but it is something that is definitely a niche thing.
Other niches don’t really need it. I have some crappy looking sites that produce money.
Not only does it make the site look better a good design makes it easier for people to find what they are looking for and find other things that they might like. If it is hard to find the information they want people will go to another website.
I’m a non-designer, and have been slowly learning the design process. This CRAP acronym is definitely useful and makes a lot of sense not to mention easy to remember!
Came all set to look at a gallery of hideous websites, only to find you’ve chickened out and presented good examples
Mosaiko looks great though. I give extra points for originality.
I think web design is the absolute number one important thing to get right on a website. If your site isn’t designed properly, i don’t believe their is any amount of content or advertising you can do to keep users from leaving your site. If its now laid out nice and neat, nobody will read it.
oh and i really like the C.R.A.P acronym, never heard of this acronym being used before!
I think contrast and alignment are most important. If you have hard time seeing because of contrast people go to another site.
I like a site with 2 coloums most of the time but john chows site looks good with 3. Some great tips thanks.
Interesting take, although I think the contrast and proximity parts are debatable.
Especially the claim that “everything on your site should be connected.” A lot of people will say that minimalist tendencies are the most effective. For example, if you look at any of Google’s content, there is a lot of white space and its professionalism comes from simplicity.
I think a simple design that is easy to read and has topic right where people see it when they go to site works best. Make sure the content they are looking for is above the fold so they do not have to scroll down page.
The layout of the design can make or break a site. If it is hard to find the information you want most people leave. Some sites look busy and have to much to look at. Sometimes simple designs work best.