8pt Material Design GUI Templates
A walk-thru of Design Inc.’s visual design & base metrics
Eight..8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96. These are the numbers that run through my head at night. I have been using an 8pt based since my time on Android Auto, and have enjoyed applying the core Material Design methodologies to the Design Inc. user interfaces. Last week on our weekly UNDO show, a designer, Danaan Clarke, asked about the 8pt grid, and wether or not we had experience with it. I have always “nerded” out on the structure that supports design and thought it would show fun to share some “behind-the-scenes.” 🤓
1. Baseline Grid
The first and most important step is to ensure the core structure for your documents grid. You can define the grid values by navigating View>Canvas>Grid Settings…
The Google Material design team does a great job defining the method of how this baseline effects the values of other type elements of the core UI. Everything from navigation bars, typography, keylines, spacing, and minimum hit target sizing for actions are structured around this core baseline. I would add more here, but I follow this guide quite closely. If its not broke, don’t fix it.
2. Layout Templates
Next step is to define a column system for layouts across various screens. I try to stay conservative on my canvas sizes, but always try to use a 4, 8, or 16 column grid with a gutter of 8pt (or any multiplier of that). For vertical rhythms, I have a simple repeating 48pt grid. You can define the layout values by navigating View>Canvas>Layout Settings…
Below is a simple example of how I leverage my column grid (8 columns, 16pt gutter), the baseline metrics (8pt), and the vertical rhythm (48pt) on a new testimonial UI that we shipped this week.
3. Icons
Icons are huge part of making a base line grid work correctly across a user interface. There is a lot of tricky math to get this perfect, but if done correctly the integrity of your icon will maintain in the spectrum of screen densities (Retina, 1x, 2x, MDPI–XXXHDPI…if this doesn’t make sense read this). They key to executing icons in this manner is to ensure that all shapes, strokes, and margins are “even” (2, 4, 6, 8), so that you are left with a centered icon in the 24 x 24pt area that can also be multiplied (x2, x3, x4) and scale evenly.
There are also a ton of free icons sets that already have been designed to fit within a 8pt baseline. Material Design once again has some amazing resources for this, but you can design your own. Below is a shot of how I index all our icons in our core GUI template.
4. GUI Structure
There is really no prescriptive rules on how to best create these guides, but these documents are a source of truth that give me (and hopefully my engineering counterparts) peace of mind. The goal is to have a “pixel-perfect” version of each core component all in one document, so that every screen and state of the application doesn’t need to be drawn for production. There are a ton of great examples & resources online to reference, but if you want to start from scratch you can download my base file with the grids and column structure defined.
Thanks!
This post was a short one, but wanted to share a little about my process. If you found it helpful, please share it with a friends that would benefit. Also, if you enjoyed the video, I also post a weekly vlog…would love for you to subscribe.
