Course 6 – Responsive Web Design in Adobe XD

Week 3: Create Wireframes

GOOGLE UX DESIGN PROFESSIONAL CERTIFICATE

Coursera Study Guide

Enroll in Coursera Google UX Design Certificate Here

TABLE OF CONTENT

After you’ve empathized with users, defined the user problem to solve, and begun to ideate possible solutions, it’s time to bring your ideas to life in wireframes. Your responsive website will have different layouts, depending on the device and screen size you’re designing for, so you’ll create lots of different wireframes. First, you’ll explore common website layouts, and you’ll create paper wireframes. Next, you’ll get to know a few elements and components that are commonly used in responsive website design. Then, you’ll transition to create digital wireframes in Adobe XD. Finally, you’ll update and refine your wireframes to enhance accessibility.

Learning Objectives

  • Define and differentiate common layouts for website homepages
  • Understand the steps, methods, and benefits of wireframing
  • Sketch paper wireframes
  • Refine wireframes using grid paper
  • Adapt designs for different screen sizes
  • Create digital wireframes in Adobe XD
  • Align wireframes with design principles and accessibility standards

PRACTICE QUIZ

1. In a single column website layout, what’s the most common order for arranging elements from top to bottom?

  • Content, featured image, and footer
  • Content, navigation, and footer
  • Navigation, content, and footer (CORRECT)
  • Featured image, menu bar, and footer

Correct: From top to bottom, single column website layouts are commonly ordered by navigation, content, and footer. This layout is frequently used for mobile websites because of its straightforward approach to presenting information to users.

2. Which asymmetrical layout encourages specific browsing patterns? Select all that apply.

  • Tiered layer cake
  • Featured image
  • Z-shape (CORRECT)
  • F-shape (CORRECT)

Correct: Z-shape is an asymmetrical website layout that encourages users to browse the website in the shape of the letter Z. It’s often used for websites or pages with less content, such as a sign-up page. Another asymmetrical layout that encourages a specific browsing pattern is the F-shape.

Correct: F-shape is an asymmetrical website layout that encourages users to browse the website in the shape of the letter F. This allows users to quickly scan information on a page. Another asymmetrical layout that encourages a specific browsing pattern is the Z-shape, which is a browsing pattern that imitates the natural scanning pattern of Western users who read left to right and top to bottom.

3. What are some benefits of wireframing? Select all that apply.

  • Wireframing helps designers create a sticker sheet.
  • Wireframing helps designers save time and resources. (CORRECT)
  • Wireframing helps designers come up with lots of ideas for the design’s structure and functionality of each element. (CORRECT)
  • Wireframing helps designers create their final product. (CORRECT)

Correct: Wireframing allows the team to quickly try out design options, which can save time and resources. It also allows them to figure out the layout of the design.

Correct: Wireframing allows designers to create multiple versions quickly, which can save time and resources. It also helps designers figure out the layout of a design.

Correct: Wireframing allows designers the opportunity to develop multiple versions of their product quickly before deciding on future direction for the design. This can result in saving designers time and resources.

4. It’s best practice to create multiple important pages to figure out which features and layouts you and the team like best.

  • True (CORRECT)
  • False

Correct: It’s best practice to create multiple versions of important pages, like the homepage, to figure out the ideal features and layouts. You can even combine the most favorable elements of each version into one new wireframe!

5. What makes responsive web design valuable? Select all that apply.

  • Applies website layouts for every device size
  • Drives mobile traffic (CORRECT)
  • Creates a positive user experience (CORRECT)
  • Saves time and resources (CORRECT)

Correct: Responsive web design drives mobile traffic to the website. After all, not everyone will be visiting a website from a desktop computer. A website should be viewable and accessible to users regardless of the platform they are using. This will create a positive user experience, and save designers time and resources from having to design for every device size.

Correct: Responsive web design adapts easily to any screen, which increases the usability of a webpage. This creates a positive user experience for people visiting the site, regardless of the platform they are using. Responsive web design also saves designers time and resources from having to design for every device size. It also drives mobile traffic because many users access the web from their mobile devices.

