Grid system and Lay out
Introduction
Grid system and lay out are very important for a designer, Grid
system has been used for a long time, I think it is very important
for a designer, we use it to organize the content, not only the
column, a designer can create a lot of ways to lay out, and it helps
the audience to get your point. And if we are not use it in our work,
the work will be messy and unprofessional. And a lot of designers and
artists use gird system to do amazing art work, as a designer, they
can do creative work even by a simple grid.
What is the grid system?
A typographic grid is a two-dimensional structure made up of a
series of intersecting vertical and horizontal axes used to structure
content. The grid serves as an armature on which a designer can
organize text and images in a rational, easy to absorb manner.
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.
Made popular by the International Typographic Style movement and
pioneered by legends like Josef Müller-Brockmann and Wim Crowell, the
grid is the foundation of any solid design. The Grid System is an
ever-growing resource where graphic designers can learn about grid
systems, the golden ratio and baseline grids.
Golden section:
No book about typography would be complete without a discussion of
the golden section, a ratio (relationship between two numbers) that
has been used in Western art and architecture for more than two
thousand years. The formula for the golden section is a : b = b :
(a+b). This means that the smaller of two elements (such as the
shorter side of a rectangle) relates to the larger element in the
same way that the larger element relates to the two parts combined.
In other words, side a is to side b as side b is to the sum of both
sides. Expressed numerically, the ratio for the golden section is 1:
1.618.
Some graphic designers are fascinated with the golden section and use
it to create various grids and page formats-indeed, entire books have
been written on the subject. Other designers believe that the golden
section is no more valid as a basis for deriving sizes and
proportions than other methods, such as beginning from standard
industrial paper sizes, or dividing surfaces into halves or squares,
or simply picking whole-number page formats and making logical
divisions within them.
Single-Column Grid
Every time you open a new document in a page layout program, you are
prompted to create a grid. The simplest grid consists of a single
column of text surounded by margins. By asking for page dimensions
and margin widths from the outset, layout programs encourage you to
design your page from the outside in. (The text column is the space
left over when the margins have been subtracted.) Alternatively, you
can design your page from the inside out, by setting your margins to
zero and then positioning guidelines and text boxes on a blank page.
This allows you to experiment with the margins and columns rather
than making a commitment as soon as you open a new document. You can
add guidelines to a master page after they meet your satisfaction
Designing in Spreads
Books and magazines should be designed as spreads (facing pages). The
two-page spread, rather than the individual page, is the main unit of
design. Left and right margins become inside and outside margins.
Page layout programs assume that the inside margins are the same on
both the left- and right-hand pages, yielding a symmetrical, mirrorimage spread. You are free, however, to set your own margins and
create an asymmetrical spread.
Multicolumn Grid
While single-column grids work well for simple documents, multicolumn
grids provide flexible formats for publications that have a complex
hierarchy or that integrate text and illustrations. The more columns
you create, the more flexible your grid becomes. You can use the grid
to articulate the hierarchy of the publication by creating zones for
different kinds of content. A text or image can occupy a single
column or it can span several. Not all the space has to be filled.
Designing with a hang line:
In addition to creating vertical zones with the columns of the grid,
you can also divide the page horizontally. For example, an area
across the top can be reserved for images and captions, and body text
can “hang” from a common line. Graphic designers call this a hang
line. In architecture, a horizontal reference point like this is
known as a datum.
Modular grid
A modular grid has consistent horizontal divisions from top to bottom
in addition to vertical divisions from left to right. These modules
govern the placement and cropping of pictures as well as text. In the
1950s and 1960s, Swiss graphic designers including Gerstner, Ruder,
and Müller-Brockmann devised modular grid systems like the one shown
here.
Modular grid: karl gerstner
designing programs Grid diagram, 1963 (redrawn). Designer: Karl
Gerstner. Publisher: Arthur Niggli, Zurich. This square grid consists
of six vertical columns and six horizontal modules, overlayed by
grids of one, two, three, and four units. Vertically, the grid is
governed by a 10-pt measure, which would determine the spacing of
type from baseline to baseline
Baseline Grid
modular grids are created by positioning horizontal guidelines in
relation to base line grid that governs the whole document. Baseline
grids serve to anchor all (or nearly all) layout elements to a common
rhythm. Create a baseline grid by choosing the typesize and leading
of your text, such as 10-pt Scala Pro with 12 pts leading (10/12).
Avoid auto leading so that you can work with whole numbers that
multiply and divide cleanly. Use this line space increment to set the
baseline grid in your document preferences.
Adjust the top or bottom page margin to absorb any space left over by
the baseline grid.Determine the number of horizontal page units in
relation to the numer of lines in your baseline grid. Count how many
lines fit in a full column of text and then choose a number that
divides evenly into the line count to create horizontal page
divisions. A column with forty-two lines of text divides neatly into
seven horizontal modules with six lines each. If your line count is
not neatly divisible, adjust the top and/or bottom page margins to
absorb the leftover lines
To style headlines, captions, and other elements, choose line spacing
that works with the baseline grid, such as 18/24 for headlines, 14/18
for subheads, and 8/12 for captions. Web designers can choose similar
increments (line height in CSS) to create style sheets with neatly
coordinated baselines. Where possible, position all page elements in
relation to the baseline grid. Don’t force it, though. Sometimes a
layout works better when you override the grid. View the baseline
grid when you want to check the position of elements; turn it off
when it’s distracting
Project: modular grid
Use a modular grid to arrange a text in as many ways as you can. By
employing just one size of type and flush left alignment only, you
will construct a typographic hierarchy exclusively by means of
spatial arrangement. To make the project more complex, begin adding
variables such as weight, size, and alignment
Why does designer need grid system:
The grid system is a strong, traditional design tool for presentation
of visual information. Based on a table armature of regular divisions,
grid systems allow for the consistent, legible, and visually pleasing
presentation of graphics and text.
Grid systems
design. Used
design; used
atomized and
are not for everyone, nor are they appropriate to every
well, a grid can supply boldness and readability to a
poorly or dogmatically, grids can make a product staid,
confusing.
Before the invention of movable type and printing, simple grids based
on optimal proportions had been used to arrange handwritten text on
pages.
The grid system is used in
The grid system and lay out is used in many files. Basically they are
used in web based, time based and print based,
These are the example below:
Web based: While grid systems have seen significant use in print
media, interest from web developers has only recently seen resurgence.
Website design frameworks producing HTML and CSS had existed for
a while before newer frameworks popularized the use of grid-based
layouts.
Print based:
In daily life, we can see the grid system in print based everywhere,
that is the most normal based,
Time based:
We also need grid system in the screen, it is very important for a
designer to organize their work.
And grid system is also used in newspaper, books, webpage, t-shirt,
television, screen, and video and so on.
Analyze good and bad examples in three files
Print based
This is a good example for print based, they use A5 paper, and I
think it is a very good combination between text and pictures, it is
easy to read, you eyes won’t get tired
This is a bad example for print based, it very messy for me to read,
and I can hardly get the message, it make me full of pressure
Web based:
This is a very good example for web based I think, I like the
combination of text and pictures, it is easy to find the massage and
it is very clean and clear, they use a simple grid system to organize.
This is a bad example of web based, there is too much message, and
they put them together, my eyes feel tired to read, all I see is just
a mess.
Time based:
This is a good example for time based, the point is the picture, and
they put the words next to it, it can explain the picture, everything
is organized, so I think it is good.
I think this is a bad example for time based, there are too much
elements for people, and the words are too small to read, people will
get tired to read this ,they should organize it better.
Grid system in art work
Chuck close is a photorealist painter who produces large-scale
portraits. His latter works are produced using a cell/grid system and
abstracting each cell/grid to produce the final portrait.
He is associated with the style of painting called Photorealism or
Super realism. In this style, artists in the early 1970s created a
link between representational systems of painting and photography.
Photorealism developed as a reaction to the detachment of
Minimalism and conceptual art, which did not depict representational
images. Photorealist frequently used a grid technique to enlarge a
photograph and reduce each square to formal elements of design. Each
grid was its own little work of art. Many of the Photorealist used
the airbrush technique. photographs. This painting took four months
to complete. To make this work, Close took several photographs of
himself in which his head and neck filled the frame. From these he
selected one of the images and made two 11 x 14-inch enlargements. On
one of the photographs he drew a grid, then lettered and numbered
each square. Using both the gridded and ungridded photographs, he
carefully transferred the photographic image square by square onto a
large canvas measuring 107 1/2 x 83 1/2 inches. He used acrylic paint
and an airbrush to include every detail .When Close was making his
painting he was concerned with the visual elements--shapes, textures,
volume, shadows, and highlights--of the photograph itself. He also
was interested in how a photograph shows some parts of the image in
focus, or sharp, and some out-of-focus, or blurry. In this portrait
the tip of the cigarette and the hair on the back of his head was
both out-of-focuses in the photograph so he painted them that way
in Big Self-Portrait.




