Course 6 – Responsive Web Design in Adobe XD

Week 2: Ideate solutions to the user’s problem

GOOGLE UX DESIGN PROFESSIONAL CERTIFICATE

Coursera Study Guide

Enroll in Coursera Google UX Design Certificate Here

TABLE OF CONTENT

Your responsive website design project is underway. In this part of the course, you’ll move into the ideate phase of the design process. To help you come up with ideas for design solutions, you’ll conduct a competitive audit, complete the How Might We activity, and sketch ideas using Crazy Eights. You’ll also learn about the importance of information architecture and sitemaps when it comes to designing websites.

Learning Objectives

  • Understand the purpose, benefits, and limitations of competitive audits
  • Use competitive research to inform designs
  • Explain the benefits of ideation and methods to generate ideas for designs
  • Use techniques to generate ideas
  • Explain the benefits and drawbacks of aligning with standard website patterns
  • Create a sitemap to outline a website’s information architecture

TEST YOUR KNOWLEDGE ON IDEATION TECHNIQUES

1. What is the primary purpose of responsive web design?

  • Allows a website to change automatically depending on the size of the device (CORRECT)
  • Helps researchers make more informed design decisions
  • Allows designers to more easily test web design prototypes
  • Organizes, categorizes, and structures a website

Correct: Responsive web design allows a website to change automatically depending on the size of the device. Creating responsive websites allows companies to reach people that use various devices with different screen sizes.

TEST YOUR KNOWLEDGE ON PROBLEM STATEMENTS

1. Imagine that you kickstart the ideation process to translate issues your users experience into opportunities for design. You choose an ideation method that encourages designers to explore ideas, stay open-minded, and collaborate. Which method does this reflect?

  • Wireframing
  • Prototype
  • Empathy
  • How Might We (CORRECT)

Correct: The How Might We ideation exercise encourages designers to explore tons of ideas, emphasizes open-mindedness, and suggests collaboration. By turning statements into inquiries, it can shift the designer’s frame of thinking to explore multiple solutions and ideas rather than just one.

2. Which ideation method involves brainstorming ideas under a specified time limit?

  • Crazy Eights (CORRECT)
  • How Might We
  • Competitive audit

Correct: The Crazy Eights exercise is a method of ideation that involves brainstorming ideas by sketching them with an 8-minute time limit.

TEST YOUR KNOWLEDGE ON WEBSITE STRUCTURES

1. Which website structure allows users to follow their own path because content is linked in several ways?

  • Database model
  • Matrix model (CORRECT)
  • Hierarchical model
  • Sequential model

Correct: The matrix model allows users to follow their own path because content is linked in several ways.

2. Hermes wants to create a web page design for a research database that makes it easy for users to search for information. Which website structure should they use?

  • Database model (CORRECT)
  • Hierarchical model
  • Sequential model
  • Matrix model

Correct: The database model is a website structure that mixes a database, or an organized collection of information, with search functionality. This would be the best structure for the purpose of this web site.

3. Javier starts work for a new client. The client wants Javier to design the look of a website plug-in for the quizzes on their educational platform. They want students to see one question at a time rather than the whole quiz. They want a simple yet modern look. What type of structure model should Javier use?

  • Matrix model
  • Database model
  • Hierarchical model
  • Sequential model (CORRECT)

Correct: The sequential model is a website structure that leads a user through a step-by-step process. This is used in surveys, program sign-ups, online school exams, or job applications.

4. What are the advantages of using common website structures? Select all that apply.

  • Timeless design
  • Tested and effective (CORRECT)
  • Improved navigation (CORRECT)
  • Meet user expectations (CORRECT)

Correct: Common website structures have been tested and proven effective over time, which meets user expectations. That’s not to say they’ll eventually become outdated, but they have evolved based on feedback from users and designers. Common website structures also organizes the website in a way that results in improved navigation.

Correct: Website structure models add organization and make it easier for designers to build in logical cues that orient and direct users. Common website structures meet user expectations because they have been tested and proven effective.

