In this installment of Slider Shares, Co-Founder Brant Young and Principal Consultant Chad Currie teamed up to provide an overview of grids in UI design.
What's “the grid”?
In user interface design, a grid system is a way to align page elements based on sequenced columns and rows. We use it to place text, images, and functions in a consistent way throughout a product or site’s design. Think of the grid system as the digital version of a print layout for magazines. It’s how elements are organized and interact on the page. As screens widen, the grid informs how screens scale for effective layouts on desktop, mobile, tablet, etc.
A grid divides the web page layout into columns with margins (the whitespace) between them. You can then place content in one or more columns based on the layout of the design.
And it doesn't help that the term “grid” has several meanings in the UX field.
A responsive layout grid establishes how divs are distributed consistently at various screen widths. In Sketch, this is how “Grid” is used. In Sketch, these sorts of guides are managed under Layout Settings. In Figma, they’re called “Layout Grids”
Data table components are often called “Grids” in UI kits or frameworks like Kendo UI or Sencha EXT JS. To keep things straight, we normally call these data tables.
Designers may also use spacing grids (like the eight-pixel grid) to apply consistent padding, gutters, and margins around items. This is what Sketch calls a how “Grid”.
About Slider Shares
Slider Shares come from our recurring, company-wide Lunch & Learn meetings. Sharing ideas and learning from each other promotes a growth mindset, something we value at Slide UX.