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

Transcription

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

2 Using a grid permits a designer to lay out enormous amounts of information in substantially less time because many of the design considerations have been addressed 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 compromising established visual qualities from one to the next. Making and Breaking the Grid, Timothy Samara

3 what are they? definition

4 what are they: grids underlying framework or structure on which text, image and space can be combined in a unified and cohesive manner Getting It Right With Type, Victoria Squire

5

6 what are they: grids introduces systematic order to a layout they can be loose and organic, or rigorous and mechanical Making and Breaking the Grid, Timothy Samara

7 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

8 why do we need them? purpose importance

9 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

10 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

11 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

12 composition is simplified by grouping creates a sense of hierarchy

13 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

14 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

15 how do we use them? types of grids & knowing which to use manuscript grid column grid modular grid hierarchical grid

16 manuscript grid one column (book, manuscripts) Getting It Right With Type, Victoria Squire

17 column grid magazines typically use a column grid, this is a better format for discontinuous information, because columns can be independent of each other; it s flexibility allows for separation Making and Breaking the Grid, Timothy Samara

18 column grid narrow columns allows for more flexibility (but not too narrow, too many hyphenations) Getting It Right With Type, Victoria Squire

19 odd number of columns offers a more versatile approach

20 column grid to know how many columns to use you must consider: how many pages page size text-heavy or image-heavy publication optimum line length leading binding Getting It Right With Type, Victoria Squire

21 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

22

23 hierarchical grid websites, packaging, posters an organic approach to a grid system Making and Breaking the Grid, Timothy Samara

24 helpful tips

25 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 problems/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

26 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

27 helpful tips: text/image relationship it is not only how an image appears, but where it is positioned, that gives it meaning Getting It Right With Type, Victoria Squire

28

29 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 activity the possibility of image continuation Getting It Right With Type, Victoria Squire

30

31

32 helpful tips: breaking the grid grid deconstruction: sometimes content needs to ignore structure 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

33

34 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

35 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 perception 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