Course 6 – Responsive Web Design in Adobe XD

by
Contents hide
1 Week 1: Empathize with The User and Define The User Problem
2 TEST YOUR KNOWLEDGE ON RESPONSIVE WEBSITE DESIGN
3 TEST YOUR KNOWLEDGE ON PROBLEM STATEMENTS
Spread the love

Week 1: Empathize with The User and Define The User Problem

In order to design a responsive website, one must adhere to the fundamental stages of the UX design process: empathize, define, ideate, prototype, and test. This segment of the course will concentrate on completing the empathize and define stages. Additionally, you will start to familiarize yourself with Adobe XD, a widely-used design tool that will be utilized throughout this course.

Learning Objectives

  • Gain insight into the significance of responsive web design in facilitating seamless user experiences across a variety of devices.
  • Examine the essential features and functionalities of Adobe XD.
  • Recognize the importance of understanding user needs, behaviors, and motivations within the design framework.
  • Create user personas to enhance comprehension of the target audience.
  • Engage in user research to produce user journey maps and pinpoint pain points.
  • Formulate a clear and concise problem statement to steer the design process.

TEST YOUR KNOWLEDGE ON RESPONSIVE WEBSITE DESIGN

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 enables a website to adapt automatically to the size of the device it’s being viewed on. By creating responsive websites, companies can reach a broader audience, ensuring a seamless experience across various devices with different screen sizes.

TEST YOUR KNOWLEDGE ON PROBLEM STATEMENTS

1. What are the components of a problem statement? Select all that apply.

  • Location
  • User characteristics (CORRECT)
  • Insight (CORRECT)
  • Name (CORRECT)
  • User needs (CORRECT)

“There are four main components of a problem statement, including the characteristics of the user. The other main components of a problem statement are the user’s name, user needs, and insights into why the user has those needs.”

“There are four main components of a problem statement, including insights into why the user specified those needs. The other main components of a problem statement are the user’s name, user characteristics, and user needs.”

“There are four main components of a problem statement, including the name of the user. The other main components of a problem statement are user characteristics, user needs, and insights into why the user has those needs.”

“There are four main components of a problem statement, including the needs of the user. The other main components of a problem statement are the user’s name, user characteristics, and insights into why the user has those needs.”

2. Consider the following sentence: “Andre is a competitive eater who needs to find an app that will balance their competitive billiards schedule because they are planning a special event next month.”

Is this an example of a good problem statement?

  • Yes
  • No (CORRECT)

Correct: “Although this statement includes all the necessary components of a problem statement, they don’t seem to be connected in a meaningful way. A problem statement should clearly describe a user’s need that needs to be addressed, and this sentence fails to provide that clarity by not linking the components together effectively.”

3. Fill in the blank: When starting a project in Adobe XD, you select the size of the device you want to design for in _____.

  • Pixels (CORRECT)
  • millimeters
  • inches
  • centimeters

Correct: Adobe XD allows you to select the device size based on pixels.

4. What tools can you use to create designs in an artboard? Select all that apply:

  • Magnifying glass
  • Text (CORRECT)
  • Rectangle (CORRECT)
  • Pen (CORRECT)
 

You can use the rectangle, ellipse, line, pen, and text tools to craft designs on your artboard. Each tool is designed to help you customize your creation in a unique way.

You can use the rectangle, ellipse, line, pen, and text tools to craft designs on your artboard. Each tool has a specific purpose for customizing your design.

You can use the rectangle, ellipse, line, pen, and text tools to build designs on your artboard. Each tool serves a distinct purpose to help you personalize your design.

5. Personas are one of the most effective tools for giving designers a clear direction for creating design solutions, since they accurately reflect the wants and needs of users. What information does an effective persona include? Select all that apply.

  • Ideal characteristics of a user
  • Brief story that conveys the persona’s user journey (CORRECT)
  • User biographical information (CORRECT)
  • User goals and frustrations (CORRECT)
 

Storytelling is a powerful way to convey a message. Crafting a brief narrative that illustrates the persona’s user journey can highlight the goals and frustrations the design aims to address. It’s also crucial to incorporate user goals, frustrations, and pertinent biographical details.

When relevant to the end product’s goal, biographical details can help visualize the design direction. This information might include age, education, hometown, family situation, and occupation. Additionally, it’s important to feature user goals, frustrations, and a brief narrative of the persona’s journey.

