Grids are important when it comes to designing. It helps you enhance your work's composition and attract targeted audience. What we learned in class today was, grids also applied on magazines and newspapers making it easier for the reader to read.With a strategic placement of pictures and articles on a page, it can successfully attract audiences because of it's aestheticism as well, thanks to the help of grids.
What's more important is, we also learned how grids work and getting to know the names of each components in a whole grid format.
Firstly, our whole class was told to bring 12 cutout pages of magazines/newspapers. I had 12 cutout pages from a magazines prepared. Then as usual, the slides and explanations comes in. I regretted not bringing my camera to class yesterday :(
The slides that were shown yesterday are: (taken from my lecturer, Ms Lisa's blog,
http://taylorspod.blogspot.com)
"Anatomy of a Grid
Grids
act as guides for the placement of elements in a design. No matter how
simple or complex, grids share some common parts, each fulfilling a
specific function. Not every one of these parts needs to be present in
every grid.
A little further down the page I’ve added an image showing these
common grid parts, which you hopefully find helpful as you read through
their descriptions below.
Format
The format is the area in which the design sits. In a book or
magazine the format is the page. On a website the format is the browser
window.
The format defines the live area of a design where type, images, and other media are present.
Margins
Margins are the negative space between the edge of the format and the outer edge of the content.
The proportions of margin help to establish the overall tension (or
lack of tension) in a composition. The smaller the margin the more
tension is created.
Larger margins create more whitespace
and help focus attention on the positive space of the design. Larger
margins also help the eye find a place to rest and can be a good area to
place subordinate information.
Flowlines
Flowlines are horizontal lines that break the space into horizontal
bands. They can be used to help guide the eye across the page and can be
used to impose starting and stopping points for text and images to be
aligned.
When elements are aligned to the top of a flowline it’s called a hangline as the elements appear to hang from the line.
Type is often aligned to a series of flowlines equally spaced down the page called baselines. The base of the type sits on the line, hence the term. Aligning type to a baseline can help establish a vertical rhythm in a design.
Modules
Modules are individual units of space that are separated by regular
intervals. Modules are the basic building blocks of grids. When repeated
they create columns and rows.
Ideally the width of a module will be based on the measure of a line
of text. The height would be based on some multiple of the type’s
leading or line-height.
The upper left corner of a module is considered to be the active corner and the lower right corner, the passive corner.
Spatial Zones
Spatial zones are fields of adjacent modules. Each field can be assigned a specific function within the design.
A long horizontal field might be used to place long horizontal
images. A long vertical field might be used for long blocks of text. A
large rectangular field might be used for video.
Design elements will often be placed inside a field or spatial zone as opposed to a single module.
Columns
Columns are vertical bands of modules. There can be any number of
columns in a grid. More columns leads to more flexibility, but can also
make the grid difficult to work with.
Column widths can be equal or they can vary across a grid.
Rows
Rows are the horizontal equivalent of columns. Online it’s harder to
plan for rows as the height of the format is often inconsistent and
dynamic.
On some pages your design may call for a fixed height, though on most
pages your design is allowed grow vertically with the content.
Gutters
Gutters are the spaces separating modules either vertically or
horizontally. Typically we think of gutters as the space between
columns, but they are also the space between rows.
The minimum width or height of gutters should be an ‘em’ though this
should usually be larger to better separate columns from columns and
rows from and rows. The height of horizontal gutters should be based on
the leading or line-height of the type.
Folio
Folios are created when page numbers are placed consistently in the margin, usually above or below the composition.
Running Header or Footer
A running header is a guide at the top to indicate your position in a
manuscript. You’d find information like title, chapter title, section
title, author, etc located here. A running footer is then this
information is placed at the bottom of the format.
Markers
Markers are placement indicators for subordinate or consistently
appearing information. Markers can be used to denote the location of
folios, page numbers, etc.
These last 3 are more commonly found as described in print, but there’s no reason they couldn’t also be used on a website.
For example blog posts aren’t usually given page numbers, but they
often display the publication date. When present the date is usually
shown at the top of the post, but there’s no reason it couldn’t be
included in a running header or as a substitute for the page numbers of a
folio.
Summary
As more and more web designers are looking to employ grids on the sites they design it makes sense for us to learn the language of grids in order to better understand them and to better talk to each other about them.
When many people talk about grids online there’s often a focus on
columns and to a lesser extent baselines. There are more parts to grids
though than columns and baselines.
Hopefully the diagram above along with the definitions in this post
will give you a foundation for the common language of grids to help you
further understand explore using grids in your own work."
source: http://www.vanseodesign.com/web-design/grid-anatomy/
More examples:
Rule of thirds
During my research for the rule of thirds recently I also discovered the golden mean -
"The Golden Mean
Why does the photography rule of thirds work? Some people believe that it’s because it’s a rough approximation of the Golden Mean (also known as the Golden Ratio or Divine Ratio).
The Golden Mean defines a spiral pattern that shows up repeatedly in
Nature, in everything from a nautilus sea shell to a sunflower, to the
spiral form of the galaxy itself; it occurs in more natural subjects
than you could imagine, making it no coincidence. Since there’s
obviously something special in Nature about this form, it makes sense
that humans would be naturally attracted to it – after all we’re part
of nature too!
The Math Behind the Golden Mean
You definitely don't need to know this to take good
pictures!! But for those who are "geeks" (like me :-) who want to know,
here's the math behind it.
The Golden Mean is defined by a mathematical sequence of numbers known as the
Fibonacci sequence.
By definition, the first two Fibonacci numbers are 0 and 1, and each
remaining number is the sum of the previous two. So the sequence is:
1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ....
The ratio of each pair of consecutive numbers approximates
phi, or the number 1.618. (
5 divided by
3
is 1.666, 8 divided by 5 is 1.60...) By the 40th number in the series,
the ratio has stabilized at 1.618, accurate to 15 decimal places.
Now, where does the spiral come from? We draw a rectangle
that is divided into squares as in the picture below. The ratio of the
length of the side of a larger square to the next smaller square is
the golden ratio of 1.618:1.
A Fibonacci spiral is formed by connecting the arcs (quarter circles) joining opposite corners of the squares.
The Fibonacci spiral.
image source: wikipedia.org
And voila! A Fibonacci spiral!
The Golden Mean and the photography Rule of Thirds don’t quite line up, but they’re close. So you can avoid taxing your brain with all that math, and take the lazy route! Just follow the rule of thirds ;-).
The Fibonacci spiral in black, and the rule of thirds in pink. Close!
The Fibonacci spiral in action.
© Julie Waterhouse Photography
Now, don't get too hung up on following this spiral pattern
in your compositions. The rule of thirds is a good approximation, and
over time you will develop an instinct for what works. You will find
that you naturally gravitate to this pattern for some of your
compositions without going hunting for spirals! And do note that I said
"some!" Not all compositions should or will follow this pattern."
More examples:
