Eons ago when I was taking the Freshman web design course in college (okay, it was only 4 years ago) I was taught about the acronym of all acronyms, the one by which all other web design acronyms were judged. We learned that good design is based on the C.R.A.P. principles where C.R.A.P. stands for Contrast Repetition Alignment Proximity, and when Creative Directors tell you that your design is crap, they’re actually giving you positive reinforcement. Okay, that last part was made up, sorry. “Crappy work” is probably not a term of endearment but rather an indication that your pixels smell.
There are various examples of what C.R.A.P. means on the web (Robin Williams first coined the acronym), but for me it’s this:
- Contrast
Elements that aren’t the same should be very different so they stand out, making them “slightly different” confuses the user into seeing a relation that doesn’t exist. Strong contrast between page elements allows the user’s eye to flow from one to another down the page instead of creating a sea of similarity that’s boring and not communicative. - Repetition
Repeat styles down the page for a cohesive feel — if you style related elements the same way in one area, continue that trend for other areas for consistency. - 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. - 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.
In this article I’ll go into further depth about each specific principle, and show examples of design that are either C.R.A.P. or just crap. Let’s go!
Contrast
Good contrast can make sites appear crisp and organized, whereas poor contrast blends it all into an incoherent mass of RGB values. Contrasting elements allow for the user to figure out which page areas are related and which are totally separate, so make sure to differentiate your elements and page sections.
One of my favorite designers, Jason Csizmadi, runs the killer design weblog Dangergraphics.com and his blog is a great example of what good contrast can do for the layout of a page. Here’s a screenshot:
His site is split into two main columns, where the right column has a medium red background with an illustration at the top, and the left column is dark grey and very clean. The immediate visual separation between the two areas shows that they contain separate types of content — the right side is his weblog while the left holds some of his recent work and links to other sites. The stark contrast between the left and right columns really brings cohesion to the similar areas while defining the boundaries between different types of content.
Good contrast separates main areas on a page and allows readers not to be distracted by similar elements on other sections. In my opinion poor contrast on a site makes for poor design. And example of this is Northrop Grumman’s Capabilities page.
This screenshot is a good example of bad contrast on the web. They had the right idea with the shaded right column background, however the light yellow doesn’t separate it enough visually, and using the exact same typeface for all body copy and headings within the two columns compounds the problem. The main section headers are merely emboldened versions of the text underneath, and this slight change doesn’t separate the sections enough. I think that if Grumman changed their section headings to a larger size (with more padding), and made the right column background more distinct, better visual contrast would be achieved.
Repetition
If you’ve ever designed a weblog before, you know about repetition. Typical weblogs have all the same page elements: a header graphic, a main column with multiple weblog entries (each entry having a title, date & comment headings, and content), and a sidebar with archive/category navigation. At Business Logs, I happen to design a lot of weblogs since that’s basically what my firm specializes in, so once you’ve put together half a dozen blog designs you start to figure out what works and what doesn’t.
The repeating nature of weblog entries down a page lets you control how the user’s eye is guided down the layout of your site, and the correct spacing and design is crucial or else entries will cram into each other (poor Contrast), users won’t be able to find key elements (poor Repetition), or in the worst consequence, readers won’t be able to read and comprehend your writing as well as they should. The repetition of design elements down a page reinforces their meaning to the user, as well as letting the designer organize the layout in a cohesive manner.
At the 9rules Blog, our layout represents a typical blog layout with two columns that provide normal blog functionality. Across both columns, I use similar design metaphors to keep the reader on track with what is being presented:
- Body copy and regular text is set in Lucida Grande (Verdana for Windows users).
- Section headings within blog entries and in the right column are Trebuchet MS with a dotted separation line on the bottom.
- Links have a bold
font-weight, and in blog entries they are bright green to match the entry title link. - All sections in the right column have a 7px grey border around them.
The goals for having the same typographical choices for both body copy and headings are 1) reinforcing their meaning within their context (headings in blog entries vs. headings above link lists), and 2) it’s cleaner and more visually consistent with the rest of the site. By repeating styles with similar significance/meaning across various areas of the site, I’m allowing the user get acclimated to this meaning which lets them browse the site more easily.
Alignment
In my opinion, quality alignment and spacing is the hallmark of good web design. Friends often ask me how I produce my design work, and honestly, I just line things up and make sure the padding around design elements is symmetrical and relative to their sizing. Here are some rules regarding alignment on the web:
- Either left-align, or right-align text, but don’t do both. Right-aligned text in a right sidebar creates rivers of white space between the two columns and looks awful. If you left-align your body copy, then left-align your sidebar text as well.
- Centered headlines are classy, centered body copy isn’t. Two examples of centered headlines with left-aligned body copy are McSweeney’s and A List Apart.
- Use existing hard edges to line up other elements. If your header graphic is 5px from the left edge, then have your body copy be 5px from the left as well. Be precise: 5px is not 7px — good design is all about the details.
Bryan Veloso’s SXSW Bowling site is a great example of how to align various elements on a diverse page. Let’s take a look at his cool header graphic:
Bryan has 4 different visual areas in the header, and all are aligned for maximum effect and message communication. He uses the left and right edges of the graphic to align the text and phoenix illustration, and then keeps the spacing around all 4 elements the same for symmetry, a technique that should definitely be emulated.
Repetitive alignment and symmetrical spacing are two techniques that can be used extensively in blog-based interface design, simply because there are so many opportunities to group elements together in some type of designed widget or box-like area. Further down on Bryan’s bowling site we see the Bowling Teams section and pictures of the bowlers. Bryan has a small padding around each image, and then keeps that same padding size to separate each image in the row horizontally. Good stuff.
Proximity
The principle of proximity allows similar or related elements to be grouped together to form a cohesive whole. Items that aren’t related should be kept visually separate from those which are. This enables the viewer to glance at a page and immediately know which page elements are grouped together and which are separate.
Matt Brett’s personal site looks great, and he uses a technique on his section headings that I find extremely valuable and useful:
For every section title, he has a sub-heading underneath it that provides a bit more explanation for what that area is about. He has tightly spaced the sub-heading with the larger title, and in doing so created a cohesive visual element that is the fusion of two smaller elements. If the sub-heading was 10px lower, the effect would be gone because the spacing between the two wouldn’t group the two elements together correctly.
This technique is very useful in weblog design, because too many blogs don’t put their sub-headings close enough to the paragraph they’re attached to, and without the correct spacing the elements appear separated instead of attached. Here’s an example of correct (left) vs. incorrect spacing (right) in this image:
The title and comment headings on the left are spaced evenly and form a cohesive whole, whereas on the right the haphazard and unsymmetrical padding causes the section to appear separated and jagged. Headings should appear close to the paragraph they apply to, same with images and their captions, comments and their author’s names, etc.
Oh C.R.A.P.
The C.R.A.P. principles (Contrast, Repetition, Alignment, and Proximity) are good ways to double-check your design work. Just like with a pre-shot routine in golf, if you constantly question and nitpick the details of your design work, good design habits will form and you’ll no longer have to think about if your padding is off or elements aren’t aligned, you’ll just do it correctly from the start.
Design im Blogdesign…
Mike Rundle, der als Designer so bekannten Sites wie 9rules, Inc. und Business Logs seine unverkennbare Note gegeben hat, gibt in dem sehr lesenswerten Artikel Blog Design Is C.R.A.P. einen Einblick in die Grundlagen des (Blog)-Designs. C.R.A.P. meint …
[…] Design Issues 2 lesenswerte Artikel befassen sich mit Glaubensfragen und Grundlagen des Webdesigns: Mike Rundle über Blog-Design Blog Design is C.R.A.P. und Eric Meyer über Webdesign Web Design Fascism - # […]
Very cool article, interesting to read! I think I’ll start to design a little mor c.r.a.p.pier in the future ;)
[…] Auf Vitamin F findet man einen passenden Artikel über dieses Design und auch grundsätzliche Hinweise: Blog Design Is C.R.A.P. […]
Thank you for this extremely informative and useful article. It really brings light to the minor details that make a major difference in the design and user experience as a whole. I’ll definitely think C.R.A.P. the next time I’m working on a project.
[…] I recently stumbled upon this article by Mike Rundle - you should know him as the designer of such popular sites like 9rules or Business Logs - , in which he explains the meaning of C.R.A.P. to blog design. Since I’ve never heard this term before, it was very interesting for me to read. […]
[…] Before I go on, have a look at this great artice series about grid design by Mark Boulton and be aware, that we do it in reverse order, but the points mentioned there are definetely a great help. This article about C.R.A.P. is also a great reading for considerations about your design. […]
This is a good article, but the acronym of C.R.A.P. as in contrast, repetition, alignment and proximity, is actually borrowed from The Non-Designer’s Design Book, by Robin Williams. You should have mentioned her at least.
funny, i just read this principle, C.R.A.P. in a book last night written in 2004 by Robin Williams… The Non-Designers Design Book
Just to be clear - even though the title seems to say that this is a problem which is specific to blogs these techniques work just fine on ANY kind of site. What a nice place the web would be if these four rules where followed more often…
[…] Woran erkennt man gutes Blogdesign? Mike Rundle hat sich in einem prgnanten Beitrag dieser Frage gewidmet. (F-LOG-GE) 18.03.2006 | Tools | Druckversion | […]
Thanks for all the feedback everyone!
Elisabetta and Chris: You are definitely right, and now that you mentioned Robin’s book I believe that is where my professor got it from. Her book was the text used for another freshman design course (which I skipped) so now it makes sense to me. I’ll add it in right away.
Hahahaaa!!
My CMPT 165 Prof. was the last person to ask me if my design was CRAP. It’s great that some CRAP principles are getting a bit of limelight!! (BTW, Non Designers Design book was a required text in the class…)
Just a note: your link to Robin William’s book is jacked. Got stray br and /a tags in there.
Thanks Ben. It’s fixed now.
Very odd. Posted my props to this CRAP article and the comments hopped into Eric Meyer’s article! (not sure where this will land!)
How crap is your design…
This is a little off topic for Java GUI design, but I think these days there is significant crossover from app design to web design, especially as so many apps are getting web interfaces.
This article is exactly my style, very down-to-earth, with lots …
Great article Mike, especially all the examples you used here. They really help to clarify all the little details you pointed out.
You actually learned something in our freshman web design course? Most of my courses at RIT, even the senior classes, felt like such a waste. Then again, no one ever mentioned C.R.A.P. to me…
Great article, I’ve never heard of the C.R.A.P. principle used in that acronym; encouraging!
Just to let you know, the “are” link in the second paragraph down seems to have picked up some random tags.
Hey Masha, thanks for letting me know - it’s fixed now.
Thanks for the article, Mike, I love talking about this stuff (design, not crap).
Maybe I should actually take a design class someday.
When I was in College, my design and layout skills were always flagged up as S.H.I.T., not CRAP. Not that S.H.I.T. was an anagram of anything, I was just no good.
[…] “How C.R.A.P is Your Site Design?” By Mike Rundle http://www.thinkvitamin.com/features/design/how-crap-is-your-site-design […]
[…] Ryan Carson’s Think Vitamin just launched today, which is a web zine similar to ALA, but only a group of a few people can write for it. I was fortunate enough to be selected for their Advisory Board (along with Dan Cederholm, Shaun Inman, Eric Meyer, among many others) and my first article is titled “How C.R.A.P. Is Your Site Design?” so check it out. […]
Great article! It’s nice to have the rules layed out and to have something to refer to.
This was a great read. Thanks
Good article! I’ve never seen this info online before. I’m glad you mentioned Robin Williams, who introduced me to CRAP with her great books.
[…] Technology, Meme, Geek, Rant, Free, Useful, Review, Web Design. | Add To Del.icio.us | Digg ThisTrack with co.mments | RelatedStuff […]
hmm seems familiar.. we learned that in a summer course from a book by robin williams…
Hey Pat, if it seems familiar it’s because Robin Williams first coined the term as far as I know. I mentioned her at the start of the article.
People have been telling for years that my designs were crap …. :-( I wondered if this is what they meant!
Just wanted to say what a killer article this is. I have designed a few blogs now and whilst they looked good ( in my opinion ) there was always a little something about the entries that bothered me. Now I know what it was!
Love the design of the site by the way. Fluid layouts rock!
Monetize your website or blog
My boyfriend and partner, who is a 3D artist, told me long ago that if something is immediately “off” on a design, it’s usually contrast (or the lack thereof) that’s the culprit. Although I can stand to improve on the other areas you mentioned, I’ve become a slave to switching to greyscale mode in PS to check my contrast levels. If they’re off, no amount of other great detail will save the design. Thanks for addressing this often-neglected element.
[…] Contrast, Repetition, Alignment, Proximity - design rules. […]
Mike, these are excellent tips and you’ve left me wishing we at Know More Media had a few hours of your time for design consulting! We’ve got several dozen blogs that could use some constructive criticism.
I didn’t realize how important symmetry and exactness are in forging the design of any website. Thanks for letting me wallow for a few delightful moments in your … C.R.A.P.-py insights.
[…] Mike Rundle has a great list of C.R.A.P. … or “The four golden rules of site design. Simply follow them and watch the accolades come flooding in.” * Contrast Elements that aren’t the same should be very different so they stand out, making them “slightly different” confuses the user into seeing a relation that doesn’t exist. Strong contrast between page elements allows the user’s eye to flow from one to another down the page instead of creating a sea of similarity that’s boring and not communicative. […]
Nice article, great reminders ;)
[…] read more | digg story • • • […]
[…] read more | digg story […]
The CRAP idea to design seems pretty useful for implementation of a well-designed website, which I may use it here some day.
Good article - which is particularly helpful to me… Someone who concentrates to much on functionality rather than design.
Really nice article - full of useful stuff. I’ve added it to my Squidoo lens on webdesigning at http://www.squidoo.com/webdesigning/
[…] I found these four golden rules of site designing which the author calls as C.R.A.P. principles where C.R.A.P. stands for Contrast Repetition Alignment Proximity. Some excerpts… Good contrast can make sites appear crisp and organized, whereas poor contrast blends it all into an incoherent mass of RGB values. […]
[…] From Vitamin: How C.R.A.P is Your Site Design? Good design is based on the C.R.A.P. principles where C.R.A.P. stands for Contrast Repetition Alignment Proximity… […]
I think these are very solid rules.. fundementals I should say.. I like the acronym too.. what you said, ” ….you constantly question and nitpick the details of your design work, good design habits will form and you’ll no longer have to think about ….” I really agree with. good writing.
Nice article Mike. Your pixels smell great!
[…] Link to the story […]
Robin Wiliams’ Non-Designer’s Design book is probably the best beginner’s resource on CRAP. I didn’t realize she used the acronym but my students certainly do. Nice well-written and well-timed article on the foundations of design. Thanks.
[…] read more | digg story […]
[…] We learned that good design is based on the C.R.A.P., and when Creative Directors tell you that your design is crap, they’re actually giving you positive reinforcement.read more | digg story […]
Northrop Grumman’s site looks far better than Danger Graphics site in my opinion. Sorry!
Great article!
All Pix made with PS CS and site with made with Frontpage
Stop using examples of BLOGS & Art sites. They don’t sell or hold in the commercial realm. Show us real-world examples of design that earns.
C.R.A.P is Contrast Repetition Alignment Proximity…
The four golden rules of site design. Simply follow them and watch the accolades come flooding in. Good design is based on the C.R.A.P. principles where C.R.A.P. stands for Contrast Repetition Alignment Proximity, and when Creative Directors tell you t…
[…] Nos sentimos orgullosos de cumplir tres de las cuatro normas de oro del diseño web, o también llamado C.R.A.P. Contrast Elements that aren’t the same should be very different so they stand out, making them “slightly different” confuses the user into seeing a relation that doesn’t exist. Strong contrast between page elements allows the user’s eye to flow from one to another down the page instead of creating a sea of similarity that’s boring and not communicative.Repetition Repeat styles down the page for a cohesive feel — if you style related elements the same way in one area, continue that trend for other areas for consistency.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.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. […]
[…] Apparently the key to designing good websites is to make them look like C.R.A.P - that is: Contrast, Repetition, Alignment and Proximity. A quick and easy breakdown of some great design basics. Posted April 19, 2006 in Design, Resources with 0 comments « Presidential Piracy? […]
This is very good advice. All too often websites lack creativity and passion.
I hope this website would pass the CRAP test
http://www.DCguide.com
[…] http://www.thinkvitamin.com/features/design/how-crap-is-your-site-design […]
Snap, I’m going to start applying this to my work, although I think it already has been
[…] We learned that good design is based on the C.R.A.P., and when Creative Directors tell you that your design is crap, theyâ��re actually giving you positive reinforcement.read more | digg story […]
[…] Si votre site Internet est C.R.A.P., il respecte alors quatre grandes qualités de conception qui sont le contraste, la répétition, l’alignement et la proximité. […]
That’s true…we saw the same rules in my design course…
C’est vrai…on a vu les même règles dans notre cours de design…
[…] Nos primeiros dias, já emanaram alguns artigos que se arriscam a tornar referências (ou “how-to’s filosóficos”), como o How CRAP is your site design? […]
[…] How C.R.A.P is Your Site Design? Good design is based on the C.R.A.P. principles where C.R.A.P. stands for Contrast Repetition Alignment Proximity. […]
[…] more info: Vitamin Features » How C.R.A.P is Your Site Design? Published in: Whatever | on April 19th, 2006 | […]
Great stuff Mike! CRAP is something to live by and should be a staple in every designers tool box. Life with out these points is like a PBJ sandwitch with no bread……a mess.
[…] read more | digg story […]
[…] A friend and colleague of mine recommended this article and it really is very good reading… How C.R.A.P is Your Site Design? […]
[…] Mike Rundle van 9rules heeft er een onderbouwde mening over: “Is your site C.R.A.P?“. Een grove vertaling geeft C.H.U.G. […]
Under contrast, why did you compare a full screenshot of a designer’s site to a portion of a bland corporate site? I’m partially color-blind and I don’t see a lot of contrast in either example because they both rely too much on hue rather than value for visual separation.
(Disclaimer: I work for that bland corporation but I had nothing to do with our web site.)
[…] Click here to view the full article. […]
There are no rules…
[…] We learned that good design is based on the C.R.A.P., and when Creative Directors tell you that your design is crap, they’re actually giving you positive reinforcement.read more | digg story No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI Leave a comment Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> […]
I’ve got a Blogger template, and just in the past week I’ve begun to play with html–I’m tweaking the Blogger template to my liking a bit at this point. I’d like to make my own sites, and this is the first design advice I’ve run across. At the moment I feel completely overwhelmed by the amount there is to know, but I’m sure it’s easier to get a grip on now than a few years ago, thanks to sites like yours. Thanks.
[…] In seinem Artikel How C.R.A.P is Your Site Design? weist er allgeimeine Mängel auf und zeigt uns anhand von Beispielen was er unter gutem Design versteht. […]
[…] How C.R.A.P is Your Site Design? […]
I hope my site would be able to pass the test http://www.callendercreates.com, just found the site, looking forward to seeing some of you at @media 2006.
u ve got such a cute smile :) hi … lol
M
Overall, good information here.
But just a couple of comments to ponder — I disagree with the contrast examples. The stark contrast makes me think there are two different sites going, and I immediately leave such sites. I want focused content on the web, and I tend to avoid sites that visually do not communicate focus to me.
Also, have you ever heard of the 10% rule? That in details like this, in any field, only 10% of people will notice the effort you put in to meet these standards, and of those who notice, only 10% will care.
My point is that its great if you can meet these standards. But you are trying to please 1% of your audience. I’d be a lot more interested in articles like this if they focused on how to really hit that common ground with everyone, while still pleasing the 1%.
[…] How C.R.A.P is Your Site Design? (tags: website design) […]
[…] As you might tell, I’ve done some major tinkering with the blog. As soon as I can secure a stable of contributers, I can begin building a new site from scratch. I hope it looks C.R.A.P. tastic to you as it it for me. […]
Interesting articles, although I also have some doubts about taking contrast too far.
But then I’m no designer. Anyone wanna give me some help with the site I’m currently building for weight loss and health resources?
[…] As Vitamin explains, it’s not all bad…in the web design world, it stands for Robin Williams’ design principles of Contrast, Repetition Alignment, Proximity. He explains in depth, with details. Powered by WordPress. Theme based on “Blue Radiant” by H P Nadig […]
Very insightful article! I’m gonna use this to help make the redesign of my site crappier!
[…] Vitamin Features » How C.R.A.P is Your Site Design? Tagged as: article blog business css development examples gui guide howto ideas rules skills templates tutorial usability web webdesign Tagged as: Links […]
[…] Not only does your site look like C.R.A.P. and it’s D.U.M.B. […]
[…] How C.R.A.P is Your Site Design? […]
Great job. I make a translation to spanish on my blog.
[…] Resumen y libre traducción del artículo original de Mike Rundle en Vitamin. […]
[…] Ich sag es ja immer – Webdesign unterscheidet sich nicht so arg viel von Gestaltungsprinzipien, die auch in der Architektur angewandet werden. Ich entdecke immer wieder Parallelen. Über [einfach persönlich] stieß ich auf einen Artikel auf [thinkvitamin.com], dem Blog von Mike Rundle. in meinem nun folgenden Weblogeintrag habe ich das Wichtigste aus dem [How C.R.A.P. is your Site Design?] herausgepickt. Ich empfehle jedoch die Seite selbst mal zu besuchen, denn dort werden einige Prinzipien noch mit Screenshot-Beispielen veranschaulicht. […]
I’ve been working by these rules (or at least tried to) for the last 8 years or so. I never really learned them by name, I just applied them.
And I just have to say that this is quite possibly the best webdesign write-up I’ve ever seen. Sure, it’s just the tip of the iceberg, but these rules are solid basic techniques that everyone should at least read.
Great work, Mike.
Just another CRAPPY article by the author to sell his book.
Years of research by great ad gurus has proved that the written language is more powerful than any kind of visual impact. The same will also work on the web if web designers paid some attention to make things simpler for the viewers. Apparently as in advertising the first motive of the web designer is to sell his “CRAPPY” designs and next what ever the site is meant for.
Haha, sorry Anon, but I don’t have a book out. I’m just a 23-year old designer trying to do good work in this industry. I apologize if I ruffled your feathers :)
Problem is a solid graphic design background is lacking so many webdesigners.
Who knows about art history, colour theory: dear people: 4 years of training and you have to a good artist to get sumitted in the first place.
I had to write this article to make people aware of knowing some background
about art history is valuable by all means.
http://fadtastic.net/2006/04/22/the-heroic-years-of-graphic-design/
Must read for web designers.
I have to say I disagree with your web log entry example at the very bottom of your article. The layout on the left is terribly cramped. The right layout, while not perfect, is considerably easier on the eyes.
I just found your site today. Great info here. I wish everyone would follow simple rules like this…too many web-eyesores out there!
ps - I agree w/the last comment from David.
What a great article! Those simple little things that we can sometimes forget…or not even know about.
Thanks!
@David,
I agree with you. Isolated, the right one seems easier… but you should also consideer using that last example on a weblog. Imagine 10 blocks of that 2nd entry, the larger space between title and paragraph placed may confuse the user. Maybe that was the point Mark was talking about.. proximity and repetition.
When doing your designs, are you mocking up in Photoshop first and then translating to (X)HTML/CSS, or doing it all in one go?
I’m curious how this is done now - I certainly find it easier to align stuff in Photoshop, but don’t think it saves much time overall.
Great posting — I am a high school teacher and been teaching my students CRAP for years :)
The one thing I do is emphasize “planning” in the design process. For example, Contrast is defines as the “planned use of differences to create focus”.
Proximity I find is the most difficult to grasp. I have arrived at the definition: “The planned use of SPACE to communicate relationships and to create focus” Example I use is 5 kids at a school dance:
B G B G B
Where B is boy, G is girl.
I ask who is whose date. Then I re represent
BG BG B or
B GB GB and ask the same question.
They all seem to get it.
“Repetition” could also be termed “Consistency” (though C.C.A.P doesn’t really fly). Hard to believe there are so many older sites still in operation that never considered consistency-of-navigation much a priority. Navigating from the homepage to a secondary page and watching the navigation totally disappear and the body font change used to be a common experience.
I vote for the weblog image on the right as well.
[…] Contraste, repeticin, alineacin y proximidad, cuatro elementos bsicos del diseo. Excelente artculo traducido libremente por Saul Delhom, del artculo How C.R.A.P. is your site design? de Mike Rundle. Visto en Backdraft. […]
[…] We learned that good design is based on the C.R.A.P., and when Creative Directors tell you that your design is crap, theyâ��re actually giving you positive reinforcement.read more | digg story […]
[…] How C.R.A.P is your site design? Mike Rundle walks through the 4 golden rules of site design. […]
Now everybody goes off and produces some crap.. (:
Good article.
Hey, good guide dude… even if you started working many years ago… as me ;)
This is awesome. I’m gonna apply the CRAP rules to my blog ASAP. Lets hope its not to CRAPpy
How C.R.A.P is Your Site Design?…
* Contrast
Elements that arent the same should be very different so they stand out, making them slightly different confuses the user into seeing a relation that doesnt exist. Strong contrast between page elements allows the users eye to flow fro…
hello! http://www.dirare.com/Sweden/ online directory. About DIRare, Search in Business Category, Yellowpages search. From online directory .
you outline a process… and a common process that doesn’t need explaining. Do humans need to be taught how to breath? it’s given …
no depth, no talent, no interest -
Rather ironic content considering the web placement.
Mike, Thanks for this one. I needed a new acronmym. I actually found my work in pottery during my college years to be extremely helpful in mapping out design. Repetitioin and variation were tantamount to everything. Proximity is a good one for me to think about more. I find that the hardest thing is going into a design and maintaining freedom from it enough to say that its real crap, when you realize that its not C.R.A.P. and just start over or refine, refine, refine.
Thanks. Great read.
Thanks for the article.
It’s simple stuff but so often websites seem to miss it.
Grouping colours together reminds me of the London Underground Map. I never know the names of the lines - I just look for the right colour.
Thanks for the C.R.A.P.
[翻译] 如何运用C.R.A.P原则设计你的网站？…
<div style="text-align: center;"></div><div align="center"><img border="0" src="http://photo.bababian.com/20060510/917B20EC018C4D69A61D94FCBEEA3263.jpg" title="如何运用C.R.A.P原则设计你的网站？"…
Mike, good article.
I think, though, that you’re misunderstanding ‘proximity’, as some of the other commenters have said. Proximity isn’t about how close together you can squeeze your design elements, it’s all about grouping what belongs together in the same area instead of scattered across the page.
Your logic would dictate that the lines of a paragraph be scrunched together (nice technical term, eh?) because they relate to each other, but that simply isn’t the case. The whitespace between paragraph lines (linespacing–or to those in the print world, leading) is so very important to readability as are font choice and size.
You’re using the very close placement of headline, subhead, and body copy as a visual cue. That’s all well and good, but there are other ways of accomplishing the same thing.
Thanks for taking the time to write the article.
Your articles are excellents. Do you mind if I cite you in my marketing blog? (With full credits and links of course).
Thanks
Well ive recently only got back into web design im 16 ive been trying to get into it for awhile now and i just cant seem to get a grasp with it. I also cant seem to find the right program to use PhotoShop is an excellent program yet kind of hard to use the style i most like is the buttons you make such as the one on the bottom here saying Comments RSS or the style of Pixel2Life but seems very difficult to design. If you would have any tips for me it would be great and after reading this article its open my prespective on this subject.
[…] Read the Article: HERE […]
[