In a recent installment of Slider Shares, Co-Founder Brant Young and Principal Consultant Chad Currie delivered an overview of what “Grids” are in responsive UI design.
Now, they’ve teamed up to answer top questions about using layout grids effectively.
Do I need to use a layout grid in my design. If so, why?
We recommend it. Design is all about creating order, and grids are a foundational part of that. Even in some of the oldest artifacts of “design” like hieroglyphics, we can see that humans have long used grids to organize information.
Grids help create consistency, which is the quality that makes a system look like ONE system, and helps users learn what to expect. A professional-looking design is more credible and trustworthy, which can impact the actions a user is willing to take.
Grids can also improve comprehension, helping users understand where to look, and what to do next. Grids can support rhythm, balance, and hierarchy that make an interface easy to follow.
The grid is also a key component of responsive design, which dictates how the UI behaves on different screen sizes. As the web is accessed across viewports and devices, our layouts must flex to remain intentional across widths.
Grids can make the design and development process quicker. Consistent spacing, margins, and components “click together” from one instance to the make it easier to reuse work, and improve the speed with which makers can work together within a system.
Will I be boxed in to a single look if I use a grid?
Not if you take a creative approach! CSS is an incredibly powerful tool and allows you plenty of ways to break things up. From single to complex:
Combine columns into modules
Intentionally break the eyeline to create interest
Make interesting use of white space (blank columns!)
Use Clip-path, Masks or Gradients to cut boxes into interesting shapes
Flow content around elements, like in this print-inspired example from Jen Simmons
Use rotation to skew elements, or animation to move them.
Do I have to use the same grid on every page or view of an experience?
“You, the designer, are empowered to recommend the best approach for the users you're designing for.”
- Brant Young, Co-Founder
No; Just be thoughtful about the number of variations you’re throwing into the mix. Within a single system, you might need to support content pages, card grids, and data tables. Each calls for a different approach.
When you think about mixing and matching, remember that common elements like headers, footers, and navigation are often shared across a system, and also leverage the grid. Your goal should be to support each type of content well, while creating an overall system that feels coordinated.
How do I define my layout grid?
For web or product UI design, the basic units include:
Number of columns
Width of gutters, the space between columns (fixed or percentage-based)
Width of margins, the space on the outside of your columns (fixed or percentage-based)
Twelve-column grids have long been a staple of UI design, because 12 can be divided into halves, thirds, quarters, and sixths, giving designers lots of interchangeable options. We often starting with 12 columns, then narrow down to combinations we really need.
Many development teams choose to start with an off-the-shelf grid like the Bootstrap Grid.
Of course, 12-column grids aren’t the only option - some designers advocate for using odd numbers of columns, or grids where the column widths differ, using an aesthetic formula like the golden ratio.
What do I need to keep in mind as I select a layout grid?
Photo by Daniel Korpai on Unsplash
As with many things in UI design, the best choice depends on the situation. Here are some factors that should drive your decision around grid.
Am I designing something that needs to jive with an existing experience, or am I designing something net-new? If you’re designing into an existing product, the incumbent option may be the grid that’s in use on the rest of the product. So start there. Does it work? Why or why not?
What do we know about the users? If you’re designing for a use case around which you’ve already got some data, you might be able to look at current viewport distribution and trends over time. Time of day and day of week are also interesting data points - are users logging on from their phones at night, or are they more likely to be at a desk, during working hours. Consider not only current data but also trends that may effect this data.
What types of content are going to be most important to this experience? If you’re planning on lots of long-form copy, you’ll want to aim for good legibility at an average line length of 45–90 characters per line, including spaces… which means you don’t want super-wide text columns. You’ll likely want plenty of white space. But if you’re designing a product that will use dense data tables and need fast functionality for a demanding workplace use case, super wide columns are your friend. Will their be slide-in menus at left & right? Concepts like this factor in to your grid, as well.
What does the dev team prefer? Depending on time available, skills, or experience/familiarity, it can make sense to use an off-the-shelf grid framework. If performance is a key concern, a lightweight custom grid may be ideal. Be sure to gauge what your development team is comfortable with before going too far down any one path.
Will my layout respond to different viewport widths? The default answer is yes. Unless you’ve got a really compelling reason otherwise, modern user interfaces are likely to be used on mobile devices, tablets, small browser viewports, and larger laptop or desktop screens alike. In fact for many products, mobile is note the majority. If you’re going to build a responsive UI, you need to consider which breakpoints you’ll use, and which you’ll actually mock up prior.
Will my grid max out at a certain width? Years ago, it was common for interfaces to be set to one fixed width. With the advent of responsive design, fixed width interfaces become less common. Still, though most layouts are fluid, some max out at a certain width (though background elements might create the impression of continued widening).
What’s the biggest thing to remember when designing a grid?
Photo by Helloquence on Unsplash
When in doubt, one rule of thumb is to ask yourself - what am I trying to convey to the developer? Screens are only one snapshot of how the story looks, but they (along with content on the screens) can change all the time. Use grids to explain unseen circumstances or how an element behaves between screen sizes.
“The grid is part of how you communicate intent to the developer.”
- Chad Currie, Principal Consultant
When designing, ask yourself:
What happens when this content gets really long or short?
What happens to this content when the space changes?
How is content A arranged in relation to content B?
How could the grid resolve unseen outcomes before they occur?
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.