I’ll come right out and say it. I think the grid is the unsung hero of a good design. It gives structure and lets the design fall perfectly into place on the canvas. With a grid, adapting and building something new into your design is easy. Think of it like a house’s foundation. With a solid foundation, the house is stable, and building on it is easy. With a solid grid, your design can easily be adapted to accommodate whatever changes come along.
Today, we’ll share iOS Grid System, which I’ve been using when designing apps in Adobe Fireworks. The extension is free for both personal and commercial use, and it works with all iOS devices as of the beginning May 2013.Installing and using the iOS grid extension in Fireworks is pretty easy. We’ll explain the process in detail, but you can jump to the download section and try the extension right away.
I like consistency. It helps me feel like I can trust whatever I’m using at the moment. At a deeper level, users appreciate consistency because it builds trust — trust that you aren’t going to pull the rug out from under them in the middle of whatever they’re doing. They know what they’re going to get, and they’ll be more comfortable with you if everything lines up just right, rather than if elements look like spaghetti thrown against a wall. In the end, consistency improves trust and credibility through better design quality, and it improves usability by making a website or application more understandable, predictable and findable.As a designer, I like figuring out a system that makes updating easy for me. Grids help here because I don’t always have to worry about how a particular element should align with another; I’ve thought ahead and done that work already.

The easy answer is that most of my designs these days are for iOS, and a grid system is essential to every design I craft. I start using it early on in the design process, and having a solid grid in place when I design makes sense for me.

I decided to build it after noticing how much time I spent making decisions that I could have easily automated. With this extension, I don’t have to spend time tediously clicking and dragging around to make sure my grid’s shapes and guides are pixel-perfect. This extension allows me spend more time on other important parts of the process (such as how the design works and looks).

Now, I just open Adobe Fireworks, create a new project, and then select what iOS device I’ll be designing for and the number of columns I’ll need. Then, the grid appears on my canvas, along with some nicely sized gutters, which help my design breathe a little easier.

Here’s what it looks like (notice the green overlay):