Course 6 – Responsive Web Design in Adobe XD

by
Contents hide
1 Week 2: Ideate solutions to the user’s problem
2 TEST YOUR KNOWLEDGE ON IDEATION TECHNIQUES
3 TEST YOUR KNOWLEDGE ON PROBLEM STATEMENTS
4 TEST YOUR KNOWLEDGE ON WEBSITE STRUCTURES
Spread the love

Week 2: Ideate solutions to the user’s problem

Your event responsive website project is continuing well, and you now move into the ideate phase of design process work. In this section of the course, you will complete a competitive audit, undertake the How Might We exercise, and sketch out ideas using Crazy Eights for the purposes of generating creative design solutions. You will also learn about the importance of information architecture and the vital role sitemaps play in the design of a website.

Learning Objectives:

  • Understand why competitive audits are done, their advantages, and limitations.
  • Use competitive audits to inform and inspire one’s design decisions.
  • Describe the benefits of ideation and ways by which people can think creatively about designs.
  • Use methods such as Crazy 8s to come up with ideas for design work.
  • Argue for and against staying within standard web designs.
  • Create a sitemap for effective mapping of 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: “How Might We” as a HMW activity inspires designers to think widely and broadly yet collaborates intensely. It gives an avenue to construct questions from statements to challenge the designer’s mindset, forcing them to consider their designs from countless different solutions or ideas rather than limiting a central approach.

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

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

Correct: The crazy eights are an exercise in which students sketch ideas for only eight minutes. This technique promotes quickly thinking and producing ideas that help designers generate as many different solutions as possible in a very short time.

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: Matrix model will allow a user to have content for him to link many ways. The content disassociates itself from linear structure and allows users to explore different pathways according to their preferences or needs.

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: This is a model of an online database having an organized collection of information, identical to a search engine, where one places a query to access that information . This model is the ideal for those kinds of websites that need to deal with a large amount of data being added and searched through, and hence would be the best structure for sites that manage and search into large volumes of content.

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: As the name implies, the sequential model describes a web structure through which users are guided to step through actions sequentially. This would typically include path-specific actions such as signing up for a program, surveys, online examinations, and applying for job applications where users are required to carry out actions from the start to complete any single-task event.

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: Website structures have been drilled down and fine-tuned repeatedly over time to be user-friendly. From time to time, these structures will change, but they’ve all become structures based on ground truths gleaned from users and designers. They help organize the website in such a manner that it can improve navigation and create a user-friendlier experience.

Correct: Website layout models are the direct route to organization while giving designers the opportunity to incorporate logical cues that guide users to where they want to go in their online journey. Such layouts meet user expectations because their features have already been tested and proved viable in the production of intuitive, easy-to-navigate websites.

Correct: Users have a tendency to develop expectations of how a website will perform based on prior experiences with other sites. Most website architectures won’t really violate such expectations; instead, they just deliver the same characteristics of an organized information structure. Ultimately, a tested and proven effective, makes it easier to navigate, and thus, improves overall user experience.

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 analyze strong attributes of key competitors and identify areas where they need better performance. Such insights enable the design team to develop products that come around the weaknesses found in a competitor’s design or motivate the birth of unique in-house implementations that provide different value to users.

Correct: They tell you who are the top competitors in the market for your product and define how unique and valuable your solution design should be. For example, they also show the aspects in which the competitors perform well and highlight the areas where they could do better so that you can directly assess their performance and guide your own design process.

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 goal of ideation exercises such as Crazy Eights is to come up with the maximum number of ideas in a time-constrained way. They force you to think outside the box and open your mind to different paths. This keeps pace with rapid fire creating, unlocking those creative blocks, and birthing some innovation.

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: An information architecture allows a user to easily navigate a given product while ensuring that the location of the user is clarified, as well as where that user needs to go for specific information. This usability improvement manifests itself through a logical structure that allows access to content.

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

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

Straightforwardly: A linear website outlines sequential guiding steps through a process. A few other popular patterned website structures are database, matrix, and hierarchical.

Straightforwardly: A database website structure is a systematic collection of information along with a search. Other standard website structures are sequential, matrix, and hierarchical.

Straightforwardly: A hierarchical structure consists of information that is structured from top to bottom with broad categories narrowing down to finer details. Other common website structures are linear, matrix, and database.

Straightforwardly: A matrix structure provides different ways for users to navigate contents and lets them go according to their path. Other common structures are 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: This provides a model of a website structure, which you, as designer, can now use to build logical cues that guide a user through the survey. By leading users step-by-step into a clear progressive process, the data can be easily received, thus minimizing user confusion when taking the survey.

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 well-defined website sitemap creates a clear, organized flow that leads people from one task to another. This is particularly useful when someone is using an assistive technology and not that familiar with navigation on a website, ensuring that everything is smooth and accessible for everyone.

Correct: The sitemap definition is a help for designers in organizing the flow of the website under design. All pages are represented in sequence relative to their usage by users, thus making the job much easier since any missing pages can be identified and any unnecessary ones deleted or condensed. This simple but effective way gives the website structure a more efficient and organized platform.

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: Once you have decided on the pages to include-another step in creating a sitemap-is to consider the pages that are likely to exist in just about any website, such as a home page, contact page, and pages related to products or services. The second thing to consider is your thoughts on what you already know concerning your users: their needs, behavior, and preferences. In doing so, you are confident that your sitemap is reflective of the users’ thoughts as it would make it easier for them to navigate it.

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? 

  • Security information and event management (SIEM)
  • Intrusion prevention system (IPS)
  • Intrusion detection system (IDS)
  • Security orchestration, automation, and response (SOAR) (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.

Leave a Comment