GRID THEORY
LAYOUT
ALIGNmENT
MTM1532
Tiffany Tse
tset@algonquincollege.com
GRID THEORY
pythagoras and the golden ratio
http://goldenratiocalculator.com/
Rule of thirds
Rule of Thirds
Grid systems
960 Grid System
Golden Grid System
Semantic.GS
and many more...
Resources
Layout and Composition
Balance
Symmetrical Balance
http://dwd.co/ http://clearmenu.com/
Bilateral Symmetry (balanced on more than one axis)
Radial Symmetry (equally spaced around a central point)
Asymmetrical Balance
Unity
How elements on a page interact with one another.
Page design should work as a whole, not in parts.
Emphasis
Create some kind of focal point
(which will by default become what is emphased on the page)
Layout and alignment
Alignment
Alignment creates a sharper, more ordered design.
Aligning elements
Helps to create a visual connection between them.
It creates order within a composition.
Alignment
Tightens the design and eliminates the messy effect which arises when items are placed randomly in a composition.
Some Rules to Follow
When thinking about design, layout and composition.
ONE | Research and AUDIENCE
Research and understand your audience.
TWO | Two font family rule
Use a maximum of two font families in a composition.
You can use different weights of the same font family to create interesting typography, but too many font families can become messy very quickly.
THREE | GET FEEDBACk
Whether it's through usability testing, or from a peer, feedback is important for growth and to enhance a design.
FOUR | Open UP SPACE
Don't be afraid of using white space to open up a composition.
Often times more whitespace, can lead to a better design.
(both vertically and horizontally)
FIVE | BREAK
It's important to take breaks, to refresh your mind and get into the process.
SIX | ALIGN, ALIGN, ALIGN!
Align objects to one another.
SEVEN | JUSTIFICATION
Avoid center justification for large amounts of text.
EIGHT | KEEP THE READER
Design to keep the reader on the page, use page elements to bring the viewer back to important parts of your design.
NINE | PREP
Pre-design with sketches, dummy pages and grids.
Doing an ample amount of prep work before you start will aid in the effectiveness of your design.
TEN | USE IMAGES SPARINGLY
Make use of images, but sparingly.
Concentrate on creating visual interest with typography.