Module 9

Visual Unity

A unified design may seem like an ethereal concept, but it is similar to how you would think about unity in any other context. When a group is unified, the people have some type of bond or there is a consensus among members. Likewise, when a design is unified, there is a relationship among the elements and these elements are in agreement, visually or conceptually. A visually unified design is one where the layout, images, shapes, and typography work together as a whole and are well-integrated. A unified design conveys one harmonious message. See the image to your left, the color of brown are used throughout the design and the curved shapes are repeatedly used to unify the design.

Unity is an overarching ideal of successful visual design that most of the other principles support. For example, achieving a balanced design through the distribution of visual weight contributes to unity. Consistent styles of imagery and a consistent color palette also create a unified design.

As you work with the techniques that support visual unity, there is a risk that your design may become monotonous. That is when you need to add some distinctive elements for interest. This module will look at ways to achieve a cohesive, unified design and also how to add a touch of variety.

Goals and Outcomes

Goals

During this module, students will:

• be exposed to the knowledge and principle for unifying a design
• understand the impacts of unified design
• understand how to create visual unity.

Outcomes

After completing this module, students will be able to:

• identify a unified design
• identify the impacts of unified design on learning
• identify strategies to create visual unity.

Selected Readings

Required

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

Recommended

• https://webdesign.tutsplus.com/articles/unity-in-web-design–webdesign-3373
• http://dmd1205.ballstudio.net/unity/CH2-Unity-web.pdf

“To Do” List

Before and After #7: Visual Unity

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 a unified design
• identify the impacts of unified design on learning
• identify strategies to create visual unity

Instructions

1. Identify an image (before image) that violates visual design principles regarding Visual Unity introduced in Chapter 9. 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 9.
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.
6. Examples:
   • http://patiencelockeportfolio.weebly.com/before–after-graphic–7.html (by Patience Kotwa)
   • http://sthornellccu.weebly.com/before-and-after-exercises.html (by Sharon Thornell)

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 9 (2 pts).
• The narrative description is provided and it explicitly examines both images using visual design principles introduced in Chapter 9 (2 pts).