View
216
Download
0
Category
Preview:
Citation preview
GRID SYSTEMS
Working with grids are an inherent part of the craft of designing.
FUNCTIONS OF A GRID • Achieves unity amongst all of pieces of a design.
• Introduces systemic order to a space before anything
is placed in it.
• Helps distinguish specific types of information and
eases a user’s navigation through them.
• Allows multiple individuals to collaborate on the same project or a series of related projects.
• Permits designers to lay out massive amounts of
information (such as in a book or series of magazines)
in substantially less amount of time.
GRID ANATOMY
MARGINS
• The negative spaces between the spatial edge and the content.
• Help establish the overall tension within the composition
• Can be used to focus attention
• A resting place for the eye
• May act as an area for subordinate information
Flowlines
• Alignments that break the space into horizontal bands
• Help guide the eye across the page
• Can be used to impose additional stopping and starting points for text and/or images.
Columns
• Vertical alignments of type that create horizontal divisions between the margins.
• Can be any number of margins
• Designers may arrange columns at the same width, or set them at different widths, corresponding to specific kinds of information.
Gutters
• Areas of space between columns. • A designer can increase or decrease
gutter size, depending on multiple graphic and typographic considerations.
Modules
• Individual units of space separated by repeating columns and rows.
Spatial Zones
• Groups of modules that form distinct fields of space
• Designers can arrange one or multiple spatial zones on a format.
• Each field can be assigned a specific role for displaying information. For example, one spatial zone can be reserved for images, and another might be reserved for a series of text columns.
• A well-planned grid creates endless opportunities for exploration
• Every design problem is different and requires a grid structure that satisfies its challenges and issues.
• A designer must not be intimidated to employ a grid system, nor must they be afraid to test its limits.
• There are several basic kinds of grid, in which each is suited to solve certain kinds of problems
GRID TYPES
MANUSCRIPT GRID (a.k.a block grid) • Developed from the tradition of the written
manuscript that eventually led to book printing.
• The base structure of a manuscript grid is a
rectangular text area that takes up most of the page.
• Accommodates extensive continuous text, such as a
book or long essay. • Considerations to make:
• Creating visual interest by adjusting proportions
of the margins
• Size of text type
• Leading
• Word spacing
• Treatment of subordinate elements on page • Typographic color and emphasis
• Alignment
COLUMN GRID • Arrangement of multiple vertical columns
• Beneficial for information that is discontinuous.
• Work best for editorial projects or other series-based
material where the content changes often.
• A very flexible arrangement. Columns can be:
• Dependent on each other for running text • Independent for small blocks of text
• Crossed over to make wider columns
• Width of columns depend on the size of the running
text type. Larger type in narrow columns can lead to
excessive hyphenation and an indecisive rag.
• A designer must study the effects of changing type
attributes in order to achieve optimal column width.
MODULAR GRID • Essentially, this is a column grid with a large number
of horizontal flowines that subdivide columns into
rows, creating a matrix of cells called modules.
• When modules are grouped together, they form
spatial zones that can be used to define roles for
anything placed within them. • Most useful choice for extremely complex projects
that require precise control, such as tables and forms.
HIERARCHIAL GRID • Abnormal grid structures that do not fit into any
category. An almost organic approach to ordering
elements and information.
• Built to conform to the needs of the information that
they organize.
• Based on more intuitive arrangements that are customized to the proportions of the design
elements.
• Column widths tend to vary
• Commonly used to unify disparate elements on web
pages, the sides of packaging, and posters
• Designers must pay careful attention to the nuances
of weight change, size change, and position when working within the hierarchial grid.
Recommended