GOOGLE UX DESIGN PROFESSIONAL CERTIFICATE

Course 6 – Responsive Web Design in Adobe XD

Week 3: Create Wireframes

Coursera Study Guide

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.