Is Your Web Design CRAP?
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.
Tags: Advice, Design, Graphics, Principles, Tips, Web Design
Trackback from your site.
Comments (106)
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
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 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.
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.
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.
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.
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.
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!
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,
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.
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.
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.
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!
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 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.
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.
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.
I really appreciate the design tips. I think the biggest mistake people make is not using white space in page layout designs. Some people think every space needs to filled with something. This is very distracting.
Probably the most important thing, if you want any kind of web design, is to decide what the site supposed to _do_ for you. Many designers can create an impressive-looking site; then what?
If it’s doing what you want, then looks are secondary.
Probably the most important thing, if you want any kind of web design, is to decide what the site supposed to _do_ for you. Many designers can create an impressive-looking site; then what?
If it’s doing what you want, then looks are secondary.
I love the acronym. It’s a great way to avoid missing critical elements in your design. CRAP is a great rule of thumb when approaching (or re-evaluating) a site design.
I’ll work on my design being more CRAP oriented. Love the acronym. I think you put this is simple terms that even I can understand and you use great examples to explain your point.
I’ll work on my design being more CRAP oriented. Love the acronym. I think you put this is simple terms that even I can understand and you use great examples to explain your point.
I admire people who has the intuition for graphic elements and composition. Some parts of it are teachable and for some you have to have the”eye” for it. Thank you for showing up the important points.
In that case I am proud that my website is CRAP.
Thanks for these insights. When I see designs I like I know I like them but don’t know why. Now I can see what makes them good.
Thanks for these insights. When I see designs I like I know I like them but don’t know why. Now I can see what makes them good.
Every site can be torn apart under the right scrutinizing conditions. There is a fine line between functionality and eye-candy. Some people are better at dancing on that line than others. One thing is forsure: it is fun to see examples like these.
Every site can be torn apart under the right scrutinizing conditions. There is a fine line between functionality and eye-candy. Some people are better at dancing on that line than others. One thing is forsure: it is fun to see examples like these.
Wow, this article could be used as basis in checking the standards and fundamentals in creating web designs. Good job.
Wow, this article could be used as basis in checking the standards and fundamentals in creating web designs. Good job.
No doubts it is a great post. I don’t just enjoyed on the words but I also enjoyed its examples of themes and designs. I must say that this is a must to read for beginners in web designing.
“is your web design crap” haha straight to the point. more inmportantly the tips breaking web design down into processes are very useful. really like the Skelliewag site
“is your web design crap” haha straight to the point. more inmportantly the tips breaking web design down into processes are very useful. really like the Skelliewag site
Web designing is one of the best way to earn money. Your tips will give a big help for beginners like me..
Web designing is one of the best way to earn money. Your tips will give a big help for beginners like me..
Attractive things work better and help focus and keep the user’s attention. Memorable design increases excitement for products and brands, leading to increased engagement. As designers,the job is to communicate ideas effectively. For every particular message,
designers create a context in which the message would work best, guiding users to achieving their tasks, gaining their trust or convincing them of whatever we’re communicating. Of course, there are endless ways to create this context. One of them is to design for visual aesthetics, surprise, joy, happiness — design for delight; design to be memorable and remarkable.
Attractive things work better and help focus and keep the user’s attention. Memorable design increases excitement for products and brands, leading to increased engagement. As designers,the job is to communicate ideas effectively. For every particular message,
designers create a context in which the message would work best, guiding users to achieving their tasks, gaining their trust or convincing them of whatever we’re communicating. Of course, there are endless ways to create this context. One of them is to design for visual aesthetics, surprise, joy, happiness — design for delight; design to be memorable and remarkable.
Honestly, I have no idea on how to make a nice web designs but through your write ups, I think I’ll be able to make a nice and clean web design by sticking with the CRAP concept. Thanks a lot for sharing your thoughts and ideas on how to get away from that crap web designs.
Now this sure is an awesome post. The examples were very relevant. Most articles I find online are just loaded with information in a way the reader just wouldn’t understand. This however was very well written.
Now this sure is an awesome post. The examples were very relevant. Most articles I find online are just loaded with information in a way the reader just wouldn’t understand. This however was very well written.
I think that simplicity is an underrated quality of website design. You want your users to be impressed with the quality of your work, but you also want to get your sites point across without overwhelming the visitors.
I think that simplicity is an underrated quality of website design. You want your users to be impressed with the quality of your work, but you also want to get your sites point across without overwhelming the visitors.
Thanks for the guidelines. This is very useful information. Normally, visitors scan first before actually reading the content. Therefore, the design has to be really clear and concise.
I would like to thank you for the efforts you have made in writing this post. I’m hoping the same best work from you in the future as well. In fact your creative writing abilities have motivated me to start my own Blog Engine blog now.
Great post!! i love how you use the word CRAP
…makes perfect sense… great designs you chose to get your point across…