Visual design & handoff

Layout + 8pt grid system

Colton Schweitzer
October 15, 2020

What?! Something on layout, again?!

Yep. Layout is so so so important. And up until this point in the UX process, there’s a good chance that the layout on any wireframes is far from refined. But don’t fret! That’s how it’s supposed to be. You shouldn’t worry about the details when you’re wireframing. That’s what this stage of the UX process is for. 

So let’s get into layout by talking about CRAP again (Contrast, Repetition, Alignment, and Hierarchy). 

These layout principles very much matter, especially for the visual design phase. Make sure to apply them appropriately in your designs. 

At this point in the process, you'll go back over your designs with a fine-tooth comb and make sure everything is sitting where it needs to. For example, ensure the same spacing rules apply across your designs.

Moving on, let’s talk about the 8pt grid system as a way of helping establish a solid layout. 

When creating a digital product, you’ll want to have a consistent system in place for the sizing of elements and the space between them. For example, there should be the same amount of space between a header and the content below it no matter where you look in a product. 

This is where the 8pt grid system comes in. The 8pt grid system uses increments of 8 to size and add space between elements on a screen. 

Why 8pts? Long story short, if an object renders on a half pixel, it will be blurry on a low resolution screen. So if you used a 5-pt grid system and needed to export assets at 1.5x, that would be problematic because it would render on half pixels, causing blurriness. 

With such a large variety of different screen sizes, it can be tough to create only 1 set of assets that work across a plethora of devices. Using 8 for sizing and spacing elements makes scaling simple because it divides and multiplies into even numbers rather than half pixels. This makes it so objects that are scaled to .75x, 1.5x, 2x, 3x, and so on are all aligned on the pixel grid and don’t look blurry. 

The 8pt system is incredibly valuable because it saves you time, while providing a steady rhythm and sense of harmony for your content. It makes the product look well designed across all platforms. 

Additionally, it makes communication with developers much simpler because there’s a system in place that both designers and devs can reach for. If devs are struggling with a component’s spacing, they know that it has to be an increment of 8 instead of having to measure it themselves. 

The spacing between elements shouldn’t be arbitrary. Keep your spacing consistent. Make sure the spacing between all similar sections is equal. For example, if you use 48px between your H1 and H3 on one page, use this consistently across all parts of your design.

It’s important to point out that many websites and products don’t use the 8pt grid system. If you’re designing a product that doesn’t use the system, spend some time learning their spacing and sizing strategy. 

Back to vault

405

Back to vault

405

What is UX?

2
Getting started

Why is UX important?

3
Getting started

What is the UX process?

4
Getting started

What is design thinking?

5
Getting started

What do UX designers do?

6
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