Either on your own or in school, you probably learned at some point about the origins of the typographic grid. You know grids were developed with measurements from the golden ratio, the measurement that defines good aesthetics. You may also recall that layout/design using the golden section is scientifically and psychologically proven to be the most visually pleasing for the printed word. No doubt that principles of grid layout laid foundational work for all of graphic design today, but in a time when there are so many variations in how users absorb information, is the typographic grid still as applicable?
The Golden Ratio
In short, the answer is: of course. The eye still gets tired after reading 7-10 words per line. Only now, eye strain is even worse because people are reading on a glowing screen all day. Additionally, multiple available touchpoints and a constant barrage of distractions make for a decent design challenge on its own. But a user experience designer has an opportunity to meaningfully forecast these issues and make a difference for users. It’s a thankless job–sometimes your only job is to get people to read the core message, not to do it beautifully. Grids are more important to us now than ever–they can adapt to screen sizes and change a user’s experience instantly. And as always, grids give us an opportunity to quickly and beautifully get content to users.
Use the grid across platforms and devices
Many companies today reach people in multiple ways, so web and user experience designers are expected to adapt to sending a core message in several different ways. No problem! You can use the same grid on a website or a mobile device. This may seem impossible, as column widths obviously would seem so much smaller on a mobile device, or completely overwhelm a large monitor–but here’s where one of our heroes, the fluid grid, enters the scene.
There has been a lot of top-notch attention lately given to fluid grids, especially since the advent of responsive/adaptive design. Here’s why: fluid grids combined with screen-size-sensitive media queries allow you to create one online experience that adapts to countless devices (some companies will be able to kiss their mobile sites goodbye!).
In order to calculate the measurements for your fluid grid, you probably will need to start with a design that already has some elements defined in pixels: the container and maybe a couple of columns, for example. Once you have those, you’re ready to see magic in the math.
To get the correct measurements for your fluid grid, Ethan Marcotte, founder/leader of the responsive web design movement, says,
“We take the target value for each element’s font-size in pixels and divide it by the font-size of its container (that is, its context). We’re left with the desired font-size, expressed in relative, em-friendly terms. Or to put it more succinctly: target ÷ context = result”.
That number is converted into a percentage and that determines the column width (Ethan’s article on responsive web design does an excellent job illustrating this technique). Therefore, even your carefully-crafted grid can adapt and be responsive to multiple devices while still maintaining a consistent visual harmony. And, provided your media queries are correct, telescoping on a mobile device should not be necessary.
Why use the same grid on multiple devices? Not only does using the same one grid save an immense amount of time and energy, you can reuse all assets by using a single grid. This saves even more time and energy. The same image asset can be used on a mobile device and an email, a landing page or a kiosk screen. The image doesn’t need to be cropped or renamed. Additionally, by using the same grid across touchpoints, your site is likely to be easily modularized, if it’s not already. Take one piece here, plug it in there. Seamless.
Grids are not limiting
I have heard some user experience designers claim that they find grids limiting. I completely cannot relate, because the grid is actually an incredibly liberating design device. You probably already know (thanks to a template or style guide) where the headline will likely go, how a callout will work, where photos will appear, etc. Influential graphic designer and educator Ellen Lupton famously said, “To say a grid is limiting is to say that language is limiting, or typography is limiting.”
The best page layouts, in my opinion, are ones you don’t even notice. Swiss design taught us this. Their minimalist aesthetic and thoughtfulness towards human behavior set the standard for how we read the printed word today. Think about reading a really engrossing book: do you even notice the page numbers, the width of the margins, or the leading? Your mission as a user experience professional is to get people to the core message, and the grid enables designers to present that core message in a meaningful way.
The medium of the printed word has certainly evolved and changed–a glowing screen, after all, is the new “printed” word. However, the underlying principles of good layout and typography really have not changed. The thought leaders on web grids have poignantly reminded us that we need to be mindful of the grid as not only a powerful layout tool, but a necessary structure for commanding information and most importantly, getting our core message to users.
 |
Lacey Graves Gerard is a design generalist living and working in Houston, TX. She specializes in designing experiences for the web, mobile devices, and kiosks and infuses each of those touch points with her passion for and understanding of graphic design. And, she can make a mean bowl of popcorn. You should follow her on twitter here. |
