GRIDS

what are they?why do we need them? how do we use them?helpful tips

Using a grid permits a designer to lay out enormous

amounts of information in substantially less time be-

cause many of the design considerations have been ad-

dressed in building the grid’s structure. The grid also

allows many to collaborate on the same project, or on a

series of related projects over time, without compromis-

ing established visual qualities from one to the next.

Making and Breaking the Grid, Timothy Samara

what are they?

definition

what are they: grids

underlying framework or structure on which text, image and space can be combined in a unified and cohesive mannerGetting It Right With Type, Victoria Squire

what are they: grids

introduces systematic order to a layout

they can be loose and organic, or rigorous and mechanicalMaking and Breaking the Grid, Timothy Samara

what are they: grids systems

a distinct set of alignment-based relationships that act as guides for distributing elements across a format

Making and Breaking the Grid, Timothy Samara

why do weneed them?

purposeimportance

purpose & importance

the basis on which information is organized and clarified, ensuring legibility

too complicated grids defeat the point of having and using grids

Getting It Right With Type, Victoria Squire

purpose & importance

distinguish types of information and easing a user’s navigation through them

the benefits are clarity, efficiency, economy and continuity

organizes the relationship of alignment and hierarchies into an intelligible order that is repeatable and understandable by others

Making and Breaking the Grid, Timothy Samara

examples: grouping

grouping: permits an element to have an immediate visual relationship with another element in close proximity

white space is enhanced, creating a simplified and cohesive perception from the viewer

Grid Systems: Principles of Organizing Type, Kimberly Elam

composition is simplified by grouping

creates a sense of hierarchy

examples: perimeter edge/axial relationships

perimeter edge: if elements do not touch top/bottom & white space surrounds then composition is ungrounded

Grid Systems: Principles of Organizing Type, Kimberly Elam

examples: perimeter edge/axial relationships

axial relationships: an interior axis creates a visually stronger composition, opposed to a strong left/right alignment

Grid Systems: Principles of Organizing Type, Kimberly Elam

how do we use them?

types of grids & knowing which to usemanuscript gridcolumn gridmodular gridhierarchical grid

manuscript grid

one column (book, manuscripts)

Getting It Right With Type, Victoria Squire

column grid

magazines typically use a column grid, this is a better format for discontinuous information, because columns can be inde-pendent of each other; it’s flexibility allows for separation

Making and Breaking the Grid, Timothy Samara

column grid

narrow columns allows for more flexibility (but not too nar-row, too many hyphenations)

Getting It Right With Type, Victoria Squire

odd number of columns offers a more versatile approach

column grid

to know how many columns to use you must consider:how many pagespage sizetext-heavy or image-heavy publicationoptimum line lengthleadingbinding

Getting It Right With Type, Victoria Squire

modular grid

a complex system of modules that define a small chunk of informational space

typically used when dealing with schedules, charts and forms so these elements will work nicely with text and images

Making and Breaking the Grid, Timothy Samara

hierarchical grid

websites, packaging, posters

an organic approach to a grid system

Making and Breaking the Grid, Timothy Samara

helpful tips

helpful tips

magazines are based on spreads, not pages

save the most difficult spread until the end, by designing the standard spreads first you will address the majority of prob-lems/decisions

lines of text should hold register (when holding paper up to the light, the lines should ‘back each other up’–have the same baseline; align)

Getting It Right With Type, Victoria Squire

helpful tips

white space should be appropriate and not interrupt the reader’s flow

when designing several spreads, check the visual flow and pace to ensure the reader is not disrupted the visual pace is not monotonous, but displays variety

Getting It Right With Type, Victoria Squire

helpful tips: text/image relationship

it is not only how an image appears, but where it is posi-tioned, that gives it meaning

Getting It Right With Type, Victoria Squire

helpful tips: text/image relationship

images enhance text and other images rather than interfere:proportions of image area their weight (dark/light)their formal & contextual activitythe possibility of image continuation

Getting It Right With Type, Victoria Squire

helpful tips: breaking the grid

grid deconstruction: sometimes content needs to ignore struc-ture altogether to create specific kinds of emotional reactions

the designer creates a more intellectual involvement from the audience

Making and Breaking the Grid, Timothy Samara

helpful tips: breaking the grid

deform a rationally structured space, so that elements within the space are forced into new relationships–start with a grid and alter it and see what happens

Making and Breaking the Grid, Timothy Samara

“Typography is not only verbal information but also lines

of texture within a composition. These textures create

rectangles of tone on the page, and the relationship of

hte positions os these rectangles is critical to the percep-

tion of order and unity within a composition. The duality

of the two roles gives the designer responsibility for both

communication and composition.”

Kimberly Elam, Ringling School of Art and Design

Grid Systems: Principles of Organizing Type, Kimberly Elam