Module 10

Contrast and Grouping

Look at the poster to the left. The names of the actor and the movie stand out and you look at them first. It is because they are big, compared to the rest of the text (contrast). Also, this poster can be divided into three groups: the movie title, the image, and the credits. They are grouped for meanings and purposes. In this module, we will examine how to work with contrast and grouping to improve your design.

Contrast

It may be difficult to understand the joys of spring without knowing the hardships of winter. You may not appreciate the taste of finely prepared food without eating meals that taste bland. It is through contrasting experiences that we develop a meaningful understanding of the world.

This is also true in design. Contrast is a visual difference that attracts the eye and informs how a person understands a graphic. You can create noticeable contrasts in your designs through the use of dissimilar characteristics, such as large and small elements, dark and light colors, or shiny and dull textures.

Unity and contrast are in a symbiotic relationship. They need each other. Through unity you create a harmonious design. Through contrast you break the unity to create a focal point or center of interest. Without the cohesiveness of unity, contrast might not be visible. In this module, you’ll find out why contrast is important and how you can use contrast to improve visual communication.

Grouping

Did you ever arrive in a foreign culture and feel confused? Things look unlike anything you’ve seen before. It takes a while to become oriented in an unfamiliar place—to structure the scene so you understand what’s going on. If you were aware of the sensory information picked up by your eyes when you first look at a graphic, it would be an analogous experience. Sensory information is a jumble of disorganized input until we structure it and give it meaning.

The brain organizes sensory information into patterns, based on certain mechanisms of perception. If you structure your graphics into these easily recognized patterns, they are likely to be understood quickly and clearly. In this module, we will also learn ways to make graphics more meaningful by organizing visual information into groups.

Goals and Outcomes

Goals

During this module, students will:

• be exposed to the knowledge and principle of contrast and grouping
• understand the impacts of contrast
• understand the impacts of grouping
• understand the visual conditions or elements for creating grouping.

Outcomes

After completing this module, students will be able to:

• identify the impacts of visual contrast
• create contrast in a design
• use contrast to communicate effectively
• identify the impacts of grouping
• identify visual conditions or elements for creating grouping
• use grouping to communicate effectively.

Selected Readings

Required

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

Recommended

• http://webdesignfromscratch.com/web-design/contrast/
• http://webdesignfromscratch.com/web-design/grouping/

“To Do” List

Before and After #8: Contrast

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 the impacts of visual contrast
• create contrast in a design
• use contrast to communicate effectively.

Instructions

1. Identify an image (before image) that violates visual design principles regarding Contrast introduced in Chapter 10. 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 10.
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://edit744.weebly.com/before–after-8.html (by Jessica Hall)
   

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

Before and After #9: Grouping

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 the impacts of grouping
• identify visual conditions or elements for creating grouping
• use grouping to communicate effectively.

Instructions

1. Identify an image (before image) that violates visual design principles regarding Grouping introduced in Chapter 11. 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 11.
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 11 (2 pts).
• The narrative description is provided and it explicitly examines both images using visual design principles introduced in Chapter 11 (2 pts).