Week 2: Applying Visual Design Principles to Mockups

by
Contents hide
1 Applying Visual Design Principles to Mockups INTRODUCTION
2 TEST YOUR KNOWLEDGE ON EMPHASIS AND HIERARCHY
3 TEST YOUR KNOWLEDGE ON SCALE AND PROPORTION
4 TEST YOUR KNOWLEDGE ON UNITY AND VARIETY
5 TEST YOUR KNOWLEDGE OF GESTALT PRINCIPLES
Spread the love

Applying Visual Design Principles to Mockups INTRODUCTION

Establishing visual design principles is really important for enhancing the visual and functional aspects of a user interface. In this course offered in Coursera’s Google’s UX Design Professional Certificate, you will learn visual principles and enhance them in your mockups. Key concepts like emphasis, hierarchy, scale, proportion, unity, variety, and Gestalt Principles such as similarity, proximity, and common region are explored in this course. By understanding these principles, you will be able to create intuitive designs with user-centric characteristics.

These concepts are essential to learning how to create a successful app. At the end of this course, one is going to have the ability to create effective and attractive app interfaces.

Learning Objectives:

  • Apply Scale and Proportion in designs to mockups
    Integrate Unity and Variety
  • Brought into Balance and the Participatory
  • Refine design elements from a Gestalt perspective
  • Differentiate all Gestalt principles that are similarity, proximity, and common region
  • Concepts of Unity and variety in design
  • Understand the importance of scale and proportion for visual design
  • Use visual hierarchy to help users through the mockup.

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: A good example of this is the use of bold hues like orange in buttons. The eye is caught by the action and is directed toward work involving the said button.

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)

Narrowed down to a focus on users: emphasizing design has mainly consisted of their needs and actions. User goals would therefore affect design choices and expectations.

However, design choices based on a user’s goals always end up guiding the decisions made when designing. Last, action items based on those needs define the needed algorithm for meeting usability.

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: The hierarchy acts as a guideline that helps the user navigate the first step in his 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 is about sorting elements based on their importance; emphasis makes something stand out from the rest. In this sense, the header image’s size signifies its importance because it becomes progressively smaller as you scroll down. This is like a front page of a newspaper or “above the fold,” signifying most important content being highlighted.

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 can be defined as a comparative size of an element with regards to other components of the design. It can emphasize something, convey similarities and contrasts, and create the user’s visual hierarchy.

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: The proportion among elements inside of a design is termed as harmony and balance. If a designer uses a smaller or larger icon rather than the earlier one, the design would lose the balance.

Correct: Scale denotes the relation between different elements in the design in terms of size. Whenever one element is altered by a designer, the consistency would be kept with all other elements in terms of scale so that everything looks harmonious.

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: The idea of proportion and scale comes highly scaled increases in the sizes of other parts to keep the design balanced and harmonious.

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 refers to how well elements fit together to communicate a particular idea in the design. Complementary fonts, consistent color usage, and proper spacing all contribute to establishing unity within a design.

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

  • Jira (CORRECT)
  • Evernote
  • Excel
  • Cameras

Jira, among other ticketing systems, forms a complete cycle of documentation and tracking of incidents.

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: According to what is known as the principle of proximity, which is part of gestalt theory, elements placed together tend to be perceived as related or grouped together, while those spaced farther apart would seem more obviously distinct or separate.

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 share any visual characteristic (e.g., color and shape) are perceived as having some similarity in function. For example, associating the brand color with progress is an application of the similarity principle by Emile because using consistent color establishes the connection of progress to the brand’s identity.

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?

3. Which step in the SIEM process transforms raw data to create consistent log records?

  • (CORRECT)

