Course 5 – Create High-Fidelity Designs and Prototypes in Figma

Week 2: Applying Visual Design Principles to Mockups

Google UX Design Professional Certificate

Complete Coursera Study Guide

Applying Visual Design Principles to Mockups INTRODUCTION

Visual design principles are essential for enhancing the look and feel of a user interface. As part of Coursera’s Google UX Design Professional Certificate program, you will learn to apply these visual design principles to refine mockups. Specifically, emphasis, hierarchy, scale, proportion, unity, variety, and Gestalt Principles such as similarity, proximity, and common region will be introduced in order to create effective designs that are easily interpretable by users.

Applying these concepts is an important step in developing a successful App! By the end of this course, you will have gained the skills necessary to create beautiful and functional App interfaces.

Learning Objectives

  • Apply principles of scale and proportion to elements in mockups
  • Apply principles of unity and variety to elements in mockups
  • Apply Gestalt Principles to refine design elements
  • Distinguish between Gestalt Principles of similarity, proximity, and common region
  • Define the principles of unity and variety
  • Define the principles of scale and proportion
  • Apply principles of visual hierarchy to elements in mockups

TEST YOUR KNOWLEDGE ON EMPHASIS AND HIERARCHY

1. A designer develops a website for a local bakery and wants to direct users to its online ordering page. They add a bright orange “Place an Order” button to the homepage with a white background. What visual weight variable did the designer incorporate in the app?

  • Color (CORRECT)
  • Image
  • Motion
  • Size

Correct: By adding a bold color like orange to a button, the designer creates a force to attract the eye and draw the user to complete an action.

2. When deciding what to emphasize in your design, what key questions should you ask? Select all that apply.

  • Where should I place the secondary sections?
  • How frequently should I include the emphasis?
  • Where do I want to draw the user’s attention? (CORRECT)
  • What are the user’s goals? (CORRECT)

Correct: When considering the application of emphasis, the user’s needs and actions should be the central focus. Key considerations should also reflect on the user’s goals.

Correct: The user should always be the central focus in any design consideration. Choosing the best emphasis for an element in a design should reflect the user’s goals. Key considerations should also prioritize the user’s needs and actions.

3. Hierarchy is important in UX design because it makes clear to the user _____ and what action to take.

  • what needs the least attention
  • where to focus first (CORRECT)
  • what is least important
  • where to find the homepage

Correct: Hierarchy helps point the user to the first step to take in their user journey.

4. Which of the following is an example of hierarchy?

  • A website that features a consistent color scheme
  • A website’s navigation bar alternates between different colors for each subject 
  • A website’s homepage that opens up with a large image at the top and, as users scroll down the page, the other like images gradually become smaller. (CORRECT)
  • A website’s homepage adds bold color to the heading text

Correct: Hierarchy refers to a group of elements that are organized in order of importance while emphasis is about making one element stand out from the other elements surrounding it. In this case, the size of the header image indicates significant importance, since the images gradually become smaller as users scroll. Think of it like the front page of a newspaper, or above the fold.

TEST YOUR KNOWLEDGE ON SCALE AND PROPORTION

1. Which visual design principle is used to explain the size relationship between a given element and the other elements in a design?

  • Proportion
  • Emphasis
  • Scale (CORRECT)
  • Containment

Correct: Scale is used to explain the size relationship between a given element and the other elements in the design. It can create emphasis, show similarity and contrast, and communicate visual hierarchy to the user.

2. If a designer reviews the navigation bar on a mockup and considers replacing one of the five icons, which visual design elements will best help them keep the design consistent and balanced? Select all that apply.

  • Hierarchy
  • Emphasis
  • Proportion (CORRECT)
  • Scale (CORRECT)

Correct: Proportion considers the balance or harmony between elements. If the designer replaces an icon  with one that’s either too big or too small in comparison to the others, the design will become unbalanced.

Correct: Scale explains the size relationship between elements in a design. If a designer changes one element, it’s important they keep the scale consistent.