Correct: Responsive web design adapts easily to any screen, which increases the usability of a webpage. This creates a positive user experience for people visiting the site, regardless of the platform they are using. Since designers don’t have to design a website for every device size, it also saves them time and resources! Furthermore, responsive web design drives mobile traffic because a lot of users access the web from their mobile devices.

6. When designing an adaptive layout, which of the following works best for presenting lots of images on a mobile site? 

  • Cards
  • Hamburger menu
  • Carousels (CORRECT)
  • Multicolumn layout

Correct: Carousels are often used on websites with a lot of images as well as mobile sites. They help condense the layout on smaller screens.

7. What is a characteristic of a sticky top navigation bar?

  • It stays on top and scrolls away with the content.
  • It goes wherever the location arrow hovers on the page.
  • It doesn’t move as users scroll down, and always stays at the top of the page. (CORRECT)
  • It is located at the bottom of the page.

Correct: This feature can be helpful if the page gets too long because users don’t have to scroll all the way back up if they want to switch to a different page.

8. When building wireframes, what are some elements designers include in the footer of a webpage? Select all that apply.

  • Large text boxes representing a header
  • Rectangles representing the search bar
  • Boxes representing social media icons (CORRECT)
  • Small text boxes representing relevant links or other information (CORRECT)

Correct: Designers can add boxes representing social media icons to a website’s footer. Links to social media profiles can drive traffic and attract followers. They can also add small text boxes to the footer to serve as placeholders for text links to related sites or contact information.

Correct: Designers can add small text boxes to the footer to serve as placeholders for text links to related sites or contact information. They can also add boxes representing social media icons, since links to social media profiles can drive traffic and attract followers.

9. A designer is developing a website to be accessible for broader audiences. Which of the following features help ensure people who use assistive technology have a positive user experience? Select all that apply.

  • Colors
  • Headings (CORRECT)
  • Landmarks (CORRECT)
  • Initial focus (CORRECT)

Correct: Landmarks, headings, and initial focus points are features that can help ensure people who use assistive technology have a positive user experience. Headings support visual hierarchy and aid efficient navigation for users of screen readers.

Correct: Landmarks, headings, and initial focus points are features that can help ensure people who use assistive technology have a positive user experience. Landmarks are used by assistive technology, like screen readers, to provide cues for navigation. These allow users to efficiently move from one section to another.

Correct: Landmarks, headings, and initial focus points are features that can help ensure people who use assistive technology have a positive user experience. Initial focus points are specific and distinct areas that guide users attention to a singular point or primary task.

10. A designer is receiving feedback. What are some of the benefits they can hope to receive? Select all that apply.

  • A warning if designers are touching base with users often enough
  • A better understanding of their comfort level with design 
  • Identifying how their personal values and biases can influence a design (CORRECT)
  • Brainstorming new questions or ideas (CORRECT)

11. A team member provided feedback to a designer and suggested a different layout that is more accessible. The team member then created a wireframe with the new layout. How can this team member provide better feedback in the future?

  • Support the feedback with a reason
  • Use the approach consistently, since the team member provided a fair critique
  • Advise other ways the designer should change the design
  • Describe problems with the design, not offer solutions (CORRECT)

12. What is the term for a planned period of time where UX designers present their work to team members and listen to feedback?

  • Team meeting
  • Insight meeting
  • Inspiration session
  • Design critique session (CORRECT)

13. After a productive design critique session, May received a variety of suggestions to consider. Identify a question they should ask while going through the feedback?

  • Am I ready to consider the feedback that’s critiquing my work?
  • Which member’s critique should I value most?
  • How do I create a new design with this information?
  • What feedback do I want to take action on to improve my designs or the user experience? (CORRECT)

14. When giving feedback, which of the following is a best practice?

  • Keep your feedback broad
  • Deliver your feedback to an entry level team member in the same way you would to a senior employee
  • Support your feedback with reasoning (CORRECT)
  • Provide the solution you think should be applied