Correct: The missing patches in this image are equal and the outline of this overall form still reads well, even with missing lines. This demonstrates the closure principle; the human brain fills in parts to view a complete, wholistic object.

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: In a design, asymmetry would mean that one or more elements are not able to achieve that state of equilibrium and equality characteristic of a harmonious environment. For example, if a designer replaced one of the circles with a star then the attention would immediately be drawn to the star because of the contrast and would prompt interesting reflections about its place in the design.

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

  • Normalize data, automate data, and analyze data
  • Collect and aggregate data, normalize data, and analyze data (CORRECT)
  • Collect and aggregate data, analyze data, normalize data
  • Collect and aggregate data, normalize data, and automate data

The three steps of the SIEM process are: collecting and aggregating data, normalizing data, and analyzing data.

6. Your client wants users to focus on a specific area in the app you’re designing. When designing, how would you emphasize that area?

  • Add more content and images to that area.
  • Include a pop-up window that reminds users where to look.
  • Insert audio instructions for users so they are directed to that area.
  • Give it more visual weight than other areas. (CORRECT)

7. Your client has asked you to highlight some important text on one screen of the app you are designing. Which form of emphasis is this?

  • Contrast (CORRECT)
  • Size
  • Treatment
  • Color

8. Your client has asked that the app you are designing be accessible. How does hierarchy help support accessibilit

  • It directs screen readers to read content in the intended order. (CORRECT)
  • It shows users a pyramid of content with the most important content at the top, followed by the supporting content.
  • It provides direction on which images or icons need alt text for visually impaired users.
  • It helps the screen reader decide on the necessary information to read and skips the content that is not important.

9. What role does scale play in your mockups? Select all that apply.

  • It measures the screen dimension and adjusts buttons, icons, and images accordingly.
  • It creates emphasis. (CORRECT)
  • It provides visual hierarchy. (CORRECT)
  • It shows similarity and contrast between elements. (CORRECT)

10. A colleague has commented on your app and said that you have great affordances with your navigation. What does that mean?

  • The colors are clear and crisp.
  • The hierarchy is in a logical sequence.
  • The navigation icons are easy to understand. (CORRECT)
  • The site responsiveness is fast.

11. A colleague reviews your mockup and tells you it has excellent unity. What does this mean?

  • The design uses elements that are diverse and interesting.
  • The scale and proportion are uniform.
  • The color palette uses pleasing, subtle colors.
  • The design is easy to understand and pleasing to look at. (CORRECT)

12. Your UX design instructor asks you to create an app that uses Gestalt principles. What does this mean?

  • The app’s look and feel should be conventional, with little variety.
  • The app’s instructions should use directive text so users are clear on how to navigate.
  • The app should have clear groupings of elements and patterns. (CORRECT)
  • The app’s navigation should be linear and the user should scroll vertically.

13. You’re designing a sweet treat app. On the ordering page, you have grouped together types of baked goods using small, circular pictures. You have pictures for cakes, muffins, breads, pies, and cookies. On the other side, you grouped ice cream flavors, including pictures of various flavors such as chocolate, vanilla, strawberry, and coffee. The users will select one of these pictures and will be able to choose an item in that category. Which Gestalt principle have you used in your design?

  • Proximity
  • Continuity
  • Similarity
  • Common region (CORRECT)

14. You receive feedback on your mockup design that the accessibility is not good due to the lack of contrast. Which element do you need to adjust to address this issue?

  • Saturation
  • Hue
  • Value (CORRECT)
  • Shadows

15. In the app you are designing, the client has asked that the navigation bring users back to the homepage every time they want to visit a new page. What type of navigation would you use to do this?

  • Navigation menu
  • Tab bars
  • Navigation bars
  • Navigation hub (CORRECT)

16. You have created an e-commerce app. Your client wants to make sure that users clearly see where the checkout button is located. They have asked that you make the checkout button a more bold red color. Which element do you need to increase to make that happen?

  • Hue
  • Value
  • Clarity
  • Saturation (CORRECT)

17. In your app design, you have used the same color for buttons that indicate action for the users. Which Gestalt principle does this address?

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

18. When is it appropriate to add variety to your designs?

  • After the client has signed off on the design
  • When you are designing the mockup (CORRECT)
  • During the final testing phase
  • While you are wireframing