To effectively capture a persona, include goals and frustrations that align with those uncovered during the interview process. A concise story of the persona’s user journey, along with relevant biographical information, should also be included.

6. Which of the following is a good example of a user story?

  • As a busy professional and single parent, I want to have locally cooked meals delivered to my home, so that I can offer nutritious meals to my child without needing to cook. (CORRECT)
  • As a busy professional, I want ready-to-eat meals that are healthy, easy to prepare, and energizes me for a few hours.
  • As a single parent, I want freshly prepared meals that are easy to heat up for my kids because I live a busy lifestyle and don’t have time.
  • As a single parent, I want freshly prepared meals for myself, so that my dogs have a warm place to sleep.

Correct: A user story should include the type of user (who), the action (what), and the benefit (why) to clearly convey the purpose. This structure ensures that all key elements of the formula are addressed.

7. After adding a description for each user action, what is the next step in mapping out a user journey?

  • Reduce the impact of designer bias
  • Identify improvement opportunities
  • Add how the user feels at each point (CORRECT)
  • Note each action that a user needs to take to reach their goal

Correct: After adding a description for each user action, the next step in mapping out a user journey is to add how the user feels at each point.

8. Which of the following is an example of a good problem statement?

  • Lee needs a better way to store tools because they’re scattered everywhere in the garage.
  • Isabella is a head chef who needs an efficient tool to clean and store knives because cleaning at the sink takes too long. (CORRECT)
  • Monty is a professor who needs a cloud storage tool to store all of his class materials.

Correct: The statement encompasses the user’s name, attributes, requirements, and insights into the underlying motivations for those requirements. This approach enables a comprehensive understanding of the persona’s drivers and context.

9. You have gotten to know the users of an app you are designing. You are clear on the goals for the app and the users’ expectations. You have also organized the user flow of the app and created a roadmap for users to achieve their desired goals. By doing these things, what have you performed?

  • Chunking
  • Wireframing
  • Information architecture (CORRECT)
  • Scaffolding

10. You are designing a website that has a parent level at the top. It then narrows the content down into a child level. Which website structure is this?

  • Hierarchical (CORRECT)
  • Matrix
  • Database
  • Sequential

11. You are in the early stages of designing a responsive website. You have created a diagram of the site that shows how pages are prioritized, linked, and labeled. What tool have you created?

  • A sitemap (CORRECT)
  • The navigation menu
  • The information architecture
  • A style guide

12. You are ready to wireframe the homepage of the app you are designing. What should you do first?

  • Make a list of all the information that will go on your homepage. (CORRECT)
  • Gather all of the content and images that will be included.
  • Create the top-level navigation that will reside on the homepage.
  • Sketch out the general layout that your client wants.

13. Your client is not sure they want a responsive design for their website. What might you tell them to help them decide a responsive design is a good choice?

  • A responsive design can save time and money. (CORRECT)
  • A responsive design will have smaller, simpler navigation on every device.
  • A responsive design is easier to design than a standard design.
  • A responsive design can use more buttons and navigation points than a standard design.

14. Which elements are commonly used when scaling down digital real estate to smaller screens? Select all that apply.

  • Lists
  • Carousels (CORRECT)
  • Hamburger menus (CORRECT)
  • Cards (CORRECT)

15. A friend, who is not a designer, asks you why you are spending time on wireframes. What might you tell them?

  • Wireframes are a solid deliverable that clients always want to see.
  • Wireframes are required by clients so they can see the design progress.
  • Wireframes are inexpensive and allow for lots of iterations. (CORRECT)
  • Wireframes give the client good insight into the final look and feel.

16. Which features are important to include in your wireframes to ensure that people using assistive technology have a great user experience? Select all that apply.

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

17. You are designing an app for pet care. You have used the same shapes in your wireframes to denote cats (diamonds), dogs (stars), and rabbits (ovals). Which Gestalt Principle have you used?

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

18. Which wireframe features provide visual hierarchy and support navigation for users of screen readers? Select all that apply.

  • Alt text
  • Menus
  • Headings (CORRECT)
  • Landmarks (CORRECT)

19. You are finished with your wireframes and are thinking about getting rid of them. A colleague has advised you to keep them and add them to your portfolio. Why should you add wireframes to your portfolio? 

  • They may be useful if you need to make adjustments to your design. 
  • They are unique and part of your intellectual property for the project. 
  • They help showcase your full design process. (CORRECT)
  • They may provide you a template for future projects.

