Call 07 3358 5062 for a free consult

Good design is C.R.A.P

Good design is C.R.A.P
November 29, 2017 Ronin Marketing

First, let me be clear: I’m not saying design is crap.

As a graphic designer, a statement like that would be ridiculously contradictory (not to mention put me out of a job). What I’m referring to here is the underlying principles of good design (also known as C.R.A.P).

Good Design is C.R.A.P principals infographic

To get your head around it, let’s look at a common scenario. You’re online shopping for a fancy handkerchief. You come across two companies that sell the exact same handkerchief you’re after, though, one website looks really professional and easy to navigate through, the other website looks confusing and disjointed (making you think twice before adding your credit card details). Both sell the same product. Though you’ll most likely go for the first company because they look professional and trustworthy. Thus, the power of C.R.A.P.

C.R.A.P stands for contrast, repetition, alignment and proximity. These principles are the basis for graphic design, ad design, website design, fashion design … pretty much any kind of design! When these four practices are applied together, they lead to visuals that are more professional, more polished and more communicative.

So let’s learn more, and go through each of them one-by-one.

Contrast

Making elements different to create visual hierarchy.

Contrast, within a design, looks at the elements and purposely alters the appearance so that our attention is focused on the important points, helping to create a visual hierarchy within the overall design.

Some elements you can apply contrast to are: colour, size, fonts, shape and space. A good way to think of it is if you’re not wanting two elements in a design to be the same, make them different. Without contrast, everything just looks flat.

For Example:

Contrast Example from Ronin Marketing's portfolio.

This Allied Group ‘Roof Space’ infographic utilises contrast really well. By sectioning the different types of information in complimentary coloured blocks and varying the size of the text and illustrations, you get a visually appealing, easy flow of information from top to toe (or roof to floor).

Repetition

Repeating visual elements to create a strong unity.

Repetition is repeating elements to maintain consistency and continuity in a design. It helps the audience become familiar with your style and/or brand. You can apply repetition to pretty much any of the elements – colour, shape, texture, size – as well as other attributes of the elements in a design.

For Example:

Example of repetition from Ronin Marketing's portfolio

We have utilised repetition throughout the design of BodyViva’s website and marketing collateral. Combining evoking imagery and colour-coordinated gradients has created an uplifting visual experience, while also separating the different services they provide.

Alignment

Establishes organization through positioning and aligning.

Alignment looks at the placement of an element and creating a visual connection with one or more items in the design (even if the connection is through an invisible line).

Alignment is a concept that allows the audience to see the elements in an organised manner, creating order. Nothing should be placed in a design arbitrarily (a fancy word for ‘HIGGLEDLY-PIGGLEDY’).

There are two basic kinds of alignment: edge alignment and centre alignment. Edge alignment positions the elements against the edges of a margin, whereas centre alignment positions the elements so they line up with one another on their centre axis.

Text has slightly different types of alignment: left, right, centered and justified. Left and centre are the most commonly used.

For Example:

Example of alignment from Ronin Marketing's portfolio

A clean and beautifully organised Lifestyle Granny Flats ‘Tips for the Toolbox’ magazine design. All text and images are aligned and positioned to form visual relationships within the design. Without this, you make it difficult for the reader to enjoy the article and process the information.

Proximity

Creates relationships through placement of elements.

Proximity is also the positioning of elements, but looks at the relationship between them and how close they should be to one another (or grouped together). Unrelated items should be separated or further apart.

This helps provide structure to the information, making it easier for the viewer to recognise relationships between two elements and organizes them into focused groups.

For Example:

Example of proximity from Ronin Marketing's portfolio

This Organic and Quality Foods infographic uses the principle of proximity to group text and illustrations so that the eye can process the information a lot easier. Utilising the vegetable cut-outs on the edge of the design creates a frame that directs the viewer to the center of the image.

By utilising these four basic principles into your designs or even having them in the back of your mind, you’ll start to see the world in a completely different way, and really soon you’ll be able recognise; who does or doesn’t give a C.R.A.P.

Want to see more work from our graphic design team? Check out our Latest Work.