Web Design Blog

Popular Posts

Categories

• blogging
• browser news
• CSS
• design inspiration
• design resources
• design theory
• design tutorial
• designer tools
• firefox
• freelance
• Giveaway
• random design news
• SEO
• site update
• social marketing
• social networking
• twitter
• Uncategorized
• web design links
• web design news
• web standards
• XHTML

CRAP design 1: Creating contrast in your design

Posted on Tuesday, February 13th, 2007 under design inspiration, design theory by Dustin Brewer.

Typically when people call something crap it isn’t a good thing, but in the design world if your design is C.R.A.P then you are doing something right. As some of you may know and some of you may have heard before, CRAP stands for Contrast, Repetition, Alignment and Proximity. These are all design characteristics that can enable you to make a design that is worth being seen. Without these traits for a design you just have stuff on a document. In this four part series I will go in to detail about how to make your designs look like CRAP. I will go ahead and begin where every good thing starts, the beginning (cheesy!).Contrast is the method in which you make two elements different from each other in order to make them stand out and add dimension to your design. As the rule goes, if something is different from another element be sure to make it very different. By making two different elements similar in style it can confuse the viewer. But when adding contrast, by making the two elements different, you are able to order things or control where people’s eyes go on your document or web site. Strong contrast adds visual interest and makes it more attractive to the person viewing it.
Even if you make two elements different you can’t just make them slightly different by making one piece of text 12pt and another different and unrelated piece of text 14pt. You have to ensure that you are making the elements as different as possible, for example making one part 12pt and another part 18pt bold. The human eye is better able to differentiate between contrasting elements because it will automatically sort things out to be different parts of the whole if they are a different style. Sometimes it really is as simple as changing the font on a subhead or header.
You can change something as simple as the font or add a background to it in order to make it stand out. Any type of style that is applied to the separate elements must be very different from the other elements especially if it is an important element. If it is an important element in the design you must make it stand out as much as possible and ensure that it is different enough that it is made noticeable before other elements. As in with navigation, one of the common mistakes is to make it blend in or cleverly put it somewhere where navigation for a web site isn’t typically found. If you do hide the navigation the user isn’t going to know where to click to get to other information and will quickly lose interest in the site never returning again. Thats bad for business.
In these examples you can see how plain the examples are but how adding just a little contrast can make it much easier to read and you immediately notice two things on the business card. The first one that you notice is the title of the company and the phone number, two of the most important things that are put on a business card. Granted neither of these business cards are very good looking, but one does obviously look better then the other due to contrast (and a little alignment). Sometimes it is very easy to add contrast by having bold elements and adding a little color in just the right way for certain elements.
People use contrast in newspapers and blogs all of the time to give visual interest into the text that is at hand. Nearly every web site out there makes the content of the web site a specific text that is very different from every other piece of text on the web site. The reason for this is to give a focal point for the viewer to gain interest in. It is the same reason that the title of most blogs, newspapers, magazines and e-zines is always bold and of a larger point size. It gives the ability for the user to skim through the headlines and pick which they would like to read without having to read the summary or first paragraph to discover if they are interested.
Keep newspapers in mind next time you are designing a web site, business card, letterhead, resume, or anything that has a title. You want to ensure that the person reading it reads the header and knows, �Hey! This is the resume for Dustin Brewer. I know this because it is in a large font and bold.� it is unlikely for them to forget your name or header if you design it in such a way that it stands out above the other elements, with good contrast.

2 Responses to “CRAP design 1: Creating contrast in your design”

1. Graham says:

   June 3, 2009 at 4:09 am

   Thanks for sharing this article Dustin. It really does make a lot of sense.

   Reply
2. Back to Basics: Numerous Resources Referencing Fundamentals of Design | AliNicole.com says:

   December 13, 2009 at 2:24 pm

   [...] http://dustinbrewer.com/crap-design-1-creating-contrast-in-your-design/ [...]

   Reply