Correct: Many users have expectations for how websites work based on prior experience using other websites. Common structures can make it easier for users to navigate since they add organization, and have been tested and deemed effective by users.

5. What are competitive audits useful for? Select all that apply.

  • Identifying the type of people who work for competitors
  • Creating nearly identical products
  • Examining what competitors do well and what they could do better (CORRECT)
  • Identifying key competitors (CORRECT)

Correct: Competitive audits allow researchers to examine what key competitors do well, and what they could do better. This allows the design team to create a product that addresses gaps in a competitor’s design, or inspire their own in-house creations.

Correct: Competitive audits identify key competitors in your product’s market to help you make sure your design solution is unique and valuable. It also examines what competitors do well, and what they could do better.

6. What is the purpose of ideation exercises?

  • Identify specific features to compare with like products
  • Create a functional product
  • Rapidly explore a variety of ideas (CORRECT)
  • Find opportunities for improvement in a competitor’s product

Correct: The purpose of ideation exercises, like Crazy Eights, is to rapidly explore a variety of ideas, forcing you to think creatively.

7. What helps designers organize content to help users understand where they are in a product and locate the information they want?

  • Information architecture (CORRECT)
  • Amp up the good
  • Competitive audit
  • Proximity

Correct: Information architecture organizes content to help users understand where they are in a product and where the information they want is.

8. What are some common website structures? Select all that apply.

  • Journey
  • Sequential (CORRECT)
  • Database (CORRECT)
  • Hierarchical (CORRECT)
  • Matrix (CORRECT)

Correct: A sequential website structure leads users through a step-by-step process. Other common website structures include database, matrix, and hierarchical.

Correct: A database website structure mixes a database, or an organized collection of information, with search functionality. Other common website structures include sequential, matrix, and hierarchical.

Correct: A hierarchical structure is a top-down approach that starts with broader categories of information that narrow into more detailed information. Other common website structures include sequential, matrix, and database.

Correct: A matrix structure allows users to follow their own path, since content is linked in several ways. Other common website structures include sequential, database, and hierarchical.

9. Imagine you design a survey webpage to capture feedback from a delivery service. By using the sequential website structure, you ensure users complete all screens before submitting the survey. What benefit of website structure models does this demonstrate the most?

  • Improve navigation (CORRECT)
  • Meet user expectations
  • Tested and effective
  • Build websites quickly

Correct: Following a website structure model makes it easier for you, as a designer, to build in logical cues that orient and direct your users through the survey. By leading them through a step-by-step process, users can navigate and complete the survey easily.

10. What are some benefits of defining a sitemap? Select all that apply.

  • Clears all design obstacles and oversights
  • Compels users to spend more time on the website
  • Eases navigation to promote accessibility (CORRECT)
  • Helps designers plan and organize their website as a whole (CORRECT)

Correct: A defined website sitemap creates an organized flow that takes users from one task to the next. This is especially important for those using assistive technology and for users who are unfamiliar with navigating the web.

Correct: Defining a sitemap can help designers organize the pathing of their website throughout the design process. It’s a great way to identify all of the pages in the order they will appear on the site for users too. It’s easier to spot forgotten pages, remove, or condense them.

11. Identify the first two steps to consider as you create a sitemap. Select all that apply.

  • Define information architecture
  • Identify direct competitors
  • Recall information about users (CORRECT)
  • Think about pages commonly found on websites (CORRECT)

Correct: As you create a sitemap, the first step is to think about pages that are commonly found on websites. The second step is to recall information you already know about the users.

12. Your client asks you to explain the difference between a low-fidelity prototype and a high-fidelity prototype. What might you tell them? Select all that apply.

  • Low-fidelity prototypes have close-to-final interaction and navigation, while high-fidelity prototypes include the final, polished interactions and navigation.
  • Low-fidelity prototypes include final colors and images, while high-fidelity prototypes include those items plus the full array of content.
  • Low-fidelity prototypes are used to communicate big-picture design concepts, while high-fidelity prototypes showcase a close-to-final design. (CORRECT)
  • Low-fidelity prototypes provide a basic idea of how products will look and behave, while high-fidelity prototypes include functionality that is close to the final product. (CORRECT)

