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

Week 1: Starting to Create Mockups

Google UX Design Professional Certificate

Complete Coursera Study Guide

Starting to Create Mockups INTRODUCTION

In this part of the Google UX Design Professional Certificate program from Coursera, it’s time to turn your focus toward visual design. Starting to create mockups is a great way to apply everything you’ve learned so far in the course. These high-fidelity designs help represent the final product and include elements such as typography, color, iconography, and more.

You’ll also learn about methods for arranging these elements into layouts using grids, containment, and negative space. With all of these principles in mind, you can build on your mobile app designs from earlier parts of the certificate program. Start building now to understand better how visual design plays an important role in user experiences!

Learning Objectives

  • Define the role and purpose of a mockup
  • Create a mockup in Figma
  • Apply foundational elements of visual design to mockups, including typography, color, and iconography
  • Use grids and containment elements in mockup layouts
  • Demonstrate the benefits of using negative space to improve mockups

TEST YOUR KNOWLEDGE OF PRIOR CONCEPTS

1. What are some key benefits of considering accessibility in UX design? Select all that apply.

  • Addresses a11y ideas
  • Creates solutions that often help everyone (CORRECT)
  • Addresses societal structures and products rather than a person’s ability (CORRECT)
  • Ensures underrepresented and excluded groups are taken into account (CORRECT)

Correct: Whether or not a person has a disability, considering accessibility in design often helps everyone, including those with temporary, situational, or permanent disabilities. Products created to enhance the user experience resulted in a solution that helped everyone, such as closed captioning, enlarged fonts, and magnifying tools.

Correct: In the disability community and as UX designers, the social model of disability is defined as a disability being caused by the way society is organized or how products are designed rather than a person’s ability or difference. Similar to how many products are created for those who are right-handed and less often for those who are left-handed, designers look at how a product should transform to meet underrepresented needs.

Correct: Accessibility in design, particularly equity-focused design, considers all aspects of a product to ensure it’s accessible and fair to various genders, races, and abilities, especially those from historically underrepresented groups.

2. Which phase of the design sprint helps the team find solutions to build on?

  • Test
  • Decide
  • Understand
  • Prototype
  • Ideate (CORRECT)

Correct: After starting the design sprint off on the right track with the Understand phase, the Ideate phase helps the team find solutions to build upon. To get the creative juices flowing, you start this phase by coming up with ideas and building on them to create solutions.

3. What can a researcher learn when they properly empathize with users during user research?

  • The wants, desires, and fears of their users
  • The opinions, feelings, and biases of their users
  • The needs, behaviors, and motivations of their users (CORRECT)
  • The hopes, dreams, and assumptions of their users

Correct: Empathizing with users helps researchers understand what users need, why they need it, and how they solve problems. This is vital in building positive user experiences.

4. Which of the following are examples of pain points?

  • Completing the checkout process for a food delivery app
  • Receiving the same response to three different questions from an automated chatbot (CORRECT)
  • Struggling to interact with a button on a mobile app’s homepage because it’s extremely small (CORRECT)
  • Being asked to submit credit card information when no payment is required (CORRECT)

Correct: This is an example of a support pain point, since the user can’t get the answers they need.

Correct: This is an example of a product pain point, since it is a usability issue that frustrates the user.

Correct: This is an example of a financial pain point, since the user has to provide sensitive personal information without a clear reason.

5. You are designing a life-coaching app for people between the ages of 21 and 30. After conducting research with a diverse set of users, you discover that established professionals are three times more likely to use life-coaching services than those at the beginning of their careers. Which of the following is an example of a complete user persona for your user group?

  • Nistha Dube, a 29-year-old engineer and foodie from Chennai, India, who makes viral cooking videos on the weekends. Nistha has been thinking about how to balance their career and their passion for food, but they also want to make more time for their mental health in their schedule. (CORRECT)
  • Michael Embery, a 22-year-old from Indianapolis, Indiana who has a busy work schedule.
  • Rita Dieguez, a 24-year-old who identifies as non-binary from Manaus, Brazil.
  • Liz Fontaine, a 27-year-old veterinarian who enjoys video games