15. A designer receives and synthesizes feedback from a design critique session for a recipe app. Which response is most effective for the designer to take action to improve the design?

  • “You should consider adding a grocery list section.”
  • “Why is there a delivery option?”
  • “You should change the main color to green.”
  • “The ‘My Recipes’ page should show the saved recipes as well as how many times the home cook has prepared that recipe so the user can track their favorite meals.” (CORRECT)

16. Jocelyn has just finished going over her notes from a design critique. One of the pieces of feedback was that the information architecture (IA) on the homepage is a little confusing. What are some possible actions Jocelyn should take? Select all that apply.

  • Scrap the entire homepage design and start over from scratch.
  • Mark the feedback as not doable and move on to something else.
  • Iterate on the homepage design. (CORRECT)
  • Follow-up with the reviewer on what specific elements of the IA were problematic. (CORRECT)

17. After preparing feedback and making sure the reasoning is clear, what is the next thing a designer should do?

  • Find an appropriate time to share their thoughts (CORRECT)
  • Wait until there’s a team check-in meeting and share it then
  • Send an email about the problems
  • Confirm with a senior member of the team that the feedback is helpful

18. A UX designer has received feedback about a mobile app they’re designing. Now, they are reflecting on the feedback they received. Which of the following ideas is helpful for the designer to remember about the feedback process?

  • They can limit the amount of feedback they request from colleagues.
  • They don’t have to always follow every piece of feedback. (CORRECT)
  • They will get to offer their own negative feedback soon enough.
  • They should only ask for feedback occasionally.

19. A design team plans a critique session for their latest prototype. They ask one of the members to be prepared to share the design and remain actively engaged in the session to ensure that the feedback is clearly understood. What role is this an example of?

  • Reviewer
  • Notetaker
  • Facilitator
  • Presenter (CORRECT)

20. Identify advantages of receiving feedback. Select all that apply.

  • Focuses the designer’s perspective on the most important goal
  • Improves designs (CORRECT)
  • Builds the designer’s confidence and skills (CORRECT)
  • Broadens the designer’s perspective (CORRECT)

21. After a design critique session, a designer begins integrating feedback into their design. First, the designer implements the most important feedback from the session. Some of the feedback will require input from a specialist. The designer chose not to implement feedback that didn’t align with the design plans. Finally, the designer began implementing the feedback into the design. Which action did the designer forget?

  • Create a spreadsheet that identifies high-priority issues with the design
  • Identify options for new designs
  • Review and synthesize feedback (CORRECT)
  • Consult colleagues on design choices

22. Imagine a designer receives and synthesizes feedback from a design critique session for a personal care service app. Which response is most effective for the designer to take action to improve the design?

  • “You should change the main color to purple.”
  • “Why is there a spa option?”
  • “You should consider adding a retail section.”
  • “The booking page should show a summary of services booked and appointment times so the user can have a confirmation that services have been booked.” (CORRECT)

23. A UX designer is preparing to get feedback about a mobile app they are almost finished designing. They are comfortable with the team and looking forward to presenting their work. Which of the following is a helpful question for the design to consider about the feedback process?

  • Am I ready to receive feedback from people who don’t know the project?
  • Am I checking in regularly with other team members to get feedback on my designs? (CORRECT)
  • Am I sure that it’s worthwhile to ask for feedback at this stage?
  • Am I being too sensitive about the feedback that I’m receiving?

24. Fill in the blank: In order to make sure a design critique session runs smoothly, a facilitator not only provides an overview of the session, they also make sure _____ .

  • the reviewers all get a turn to share feedback
  • the feedback is recorded in the notes from the session (CORRECT)
  • the designs are ready beforehand
  • the room has snacks and drinks available 

25. Receiving feedback can improve designs and build a designer’s confidence. Which of the following is another benefit of feedback?

  • Broadens the designer’s perspective (CORRECT)
  • Offers new problems that might be solved by the design
  • Gives the designer an opportunity to defend themselves
  • Encourages other designers on the team

