Member-only story

Part 3: Size and spacing

Building a design system — where to start?

Shane P Williams
UX Collective
Published in
9 min readJul 5, 2019

(Non Medium members can read this article for free here)

Colour, space and typography — these elements are the building blocks for a solid design system. They are distinctive visual elements to focus on when building a brand. Let’s take a closer look at size and spacing

illustration by Ouch.pics

What we’ll be covering…

Part 1 — First things first
Part 2 — Colour
Part 3 — Size and spacing
Part 4 — Typography
Part 5 — Bonus elements

Size and spacing

Spacing is often an overlooked element but is one of the biggest influences in creating a distinguishable brand. Many popular frameworks like Bootstrap and Foundation ignore the idea of a solid base-line grid. Be cautious of picking off the shelf frameworks like these. Not having a consistent unit of measurement can lead to layout inconsistencies between pages, particularly on projects with two or more designers. The “system” is only good if it is easy to follow and repeat.

8 Point Grid Sytem

There are many ways to define your measurement units, my recommendation would be to use multiples of…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Written by Shane P Williams

At the intersection of Brand, UX & UI. Passionate about design, tech and digital. Design systems Advocate. Founding Editor at www.DesignSystemsCollective.com

Responses (1)