IA & wireframing

Layout + CRAP

Ludovic Delmas
November 4, 2020

No not this kind of lay out...

From the margins on the side of a page, to the content in between, layout is, in many ways, the foundation of design. Layout is the structure and relationship between items on a page. It maintains balance, and organization from one page to the next. Intentional placement of content helps users easily scan the page and find what they need. That’s layout in a nutshell.

Bad layout results in creating cognitive overload for users. They can’t easily find what they are looking for, which means they're less efficient at accomplishing their tasks and this causes frustration. Good layout has solid hierarchy and visual relationships. This helps the user to quickly scan and parse content, which is what IA and Gestalt Principles are all about.

At the macro level for digital products, layout is about figuring out the arrangement of images, text, and overall functionality. 

Let’s look at it like a recipe. If UI elements such as buttons, text, images, icons, etc. are the recipe ingredients, then layout provides the instructions for where and how you use those ingredients to make the overall recipe look and taste just right. Good layout can be learned. It’s part science and part art. Just like a good recipe.

Robin Patricia Williams created 4 design principles for layout: Contrast, Repetition, Alignment, and Proximity (CRAP).

Contrast

Contrast is about using visual weight (the measure of how much a visual element attracts the eye of the viewer) to make elements stand out and draw attention. When contrast is applied correctly, it’s not obvious, it's just effective.

Contrast is used to help move the audience’s focus to the most important things they should see and understand. Usually, whatever element has the largest contrast is understood to be the most important thing on the screen. Contrast enables us to get a faster understanding of hierarchy and to quickly see important pieces of information. It can be created through color, shape, size, interaction, proximity, font choices, symmetry, and the list goes on. Color contrast, in particular, is incredibly important for accessibility.

Repetition

Repetition is about unity and consistency. It helps people quickly understand what they’re looking at because they can see all similar elements. 

Think about repetition this way: it’s a lot easier to look at 40 identical objects than 40 unique ones. With the unique objects, your brain has to parse each one separately. Whereas with repetition, your brain can group all like objects together and quickly understand what’s going on. 

As repetition is all about consistency, it’s super important to keep patterns (colors, fonts, branding, and functionality) consistent across a product.

Alignment

Alignment is about the organization of elements relative to a line or margin. A design with poor alignment is like walking into a room that’s cluttered and hard to navigate. It makes you uneasy and it can be frustrating to try to make sense of everything around you. Plus, you can bruise your shins.

Alignment is important for four reasons: 

1. It matches how people naturally scan and focus on content.

2. It’s visually appealing.

3. It provides a sense of balance.

4. And it creates a relationship between similarly aligned elements. 

There are two basic kinds of alignment, edge alignment and center alignment. With edge alignment, elements are aligned consistently to the left or right. With center alignment, elements are aligned consistently in the center.

Using a grid for alignment can really help create a sense of cohesion and relationship among elements.  

Proximity

This principle states that elements that are close together are seen as related. Closeness shows connectedness. This helps create perceived groupings, which reduce cognitive load and increase readability. 

The secret to great design is in the way visual elements are arranged in relation to one another. That’s what layout design is all about. 

Back to library
203
Back to library
203
The UX process for absolute beginners (with free cheatsheet!)
1
Getting started
How to become a UX designer in 2021 (and beyond)
2
Getting started
UX vs UI
7
Getting started
Do UX designers need to know how to code?
8
Getting started
Recommended UX books
9
Getting started
UX university programs: Pros & cons
12
Getting started
UX bootcamps: Pros & cons
13
Getting started
6 brutal truths aspiring UX designers don't want to hear
14
Getting started
Difference Between Graphic Designer vs UX Designer vs UI Designer
15
Getting started
Intro to research & understanding
101
Research & understanding
Finding a problem to solve
102
Research & understanding
SWOT analysis
103
Research & understanding
Competitive analysis
104
Research & understanding
Heuristic evaluation (usability evaluation)
105
Research & understanding
Task analysis
106
Research & understanding
Stakeholder interview
107
Research & understanding
Framing the problem
108
Research & understanding
Research plan
109
Research & understanding
Survey
110
Research & understanding
User interview
111
Research & understanding
Card sorting
112
Research & understanding
Customer journey map
113
Research & understanding
Empathy map
114
Research & understanding
Affinity diagram
115
Research & understanding
Personas
116
Research & understanding
Contextual inquiry
117
Research & understanding
Diary study
120
Research & understanding
Eye tracking
121
Research & understanding
Intro to IA
201
IA & wireframing
Layout + CRAP
203
IA & wireframing
Site map
204
IA & wireframing
Scenarios
205
IA & wireframing
Storyboards
206
IA & wireframing
Low vs high-fidelity
207
IA & wireframing
Sketching
208
IA & wireframing
Wireframes
209
IA & wireframing
User flows
210
IA & wireframing
Intro to usability testing
301
Prototyping & usability testing
Usability testing plan
302
Prototyping & usability testing
Prototypes
304
Prototyping & usability testing
Research report
305
Prototyping & usability testing
Typography basics
401
Visual design & handoff
Color basics
402
Visual design & handoff
Color accessibility
403
Visual design & handoff
Pixels vs points
404
Visual design & handoff
Layout + 8pt grid system
405
Visual design & handoff
Design system
406
Visual design & handoff
UX writing
408
Visual design & handoff
"Final" usability test
409
Visual design & handoff
UX portfolio basics
501
UX portfolio
Your portfolio is just another UX project
502
UX portfolio
Choosing a site builder for your UX portfolio
503
UX portfolio
UX portfolio inspiration
504
UX portfolio
5 tips for junior UXers asking for portfolio feedback
505
UX portfolio

Join hundreds of

designers learning UX

Take our free 7-day UX design course for graphic designers, complete your first UX project in just a few days, and see what you think.
😎 You're awesome! We'll send you an email with the next steps. 🎊
👻 It looks like there's a ghost in the machine. Please try again.