26. Why are design critique sessions held?

  • Design critique sessions provide designers an opportunity to present their work and receive feedback (CORRECT)
  • Design critique sessions create a healthy level of competitive tension between designers
  • Design critique sessions provide design practice
  • Design critique sessions give the team ample time to answer critical business questions on the design project

27. Fill in the blank: After a designer has presented their designs in a design critique, they should process the feedback and _____.

  • respond to each person
  • meet with each reviewer
  • start generating action items (CORRECT)
  • start the design again with the feedback in mind

28. In a design critique session, a reviewer with limited dexterity mentioned that the buttons were very small and hard to interact with. What would be a good course of action for the designer to address this feedback?

  • Use the original button design because that design came from the design system
  • Make the layout more accessible by increasing white space and button sizes and apply these changes wherever needed (CORRECT)
  • Go back to the reviewer and ask them to test different buttons and layouts by trial and error later that day
  • Make the layout more accessible by increasing white space and button sizes and apply these changes on that screen

29. The newest designer on a team has some feedback on a colleague’s designs. What is their best course of action?

  • Prepare their feedback with clear reasoning and find an appropriate time to share their thoughts. (CORRECT)
  • Wait until there’s a company-wide meeting and make sure to bring it up then.
  • Write an anonymous note about the problems, so their colleague doesn’t get offended.
  • Assume that the issues will be addressed eventually by a more senior member of the team.

30. Fill in the blank: When reflecting on how much feedback to give and receive, it is helpful for designers to understand that _____.

  • they don’t need a lot of feedback
  • they don’t have to always follow all the feedback or advice (CORRECT)
  • they don’t have to give a lot of feedback
  • they don’t have to ask for feedback all the time

31. Receiving feedback from a diverse audience is one of the goals of soliciting feedback.

  • True (CORRECT)
  • False

32. Angel gave Mohammed feedback on their designs last week, but Mohammed would like to get additional information to revise the designs. The comments only identify suggestions such as: “The shapes aren’t right” and “The colors are too vibrant.” What should Angel do to provide more effective feedback?

  • Support the feedback with a reason (CORRECT)
  • Describe problems with the design, not offer solutions
  • Adjust feedback for each situation
  • Simplify the feedback so it is easier to understand

33. Which of the following is an example of good feedback?

  • “I don’t know why, but I just don’t like this color here.”
  • “I like the colors you’re using, but I think the buttons might need adjusting because they are a little hard to find in the design.” (CORRECT)
  • “I think you should add a divider to separate these two sections, and you should put a drop shadow on this image.”
  • “I think there’s still a lot of room for improvement.”

34. After a designer has presented their designs in a design critique, what are the next steps?

  • Scrap the designs and start from scratch with the feedback in mind.
  • Meet with each reviewer again to confirm their feedback.
  • Process the feedback from reviewers and start generating action items. (CORRECT)
  • Move on to a new project.

35. The newest member of a design team emails another designer to review the mockups they drafted. How should the more senior designer reply?

  • They should forward the email to the Lead UX designer without a reply because they’re short on time.
  • They should recognize what the new team member did well, list a couple of potential issues, and offer to meet in person to discuss them further. (CORRECT)
  • In order to spare the new team member’s feelings, ignore any problems, and say that everything looks perfect.
  • They should reply with a list of all the design elements that are wrong and detail exactly how to fix them.

36. How can a designer overcome reservations about giving and receiving feedback?

  • Follow all feedback or advice
  • Consider feedback from only senior team members
  • Practice and reflect on feedback over time (CORRECT)
  • Build fewer designs

37. What should a designer consider when reflecting on how much feedback they give and receive at each stage of a project? Select all that apply.

  • Am I checking with the right superiors before giving my feedback?
  • Am I letting people know when I don’t like the feedback they’ve offered?
  • Am I able to comfortably give constructive feedback about another designer’s project? (CORRECT)
  • Am I checking in regularly with other team members to get feedback on my designs? (CORRECT)

38. Fill in the blank: When a new team member asks for feedback, ideally a senior team member will highlight what the new team member did well and then _____.

  • ignore any problems, and say that everything looks perfect
  • send the new team member to someone else because they’re short on time
  • reply with a list of the issues and detail how to fix them
  • list some potential issues, and offer to meet in person (CORRECT)

