Designing a responsive UI based on 8pt grid
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
Q: What’s the point?
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.
Q: Why designers need a grid?
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.
Q: Why 8pt?
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.
Q: Hard Grid or Soft Grid?
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.
Q: How to set up 8pt baseline grid in sketch?
You can define the grid values by navigating View>Canvas>Grid Settings…
Part2：Responsive UI
Q: What’s responsive website design(RWD)?
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.
Q: Who do you think should be responsible to the RWD strategy, designer or developer?
Designer, who should involve developers early to discuss the responsive UI strategy.
Q: What’s the breakpoint or the minor breakpoint?
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.
Q: How many UI mockups should be handed off to developer?
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.
Q: what to change between the breakpoints?
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.
Q: Does every page need to define same breakpoint?
Of course not.
Q: how to set up layout in sketch?
You can define the layout values by navigating View>Canvas>Layout Settings…
