Grid Systems
“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.” Josef Müller-Brockmann
In the most basic terms, a grid system is a structure that designers can work with and present content and imagery in a more manageable way. Even simpler, a grid system is a structure of horizontal and vertical lines that intersect and are then used to arrange content.
Grids allow the designer to build a solid structure and form into their designs. Having a solid grid system creates consistency and familiarity, thereby building trust in your designs. When using a grid system, it doesn’t mean that your designs will become boxy or boring, but rather it should be seen as something that will enable you to create a design that’s unique and intuitive to the user rather than restrictive.
By engaging with your user and building a sense of familiarity with them, you, as the designer, are in turn creating a good user experience - and enabling a grid system helps you achieve that.
“Although your grid system is something that will eventually be invisible to your final user, you can use it to aid you in creating layouts for your designs. But, like all rules when designing (and sometimes when developing) rules are made to be broken. You might not necessarily always need to stick to your grid formation, but you do need to understand grid systems, before you can commit to breaking the rules.”1
Grids allow the designer to build a solid structure and form into their designs. Having a solid grid system creates consistency and familiarity, thereby building trust in your designs. When using a grid system, it doesn’t mean that your designs will become boxy or boring, but rather it should be seen as something that will enable you to create a design that’s unique and intuitive to the user rather than restrictive.
By engaging with your user and building a sense of familiarity with them, you, as the designer, are in turn creating a good user experience - and enabling a grid system helps you achieve that.
“Although your grid system is something that will eventually be invisible to your final user, you can use it to aid you in creating layouts for your designs. But, like all rules when designing (and sometimes when developing) rules are made to be broken. You might not necessarily always need to stick to your grid formation, but you do need to understand grid systems, before you can commit to breaking the rules.”1
Choosing A Grid System: Framework vs. DIY
A framework is a grid system that someone else has already built; take a look at some here.
Creating your own grid can be challenging if you’ve never done it before, but there are so many tools available to help you, and with a little practice it becomes second nature.
Tools to help build grid systems:
Frameworks
DIY
Designing Your Wireframes
"Like the foundation of a building, it has to be fundamentally strong before you decide whether to give it an expensive coat of paint."3
Design Processes
Different designers approach design (and wireframing) differently, and everyone needs to find his own process. If you don’t have a preferred process, take some time to find yours as it’s something you’ll want to get comfortable with.
Take a look at some common processes:
Sketch…
Low-Fidelity Wires…
High-Fidelity Wires…
Final Visual.
As mentioned, there are many different processes, along with many different softwares that can aid in the development of your wireframes, but it’s always best to begin with sketching out your ideas. This will help you quickly visualize your ideas on paper to see which design(s) to move forward with. From there, you can choose 1 to 3 sketches to develop into low-fidelity wires using any of the tools below:
OmniGraffle
Balsamiq
Axure
Flairbuilder
InDesign
Illustrator
Creating high-fidelity wireframes is optional, but it will help you design more efficiently and is essentially the first step in preparing your final visual design.
From your sketches or low-fidelity wireframes, choose a design and lay it out in Photoshop using solid grey blocks for images and dummy copy as place holder text - a good widget you can install on your computer for instant “lorem ipsum” is Loremify.
By creating a high-fidelity wireframe, it will help you to organize your file and get a better sense of how content will look laid out to scale. That’s not to say that your low-fidelity wires shouldn’t be to scale; they should always be to scale unless you’re working directly from sketches to high-fidelity wireframes.
I prefer to design my high-fidelity wireframes in Photoshop because this makes it easy to quickly modify the wire into the final visual design, but you could also use Illustrator since you have the capability to export files to a .psd file, keeping most of the layers editable.
Take a look at some high-fidelity wireframes that have been translated into the final visual.
Finally, this stage of the process should be fun, as are all the stages! Look to other sites for inspiration and like any process, don’t be afraid to iterate, iterate, and iterate again!
Low-Fidelity Wires…
High-Fidelity Wires…
Final Visual.
As mentioned, there are many different processes, along with many different softwares that can aid in the development of your wireframes, but it’s always best to begin with sketching out your ideas. This will help you quickly visualize your ideas on paper to see which design(s) to move forward with. From there, you can choose 1 to 3 sketches to develop into low-fidelity wires using any of the tools below:
OmniGraffle
Balsamiq
Axure
Flairbuilder
InDesign
Illustrator
Creating high-fidelity wireframes is optional, but it will help you design more efficiently and is essentially the first step in preparing your final visual design.
From your sketches or low-fidelity wireframes, choose a design and lay it out in Photoshop using solid grey blocks for images and dummy copy as place holder text - a good widget you can install on your computer for instant “lorem ipsum” is Loremify.
By creating a high-fidelity wireframe, it will help you to organize your file and get a better sense of how content will look laid out to scale. That’s not to say that your low-fidelity wires shouldn’t be to scale; they should always be to scale unless you’re working directly from sketches to high-fidelity wireframes.
I prefer to design my high-fidelity wireframes in Photoshop because this makes it easy to quickly modify the wire into the final visual design, but you could also use Illustrator since you have the capability to export files to a .psd file, keeping most of the layers editable.
Take a look at some high-fidelity wireframes that have been translated into the final visual.
Finally, this stage of the process should be fun, as are all the stages! Look to other sites for inspiration and like any process, don’t be afraid to iterate, iterate, and iterate again!
References:
- http://webdesign.tutsplus.com/articles/all-about-grid-systems--webdesign-14471
- http://webdesign.tutsplus.com/articles/choosing-a-grid-system--webdesign-14490
- http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399
- http://en.wikipedia.org/wiki/Website_wireframe
No comments:
Post a Comment