Correct: This is an example of a user persona that describes many different aspects of a user. Understanding who you’re designing for and recognizing that they lead a complex life allows you to refine your solutions to solve problems specific to them. By creating a detailed persona that has all the qualities of a real person in your user group, you can design meaningful solutions for people like Nistha.

6. Which of the following user stories is complete?

  • I want a bookshelf so I have somewhere to store my book collection.
  • As a yoga instructor, I want to create a consistent class schedule so that my clients know how to confidently plan their weekly exercise. (CORRECT)
  • As a scientist, I want access to my colleagues’ published research.
  • As a chef, I want access to the freshest ingredients and the highest-quality cooking utensils.

Correct: This user story is complete with a type of user, an action, and a benefit. A complete user story keeps the problem user-centered, actionable, and clear.

7. Fill in the blank: Designing products with accessibility and inclusivity in mind ensures that you _____.

  • include solutions that benefit specific individuals, which improves the user experience for all users. (CORRECT)
  • create a different solution for every single user.
  • create an identical experience for all users
  • focus on creating one solution for as many people as possible

Correct: This approach solves a problem for a specific user, but the solution extends to the many other users of the product. This approach provides multiple design solutions that account for different users, such as those with disabilities or those who come from traditionally marginalized backgrounds. These considerations improve the experience for the intended user, as well as other users of the product.

8. Which of the following is a complete problem statement?

  • Angelo needs a toolbox and shingles to fix the leak in their roof.
  • Bella is a dance choreographer who needs to create a practice video because some of their students have school during the day and can’t attend lessons in person. (CORRECT)
  • Hakim is an accountant who needs to collect expense reports from their coworkers.
  • Akiko is a construction consultant who is building a skyscraper.

Correct: In this statement, the user’s name, characteristics, need, and the reason for the need have been clearly defined.

9. Identify the steps of the ideation process in the correct order.

  • Brainstorming, documenting ideas, focusing on quantity, gathering a diverse team, questioning obvious solutions, and evaluating the ideas. (CORRECT)
  • Gathering a diverse team, brainstorming, documenting ideas, questioning obvious solutions, focusing on quantity, and evaluating the ideas.
  • Documenting ideas, brainstorming, focusing on quantity, questioning obvious solutions, gathering a diverse team, and evaluating the ideas.

Correct: It’s important to begin by brainstorming many possible solutions and recording them so you have a large pool of possibilities. Gathering a diverse team provides unique perspectives when you begin to eliminate obvious solutions. Then, once you’ve refined your total number of solutions, you can assess which are best suited to your users’ needs. Completing the ideation process in this order allows you to identify many possible solutions.

10. You’re a UX designer working on a gaming app in a competitive market space. You want to figure out what your competitors’ strengths and weaknesses are, and how to create a better product. What should you do?

  • Conduct a competitive audit (CORRECT)
  • Contact each company directly
  • Conduct informal research online
  • Create a marketing plan

Correct: A competitive audit is a report that evaluates what competing companies are doing well with their product, and where they are failing. This information can improve your product by addressing problems your competitors haven’t accounted for.

11. Which of the following scenarios would be most appropriate to use a close-up storyboard?

  • You create an app that connects people who are interested in gardening via a social forum. You want to implement an inbox feature and test whether or not users find it easy to use. (CORRECT)
  • You are in the middle of the design process for a grocery delivery app. You want to pitch some ideas to the team about how the user could use it and benefit from it.
  • You begin creating a new finance management app. You need to demonstrate when and how a user might interact with it during a normal work day.

Correct: This scenario aims to test a specific aspect of the product to see how it works, so a close-up storyboard would work best here. Designers use close-up storyboards to identify what things should do, like how a user moves from one specific screen to the next.

12. Which of the following UX tools and processes demonstrates the basic structure and layout of a design without including specific visual details?

  • High-fidelity designs
  • Ideation exercises
  • Wireframes (CORRECT)
  • Low-fidelity designs

Correct: Wireframes establish the structure of your page before you move into the next stage of designs. This helps you and your stakeholders evaluate how the pages of your design will work before committing to any details.

