Developers are like peculiar creatures. While with their strange habits, clothing selections, and lighting preferences may seem baffling to many of us, their work in all its majesty is nonetheless awesome to behold – to witness in person is amazement within itself.
I can say that designers are just as weird. Full of notions about juxtaposing styles, daring to dabble with color palettes that haven’t been popular since 1966 (yep, the experimentation goes a bit overboard at times), and delighting in “mixing it up” by experimenting with…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 agree on completely: we want to create and deliver the best possible product and experience (and we do mean the BEST). And in order to do that, collaboration is key.
Designing to the grid is one way that helps us work better, together.
Until fairly recently, best practices prioritized consistency of pixel size and whole widths (e.g. rounding up to 480 from 479). But now-a-days? 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, almost 70% of Americans own at least two digital devices (smartphone, desktop or laptop, or tablet), and about 40% own all three (a time out is needed, but that’s for another blog)! And now with smart watches gaining in popularity—don’t even get me started (sorry, I did it again…another blog I promise)
Since 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 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 (YAY!)
Designing to a grid isn’t a web design thing; it’s something most graphic designers should be well-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 has turned to the grid to help make everything run more smoothly.
The grid helps establish a visual hierarchy that stops a designer 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 developers—to jump in and collaborate without having to waste time figuring out where to find or put things within the established hierarchy.
Teamwork, folks—probably the number one reason designing to the grid is such a powerful uniting force across design and development teams. 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 (this is super important).
Almost 95% of people cite web design as the reason they mistrust or reject a website.
So it’s very important that both designers and developers are able to 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 (this is proven over and over again). 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 definitely one of the best ways to help ensure a smooth, efficient process where everyone’s (mostly) on the same page. The reality is that, in todays day and age, there’s less of a line drawn in the sand about how things work and how things look; so performing well and looking good is and should be, a priority for both designers and developers. When it’s all said and done, both parties want to see results they can be proud of; the grid helps us work together with a common vision to achieve those results.