39. What are some advantages of receiving feedback as a UX designer? Select all that apply.

  • Matches the designer’s personal bias
  • Improves the design (CORRECT)
  • Broadens the designer’s perspective (CORRECT)
  • Builds confidence and skills (CORRECT)

40. Harpreet presented her design during a design critique session. After synthesizing the comments, one comment stood out the most: the design needed to consider a more accessible user interface and colors. What action can Harpreet take to convert this feedback into actionable steps?

  • Refrain from taking action until she receives a better reason for the feedback.
  • Consider consulting a diversity and accessibility representative at the company. (CORRECT)
  • Discuss alternatives that work around the feedback rather than addressing it.
  • Identify feedback that’s more important and focus on those critiques first.

41. In a design critique session, who gives feedback about the design and offers clear actions to take?

  • Notetaker
  • Facilitator
  • Reviewer (CORRECT)
  • Presenter

42. A designer is reviewing notes from a design critique. One piece of feedback was that the layout of the product page was confusing. What are some possible actions the designer should take? Select all that apply.

  • Save that feedback for later and move on to something else
  • Start over with a new product page design
  • Follow-up with the reviewer on what specifically was confusing (CORRECT)
  • Iterate on the product page design (CORRECT)

43. What are the advantages of hosting a design critique session? Select all that apply.

  • Design critique sessions decrease tension between colleagues
  • Design critique session increase team camaraderie
  • Design critique sessions are a great opportunity for designers to practice giving feedback to other team members (CORRECT)
  • Design critique session are a chance for many people to come together to exchange ideas and make a collective choice on a design direction, in person or remotely (CORRECT)

44. Receiving feedback can improve designs and build a designer’s confidence. Which of the following is another benefit of feedback?

  • Offers new problems that might be solved by the design
  • Gives the designer an opportunity to defend themselves
  • Broadens the designer’s perspective (CORRECT)
  • Encourages other designers on the team

45. A team member provides tailored feedback to a designer and tells them that the colors in the design aren’t good. The team member moves on quickly to another task without saying anything else. How can this team member provide better feedback in the future?

  • Describe problems with the design, not offer solutions
  • Support the feedback with a reason (CORRECT)
  • Adjust feedback for each situation
  • Simplify the feedback so it is easier to understand

46. After a productive design critique session, Reina is ready to take the next steps and integrate feedback into her design. First, Reina starts implementing feedback that stuck out to her during the session first. Some of the feedback required her to consult a specialist. Reina opted not to implement feedback that didn’t align with the design plans. Afterward, she began implementing the feedback into the design. Which action did she forget to take?

  • Review and synthesize feedback (CORRECT)
  • Identify options for new designs
  • Create a spreadsheet that identities high-priority issues with the design
  • Consult colleagues on design choices

47. When giving feedback, why is it best to describe problems rather than provide solutions?

  • It leads to fewer revisions and can save money over the course of a project.
  • It gives the designer time to process the feedback and come up with their own solution. (CORRECT)
  • It is faster and more efficient to explore problems rather than solutions.
  • It lets a designer broaden their perspective on a project.

48. In a design critique session of Arnaud’s design, a reviewer who experiences color-blindness reported that it was difficult to see the button copy. What would be a good course of action for Arnaud to address this feedback?

  • Find a color and text combination that passes accessibility standards and apply the changes wherever needed. (CORRECT)
  • Go back to the reviewer to test different designs by trial and error on the spot.
  • Stick with the original button design because the colors came from the design system.
  • Change the background color of that individual button.

49. In order to make sure a design critique session runs smoothly, a facilitator should take care of what responsibilities? Select all that apply.

  • Focus on taking notes about the designs and feedback. (CORRECT)
  • Get all of the designs from the team beforehand so they will be the only one who needs to present. (CORRECT)
  • Make sure each reviewer gets a turn to share their feedback.
  • Provide an overview of the design critique session and define the objectives.
Previous Week 2
Next Week 4

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