Hierarchy Grid Slides

8/3/2019 Hierarchy Grid Slides

http://slidepdf.com/reader/full/hierarchy-grid-slides 1/13

hierarchy

grids



hierarchyBy deinition, visual hierarchy means a group o visual elements arranged according to emphasis. This empha-sis is achieved through contrasts which stress the relative importance and separation or connection o designelements (the gestalt principles o proximity and similarity). The study o visual hierarchy is the study o the rela-tionships o each part to other parts; and to the whole. Visual Hierarchies emphasize the relationship o eachelement to the expressed content o the page. This emphasis can be broken down into three levels; dominant,sub-dominant, and subordinate.

A visual hierarchy is partly governed by punctuation. As a writer uses standard punctuation marks to separate words and clariy meaning, a designer introduces visual punctuation (space intervals, color, graphic orms, or pictorial elements) to separate, connect, and emphasize words or lines. Visual punctuation stresses a rhythmicorganization that clariies the reader’s or viewer’s understanding o the content and structure o an arrange-ment. I visual punctuation helps to clariy the meaning o the intended message, visual accentuation is thestressing o particular qualities important to the structure o that message.

The concern is relative emphasis: the properties o an arrangement that creates a hierarchy o dominant, sub-dominant, and subordinate.



Contrast between elements in a spaceis achieved by careully considering their visual properties. Important contrastsused to create hierarchical arrangementsinclude size, weight, color, and spa-tial interval. The location o an element

within the space plays an important role in

establishing a visual hierarchy. the spatialrelationships with other elements can alsoinfuence an element’s relative importancein the arrangement.

Principles used to achieve visual hierar-chy through careul contrast between theelements are demonstrated by these ninesmall diagrams.



Here are nine typographic designs thatcorrespond to the preceeding diagrams.



grid A grid is a series o horizontal and vertical lines that evenly and symmetrically divide a page, whether it is aprinted page or a "page" in a website, or an online /computer-based application. A typographic grid organizestext and images across the pages o a document. A grid can consist o a single column ramed by margins, or it may have multiple columns.

Once you establish a ocal point, create a Hierarchy o Elements to guide the viewer through your layout, rommajor to minor sections. For example, beginning with the headline as a ocal point, perhaps the viewer will beled to a subhead, a pull quote, a logo, then the body copy.

Using a grid system or page and screen layout makes it easy to organize and balance all o your elements.

Graphics, text, photos, navigation elements, anything that is going to be visible on a printed or web page canbe organized using a grid. Grid systems have been in use or a long time and are strictly adhered to in themagazine and newspaper publishing industry, but graphic designers use them or all types o printed and on-screen media. Anyone who creates documents or screen designs should use this device to make a visuallypleasing and balanced layout.

Grids are used to emphasize the most important parts o your content, organize it into categories, and make itvisually interesting and not static. Generally speaking, the larger and more dominant or unique the element, thehigher it's ranking in the visual hierarchy.

A careully crated grid will acilitate the mind's attempt to create order rom chaos by providing a logical struc-tural system to which every sensation relates. Within this structure a hierarchy o sensations can easily be con-

trolled with a systematic use o the Gestalt principles o proximity, similarity, and closure. An established hierar-chy will reveal the relative importance o one sensation over another in a series o dominant, sub-dominant andsubordinate relationships.

When creating your hierarchy, consider the cultural habits o the viewer. For example in the United States view-ers (readers) typically scan rom let to right and top to bottom.



GridsFrom simple to complex

Spatial interaction and compositionalbalance are achieved when modulesdefne void spaces that are integral tothe geometry o the page.





Medea M, or Opernhaus, designed

by Ruedi Rüegg, 1972

Atembogen, or Baltis und Rüegg,

designed by Hug + Söhne, 1979

Birth o the Cool, designed by Cor-

nel Windlin, 1997

Pla Gra Des (Plakate Grafk Design),

by Georg Staehelin, 1999

Designer unknown

Designer unknown

examples



Walter Sieert

examples

Yves Zimmerman



Anton Stankowski examples

Augustin Tscinkel



Unknown designer

Kurt Schwitters

examples



emigre onts website



Documents

Hierarchy Grid Slides