13. You are working on an app that connects users to tree removal services in their local area. You have already created paper wireframes and now it’s time to build the design on the computer. What is the next step?

  • Create high-fidelity mockups
  • Create a high-fidelity prototype
  • Create digital wireframes (CORRECT)
  • Create a low-fidelity prototype

Correct: You create digital wireframes directly after your paper wireframes. Digital wireframes make it easier to pay attention to the details of your pages compared to the paper version’s hand-drawn sketches. They are also shareable, making collaboration with others easy.

14. How is a prototype different from a wireframe?

  • Wireframes and prototypes are both interactive representations of how a design works.
  • A prototype is a single screen that shows all the details that will go into a final design. A wireframe is a set of interactive design solutions made up of many prototypes and demonstrates how the entire design works.
  • A wireframe is an interactive representation of a complete design solution that shows stakeholders how it will work. A prototype is a single screen with basic elements that establishes the structure of a page.
  • A prototype is an interactive representation of a complete design solution that shows stakeholders how it will work. A wireframe is a single screen with basic elements that establishes the structure of a page. (CORRECT)

Correct: Prototypes represent an entire design and demonstrate how it works. Wireframes provide an outline of each screen that goes into a prototype.

15. Identify the benefit of using paper prototypes in the design process

  • Paper prototypes are polished and represent a final design solution
  • Paper prototypes require large amounts of time and resources to produce
  • Paper prototypes are inexpensive and convey complex visual details
  • Paper prototypes allow rapid iterations and require low commitment (CORRECT)

Correct: Since a pen and paper are the only necessary tools to create paper prototypes, they allow for low-cost, rapid iteration. Designers can create multiple prototypes in less time.

16. Fill in the blank: _____ is the collection of attitudes and stereotypes we associate to people without our conscious knowledge.

  • Recency bias
  • Primacy bias
  • Implicit bias (CORRECT)
  • Sunk cost fallacy

Correct: Implicit bias, or also known as unconscious bias, is the collection of attitudes and stereotypes we associate to people without our conscious knowledge.

17. Which of the following is an example of a usability study?

  • Arthur recruits participants for a study, gives them specific tasks, and asks them how difficult each task was to complete afterwards (CORRECT)
  • Daryl presents their prototype to several strangers on the street and asks them to see how they like using it
  • Darla recruits participants for a study, gives them specific tasks, and asks them for only positive feedback about each task
  • Marlene has each stakeholder review their design before handing it off to the development team

Correct: Usability studies assess the difficulty of completing core tasks in a design. Usability studies provide user feedback that helps the design team make improvements to the user experience.

18. A moderator conducts a usability study to solicit feedback on a mileage tracking feature for a cycling app. Which type of bias may occur if the participant gives multiple pieces of feedback in the same answer?

  • Friendliness bias
  • Implicit bias
  • Serial position effect (CORRECT)
  • Social desirability bias

Correct: Serial position effect is a psychological bias where people are more likely to remember the first and last few items when given a list, while the items in the middle tend to blur.

19. You are a UX researcher who just finished the research for an app that helps users find speciality coffee brands. You’ve gathered all of the observations from your interviews and identified the common themes. What comes next?

  • Evaluate the themes to determine which observations to disregard
  • Write down insights based on the themes you’ve identified (CORRECT)
  • Organize your data using an affinity diagram
  • Propose solutions to the common themes you’ve identified

Correct: After you identify the themes in the data, you determine insights based on each theme. This will help the design team implement your insights in order to improve the design

20. Strong insights uncovered in research should be easy to understand, answer the research question, and increase empathy for the user.

  • True (CORRECT)
  • False

Correct: A good insight is clear, addresses the research question, and helps stakeholders connect with the user’s needs.

21. What types of content should be included in your presentation slide deck when presenting UX research insights to stakeholders?

  • Themes, insights and recommendations, and details about the study (CORRECT)
  • Affinity maps, research methods, research questions, and key performance indicators (KPIs)
  • User stories, user flows, user journeys, and pain points

Correct: You should include a section for themes, insights and recommendations, details about the study, and an appendix in your presentation slide deck.

TEST YOUR KNOWLEDGE OF TYPOGRAPHY

