14
Visual Hierarchy Visual Hierarchy The study of the relationships of each part to the other parts to the whole. When elements have similar characteristics, they have equality in the visual hierarchy. When they have contrasting characteristics, their differences enable them to take dominant and subordinate positions in the composition. It is the designer’s responsibility to carefully consider the relative importance of each element in the message, the nature of the reader, and the need to create a cohesive arrangement of forms within the typographic space.

09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

  • Upload
    others

  • View
    6

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchyThe study of the relationships of each part to the other parts to the whole.

When elements have similar characteristics, they have equality in the visual hierarchy.

When they have contrasting characteristics, their differences enable them to take dominant and subordinate positions in the composition.

It is the designer’s responsibility to carefully consider the relative importance of each element in the message, the nature of the reader, and the need to create a cohesive arrangement of forms within the typographic space.

Page 2: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchyContrasts are made to stress the importance of each element.

Contrasts can be made by making changes to the following elements:

• size • weight • color • spatial interval

Contrasts create a rhythm that will move the reader from element to element

Page 3: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchyNo Visual Hiearchy

• style, size, color, weight and spacing are consistent.

• Results in an even texture and tone.

• Visual Hierarchy is almost non-existent.

The Modern Literature Society

presents a lecture

by Raoul Ramirez,

Professor of Literature

Santaneo State University

Modern Hispanic Poetry

7:30 pm March 23

The Humanities Center Auditorium

Admission is free

Page 4: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchySpace

Spatial interval equal to one line space separates the title from other info.

= more contrast

The Modern Literature Society presents

a lecture by Raoul Ramirez,

Professor of Literature

Santaneo State University

Modern Hispanic Poetry

7:30 pm March 23

The Humanities Center Auditorium

Admission is free

Page 5: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchyWeight + Space

Title set in bolder type further separates it from the overall tone and texture

Increases hierarchical contrast

The Modern Literature Society presents

a lecture by Raoul Ramirez,

Professor of Literature

Santaneo State University

Modern Hispanic Poetry

7:30 pm March 23

The Humanities Center Auditorium

Admission is free

Page 6: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchySize + Weight + Space

Changes in size and weight of the title make it even more prominent in the

visual hierarchy.

The Modern Literature Society presents

a lecture by Raoul Ramirez,

Professor of Literature

Santaneo State University

Modern Hispanic Poetry

7:30 pm March 23

The Humanities Center Auditorium

Admission is free

Page 7: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchyColor and Value

Color or value to create another level of contrast that can be controlled to

order the visual hierarchy.

The Modern Literature Society presents

a lecture by Raoul Ramirez,

Professor of Literature

Santaneo State University

Modern Hispanic Poetry

7:30 pm March 23

The Humanities Center Auditorium

Admission is free

Page 8: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchyVariation and Subtley

Two sizes and three weights

Create subtlety and variety within the composition.

The Modern Literature Society presents

a lecture by Professor of Literature

Modern Hispanic Poetry

Raoul RamirezSantaneo State University

Modern Hispanic Poetry

7:30 pm March 23

The Humanities Center Auditorium

Admission is free

Page 9: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchyExtreme Variations

Diagonal position of the title increases its prominence in the space.

The smaller type elements align with the title’s baseline and posture, unifying

the composition.

The Modern Literature

Society presents

a lecture

by Raoul Ramirez Professor of Literature

Santaneo State University

Modern Hispanic

Poetry

7:30 pm March 23 The Humanities Center Auditorium Admission is free

Page 10: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchyExtreme Variations

Extreme contrasts of type size and weight increase visual hierarchy legibility

from a distance.

The use of spatial intervals and grid structure can be used to add contrast

The Modern LiteratureSociety presents a lecture

7:30 pm March 23The Humanities Center AuditoriumAdmission is free

Santaneo State UniversityProfessor of Literature

Raoul RamirezModern Hispanic Poetry

Page 11: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchyReversing Type

Reversing the title from a black rectangle heightens contrast and increases the

visual hierarchy.

A ruled line separates the secondary type into two zones of information.

The Modern LiteratureSociety presents a lecture

7:30 pm March 23The Humanities Center AuditoriumAdmission is free

by Raoul RamirezProfessor of Literature Santaneo State University

Modern Hispanic Poetry

Page 12: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchyComplex Hiearchy - news sites

Page 13: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchyPromotional

Typefacesizeweightstyle

spacecolor

add contrast

Page 14: 09 Visual Hierarchy - Digital Art 3Dsiudigitalart.com/resources/Visual Hierarchy.pdf · Visual HierarchyVisual Hierarchy The study of the relationships of each part to the other parts

Visual HierarchyVisual HierarchyCreate Visual Hierarchy of Text using Typographical Controls

= Working with Contrasts

Typefacesizeweightstyle

spacecolor