Takeaways & Links

Takeaways:

• Keep your grid flexible so that you can manipulate it to your needs when designing the different elements of your website.
• Do a mock-up and draw guides to help with your layout before coding.
• Experiment with the positions of the elements on your page. Don't be afraid to move things around a bit. What might look good now might look awesome after some tweak to the positioning.
• Your grid can be as simple or complex as you like (or as your skill level permits).

Helpful Links:

All About Grid Systems

Grid-Based Design Theory

A Brief Look...

Well ... What Is It?

According to our friends at Wikipedia, grid theory is a structure — usually two-dimensional — made up of a series of intersecting straight or curved guide lines used to structure content. Most importantly for our purposes in this class, the grid serves as a framework on which a designer (that's you!) can organize graphic elements like images or even paragraphs in rational, manageable chunks. It is based on the golden ratio, as exemplified here:

The use of grids has increased as Web designers have begun using them more often to create balanced page layouts. In All About Grid Systems, Rachel Shillcock notes, “The good thing about grid systems is that they allow you to design in proportions, balancing between all of the different elements that you might have in your design."

At its most basic, the theory is based on the rule of thirds. "In general, compositions divided by lines that are proportionate to the golden ratio are considered to be aesthetically pleasing," according to web designer Jason Beard.

Why Should You Care?

Excellent question! According to one of the many helpful websites on grid theory, grids allow you to design in proportions, balancing between all of the different elements that you might have in your design. They also provide a foundation and balance, and they play nice with other design principles.

Importantly, the notion behind the rule of thirds and thus grids is that having things slightly off-center results in more interesting composition and therefore attracts more attention. Take, for example, the following image taken from The Photography Nomad:

Sounds Great! Got Any Tips?

The Internet is a wonderful thing. You have only to search for "grid theory" and a wealth of information appears for the perusing. But here are some basics:

• Start incorporating your grid early on, for example, when you're sketching out the design for your Web page. You can do this by using the handy guide lines available in design software such as InDesign and placing your content — words and images — accordingly.
• Pay attention to your spacing. Don't forget the importance of negative space! You don't want your site to look cluttered. (Well, maybe you do. I don't know your life.)
• Think about the rule of thirds. Commonly used by photographers, the general principle behind the rule of thirds is to imagine breaking an image down into thirds. Imagine both horizontal and vertical lines dividing up the composition so that end up with nine parts. The four sports where those lines intersect are where you should consider placing points of interest. Tympanus.net has some excellent tips and screenshots of examples of this principle in action.

Note the use of grid theory in the following images and Web pages:

How Will I Incorporate This Principle?

Well, I'd hoped to incorporate it in this presentation, but I'm not sure how successful I am at this sort of thing just yet. Hopefully I will have gotten a better grasp of layout and design by the time the final project is due. Now that I know what I'm going to do, it should be easy to break down the components into manageable chunks that can be plunked into a grid. At least that's the theory.

I don't even want to talk about how long it took me to make this footer. Wait — yes, I do. It took hours of deep contemplation and a few rantings that drove my husband crazy. The thing is that I don't even need a footer for this presentation. I just wanted to test my skill. Arrrrrgh!