1. A _____ is the size, thickness, and emphasis of letters.

  • typeface
  • font (CORRECT)
  • sans serif
  • serif

Correct:A font is the size, thickness, and emphasis of letters. Some variations include light, bold, italicized, or regular.

2. Which of the following is an example of a typeface name?

  • Heading
  • Arial (CORRECT)
  • Normal
  • Underline

Correct: Arial is an example of a sans serif typeface name.

3. You want to include a serif typeface for an upcoming design project. Which of the following font families work best for the design?

1
Coursera Typography Figma
2
Coursera Typography Figma
4
Coursera Typography Figma
3
Coursera Typography Figma
  • (CORRECT)

Correct: This is an example of a serif typeface because of the extra lines hanging from the text.

4. What are the benefits of good typography? Select all that apply.

  • Typography limits wasted text space.
  • Typography demonstrates brand guidelines. (CORRECT)
  • Typography makes text easier to read. (CORRECT)
  • Typography adds hierarchy to help readers navigate a page better. (CORRECT)

Correct: Typography communicates a brand’s identity and values, adds hierarchy to help readers navigate a page better, and makes text easier to read.

Correct: Typography makes the content legible for users, adds hierarchy to help readers navigate a page better, and demonstrates brand guidelines.

Correct: Typographic hierarchy helps people better navigate a page, makes text easier to read, and demonstrates brand guidelines.

TEST YOUR KNOWLEDGE ON COLOR

1. In the 60-30-10 rule for design, which color characteristic makes up 10% of the palette?

  • Accent color (CORRECT)
  • Primary color
  • Complementary color
  • Neutral color

Correct: Designers should use the accent color sparingly (in about 10% of the design) to add emphasis to a specific design element.

2. A design team builds a site for a travel company and wants to incorporate vibrant colors into the design. The team consults the _____ to ensure the colors they select follow contrast guidelines and maintain accessibility.

  • hex code
  • color code
  • Web Content Accessibility Guidelines (CORRECT)
  • 60-30-10 rule

Correct: Designers should follow the Web Content Accessibility Guidelines (WCAG) to make sure their designs are accessible.

3. Why is color an important factor in designing your product? Select all that apply.

  • Color allows the designer to introduce their personal preferences into the design.
  • Color draws the attention of the user. (CORRECT)
  • Color can convey emotions for the user. (CORRECT)
  • Color helps the user effectively navigate the design. (CORRECT)

Correct: Effective use of color can draw the user’s gaze to a particular area of your product and guide users on where to look.

Correct: Color is useful when thinking about how users feel as they navigate through a product.

Correct: Color can guide the user flow through your design and help ease the user’s journey though your product.

4. Luanne is an American, but she’s designing a food delivery mobile app for a client that is based in Peru. Luanne uses green as an accent color to represent prosperity. Her client criticizes the design’s color scheme because the color green has negative connotations in Peru. What could Luanne have done differently? Select all that apply.

  • Send the design directly to the engineering team.
  • Perform regional research on color. (CORRECT)
  • Contact the client prior to choosing colors. (CORRECT)
  • Conduct competitive research into other apps used by the target market. (CORRECT)

Correct: A color’s meaning can change based on the user’s region. Color plays a vital role in conveying emotion to your users and the only way to know if your product is conveying the correct emotion is to do relevant research.

Correct: If the brief wasn’t specific about the brand colors that the client expected, Luanne could’ve asked questions prior to completing the high-fidelity design.

Correct: Luanne could have gotten a better idea of what similar apps were doing if she’d conducted competitive research before beginning her app design.

5. A typographic hierarchy creates visual cues to show users where to focus and how to find information.

  • True (CORRECT)
  • False

Correct: A typographic hierarchy is a method of ordering typefaces and fonts in a layout consistently to help users better navigate a page.

6. How does iconography in visual design impact the user experience? Select all that apply.

  • Icons are easily read by a screen reader.
  • Icons create easy transitions to another page or location. (CORRECT)
  • Icons support global audiences. (CORRECT)
  • Icons limit wasted space. (CORRECT)

Correct: Icons that create easy transitions can improve the user experience. They should limit wasted space, and support global audiences.