3. Fill in the blank: If one element in your proportionate design increases in size, then the other elements should _____.

  • stay the same size so the original elements stay proportionate
  • also increase in size at the same rate in order to remain proportionate (CORRECT)
  • shrink in size to place emphasis on the resized element
  • move in the design to prevent any potential crowding

Correct: By increasing the size of the other elements you maintain both scale and proportion in the design.

TEST YOUR KNOWLEDGE ON UNITY AND VARIETY

1. A design team builds a prototype for a local farm’s website. They incorporate a consistent color scheme, complementary fonts, and consistent spacing in the design. What visual design principle is this an example of?

  • Hierarchy
  • Variety
  • Unity (CORRECT)
  • Proportion

Correct: Unity measures how well elements work together to communicate an idea in a design. Features like complementary fonts, consistent color schemes, and spacing contribute to unity in a design.

2. If used effectively, variety can create visual interest and break up monotony. Which example is the best use of variety?

  • Add emojis to the end of each sentence in a social media post
  • Apply bold text to all content on a webpage
  • Use different colors from the brand’s color palette in a website’s background (CORRECT)
  • Apply an orange background to normal weather events on a weather app

Correct: This is an example of variety that keeps consistency with the brand, while also adding visual interest.

COURSERA GOOGLE UX DESING ANSWERS AND STUDY GUIDE

Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!

Weekly Breakdown | Google Study Guides | Back to Top

TEST YOUR KNOWLEDGE OF GESTALT PRINCIPLES

1. Which Gestalt Principle states that elements that are close together appear to be more related compared to elements spaced farther apart?

  • Common region
  • Proximity (CORRECT)
  • Similarity

Correct: The Gestalt Principle of proximity states that elements that are close together appear to be more related than elements that are spaced farther apart.

2. Consider the following scenario:

Emile is creating an app that lets people rent bicycles. Users can check in, check out, and pay for their rental with it. Emile wants users to associate the brand color—vermillion red—with the check-out process by indicating successful progress with check marks in this color. Emile  wants to make buttons, such as “Next” and “Complete Order” to follow the same theme. Which Gestalt principle is this comparable to?

  • Similarity (CORRECT)
  • Common region
  • Proximity
  • Visual balance

Correct: The Gestalt principle of similarity states that elements that look related are perceived to have the same function. Emile wants to create an association between progress and the brand color, which is an example of similarity.

3. The closure principle describes that when a user looks at an incomplete object, they subconsciously complete the image in their mind to see the whole, completed object. Which of the following graphics best depicts the closure principle?

1 1
Coursera UX Design 1
2 1
Coursera UX Design 2
  • (CORRECT)

Correct: The missing sections of this image are uniform and, despite the missing line segments, it’s clear what the shape of this image represents. This is a great example of the closure principle.

3 1
Coursera UX Design 3
4 1
Coursera UX Design 4

4. A design team wants to add a new, secret page on their app that only observant users will be able to find. They only want to change one element of the current design. Which visual design strategy would best allow them to adjust just one element of the current design and draw visual attention to the secret page?

  • Proximity
  • Common region
  • Asymmetry (CORRECT)
  • Symmetry

Correct: Asymmetry is a lack of balance and equality between elements. If a designer were to switch out one circle element with a star, the user would be drawn to the object and wonder about its importance.

5. Identify the key questions a designer should ask when deciding what and where to add emphasis or visual weight. Select all that apply.

  • What fonts are universally popular?
  • What font size is better?
  • Where do I want to draw the user’s attention? (CORRECT)
  • What are the user’s goals? (CORRECT)

Correct: When it comes to deciding  where to add emphasis or visual weight, a designer should consider two key questions: Where do I want to draw the user’s attention? What are the user’s goals?

Correct: When it comes to deciding what and where to add emphasis or visual weight, a designer should consider two key questions: Where do I want to draw the user’s attention? What are the user’s goals?