Course 6 – Responsive Web Design in Adobe XD

Contents hide

Spread the love

Week 3: Create Wireframes

Having engaged in user empathy, problem definition, and ideation of potential solutions, the next step involves translating your concepts into actionable wireframes. Given that your responsive website will necessitate various layouts depending on the device and screen size, you will develop multiple wireframe versions. Initially, you will examine prevalent website layouts and draft preliminary wireframes on paper. Subsequently, you will become acquainted with essential elements and components integral to responsive web design. Thereafter, you will proceed to construct digital wireframes utilizing Adobe XD, followed by refining these designs to enhance accessibility.

Learning Objectives:

Articulate and distinguish commonly utilized homepage layouts for websites.
Comprehend the processes, techniques, and advantages associated with wireframing.
Create preliminary sketches of wireframes on paper.
Enhance wireframes using grid paper.
Modify designs to suit various screen dimensions.
Develop digital wireframes through Adobe XD.
Ensure alignment of wireframes with design principles and accessibility criteria.

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: Single-column website layouts, typically arranged from top to bottom with navigation, content, and footer, are commonly used for mobile websites due to their simplicity and user-friendly design. This layout effectively presents information in a straightforward manner, making it easy for users to navigate and engage with the content on smaller screens.

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

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

The Z-shape is an asymmetrical website layout that guides 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 sign-up pages. Another asymmetrical layout that encourages a specific browsing pattern is the F-shape.

The F-shape is an asymmetrical website layout that encourages users to browse the website in the shape of the letter F. This layout allows users to quickly scan information on a page. Another asymmetrical layout that encourages a specific browsing pattern is the Z-shape, which mimics the natural scanning pattern of Western readers who read from 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)

Wireframing allows the team to quickly explore design options, saving time and resources. It also helps determine the layout of the design.

Wireframing enables designers to rapidly create multiple versions, which can save both time and resources. It also assists in figuring out the layout of a design.

Wireframing provides designers with the opportunity to quickly develop multiple versions of their product before deciding on the future direction for the design, ultimately saving 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 a best practice to create multiple versions of key pages, such as the homepage, to determine the most effective features and layouts. You can even merge the best elements from each version into a single, improved 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)

Responsive web design seamlessly adapts to any screen size, enhancing webpage usability. This ensures a positive user experience for visitors, regardless of the platform they are using. By eliminating the need to design for every device size, it also saves designers valuable time and resources. Additionally, responsive web design boosts mobile traffic, as a significant number of users access the web via 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 is especially beneficial for lengthy pages, as it enables users to conveniently navigate to another section without the need to scroll back to the top.

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)

Designers can incorporate small text boxes in the footer to serve as placeholders for links to related sites or contact details. Additionally, they can include boxes with social media icons, as these links can help drive traffic and increase follower engagement.

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)

Landmarks, headings, and initial focal points are integral components in enhancing user experience for individuals utilizing assistive technology. Headings contribute to a clear visual hierarchy, facilitating navigation for users of screen reading software.

These elements are vital for fostering a positive user experience for those employing assistive technology.

Landmarks, as identified by screen readers, assist users in navigating efficiently by offering distinct directional cues between sections.

Furthermore, landmarks, headings, and initial focal points serve critical functions in optimizing accessibility for users reliant on assistive technologies. Initial focal points are strategically designed to attract users’ attention, directing them toward specific tasks or priority actions.

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.