What is the definition of grid system?
A grip system is the foundation of any solid design or a manner of
regularly spaced horizontal and vertical lines. Another grid meaning is a
template or guide used for positioning and organizing the element of an order
to facilitate and ease decision-making.
Example:
One unit equals 20 × 20 pixels. Each unit is further divided
into sub-units of 5 × 5 pixels. There are 16 sub-units per square unit.
145px columns and 13px gutters. For a horizontal
screen resolution of 1024
The overall width of
970 is subdivided into various columns of 600, 370, 230, 140, 90 & 50
pixels with a proportional padding size of 13 pixels (20px is also a
proportional number).
Where grid started?
Grid became popular in design started modern movement is around about
the 1950’s and started from Greece. Got two heroes is made popular by the
international typographic style movement and pioneered by legends like Josef
Muller-Brockmann and Wim Crouwel. So, grids come out of these modern ideals,
majority in around Switzerland and are a major opposite side to what is known
as the “Swiss Style” or the “International Style.
Why designer need grid system?
In the context of graphic design, a grid is an instrument for ordering
graphical elements of text and images. It is not only graphic designer who like
grid system, also had the architects, Print designer and interior designer are
very fond of grids. Architect use grids to building consists of multiple
floors, Design prints layout on grid and interior designer design rooms with grid.
Designer need grid because of can help us organize the space you have or can
learn about grid system, the golden system and baseline grids. . They also
can help everyone organize information and lend a sense of order to a design. It is easy to understand how the grid is to
help organize your content.
Where Grid is used? (Example)
Grid
system in graphic design is an organization of the content on a page, using any
combination of margins, guides, rows and columns. Grid
can be used across an entire project to achieve a consistent look and feel. In
the finished product, the grid is invisible, but following it helps in creating
successful print and web layouts.
Online
Online is Time based and web based. For example like tablet, TV,
website, videos, phone and so on.
Offline
Offline is different with online, basically offline is like printed
based for example magazine, Newspaper, book, T-shirt, poster, packaging, and so
on.
Example for three based. (Online/offline)
Time based
Example of grid style in tablet design
Tablet grid structure.
This grid
1.
Designed for 1024 X 768
2.
Works well in both vertical
and horizontal orientation
3.
Unit size is designed based
on minimum tap-able area which is 44 X 44 pixel.
4.
Proposed column structure
for horizontal orientation (4 columns) and vertical orientation (3 columns)
5.
Feel free to modify the
gutter but keep in mind the minimum tap-able area and the proportion of
negative space in layout. (This design has minimum possible gutter).
Web
based
Example
of grid style in web design
The concept of grid-by-design has become very
popular in web design. Using grids in web design makes the site look well structured
and balanced even if the pages are busy with many elements. In addition, the
developer grids are useful and help maintaining the pages easier. Basically
this style means that you divide your website into the grids (of different
sizes according to your taste), and that way you're getting more of a system.
The intersection of horizontal and vertical lines, the basic concept must be in
a given time interval. Some examples of the website that use some form of grid
style layout.
The 960 Grid systems is an effort to
streamline web development workflow by providing templates (12 or 16 columns)
with commonly used dimensions, based on a width of 960 pixels.
Print
based
Example
of grid style in magazine design
A spread layout on grid: an important element in design. The design
literally shows the grid lines and guide lines that was used in creating the
layout. The base-line grid, margins, columns and gutter became visible design
elements on the page in instead of just being the visible underlying structure.
Magazine Grid Analysis:
Magazine name:
Print
Page size = 8.5 x 12 inches (51p0 x 72p0)
Top margin = 1/4 inches (1p6)
Bottom margin = 1 1/2 inches (9p0)
Gutter margin = 5/6 inches (5p0)
Outside margin = 3/8 inches (2p3)
of columns = 3 on each page, 6
total
Column width = 2 1/3 inches (14p0)
Column gutter = 1/3 inches (2p0)
Example
of grid style in Newsprint
design
This tutorial provides a basic insight into the
process of developing a publication, highlighting key points during the design
process that’ll help you to develop a newspaper or magazine from the initial
concept through to the finished product. I’ll cover the thought process,
workflow and some important aspects to consider when designing for print. We’ll
be using InDesign, with a minor step into Photoshop to prepare the images for
print.
Newspaper Grids
Newspaper pages are laid out on a grid which consists of a margin on 4 sides,
number of vertical columns, and space in between columns.
On a newspaper page, all live matter (copy, art, and ads)
are contained within columns.
Newspapers grids are based on a
different number of columns, depending on paper size and design preference.
Common page grids include:
Newspapers
sell advertising space on a page to retail advertisers, advertising agencies,
and other media buyers.
Ads are measured using column inches.
A column inch is a unit of space one column wide by one inch high.
One newspaper column inch.
On the six column page above, the total available
column inches would equal the number of inches high x the number of columns.
21 1/4" x 6 columns
= 127 1/2"
When an ad size is specified in column
inches (60 col. inches, for example) its dimensions must also be defined. Here
is the formula for determining ad dimensions:
Col. Inches divided
by number of columns = Ad height in inches
Example: Here are some possible variations for a 60 col. inch ad.
A 60 Column inch ad can be configured in several formats
(the type below to see the example)
3 Col. x 20"
3 Columns x 20" = 60"
4 Col. x 15"
4 Columns x 15" = 60"
5 Col. x 12"
5 Columns x 12" = 60"
6 Col. x 10"
6 Columns x 10" = 60"
|
|
| Problem with grid system in design? |
The problem with the grid system in design because most beginning
designer feel that designing on a Layout boring.
How solve it?
Based on my opinion, design grid must make sure feel not like so boring
and make people complicated, can help you organize and keep
play with the space and composition. Grid system have any problem
should redo the grid design and will be resolved as soon as possible. Use grid layout to order the visual elements
in that you design.
Example for the problem and how to solve it:
The user needs to be able to scan, read and understand a page quickly.
How to solve it?
Use a grid system for the placement and alignment of visual object on
the web page.
What are column, unit and gutter?
Column
A column is an upright pillar or post. Columns may support a
roof or a beam, or they can be purely decorative.
The base of the Parthenon is 228 x
101.4 feet. The exterior Doric columns are 6.2 feet in diameter and 34.1 feet
tall.
Unit
The unit is a base piece from which the rest of the grid is
derived. The unit can be derived from constraints such as the content elements
you have to work with, or it can be derived from the maximum screen resolution
you are designing to. When designing for books, or other printed material, the
unit is normally derived from the typeface size. So, if you are setting 12pt
type, the unit of the grid is 12pt, or a multiple of 12. There is a
relationship between the layout and the size of the typeface.
Gutter
Gutter is the blank space that separates rows and columns in
screen. Almost every web site is made of more than one column. The space
between those columns is called “the gutter”. The inside margins or blank space
between two facing pages is the gutter.
The gutter space is that extra space allowance used to accommodate the binding
in books and magazines. The amount of gutter needed varies depending on the
binding method. Gutter is sometimes used to refer to the alley or space
between columns of text in a page layout.
Research about
the three based.
-How
to analyze?
-About the difference negative and positive (bad and good) photo
Time based (Bad example)
This app has one critical design problem. They do not have a
home button on the screen. A simple change will solve it this problem. Move the
logo to left in the end of the action bar and also can make it take user to the
print screen. There is no visual indication of swipe gesture available, user no
information how many articles are available.
Time based (Good example)
This app can make people feel more very clean,
comfortable and the design is look simple.
And also can’t make people confuse and complicated.
Web based (Bad
example)
This website doesn’t feel and looks like ‘The Fitness Club’
website. May be because of There is no clear name or logo of The Fitness Club
throughout every web-pages and why there name or logo doesn’t put on the top?
That is very poor as the company’s name or logo; they should be present and
clearly visible in every page. It is not
clear, if they used grids in their design as the header and navigation have a
different size and layout than the content. The website looks very
unprofessional and makes people confused and complicated. The font-family is
Tahoma and the font-size is 10px small. The website is built using millions and
millions of tables which become apparent in the disorganizing and confusing
appearance of The Fitness Club website.
Web based (Good
example)
This website can make people feel more comfortable
because the web design is simple and colorful design in square box around it. This
website can compare with “The
Fitness Club’ website, what is the different? This website looks very professional,
more clearly, more interesting and is not make people so complicated.
Print based (Bad example)
Example of this
magazine, a great right side of the page and a nightmare on the left. The top
picture in not in line with the text column width or overall margins, even the
gutter between the images is a different size compared to those below the
image. The group images in the bottom corner have no spacing around them.
Print based (Good example)
This magazine makes it unique and interesting; from
the font or type used, the excellent use of white space and photographs all
look good together. There look so clean, more space, and everything arrange a
magazine layout is good and creative.
Make Own grid system, my new grid design.
Sketches of Grid web design layout.
Sketches of Grid Magazine design layout.
.JPG)
.JPG)
.JPG)
.JPG)
.JPG)
.jpg)
.JPG)