Correct: Icons have universal meanings that can be accessible to wider audiences.  They should limit wasted space, and create easy transitions to another page or location.

Correct: The compact size of icons limit wasted space by linking to necessary functionality, which can improve the user experience. They should support global audiences, and create easy transitions to another page or location.

7. When you are designing your mockup, what should you do with the content?

  • Use placeholders and empty spaces for the content.
  • Add the actual content so you can see what it looks like. (CORRECT)
  • Leave the content out and look at the white space to ensure you have enough screen space.
  • Use Lorem Ipsum text for the content.

8. One of your peers asks you to help them get started with Figma. They indicate that they are ready to create a mockup including the layers and objects for their design. Which name are they referring to in Figma?

  • Grid
  • Frame
  • Pointer
  • Canvas (CORRECT)

9. You’re designing a new app for a small business. You’ve worked quite a bit on it and are now to the point of selecting typography. What do you need to do to determine the typography that is best for your design? Select all that apply.

  • Choose a color.
  • Choose a font. (CORRECT)
  • Select a type classification. (CORRECT)
  • Pick a typeface. (CORRECT)

10. You’re designing an app and need to show users where to focus and how to find information. What can you create to do this?

  • A typographic hierarchy (CORRECT)
  • A hamburger menu
  • A navigation hierarchy
  • A sitemap

11. You would like to use the same fonts and sizes throughout your design. How would you make this happen in Figma?

  • Create a new page for each font and style. (CORRECT)
  • Create multiple layers.
  • Create a text style.
  • Create a new file for each font you’d like to use.

12. Your client has asked for a very eye-catching website. You’ve recommended the use of color to meet this need. What are the best ways to explain to your client how color can impact the website design? Select all that apply.

  • Color is irrelevant in your design.
  • Color can help communicate branding. (CORRECT)
  • Color can add emphasis and draw attention to certain areas. (CORRECT)
  • Color can affect the accessibility of your design. (CORRECT)

13. You know that icons will play a key role in the user experience for your app. What best practices should you consider when using icons?

  • The icons should be a complementary color.
  • The icons should be universal. (CORRECT)
  • The icons should keep the branding clear. (CORRECT)
  • The icons should use a text label. (CORRECT)

14. You’re ready to start your app design and will use grids. What type of grid includes a series of colored columns and uncolored alleys that allow you to organize the elements in your design?

  • Graphic grid
  • Layout grid (CORRECT)
  • Basic grid
  • Square grid

15.  In your app design, you’ve got content on one page that doesn’t really fit together. Which is the best containment element to separate the content?

  • Divider (CORRECT)
  • Shadow
  • Border
  • Fill

16. Your client has a lot of content that they want to include in an app you’re designing. You’re worried about the amount of white space. What is the best way to express this to your client?

  • Recommend that they update their color palette to have more white and contrasting colors in the design.
  • Advise them that too little white space in a design increases the risk of error. (CORRECT)
  • Suggest that they work with a copywriter to streamline their content.
  • Suggest their device requirements include devices with larger screen dimensions so users will see more white space.

17. You’ve designed a static, high-fidelity design that represents a final product. What is this called?

  • A sketch
  • A mockup (CORRECT)
  • A wireframe
  • A test case

18. You’d like to use a serif style type in your design. How can you identify a serif style type?

  • The type is straight with no trailing lines from the letters. (CORRECT)
  • The type has tiny lines that trail from the letters.
  • The type is a combination of script and block lettering.
  • The type is italicized.

19. What are some examples of typographic hierarchy? Select all that apply.

  • The number of topics in a hamburger menu
  • Sidebars in magazines
  • Newspaper headlines (CORRECT)
  • Book chapter titles (CORRECT)

20. You’re designing a mockup for a mobile app. You need to ensure the images and text fit on the device screen. What function in Figma will help you achieve this?

  • Constraints (CORRECT)
  • Alignment
  • Layers
  • Text styles