13. A new team member asks you what the difference is between wireframes and mockups. How might you reply?

  • Wireframes include color and typography, while mockups are more preliminary and basic.
  • Wireframes provide a view for the development team of what to expect, while mockups provide the specifics they’ll need for coding the interactive elements.
  • Wireframes include most navigational elements, while mockups include all navigational elements.
  • Wireframes give an overview of the hierarchy and page layout, while mockups include those elements plus color, typography, and iconography. (CORRECT)

14. When thinking about your mockups, what should you consider when you are thinking about the colors for the design? Select all that apply. 

  • The ratio of primary to neutral colors
  • How users will interpret the colors (CORRECT)
  • How the colors contrast with each other (CORRECT)
  • The emotions the colors convey (CORRECT)

15. Your client wants to know why you are spending time putting together a design system. What are some benefits you could outline for them of using a design system? Select all that apply.

  • A design system decreases the need for user feedback.
  • A design system reinforces a brand’s identity. (CORRECT)
  • A design system helps save time and money by increasing efficiency and consistency. (CORRECT)
  • A design system creates scalable designs. (CORRECT)

16. What are ways to make your designs more accessible according to WCAG standards? Select all that apply.

  • Use primary colors.
  • Use annotations. (CORRECT)
  • Adopt a hierarchy. (CORRECT)
  • Add labels. (CORRECT)

17. You’ve designed a responsive website that adapts to different screen sizes. What should happen to the screen elements if users zoom in or increase the font so they can see it better? 

  • The font for the other sections of the page should shrink in size.
  • The section that is enlarged should overlap the other elements on the screen.
  • The page should only focus on the area that has been zoomed in on.
  • The page should automatically resize and rearrange to fit the new screen size. (CORRECT)

18. A new team member asks you to explain the difference between a mockup and a prototype. In general, how would you explain the overall difference between a mockup and a prototype?

  • Mockups focus on visual design, while prototypes focus on functionality. (CORRECT)
  • Mockups only include general sketches of the pages, while prototypes include more detailed wireframes of how the pages will look.
  • Mockups focus on functionality, while prototypes focus on visual design.
  • Mockups and prototypes are similar. However, prototypes include more detailed graphics.

19. You have added annotations to your design before passing it along to an engineer. What do annotations convey to an engineer?

  • The URL addresses to the external links listed on the site
  • The order that assistive technology follows
  • Written directions for how to upload images
  • The instructions from the brand guidelines (CORRECT)

20. You’re ready to transition your low-fidelity prototype into a high-fidelity prototype. Which elements distinguish a high-fidelity prototype from a low-fidelity prototype? Select all that apply.

  • A high-fidelity prototype uses boxes and shapes to illustrate the general idea of how the site may look.
  • A high-fidelity prototype includes actual names and descriptions instead of placeholders. (CORRECT)
  • A high-fidelity prototype includes navigation you want to test to verify the user journey flow. (CORRECT)
  • A high-fidelity prototype includes interactivity. (CORRECT)

21. You are creating the design plan for the app you are designing. Which elements should be included in the guidelines portion of the design system? Select all that apply. 

  • Color palette and typography standards
  • Editorial guidelines (CORRECT)
  • Design principles (CORRECT)
  • Implementation guidelines (CORRECT)

22. When creating mockups, which foundational visual design element could be used to direct users to transition to another page or location?

  • Color
  • Widgets
  • Iconography (CORRECT)
  • Typography

23. When reviewing the mockups for the app, your client suggests the page elements may need to be re-ordered. What can you tell them?

  • No problem. Much like wireframes, the elements in the mockups can be moved around. (CORRECT)
  • Sorry. These elements are in place to the very end product.
  • I can move them, but first, I need to go back and revise the paper and digital wireframes.
  • I can move some elements, but not all. The navigation is in place for the development team.

24. You are working on your design system for your mockups. Which elements should you include in your design system? Select all that apply.

  • Curriculum architecture
  • UI components (CORRECT)
  • Visual styles (CORRECT)
  • Core content (CORRECT)

