Module 8

Visual Hierarchy and Cue

To some degree, you are the “director” of your designs. You should know how to direct viewers’ attention to what you want to convey in a design. To do that you need to build an organized structure and visual cues for viewers to follow through your design. Let’s see how you can achieve this by utilizing principles behind visual hierarchy and visual cue.

Visual Hierarchy

Did you ever hike through a forest that had poorly marked trails and you were unsure of what path to take? With no visual cues to mark the route, you weren’t sure how to proceed. When it comes to visual design, users have a similar experience. When looking at a screen or slide, they need help finding their way. Otherwise, they become confused or they waste effort, unsure of what to look at first.

As a designer, your job is to provide an obvious path for the viewer’s eyes to follow. You can achieve this by creating a hierarchical structure of dominant and subdominant forms. In this module, we will learn techniques for establishing a visual hierarchy. You will begin to see that, without a visual hierarchy, a design falls flat.

Visual Cue

Imagine you are walking down a city street. While pausing to look up at the tall buildings, you become aware of a pleasant breeze. Your mind travels to the movie you saw last night, but you are interrupted by a passerby who asks for directions. Sound typical? At any given moment, a person might be attending to sensory information or an internal conversation or responding to a situation. How does anyone ever focus?

Fortunately, we all have the ability to use selective attention, which allows us to attend to what is important in an ocean of sensory information and internal dialogue. Through selective attention, a person decides what information is processed and what is not. The rest is filtered out. This also applies to see visuals in a course or presentation. What people notice while intentionally using selective attention is different from what they notice while aimlessly looking at a graphic with no goal in mind. In this module, we will also learn how to guide the viewers’ eyes to ensure they pay attention to what is most important in your design.

Goals and Outcomes

Goals

During this module, students will:

• be exposed to the visual design principles about visual hierarchy and visual cue
• understand how people scan a screen or page
• understand how visual guidance can improve learning
• understand how visual cues work in a design.

Outcomes

After completing this module, students will be able to:

• use design to control where viewers look
• understand how people scan a screen or page
• create a visual hierarchy with visuals and text
• identify visual cues in a design
• use appropriate visual cues in a design.

Selected Readings

Required

• Chapters 8 and 12 from the following book:
  Malamed, C. (2015). Visual design solutions: Principles and creative inspiration for learning professionals. Hoboken, New Jersey: John Wiley & Sons.

Recommended

• None

“To Do” List

Before and After #5: Visual Hierarchy

Please read the Before and After Assignment description page for further details about this assignment.

Outcomes

After completing this assignment, you will be able to:

• use design to control where viewers look
• understand how people scan a screen or page
• create a visual hierarchy with visuals and text.

Instructions

1. Choose an image from the pool (or find one of your own) that violates visual design principles regarding Visual Hierarchy introduced in Chapter 8. This will be your before image. Save your before onto your computer.
2. Create a new file (1200 x 1800 pixels, 72 Pixel/Inch) with Adobe Photoshop.
3. In the new file (after image), recreate the same information in the before image, but make each visual element comply with visual design principles introduced in previous modules and Chapter 8.
4. Upload both before and after images, including JPG and PSD files, onto a Weebly page.
5. In a paragraph (between 200 – 400 words), describe explicitly why the before image fails to comply with the visual principles and how you corrected it with your new design.

Submitting and Posting

1. 1. To submit your work, post URL of your Weebly page to the corresponding link under Submissions inside Moodle before 11:59 p.m. U.S. EST/EDT on the following Monday.

on the following Monday.

Grading

Your work will be graded based on the following requirements:

• Both images are uploaded (1 pt).
• The after image contains the same information presented in the before image (1 pt).
• The after image complies with visual design principles introduced in previous modules and Chapter 8 (2 pts).
• The narrative description is provided and it explicitly examines both images using visual design principles introduced in Chapter 8 (2 pts).

Before and After #6: Visual Cue

Please read the Before and After Assignment description page for further details about this assignment.

Outcomes

After completing this assignment, you will be able to:

• identify visual cues in a design
• understand how visual guidance can improve learning
• use appropriate visual cues in a design

Instructions

1. Choose an image from the pool (or find one of your own) that violates visual design principles regarding Visual Cue introduced in Chapter 12. This will be your before image. Save your before onto your computer.
2. Create a new file (1200 x 1800 pixels, 72 Pixel/Inch) with Adobe Photoshop.
3. In the new file (after image), recreate the same information in the before image, but make each visual element comply with visual design principles introduced in previous modules and Chapter 12.
4. Upload both before and after images, including JPG and PSD files, onto a Weebly page.
5. In a paragraph (between 200 – 400 words), describe explicitly why the before image fails to comply with the visual principles and how you corrected it with your new design.

Submitting and Posting

1. 1. To submit your work, post URL of your Weebly page to the corresponding link under Submissions inside Moodle before 11:59 p.m. U.S. EST/EDT on the following Monday.

on the following Monday.

Grading

Your work will be graded based on the following requirements:

• Both images are uploaded (1 pt).
• The after image contains the same information presented in the before image (1 pt).
• The after image complies with visual design principles introduced in previous modules and Chapter 12 (2 pts).
• The narrative description is provided and it explicitly examines both images using visual design principles introduced in Chapter 12 (2 pts).