Developers are like peculiar Amazonian birds. While their strange habits, T-shirt selections, and lighting preferences may seem baffling to many of us, their work in all its majesty is nonetheless awesome to behold.
Imagine if Sir David Attenborough was tipped off to this fascinating lot: perched in the corner of a darkened room and narrating just above a whisper, he excitedly addresses the camera…
“...observe as, by the light of his three monitors, the developer begins to adjust the maxlength attribute of this HTML5 form…”
I can say that we designers (another notoriously quirky breed) are just as weird. Full of notions about juxtaposing styles, daring to dabble with color palettes that haven’t been popular since 1966, and delighting in “mixing it up” by experimenting with…well, everything, we’ve been known to butt heads with developer sensibilities on form versus function now and again. But there is something we can all totally agree on: we both want to create and deliver the best possible product and experience. And in order to do that, collaboration is key.
Designing to the grid is one way that helps us work better, together.
Here are three reasons why.
Goodbye pixel-perfect, hello Mobile First
Until fairly recently, best practices prioritized consistency of pixel size and whole widths (e.g. rounding up to 480 from 479). Now? Not so much. That’s because web design used to be a relatively fixed thing, with the majority of people viewing websites on monitors that were standard in size. Today, there are myriad devices and screen sizes to take into account. In fact, 66% of Americans own at least two digital devices (smartphone, desktop or laptop, or tablet), and 36% own all three! And now with smart watches gaining in popularity—don’t even get me started.
Because responsive design has become more important than being pixel-perfect, designing to a grid is one of the best ways to establish a system for design that can be more easily adjusted for many devices from the very beginning. Since I already know that my design will be resized in various ways, the grid enables me to maintain a desired look and feel by staying mindful of how elements will move and change to match specific device requirements. This, in turn, helps the developer carry that design into functionality with less back-and-forth about how things fit/work—and it means getting the best possible experience for the user.
Organization and efficiency for all
Designing to a grid isn’t a web design thing; it’s something most graphic designers should be well-acquainted with, especially because it’s one of the most natural ways to plan and organize a design. So it makes sense that responsive design and development (which requires information to be both highly organized and scalable) has turned to the grid to help make everything run more smoothly.
As a designer, I find that the grid helps me establish a visual hierarchy that stops me from adding unnecessary elements. It also ensures all content is consistent, highly structured, and easy to consume—all of which is a win-win for design, development teams, and the end-user! Also, because everything organized, it makes it easier for other designers—and even developers—to jump in and collaborate without having to waste time figuring out where to find or put things within the established hierarchy.
By our powers combined...
Teamwork, folks—probably the number one reason designing to the grid is such a powerful uniting force across design and development teams. That’s because there will always be things that, even when they work out math-wise on the grid, don’t end up looking good or being functional. Having a common structure to work from gives designers and developers greater freedom to collaborate on solutions that can meet both criteria.
And collaborative teamwork really matters.
So it’s imperative that both designers and developers can work together to get UI/UX right. Plus, even from a design standpoint, it’s never just about visuals; no matter how awesome your site or app looks, it won’t matter if people can’t figure out how to use it. Designing to the grid is the first step in a process that bridges design and development, making it easier for everyone to work smarter, and more efficiently toward their best work.
When it comes to solving web design/development challenges, grid design isn’t the only way to go—but it is certainly one of the best ways to help ensure a smooth, efficient process where everyone’s (mostly) on the same page. The reality is that, nowadays, there’s less of a line drawn in the sand about how things work and how things look; performing well and looking good is a priority for both designers and developers! In the end, both camps want to see results they can be proud of; the grid helps us work together with a common vision to achieve those results.
Looking for a design and development team to help you work some awesome UI/UX magic? See all the ways we can help.