Awwwards

Using the 8-Pt Grid System to Improve Your Design Workflow

by Ciprian Paraschiv on 19th February, 2017

Web design

Grids are no mystery for any designer nowadays, whether you are designing an app or a website. There are grids set up for all sorts of content alignment: horizontal grids, baseline grids to align content on columns. There are grids we adhere to strictly, and grids whose boundaries are meant to be broken in order to obtain creative layouts. But one of the grids that really got my attention is the 8pt grid system once I understood the benefits it could bring to my designs.

Is there really any problem? Other grid systems worked great for me

Well known grid systems such as Bootstrap and Foundation proved their benefits to me in past projects. But what I came to realize was that elements such as CTA can be nicely arranged but impact the general design when placed into a broader mix of design components. Great aesthetic value is not easy to accomplish in a consistent manner. To achieve this, you will need a system to define the spacing harmony of the elements.

Is there really a need for my interface to be so regular?

Not really. But if want to leave the impression of a qualified voice and having authoritative look, the interface you design should rather look and feel consistent. For example, when you shop online, you might get suspicious if suddenly you must enter your credit card credentials on a form with a different look and feel that the rest of the website.

Why does Bootstrap or similar systems eventually reach their limits?

Bootstrap is an assertive library of components giving designers and devs more liberty to concentrate on content and UX. Bootstrap proved to be very helpful for improving the general aspect of many websites. But lacking a consistent unit of measurement may produce layout divergences between pages, especially for clients with more than one website.

On the other hand, I mentioned in a previous article that I believe that the attempts to create unique and original layout will establish as a trend in the year to come. The 8 pt grid system may prove to be an useful tool for such attempts.

The 8pt grid systems uses increments of 8 to measure and delimit the design components. This means that every height, width, margin or padding will be an increment of 8.

You will ask yourself why 8pt system

The diversity of screen sizes and the growing resolutions have continued to increase making asset generation more difficult for designers. Using an even number like 8 to size and assign the distance between elements makes scaling for a wide variety of devices effortless and consistent.

For example screens that have a 1.5x resolution will have difficulties in order to cleanly render an odd number. Scaling 5px by 1.5x will result in a half pixel offset.

Most common screen sizes are multiples of 8 which makes for an easy fit. Scaling by increments of 8 offers many options without overwhelming you with variables like a 6 point system, or constraining you like a 10 point system. In the end you have to choose what size is right for your visitors. The “system” will work if it can be followed and repeated without unnecessary effort.

Ciprian Paraschiv

LEAD DESIGNER

I am a breed of SEO specialist and UX Design advocate. My strong engineering knowledge is key to reconcile the distinct goals of the two areas. I design with user’s delight in my mind, while not averting from optimizing conversion rates.