His idea is come from the “mosaic”, he get the element from mosaic
and put it on his work, his work is very ordered, because he arrange
the element in grid system, for some colorful work, he put a lot of
color and shape in each square, so the work seems colorful and
gorgeous, but also ordered. So I think this is a magical way for the
art work.
I think there is a lot of element we can find and put it in our art
work, the “mosaic” is just one way for us to do the work, and for
our art work, we can just put a little change in it, it will be a lot
of different.
The grid system will help designers to do their work in a
professional and ordered way.
Most of his works are use square, but because the designer has put
the color and shape in it, so the works looks not that boring
Play with grid system
Gird system can be anywhere, such as human’s body, trees, window,
even a small leaf, I was found the grid system in human’s figure,
and it is very creatively.
At the first time, I was find the grid in human figure, that is
interesting, because I can see lots of grid from people’s position,
that is fun, and I can got my own grid.
After that, I was trying to find the grid in the film, because the
film itself is already grid, and there is image inside, so we can got
more grid.
The theme I choose is memory, so the element we choose is the
“film”, because there is also grid system in the film, and the film
is classy, less people use them nowadays.
The first installation we did is a box. We use chopsticks to make a
box, and put the films inside freely, and then, we put the box under
the light. We got a lot of nice “grid”, people can get inspirations
there. The box can create anything under the light, it is powerful.
After that, we use wire to combine the film together, and hang them
on the wall, we still can got a lot of different grid through the
light, because the installation can be changed by the wind, people
still can see the difference from there, and get inspiration. Because
our theme is “memory”, so we put some words to combine the
installation with typography to show the memories.
Conclusion
That is how I understand about the grid system, before that, for my
understanding of grid system is just gutter and column, but now I
know, the grid system is creatively, and a designer also need to be
creative, we must inspired by any element, and we create, so that we
can transfer message through any element. For good designers, their
work must be professional, so we need to use the grid system to
organize our art work. And the grid system also helps designers to
create and break the rules. Grid system is important for design.
Referencing:
Wikipedia
http://www.thegridsystem.org/
http://www.gridsystemgenerator.com/
http://www.artsconnected.org/artsnetmn/identity/close.html
Grid system, principle of organizing type (design briefs) Keir Elam,
Princeton architectural press (2004/11/1)
Typographic system of design, Kimberly Elam, publication
date :( 2007/5/3)
Baines, Phil and Haslam, Andrew. Type & Typography,
New York: Waston-Guptill Publications, 2005.
Burn hill, Peter.
second edition.
Type spaces: in house norms in the typography of
Aldus Manutius. London: Hyphen Press, 2003. p.101.