Soft 8pt. grid for Sketch
Background
Over a year ago I started a little project. Within a matter of days that concept became a prototype and then after weeks of user testing and iteration the prototype became an app. And now, after 6 months of development and testing that app is slowly transforming into a business — or so I hope.
Operating as a sole founder / designer of a startup is full of exciting challenges and fraught with temptations to misuse the limited time of a sole founder toggling between working in versus on the business. I was spending countless nights staring out my sketch files, updating symbols and curating revisions on little sleep and lots of caffeine.
Over the course of the past year, I cannot remember how many times I have redesigned the same screen. Each iteration brought new truths and learnings but at a cost of time that kept on getting steeper. This cost became a forcing function to wisen up and introduce efficiencies into my design process. The first and biggest efficiency to have was to build one design system that I could then quickly personalize for their respective platforms (iOS & Android).
Design Challenge
One of the most difficult things to create, communicate, and curate in UX design is scaling of a screen and it’s contents across multiple devices. In my experience this requires 3 key principles:
- Spacing: the relative positioning of objects and the distance between them, in respect to the overall size contained space.
- Scaling: the size of objects in digital space based on some governance of importance and use.
- Object Heuristics: using objects in an practical, repeatable pattern that allows the user to learn familiarity.
I’m going to focus on the first two principles because I find them to be really irritating and remain rather unsolved. You may have noticed a couple of features in Sketch called grid and layout. If you haven’t played with these, please do — they are your friends.
Material design utilizes an 8 pt. grid that can be used for Android devices and responsive web. This means object’s dimensions and spacings are made in multiples of 8. iOS oddly enough is an outlier because it doesn’t have any grid system. Lemme show you why that stinks.
Can’t use grids because an 8 pt grid for iOS devices will just fall off and isn’t centered to the artboard so basically that is useless. That means we have to create a soft grid using layout settings.
What I did
Since we can’t rely on a grid layout in Sketch, I tried to make best use of layout settings. Here’s some quick tips of how I set up and use the soft 8 pt grid.
- Scale objects using multiples of 8.
- Space objects using multiples of 8.
- Width is the dominant variable. Height of elements mostly stays constant.
- The active space remains divisible by 8, irrespective of the screen resolution.
- The gutter size varies by device time and is sized to make the active space divisible by 8.
This helps to create a common dimension for an active design area amongst most devices. Mapping this out really helped me understand how I anchor objects for proportional or fixed properties as I scale a screen for different sizes.
If you are familiar with design systems, you’re probably wondering why I vary gutter width? Aren’t you supposed to scale the number of columns rather than vary the dimensions device to device? It may not be ‘right’ but I chose to prioritize making the active area divisible by 8, rather than consistency in gutter width across all devices.
The grid in action
This is where I started to reap all the benefits of the time invested in setting up the soft grid. I started with either the mdpi breakpoint for Android or iPhone 8 for iOS and scaled up. The iPhone SE size is an exception, Which I grouped and proportionally scaled down from the iPhone 8 to the SE.
Below is an example of an onboarding screen from SQRL and how I translated it using the flow detailed above. This took me a matter of 3 minutes to complete for each screen. Sometimes, I find myself going back in and vertically distributing objects further for taller screens such as iPhone X or Galaxy S8.
A bonus value if you use the Anima Sketch plugin to anchor objects and export those parameters to dev. That will help the developers understand how to use anchor values to proportionally scale or fix objects across the breakpoints.
Closing thoughts
I hope you will find this as useful as I did. It isn’t by any sense complete and a designer’s work is never done. I welcome you to download the grid here -use it, send me your feedback and the opportunity to jam on this make it even better.
If you are wondering what the heck Sqrl is, it’s a product I created to help people invest in their physical and financial well being. It works by capturing the steps you naturally take from your phone’s pedometer and shows you how much you could be saving every day if 1,000 steps = $1. You can fund your savings from your own checking account into your own savings account and we’ll move the funds at the end of each week based on your activity.
I made this because I feel passionately about the money problems we have as a society and I love the idea of saving money to reduce stress and to tie that to something physical we all can do to improve our health.
We’re still a bootstrapped team so if you like this article, or the idea of my app, please check our website out — give us a download and spread the word. 🙏
