ACA Blog

ACA Blog


May 2019
M T W T F S S
« Apr    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Categories


Design a better layout by designing CRAP

Stijn SchutyserStijn Schutyser

 

Design a better layout by designing CRAP

Robin Williams' book: The Non-Designer's Design BookRobin Williams – no, not that one – is one of the most interesting authors about text and layout design. Her book, The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice, is a true gem. In the book, she explains the 4 basic rules for effective graphical design: contrast, repetition, alignment and proximity (CRAP).

In this blog post, we’ll go over those 4 basic rules and how you can easily implement them in your layout design. I’ve already taught you how to write scannable web content, but that blog post didn’t cover the layout of texts all that much. So let’s set the record straight! While scannability in a text itself is key, it is also closely tied with the layout of the text. After all, a text that’s a joy for the eye is a text that is inviting to be read!

1. Contrast

Let’s start with the first rule for effective layout design: contrast. If elements on your page (such as type, color, size, shape and so on) aren’t identical, let them differ extremely from each other. Don’t be a wimp. Let contrast shine! A good example is the size of the letters in a newspaper headline versus the ones in the article itself. In contrast (see what I did there?), a headline typed in Constantia 11 above an article in Constantia 10 doesn’t show enough difference between the two, making it difficult to differentiate.

Add contrast to your layoutSo how do you add contrast to your page? Contrast can be created in many ways. You can contrast

Again, don’t be a wimp. You cannot contrast 12-point type with 14-point type, you cannot contrast a half-point rule with a one-point rule and you cannot contrast dark brown with black. Get serious! Contrast is crucial to the organization of information (its scannability): a reader should always be able to glance at a document and instantly understand what’s going on.

There is no contrast in this resumé's layout The information in this resume is all there, but it doesn’t look inviting to read and it doesn’t grab your attention.
In this resumé's layout, there is contrast between the different sections In this example’s layout, there is a lot more contrast, which improves its scannability enormously. If you want to learn how to grab a recruiter’s attention even more, read about it here.

2. Repetition

The second rule of effective layout design is the rule of repetition. It states that you should repeat some aspect of the design throughout the entire piece. Repeating visual elements in your brochure, newsletter or blog post helps to develop a structure and strengthens the feeling of a unified piece of content. The repetitive element may be a bold font, a thick rule (line), a certain bullet, design element, color, format, spatial relationships, etc. It can be anything that a reader will visually recognize. You can think of the rule of repetition as a reminder to stay consistent.

This layout does not follow the rule of repetition
When you get to the end of the information on this card, your eye just kind of wanders off.
This layout follows the rule of repetition
Now when you get to the end of the card, your eye bounces back and forth between the bold type elements. That’s the point of repetition — it ties a piece together and provides unity.

It’s like accenting your clothes: if you wear a black outfit, you might accent it with jewellery and shoes in the same shade of red. However, be careful to not repeat an element so often that it becomes annoying or overwhelming. Think of rule #1 and be conscious of the value of contrast! For instance, if you wear the same black outfit, but now with a red hat, red earrings, a red scarf, red shoes, and a red coat, the repetition would not be a stunning and unifying contrast: it would be overwhelming and the focus would be confused.

3. Alignment

Make sure there is alignment in your layoutNothing is ever allowed to ‘just end up’ on your pages, no matter the medium you’re writing for. Every element should have a visual connection with another element on the page. This way, you create a fresh and clear look and feel.

When items are aligned on the page, the result is a stronger cohesive unit. Even when aligned elements are physically separated from each other, there is an invisible line that connects them, both in your eye and in your mind. Although you might have separated certain elements to indicate their relationships (using the rule of proximity), the rule of alignment is what tells the reader that even though these items are not close, they belong to the same piece.

Nothing is aligned in this card's layout The elements on this card look like they were just thrown on and stuck. None of the elements have any connection with another element on the card. Some items are left-aligned, some are right-aligned and others are centered.
In this layout, everything is aligned properly By moving all the items on the card over to the right and giving them one alignment, the information is instantly more organized (also because they’re grouped together). The text items now have a common boundary which connects them together.

Avoid using more than one text alignment on the page. For example, don’t center some text and right-align other text.

4. Proximity

Proximity implies a relationship in a layoutItems on your page that belong together or have a connection in one way or another, should always be close to each other. Remember: proximity implies a relationship. That applies to people in relationships, for words in a sentence and for headlines and bodies in a text. That also means that items or groups of information that are not related to each other should not be in close proximity to other items. This gives your readers an instant visual clue to the organization and content of your page.

Let’s take a simple example to illustrate the rule of proximity. I’ve put 2 lists below, both containing the same information. What do you assume about the flowers on the list on the left? Probably nothing much, right? What about the flowers on the list on the right? It appears that the last four flowers are somehow different from the others. You understand this instantly. And you understand it without even being conscious of it. You know the last four flowers are somehow different because they are physically separated from the rest of the list.

In this layout, every item is close to one another
In this layout, you know the last four flowers are somehow different because they are physically separated from the rest of the list

Takeaway for layout design rulesTakeaway

Rarely is only one rule the only answer to a page. The other three rules are intrinsic to the design process and you will usually find yourself using all four. But take them one at a time. It’s a good idea to start with proximity first and then go from there.

Contrast: If elements on your page (such as type, color, size, shape and so on) aren’t identical, let them differ extremely from each other.

Repetition: repeat some aspect of the design throughout the entire piece, such as bold font, a thick rule (line), a certain bullet, design element, color, format or spatial relationships.

Alignment: every element should have a visual connection with another element on the page.

Proximity: items on your page that belong together or have a connection in one way or another, should always be close to each other.

I hope these 4 rules serve you as well as they do me. Apply them to your layout design and watch how it improves them!

 Picture for designing CRAP layout

Stijn is a copywriter and content marketer for ACA IT-Solutions and manages the blog website. He's interested in writing persuasive content, web content and graphic design and likes to challenge himself with new insights.

Leave a Reply

avatar
  Subscribe  
Notify of