Grid & Page layout

Grid & Page LayoutDesign by the Grid

COPYRIGHT©Soamparnee 2012วันอังคารที่ 27 มีนาคม 2012

Page Layout Design

Size &Orientation

1

Grid &Layout

2

Images

3

Typography

4

วันอังคารที่ 27 มีนาคม 2012

Size &Orientation

1


Size &Orientation

1


Size &Orientation

1



Grid &Layout

2

G R I DAn Invisible Foundation


Design by the Grid “A grid system is

a rigid framework that is supposed to helpgraphic designers in the meaningful,logical and consistent organization of

information on a page.”


The Purpose of the GRID

Efficiency

เพื่อจัดระบบการจัดวางองคประกอบในหนากระดาษใหเปนระเบียบทำใหเกิดความสะดวกในการวาง Layout และเกิดความสวยงาม

Clarity

ชวยใหเกิด Readability ในการอานสามารถจดจำและเขาใจเนื้อความไดงาย

Continuity

ชวยใหเกิดความตอเนื่องและเปนอันหนึ่งอันเดียวกันภายในหนกระดาษ รูปเลม และชุดของสิ่งพิมพนั้นๆ

Economy

ชวยประหยัดเวลา แรงงาน และตนทุนการผลิต


The Structure of the PAGE •Margin

•Column

•Row

•Gutter

•Module

•Flowline

•Spatial zone

•Foilo

•Running header

•Running footer


Setting up the Grid

Margin

1

3 4

2

1 = Top2 = Bottom3 = Left4 = Right


1 = Top2 = Bottom3 = Inside4 = Outside

1

4 3

2

1

3 4

2


Columns

‣ Column ชวยใหเกิด Readability ในการอาน

‣ ตองสัมพันธกับ Page Size, Margin และ Type Size

Vertical Grid : 3 Unit Grid 2 Unit Grid 4 Unit Grid


1 Column grid 2 Columns grid


3 Columns grid


4 Columns grid


More Columns grid


White space

‣ ชวยใหเกิด Readability ในการอาน

ชวยใหอานราบรื่นขึ้น ไมเมื่อยสายตา

‣ ชวยลดความหนาแนนขององคประกอบ

‣ ชวยใหเกิด Flexibility ในการจัดวางองคประกอบตางๆ


4 types of grid

• Manuscript grids — are the simplest and they work well when presenting large continuous blocks of text or images.

• Column grids — work well when the information being presented is discontinuous and different types of information can be placed in different columns.


4 types of grid

• Modular grids — work best for more complex problems where columns alone donʼt offer enough flexibility. The introduce horizontal spaces between blocks of content.

• Hierarchical grids — can be used when none of the above grids will work to solve the problem. They tend to be created organically by first placing design elements on the page and then finding a rational structure for presenting those elements.


Manuscript Grid(block grid or single column grid) The primary structure is defined by large text blocks and margins, which position the block within the format. Its secondary structure defines the location and proportions of folios, footnotes, running headers, and other secondary information.


Column GridsColumn grids are made up by placing multiple columns within the format.Columns can be dependent on each other, independent from each other, and crossed over by design elements.The width of a column should depend on some element internal to the design, most likely the size of the text.A column should be able to accommodate a comfortable measure for reading and avoid excessive hyphenation at the end of lines. Too wide or narrow a column and reading becomes difficult.




Modular GridsModular grids are like column grids with the addition of horizontal divisions marked by rows. The columns and rows and the gutters between each create a matrix of cells or modules.Modules can be either horizontal or vertical and the proportion of a module can be determined in a variety of ways.• Average width and height of a

paragraph• Average image size• Ad unit size• Type proportions like leading and

measure


Modular Grids


Modular Grids


Modular Grids



Hierarchical GridsHierarchical grids are commonly found on the web. Customized proportions are typically used in hierarchical grids instead of regularly repeated intervals. Column widths tend to vary as do the location of flowlines.


• Single page layout• Double page layout

Grid &Layout

2


Double page layout:Single page layout:


Single page and portrait layout grid


Three column grid: Four column grid:


Double page and landscape layout grid


Two column grid: Three column grid:

Four column grid:





Magazine grid system and layouts








Cover of the redesigned TIME magazine.


Left: The new table of contents, arranged on a horizontal axis. Right: The Briefing section, the new front of book.


Briefing contains short news items and a roundup of the weekʼs events.


Before and after Commentary section. The redesign emphasizes the columnists.


Cover story in The Well section.


Sections are identified through bold headlines in Franklin Gothic.


Tubelight Magazine



Structure of a publication• Headline - Draws reader in and shouts your intent and main message• Subhead - Provided an elaboration of headline. Draws reader in further.• Text - Body copy. Be sure to follow publication's word limits• Pull-quotes - Add interest and “teases” skim readers• Photo captions - Helps explain and identify art and photos• Try for 40 maximum characters per column


The Grid - Used to Design Publications• Publication designers use a Grid to anchor their page layouts• The Grid organizes all of the pages in a publication• Continuity: The Grid makes sure all pages look the same• The Grid gives the designer many, many options• The Grid provides the reader with consistency so they know

where to look for information• The grid helps to organize type and art



Visual Hierarchy in Publication (Rhythm)• All designers must lead their viewers through the information on the page.• Visual Hierarchy is achieved through placement and size of

the type and art.• Our eyes usually start with the largest and most realistic element.

(a photo or large illustration, especially living things with eyes)• We then move through the page looking at elements in decreasing size.• We also read/view top-left to bottom-right (western world)



Whitespace can never be underrated. Itʼs a very important element for both visual impact and readability


























Portfolio 7 is an Information Memorandum for a group of 7 large scale commercial properties being sold across Australia























Documents

Grid & Page layout