Setting the Scene

Layouts and Grid Systems are crucial in design and direction for the audience. As Allison Goodman said in The 7 Essentials to of Graphic Design, the layout is a map for the user to navigate through what is presented. A good designer understands how the site was meant to be navigated and therefore makes a map that makes navigating the road ahead easy to do so.


This guide is imperative because it presents information in the form of an “information hierarchy”. This hierarchy is necessary in communicating information in the form of what’s most important to least important. These are the elements of “information hierarchy”

  • Visual Contrast: principles in which there is a juxtaposition within the “size, value, weight, white space, position, figure/ground, texture, and color”. The purpose of contrast is to maintain the audience’s interest and keep the visual engaging.
  • Symmetrical and Asymmetrical Balance: A balanced arrangement involves emphasis in the size and relative space of the scene. Symmetrical means that each designated side is identical to the other side, but this is not the only way to achieve balance. Prior to reading about this, I only thought that balance could come through symmetry. However, asymmetrical layouts achieve balance through a difference in space but with an emphasis of the different objects’ size that acts in accordance to the difference of space that is evident.
Symmetrical Balance |
Symmetrical Balance |
Asymmetrical Balance |
Asymmetrical Balance |
  • Rhythm: is meant to keep the flow of the information. This also keeps the reader engaged by repeatedly presenting a surprising change of flow to the information. This can be carried out in the Pinball Theory: keeping the eye moving by trying to toss the eyes around the information in an order that makes sense and is most effective. This is done in the size of images, the colors that are used, and the typography that is chosen. This is so eyes can remain focused but always engaged in what’s presently happening.
  • Depth: makes image and information pop out. This is to make information come alive through emphasis on scale, layering, and foreground/background relationships.
  • Implied space: is when part of the image or information travels off of the actual page. This is done to keep the audience interested and left pondering about what is presently happening. It is also done to command attention and bring attention to the dialogue that is happening within the entire picture.

Grid Systems are in place to help organize information. They are “invisible except to the trained eye”. They are subtle but crucial in placement of images, information, and their purpose is to create a firm foundation and solid consistency.

Grid Systems are put in place to

  • embrace in a signature mark
  • create a consistent theme within different products
  • maintain clarity in information

Other miscellaneous items that are crucial to grid systems are typography, size, color, quality of photography, and white space. To create proportions that are visually appealing involve two popular mathematical formulas: the Fibonacci Series and Root-2 Triangle.

Root-2 Triangle |
Root-2 Triangle |

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s