20. You have designed a responsive website for your client. They have given you a lot of photos to include on the site. Which element would you use on the website to accommodate a lot of pictures?

  • Tabs
  • Hotspots
  • Carousel (CORRECT)
  • Accordions

21. Your client has asked you to design a website that is responsive. What does that mean?

  • The layout changes depending on the device and size of the screen. (CORRECT)
  • The screen reader capability is enabled and ready to respond to user prompts.
  • The size of the layout flexes and shrinks depending on the amount of content and the size of graphics. 
  • The shading and contrast on the website change depending on the environment they are viewed in.

22. You’re designing a website. So far, you’ve found out about your users from empathy interviews, you’ve defined the problem to solve, and you’ve started the ideation process. What might be your next action?

  • Build the website based on what you know and see how the users react.
  • Pass on the project to the engineers and let them build it based on the information you’ve gathered.
  • Ask for more time so you can create the final product.
  • Create wireframes that will act as the blueprint for the website. (CORRECT)

23. You are looking at a website that uses content tags and has search functionality. What type of website is this?

  • Database (CORRECT)
  • Sequential
  • Hierarchical
  • Matrix

24. You are working on the information architecture for an app you are designing. What element do you need to understand to effectively create a user flow?

  • The organization’s style guide
  • Colors and typography
  • Project timelines and scope
  • The target users (CORRECT)

25. You would like to use Gestalt Principles in your wireframes. Which of the Gestalt Principles are relevant to wireframes? Select all that apply.

  • Color-coding
  • Common region (CORRECT)
  • Similarity (CORRECT)
  • Proximity (CORRECT)

26. You are satisfied with your paper wireframes and are ready to move to digital wireframes. What elements should you consider before transitioning from paper to digital wireframes? Select all that apply.

  • Timing
  • Visual elements and content (CORRECT)
  • Feedback from peers (CORRECT)
  • Layout ideas (CORRECT)

27. What type of menu is commonly used when designing for smaller screens and devices?

  • Vertical sidebar menu
  • Hamburger menu (CORRECT)
  • Drop-down menu
  • Top horizontal navigation menu

28. You are designing a website that leads users step-by-step toward a specific goal. Which type of website structure is this?

  • Sequential (CORRECT)
  • Database
  • Hierarchical
  • Matrix

29. You are in the wireframing stage for an app you are designing. What should be included in your wireframes?

  • Navigation menu
  • Stock photos and icons
  • Simple shapes (CORRECT)
  • Topic headers and content

30. You have created a website that has a lot of content and images on it. The feedback you get from colleagues is that they have experienced cognitive overload. What can you do to remedy this situation?

  • Remove the images and use bulleted lists to deliver the content.
  • Gather additional user feedback to determine if your colleagues are correct.
  • Change the screen dimension you have designed for.
  • Review the website to determine which content could be removed to declutter the website. (CORRECT)

31. During a conversation with one of your colleagues, you mention that you are using Gestalt Principles in your wireframes. Your colleague doesn’t understand why you would spend the time to use those principles at this early wireframing stage. What would you tell them?

  • The Gestalt Principles help outline the site navigation, taking into consideration usability and accessibility.
  • The Gestalt Principles help inform on word count, syntax, and font type that is best for accessibility purposes.
  • The Gestalt Principles help with organization and provide insight into how users group items, recognize patterns, and simplify complex images. (CORRECT)
  • The Gestalt Principles examine color and shading and provide insight into accessibility considerations.

32. The responsive website that you are designing is fairly small and has less than 100 pages. What kind of sitemap would you use for this website size?

  • A deep sitemap
  • A narrow sitemap
  • A flat sitemap (CORRECT)
  • A wide sitemap

33. A colleague inquires as to where you are in the design process for an app you’re designing. You tell them you are working on the information architecture. What does this mean?

  • You are designing the content that will be included in the app.
  • You are sketching the initial drawings for the app.
  • You are identifying content to help users understand where they are in the app. (CORRECT)
  • You are making connections and adding navigation to the app.

34. Which types of screens should a website be able to adapt to if it’s built with responsive design?

  • Desktop and tablets
  • Only desktops, tablets, and mobile phones (CORRECT)
  • Mobile phones and smartwatches
  • All types of screens

Leave a Comment