GRAPHIC DESIGN 2 (PART 1) TASK 1: WHAT IS THE GRID SYSTEM

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.