Understanding Design C.R.A.P.

Some design is just CRAP. Some crap can be beautiful, and some crap is just… crap. There is a difference between the two. One is executed following foundational design principles that structure any asset for success, and another is executed with no guidelines or understanding of design principles. How can you make sure you are designing the right CRAP? Follow this acronym:

Contrast
Repetition
Alignment
Proximity

Contrast is one of the fundamental design principles used to distinguish between sections or elements of your asset. Nobody likes to navigate around a website with an entirely white background. Break those elements up a bit by adding complimentary background colors to the sections around it. Another way of adding contrast is to use large or bold text, also known as “headers.” Contrast can be overlooked or over applied easily. You need to have a certain level of finesse when contrasting elements in your design. Make sure you don’t overdo it when adding color blocks. More often than not, stark breaks can be hard on the eye, and make it harder to read.

Repetition is the use of essential elements throughout your asset to emphasize their importance, draw attention, emphasize consistency, and navigate. Use repetition to reduce confusion. For instance:

Colors: Find a color scheme that contrasts and compliments well, and stick to it. When selecting your color scheme, pick one primary color, a secondary, and tertiary color, and stick to it. When using these colors, use them in the same places. For examples, if you have a grey header, make all of those headers grey. Your subhead should be a color that contrasts well.

Typography: You don’t need to have 10 different fonts to showcase your typographical genius. I recommend using a maximum of two fonts for any document and stick to it (unless you have a separate decorative/blockquote font). Consistently use one font for your headers, and one font for your body, and you will keep your users attention.

Elements: If you have elements that repeat (i.e. stylized bullet points, branding elements, etc.), use them in the same places. An example is one of our recent branding clients, eauLife. They have a water droplet used in their logo, and to increase its presence, we repeated it into the header as a clipping mask. This water droplet is now being used in every masthead, as a way to emphasize their branding. See below:

Alignment can be one of the easiest things to mess up. Make sure to set a grid on your document, and don’t go outside of it. I would recommend starting small, and set up 3-4 columns. Keep everything aligned to either the left or right side to start, and then work with the interior alignment. Set your documents up before you begin, and you will be in alignment with your audience when presenting that new sales deck.

Proximity is a synonym for “breathing room.” If your document looks like a Where’s Waldo book, you are doing something wrong. Take the above principles into account, then make sure everything is well spaced. Too often I stumble across websites that are trying to jam way too much information above the fold. Space out your elements with enough room to breath, and make sure the spacing is consistent. A simple way to check your spacing is by selecting your element in Photoshop, hovering over the element you are spacing it from, and hold command. It should tell you the amount of pixels between your elements. Select all of your repeated elements to see if their proximities are consistent.In conclusion, design doesn’t always have to have all the information in one place. Sometimes you should take your time and design the CRAP out of it because some CRAP can be wonderful!