21. You’re designing an app in Figma and have decided on some icons you’d like to use. You’ll use Font Awesome in Figma to work with the icons. What does Font Awesome allow you to do with the icons? Select all that apply.

  • It allows you to create customized icons for your particular design.
  • It allows you to make the icons solid so they’re easier to see. (CORRECT)
  • It allows you to view and copy icons from the cheat sheet. (CORRECT)
  • It allows you to copy and paste an icon onto your canvas in Figma. (CORRECT)

22. You are using Figma and have created your grid to help with the structure. You are now ready to align your design elements to the grid. Which feature can help you complete this in Figma?

  • Hand tool
  • Control (CORRECT)
  • Layout move
  • Frame

23. In your app that you’re designing, you’ve got an important line of text that needs to be separated out from the rest of the content. Which containment element could you use to differentiate the content?

  • Shadow
  • Divider (CORRECT)
  • Fill
  • Border

24. You’ve asked a colleague for feedback on your app design. They mentioned there should be more negative space in the design. What does this mean?

  • It means there’s not enough white space in your design. (CORRECT)
  • It means you have too much content and need to cut some out.
  • It means the photos you used are not projecting a happy feeling.
  • It means the menu is encroaching on the edges of the device screen.

25. When do UX designers use low-fidelity designs?

  • When defining the sitemap and navigation
  • When they want to hand off designs to development teams
  • When ideas need to come out quickly (CORRECT)
  • When the user flow needs to be refined and checked

26. You’re ready to create a mockup in Figma. You’ve already created a new file. What is your next step?

  • Create a design.
  • Create a canvas.
  • Create a layer.
  • Create a page. (CORRECT)

27. The project requirements ask for the design to work with specific phones and tablets. What can you do in Figma to accommodate this need?

  • Resize the type, icons, and graphics to accommodate the varying device requirements. (CORRECT)
  • Drag the dimensions of the grid to match the dimensions of the device.
  • Select the canvas that corresponds to the indicated device requirements.
  • Select the frame that corresponds with the devices indicated in the project requirements.

28. Your client asks you to use better font choices throughout the design. Which one is a font? Select all that apply.

  • Comic Sans
  • Arial
  • Italics (CORRECT)
  • Bold (CORRECT)

29. You’ve asked for feedback on a mockup of an app that you’re designing. One of your peers asks if you considered the 60-30-10 rule. What are they referring to?

  • The number of clicks it takes to get to the desired location
  • The proportion of colors used in your color palette (CORRECT)
  • The size of the headers in relation to the screen dimensions
  • The amount of content in the window versus the content in pop-up boxes

30. You’re designing a mobile app for a new client. The client has a lot of content and they want all of it included. You are worried about the amount of white space in the design. What is the best statement to help your client understand the use of white space?

  • Tell them that white space doesn’t really matter. The content is good and the users will be drawn to it.
  • Tell them more white space will make their product easier to use. (CORRECT)
  • Tell them that you’ll fit all of their content, but they just won’t see much white space.
  • Tell them to use more pictures and that will increase the use of white space. Users like pictures more than words anyways.

31. You’ve been working on designs for a website and an app for the same company. How should you treat the typography for each product?

  • The typography should match the organization’s brand guidelines. (CORRECT)
  • The typography should be bold and emphasize where users should focus their attention.
  • The typography depends on the type of device and where users will see it.
  • The typography you choose can vary between products.

32. You’ve created buttons in your app design. You want to show that a button has been selected or pressed. Which shadow type would do this?

  • Inner shadow (CORRECT)
  • Outer shadow
  • Select shadow
  • Drop shadow

Starting to Create Mockups CONCLUSION

To wrap up, understanding visual design and how it can influence how users experience a product or technology is paramount for any designer. Throughout the course curricula, students learn not just what visual design elements are, but also have the opportunity to apply these concepts through mockups. By mastering typography, color, iconography and more, developers are able to create visuals that captivate their users as they interact with an app or other product. The skills attained in this program provide an excellent foundation in preparation for building a mobile app’s design from the ground up.

Now that we’ve taken a look at the fundamentals of visual design and how to combine those skills into complex layouts, consider taking your studies further by enrolling in our full certificate program! Why wait? Join Coursera now for exclusive access to courses taught by exceptional industry professionals and gain valuable experiences as you reach towards building breathtaking designs!