0

grids and layouts are something that i've struggled with since starting my design career two years back. I've read books like grid systems and watched several videos and courses but as a UI designer, it feels like a lot of these resources aren't particularly catered towards my profession. Layout Essentials is next on my reading list, but judging from a quick flip through, looks to be still catered for graphic design.

I understand that grids for web design are fairly simple, and whenever in doubt, I can always fall back on the bootstrap columns, I'm not particularly sure about other cases studies such as desktop, TV or even car UI design. I get that we just need to define a column size, some dimensions for our margins and gutters and that's it, but my issue is coming up with these specific numbers in the first place. Any number I come up with just feels very arbitrary even when catered to the use case.

Wondering if someone could share their process on defining a grid when designing a desktop app, mobile app or website, or if there are any good books that can be recommended for grid systems in UI design specifically.

1

This article is great resource on why 8 is the magic number you are looking for.

The 8-point grid system is used for sizing, spacing, and laying out components relative to one another. This means that any padding, margin, button height, etc. is always a multiple of 8 pixels.

8-point or 8-pixels is widely used for the following reasons:

  • It scales perfectly in all the different screen displays (including android’s @0.75 and @1.5)
  • It’s a good basic unit to work with. the numbers 4 and 8 are easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them
  • Apple and Google advise you work with them

Now looking specifically at designing within a grid, you can take this 8pt rule and apply it to your grid creation.

Fixed width grid Using multiples of 8 find your column size. Let's use 8x9 to get 72. So you'll have 12 columns x 72. Now calculate your gutters. You could use 8x3 to get 24. That will look like 12 gutters x 24. You'll split the 12th gutter up on the left and right side to get 12px. Ultimately your grid calculation will be (12 columns x 72) + (12 gutters x 24) = 1152px width

enter image description here

Fluid grid If you want your grid width to be fluid depending on the users screen size, you'll only need to to calculate your gutter size. The column width will ultimately be determined by the users screen size. In this case, I'd still advise calculating based on the 8pt grid. Ultimately your calculations will look something like this where n will change based on your screen size:

  • iPhone 11 Pro Max: (12 columns x n)+(12 gutters x 24)=414px
  • Macbook Pro : (12 columns x n)+(12 gutters x 24)=1440px

There are plenty more articles on the internet based on the 8pt grid. Ultimately, there is a bit of preference on what you feel comfortable designing with. With time will come experience and confidence in your designs and the choices you make. Good luck!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.