Sometimes you can look at a piece of design and while you feel something is missing or it doesn’t quite sit right, it can be hard to place your finger on what exactly that is.
Often what is missing is a sense of balance, hierarchy and clear messaging, all of which can easily be fixed when using four design principles know as CRAP. When applied properly these design fundamentals are a simple but effective way to learn how to improve your branding.
CRAP is an acronym for key design principles: Consistency, Repetition, Alignment and Proximity. You can order these in any way you want, but CRAP is a pretty handy way to remember what they are, and ideally should help you create anything but crap design. Taken from Robin William’s The Non-Designer’s Design Book, these four principles offer a simple formula to help your design layouts create more impact, increase readability, and maintain brand guidelines.
Contrast
Contrast is all about creating a difference between elements to help them stand out. Also, contrast can help focus a user’s attention on key information. Contrast can be created in a number of ways using shape, colour, size and more.
Here are some ways you can use colour and type sizes to create contrast:
Bad contrast:
Good contrast:
Using different type sizes or fonts to help create contrast is a simple but highly effective and important way when figuring out how to improve your branding and to help your user navigate around your layout and also draw attention to what is more important. Some examples are using different font weights for headings and body copy or pairing different typefaces e.g. a serif font for headings and a sans serif for body copy.
Bad contrast:
Good contrast:
Repetition
Repetition is a design principle that relies on elements being used and placed in a consistent and deliberate manner, which creates a uniform look over a layout and when applied to many design layouts, helps to reinforce a brand’s style, creating a sense of familiarity and trust to audiences.
Repetition can be practised with the colour, shape, texture, size, and other attributes of the elements in a design. Some examples are:
- Headings and subheadings
- Colours
- Rules
- Images
- Graphical elements and logos
The below example shows 4 images, which could be print layouts or social media posts, where the logo element has been placed on each image without thought to being consistent and repeating a definitive rule.
Instead if a style rule was applied to always use the logo in the same way, with the same colour and position, then each individual post would now appear consistent, creating a stronger brand.
Alignment
Alignment determines the way every element is placed in a design. Nothing should be placed on the page arbitrarily. Every element should have a visual relationship with the rest of the elements on the page.
For type layouts, different alignments are left, right, centered and justified. Left and right are the most common and while centered can work, it’s usually best for small amounts of text, such as posters etc.
Justified text is mostly found in very text-heavy layouts like newspaper and magazines, where space is at a premium and typography aesthetics take a back seat to column inches and word counts. When not used correctly justified text can leave awkward gaps between words, known as rivers.
Alignment of objects and text block is an important factor when creating design layouts. Using design grids, alignment can be created and maintained over a layout and helps to keep elements balanced and grouped together.
Before:
After:
Proximity
The rule of proximity states that elements that are related to each other, should be grouped together and vice-versa, elements that aren’t should be spaced apart to show they are different.
A do-it-yourself designer might be tempted to use all available space on a page or layout and spread all elements evenly throughout. Although in doing so, will make it hard for users to read and decide what information is related to each other (and what isn’t), resulting in a poor user experience.
A simple example:
The layout on the left is uncluttered and features a lot of white space, but because the elements aren’t grouped together, the layout is weak and could make it harder for the reader to scan the information quickly and find what they are looking for. Whereas the layout on the right has the information placed together with a more logical structure.
Another use of proximity is when formatting text and the use of spacing between different blocks of information. The below example shows 2 lists – 1 without spacing and 1 with.
By using the same amount of spacing between each line, it makes it hard for the user to determine quickly that there are different groupings of information. Simply adding in more spacing from where one group finishes and another starts, helps to illustrate the 4 groups.
To wrap it up
Putting these four design principles together can help increase the quality of design and is an easy step when learning how to improve your branding. Not just from an aesthetic point of view but also the readability and usefulness to the end-user. As with any design, the focus should always be the end useability and not just to design to one individual’s tastes.
Do you need help with the design of your company’s marketing or want to know how to improve your branding? Why not check out some of the work I’ve produced from my clients here and if you think I can help you also get in touch!