Visual design & handoff

Layout + 8pt grid system

Colton Schweitzer
November 6, 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 library
405
Back to library
405
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.