Something I, as a self taught designer, hadn’t gotten into the habit of was designing with a grid system in mind. This is something that I have quickly remedied. Designing this way means that the rest of the project flows as smoothly as possible and makes future structure changes a LOT simpler.
With structure comes the freedom to be creative without constantly worrying about how the structure will affect the build process. I will briefly cover two helpful tools that I feel work well for me. They allow your design grid to be set up faster and easier, allowing you to spend more time designing.
Designing with the grid system in mind
The first: Modular Grid Pattern
This is awesome in the fact that it sets up your column and row as a grid pattern you can overlay in your designs. It can be used in two ways: Firstly the application panel which is not only available in Photoshop, but also Fireworks, GIMP and even Microsoft Expression Design. The panel requires an internet connection to set up a grid, but once a grid is set up the pattern is available offline.
The second option, which is pretty nifty, is the web app. (works in chrome, firefox, safari and opera) Simply create your grid online and download the pattern. Have you ever found yourself designing on a machine that’s not yours? The web app is a great tool for these situations.
The second tool: GuideGuide
Based on the fact that I predominantly design in Photoshop, this is my preferred method when designing for web. This photoshop tool rocks grids for two reasons (again, this is my personal opinion); 1 – due to the fact that you’re able to set up the grid for just the content area defined by a project. Simply do the maths and set the outer margins to confine the grid to the area you need. 2 – With the Modular Grid Pattern system, you have to manually turn the pattern on and off in your work flow. With GuideGuide you can simply use the photoshop shortcut to turn the guides on and off – ctrl + ; (PC) and cmd + ; (Mac) and allows you to snap objects to create pixel perfect designs. A win/win in my mind.
Now, as a bonus, I’d like to mention another grid tool that could quite possibly change your life. The 1140 css grid. This is a css grid system that allows for 12 column grid across a width of 1140px. Before you all begin hurling insults towards your screen, just breathe. Everything is going to be O.K… We are all used to designing and building for web at 960px. When I first found this resource, I too was feeling like staying in my 960 box. The thing with this grid system is that it is completely responsive. Meaning that no matter what resolution the audience is using, they will see your content “correctly”. What this 1140px system does do is allow higher resolution consumers to have a fuller experience of your product. A lot of web users these days have awesome monitors with a of pixels. I get really upset when I visit sites that use a measly 70% of my monitors retail space. I invested in a good monitor and so have a lot of other web users. We, as designers, should show respect to that fact (as well as considering mobile users; being totally responsive, this system caters for the smaller devices too!) and stretch ourselves in how we design and build our content.
Thanks for giving this post your time. I hope it has enlightened you and expanded your “awesomeness” horizons.
A.F
Resource links:
http://modulargrid.org/#app
http://www.cameronmcefee.com/guideguide
http://cssgrid.net