19. You show a screen design to stakeholders of a child holding an ice cream cone. The stakeholders’ feedback is that the ice cream cone is way too big compared to the child and they would like you to go back and design the ice cream cone so that it looks more realistic in terms of size. What are the stakeholders referring to?

  • Scale
  • Proportion (CORRECT)
  • Emphasis
  • Contrast

20. Your mockup is looking good. As you are reviewing it, you notice that an icon encroaches on the margin and an image looks rather large in relation to the rest of the page. What is the best way to remedy these issues?

  • Adjust the proportion (CORRECT)
  • Adjust the alignment
  • Adjust the emphasis
  • Adjust the page size

21. When thinking about your design, how do you determine the hierarchy?

  • Connect the pieces of content and pages together so it is clear what users should do.
  • Establish a larger size for headers and icons that are important.
  • Set the navigation so users are directed to where you want them to go.
  • Identify the primary goal users should achieve. (CORRECT)

22. As you are designing an app, there are certain pieces of content and buttons where you want users’ attention to go. What can you do to achieve this? Select all that apply.

  • Add audio.
  • Use contrast. (CORRECT)
  • Change the size. (CORRECT)
  • Incorporate texture. (CORRECT)

23. You use a heart icon on your website to indicate health and wellness. The heart is split down the middle, showing two equal parts. Which Gestalt principle does this address?

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

24. The content on your website is easy to read. You have used headers to indicate sections. It is clear that the text below the headers is related to those sections. Which Gestalt principle have you addressed in your design?

  • Similarity
  • Proximity (CORRECT)
  • Common region
  • Continuity

25. You just won a job working for a grocery store chain to create an app for their customers. The app will allow them to shop online, clip coupons, and contact the pharmacy to request to refill prescriptions. The stakeholders explain that these will be the most important destinations within the app for their customers and they would like these displayed with titles and icons in a single bar along the top of the main screen. What are the stakeholders describing?

  • Navigation bar (CORRECT)
  • Navigation hub
  • Navigation menu
  • Tab bar

26. The brand logo on your website is a group of dotted lines which form the outline a root system beneath a large tree. Which Gestalt principle does the dotted lines forming an image relate to?

  • Continuity
  • Symmetry
  • Proximity
  • Closure (CORRECT)

27. You increase the size of a button on your mockup. What should you do to maintain correct proportions of the other buttons in your mockup?

  • Remove the other buttons.
  • Increase the size of the other buttons. (CORRECT)
  • Keep the other buttons as they are.
  • Decrease the size of the other buttons.

28. You show a colleague a design you have been working on before you show the stakeholders. The colleague was impressed and said they were really drawn to the main page’s logo design. You are happy to hear that because the main page’s logo design is the most important area of your design. What have you used to focus users’ eyes on the logo?

  • Alignment
  • Size
  • Contrast
  • Emphasis (CORRECT)

29. You have been asked to design an app for a local coffee shop. The owner really likes how you have shown how much espresso goes into the different size lattes. A small latte has one shot of espresso, a medium latte has two shots of espresso, and a large latte has three shots of espresso. Which visual design principle did you use to convey the amount of espresso?

  • Perceived physical weight (CORRECT)
  • Saturation
  • Intrinsic interest
  • Orientation

30. Your client wants users to focus on a certain section of the app you are designing. What factors influence where to place emphasis? Select all that apply.

  • The navigation menu and headers on each screen
  • The number of clicks
  • The user goals (CORRECT)
  • Where attention should be drawn (CORRECT) 

31. When designing a mockup, which visual design principle would you use to guide your users to take an action?

  • Contrast
  • Hierarchy (CORRECT)
  • Alignment
  • Emphasis

32. What role does scale play in your mockups? Select all that apply.

  • It measures the screen dimension and adjusts buttons, icons, and images accordingly.
  • It provides visual hierarchy. (CORRECT)
  • It creates emphasis. (CORRECT)
  • It shows similarity and contrast between elements. (CORRECT)

Leave a Comment