Designing a responsive UI based on 8pt grid

Chelsea Tang
Jun 7, 2017 · 4 min read
Image for post
Image for post
BCS’s live effect in iPad

Several months ago 8pt grid system was a hot topic, and many designers wrote about it in medium. I read them word by word and I was still confused and curious about the feasibility of this theory, so I planned to test it out in a new admin console design process named BCS, which offers an automated fraud detection and prevention technology services.

Considered the time constraints of BCS project development, we defined the smallest device width to iPad in portrait which means that we started to design with 768px width. (I didn’t start with mobile was for the mobile space is too narrow, we have too much information that can’t be hidden…. so we temporarily give-up the transforming of mobile device layout)

And then the main content below is separated to two part: one part is for 8Point Grid, another part is for responsive UI.

Part1:8Point Grid

A point (pt) is a measurement of space that is dependent on screen resolution. The simplest explanation is that at a “1x” resolution (or @1x), 1pt = 1px.

Over past several years, I got used to pushing pixels by using my design eye to align elements. After the entire practice of 8pt grid system, I really realized that grid is crucial to create a consistent and scientific design system.

I quoted several paragraph of Elliot Dahl’s article Intro to the 8-Point Grid System

FEWER DECISIONS = LESS TIME

By removing 7 of every 8 spacing options, you reduce the amount of fiddling available to you and subsequently reduce speed to code.

MULTI-PLATFORM DESIGN

Regardless of form-factor, most popular screen sizes are divisible by 8 on at least one axis — usually both. Additionally, some platforms’ style guides (like Material Design) call specifically for a grid of 4 or 8 points, making this system a natural fit.

I chose the “soft grid”.

One that places elements into a system-displayed grid defined in 8-point increments (we’ll call this the “Hard Grid” method) and another that simply measures 8-point increments between individual elements (we’ll call this the “Soft Grid” method).

When the two kind of grid was applied into practice, I found that “soft grid” is more feasible in this BCS console design process. I’ll take for instance the case of when the height of a button is 32px which will be too big in the same time 24px will be too small.

You can define the grid values by navigating View>Canvas>Grid Settings…

Part2:Responsive UI

A responsive UI is simply a UI that reacts to the amount of available space.

When I initially knew about the RWD, it made me so confused. Responsive design is a pain to learn, but it’s an important pain to learn.

Designer, who should involve developers early to discuss the responsive UI strategy.

Defining breakpoint is to choose when to change the layout. Width is perhaps the most important dimension when it comes to choosing when to change your UI.

A ‘breakpoint’ usually means a specific width where your UI could differ: respond to the new additional space to better take advantage of it. It could be a small difference (minor breakpoint) or a much larger change(breakpoint) .

see the ‘what to change’ section below for plenty of examples.

Depends on the number of breakpoints you defined throughout your entire design.

As there’s a wide spectrum of devices, thinking about specific phones and tablets is only going to get you into trouble. Instead, think more generally about how much space you have to work with.

The ‘when’ to change is only half of the question. Knowing what (and how) to change is just as important.

There are number of common patterns you might consider when building that responsive UI, such as revealing previously hidden content as the screen size grows, transforming your navigation pattern or switching from a list to a grid, dividing your screen into multiple sections side by side, reflowing specific elements, expanding the size or the margins of individual elements, or even changing the position of specific elements.

Of course not.

You can define the layout values by navigating View>Canvas>Layout Settings…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store