hierarchy grids

By definition, visual hierarchy means a group of visual elements arranged according to emphasis. This emphasis is achieved through contrasts which stress the relative importance and separation or connection of design elements (the gestalt principles of proximity and similarity). The study of visual hierarchy is the study of the relationships of each part to other parts; and to the whole. Visual Hierarchies emphasize the relationship of each element to the expressed content of 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 clarify meaning, a designer introduces visual punctuation (space intervals, color, graphic forms, or pictorial elements) to separate, connect, and emphasize words or lines. Visual punctuation stresses a rhythmic organization that clarifies the readers or viewers understanding of the content and structure of an arrangement. If visual punctuation helps to clarify the meaning of the intended message, visual accentuation is the stressing of particular qualities important to the structure of that message. The concern is relative emphasis: the properties of an arrangement that creates a hierarchy of dominant, subdominant, and subordinate.

hierarchy

Contrast between elements in a space is achieved by carefully considering their visual properties. Important contrasts used to create hierarchical arrangements include size, weight, color, and spatial interval. The location of an element within the space plays an important role in establishing a visual hierarchy. the spatial relationships with other elements can also influence an elements relative importance in the arrangement. Principles used to achieve visual hierarchy through careful contrast between the elements are demonstrated by these nine small diagrams.

Here are nine typographic designs that correspond to the preceeding diagrams.

A grid is a series of horizontal and vertical lines that evenly and symmetrically divide a page, whether it is a printed page or a "page" in a website, or an online /computer-based application. A typographic grid organizes text and images across the pages of a document. A grid can consist of a single column framed by margins, or it may have multiple columns. Once you establish a focal point, create a Hierarchy of Elements to guide the viewer through your layout, from major to minor sections. For example, beginning with the headline as a focal point, perhaps the viewer will be led to a subhead, a pull quote, a logo, then the body copy. Using a grid system for page and screen layout makes it easy to organize and balance all of your elements. Graphics, text, photos, navigation elements, anything that is going to be visible on a printed or web page can be organized using a grid. Grid systems have been in use for a long time and are strictly adhered to in the magazine and newspaper publishing industry, but graphic designers use them for all types of printed and onscreen media. Anyone who creates documents or screen designs should use this device to make a visually pleasing and balanced layout. Grids are used to emphasize the most important parts of your content, organize it into categories, and make it visually interesting and not static. Generally speaking, the larger and more dominant or unique the element, the higher it's ranking in the visual hierarchy. A carefully crafted grid will facilitate the mind's attempt to create order from chaos by providing a logical structural system to which every sensation relates. Within this structure a hierarchy of sensations can easily be controlled with a systematic use of the Gestalt principles of proximity, similarity, and closure. An established hierarchy will reveal the relative importance of one sensation over another in a series of dominant, sub-dominant and subordinate relationships. When creating your hierarchy, consider the cultural habits of the viewer. For example in the United States viewers (readers) typically scan from left to right and top to bottom.

grid

Grids From simple to complex

Spatial interaction and compositional balance are achieved when modules define void spaces that are integral to the geometry of the page.

Designer unknown

Medea M, for Opernhaus, designed by Ruedi Regg, 1972

Atembogen, for Baltis und Regg, designed by Hug + Shne, 1979

Birth of the Cool, designed by Cornel Windlin, 1997

examples

Pla Gra Des (Plakate Grafik Design), by Georg Staehelin, 1999

Designer unknown

Yves Zimmerman

examples

Walter Siefert

Augustin Tscinkel

Anton Stankowski

examples

Kurt Schwitters

examples

Unknown designer

emigre fonts website

new york times website