25. Your client’s brand color palette includes lots of reds and greens. How might you adhere to the brand color palette, yet account for accessibility?

  • Maintain the red and green primary palette, and ensure there is enough contrast for users with visual impairments.
  • Advise the client to conduct a rebrand of their color palette.
  • Use red and green as accent colors only. (CORRECT)
  • Remove the red and green colors altogether.

26. You are ready to finalize the high-fidelity prototype’s navigational elements for the user flow you want to test for the app you have created. Which elements should you check? Select all that apply.

  • Help guide (CORRECT)
  • External links (CORRECT)
  • Back arrows
  • Buttons on each screen

27. An accessibility consultant reviewed your prototype and advised you to add annotations. What does this mean?

  • These are notes associated with every element on the screen.
  • These are markers placed next to interactive UI elements, like the call-to-action buttons on the page. (CORRECT)
  • This is the alt text associated with graphical items.
  • This is the help guide that should be included in the navigation bar.

28. You are ready to move your mockups into a high-fidelity prototype. Which elements should be included in your high-fidelity prototype? Select all that apply. 

  • User scales on each page to gauge users, like the the prototype
  • Navigational elements to help users move between screens (CORRECT)
  • Interactions such as gestures and motions (CORRECT)
  • Visual elements including color, icons, typography, and images (CORRECT)

29. You are ready to begin mockups. Which foundational elements of visual design should you first consider for your mockup designs? 

  • Sequence, layers, content organization
  • Resolution, layout, content
  • Screen size, color, accessibility
  • Typography, color, iconography (CORRECT)

30. A colleague is reviewing your mockups and asks to see your design system. What are they referring to?

  • The brand guidelines as dictated by the customer
  • A process used in Design Thinking to assist in the ideate phase
  • A series of reusable elements and guidelines (CORRECT)
  • A content map that provides insight into main categories and subcategories

31. When designing websites, which standards can you use to help keep accessibility front of mind? 

  • Web Content Accessibility Guidelines (CORRECT)
  • Global Accessibility Standards
  • United States Disability and Accessibility Guide
  • Content Rules for Accessibility

32. One of your colleagues does an accessibility review on your design and notes that you should have a better luminosity contrast ratio. What does that mean? 

  • The text color should be light, and the background color should be dark. (CORRECT)
  • The text should be transparent while the background should be gray.
  • The text and background colors should be the same.
  • The text and the background colors should use only the primary color palette.

33. You have asked the engineer to ensure they follow the traversal order you’ve identified in your annotations. What does traversal order mean?

  • The order of the hamburger menu flyout
  • The progression of the content headers
  • The navigation flow for a user on an app or a website (CORRECT)
  • The sequence of the navigation bar

34. You are ready to make connections in your high-fidelity prototype in Figma. What does this mean?

  • It’s how users can access the help icon or button.
  • It’s how designers make an element interactive in Figma. (CORRECT)
  • It’s how the user is attracted to the site.
  • It’s how designers can share their work with their peers.

35. You are ready to hand off your designs to the developers. They have asked for the design system. Why is the design plan important for them to have? 

  • It includes a rendering of what the final product will look like.
  • It includes the scope of work so they can ensure they are staying within budget.
  • It tells them how long they should spend on development.
  • It includes code for the elements and components in the design. (CORRECT)

36. You advise your client that you are ready to move on from your wireframe and begin a low-fidelity prototype. How might you explain the difference between the two to your client?

  • Wireframes are blueprints of the product’s structure. A low-fidelity prototype ties the wireframes together and incorporates functionality and navigation. (CORRECT)
  • Wireframes incorporate functionality and navigation, while low-fidelity prototypes are simply the blueprint of the product’s structure.
  • Wireframes include the full content and branding. A low-fidelity prototype is the final, finished product.
  • There is no difference. The naming convention is different, but the purpose and functionality are the same.
Previous Week 1
Next Week 3

Subscribe to our site

Get new content delivered directly to your inbox.

Quiztudy Top Courses

Popular in Coursera

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

Subscribe