Part 1 of 2
8 is Great
Using a defined grid during UI design allows you to speed up the process by allowing for fewer decisions giving you a more consistent look and feel throughout the application. We like using this method to speed the transition between the UI designer & UI developer. It also makes scaling for a wide variety of devices better since most popular screen resolutions are divisible by 8.
There are two types of grids:
Hard Grid - Elements are sectioned off and positioned relative to a container element higher up in the hierarchy.
Soft Grid - Individual elements are positioned relative to each other rather than to an actual grid.
Setting Up the Grid
When starting a new project, we want to make sure we have our Sketch file set up for implementing the 8-pixel grid perfectly. I’ve been using this process for the past couple projects. This alone has allowed me to speed up my design process.
First, you need to set up sketch to use the grid system.
- Click the View in the upper right corner
- Chose View > Grid settings
This will display a popup allowing you to change the block size. Here you want to make each block size 8px then a thicker line every 10 blocks.
This will allow us to now use a hard grid when setting spacing on containers and other components we build.
By default, Sketch doesn’t have a shortcut to toggle the grid. Here you can access our systems preferences to add a shortcut command to toggle the grid.
I went with the Adobe shortcuts here because I’ve had experience using them for years, so it made sense to use the same ones.
- command + ‘ - this will toggle to grid
- command + ; - this will toggle any guides
Now that you have the basic grid set up, you need to start setting up the metrics you will be using.
Before you start building our metrics, you must change the default nudge values. Currently, sketch operates at a 10px nudge. However, you want to change that to better fit the 8-pixel grid. You will need to install the Nudge Sketch plugin.
After that is all installed, you will need to change the big nudge to be 8 pixels.
The metrics will allow us to have consistent spacing throughout the design. Our blocks will be in increments of 8. You will want these set these up shared styles to be easily applied when creating your spacing.
To start, highlight the element you want to make a shared style. From there head over to the right tool bar where you will find a dropdown labeled “no shared style”. This is where you want to start adding in your styles. In the dropdown click create new style then assign it the value name. If your using 8px, give it a value of 8px. This will go for every style you create.
After all shared styles are created, you should have around 14 different items depending on how large your spacing is.
From there, each block will have a new color that will have 50% opacity. You should end up having 14 shared styles.
- Create blocks in increments of 8 (8, 16, 24, 32, 40, 48, etc.)
- Assign a different colors values to each block
- Set opacity to 50%
- Set shared style for each block
- Assign related value to style name
This is what you should end up with after creating all shared styles.
Before you start building out the product cards, there is still more setup to be done. You should have already installed Nudged, now we will need to install the plugin Layer Tools. You will mainly be focused on one particular one. Layer Tools – Toggle. This will allow us to toggle folders with certain names.
- Download & Install Layer Tools
- Plugins > Layer Tools – Toggle > Toggle Settings
- Set toggle for – Guides
You will see this in action later so for now, choose ok and let’s start building.
Part 2 of 2
Putting It All Together
This is where the fun really begins. Now that you have our grid system set up, our default spacing share styles saved, you can start using them in our projects.
Let’s take a look at the product cards on 53.com and focus on setting up the individual product cards spacing.
You will want to focus on the outer-most padding of the card. Here we will want to implement our spacing with the metrics we set up earlier.
- Create a block that has 24px width and/or height depending on the direction.
- Rename layer to match width/height
- Group all guides – rename to “Guides”
Grouping the guides allows us to use our Layer Settings we set up earlier. You can also use perfect squares when spacing and then pulls guides into place if you feel the color is too much.
Card title spacing
Block section spacing
All together now.
Now since we have all our guides labeled and grouped, we can toggle them on/off with this shortcut:
This can benefit in many ways for UI designers and UI developers focused on building more componentized interfaces. It takes a simplistic approach to spacing not only for using in designs but for the development process too.