GOOGLE UX DESIGN PROFESSIONAL CERTIFICATE

Course 7 – Design A User Experience for Social Good & Prepare For Jobs

Week 4: Designing A Complementary Responsive Website

Coursera Study Guide

Enroll in Coursera Google UX Design Certificate Here

TABLE OF CONTENT

With completed designs for your dedicated mobile app, you’ll take what you learned about your product and users and apply that to design a responsive website for social good. To begin, you’ll learn how to design for different experiences and screen sizes. Next, you’ll review the importance of information architecture and create a sitemap for your website. You’ll also sketch lots of ideas and potential layouts for your website. You’ll create wireframes on paper, digitally, or both for different sized screens. And you’ll develop a low-fidelity prototype and test it through a usability study to improve your designs. Then, you’ll move into high-fidelity designs where you’ll create mockups for different sized screens of your responsive website. Finally, you’ll create a high-fidelity prototype of your responsive website, and test it one more time. By the end of this part of the course, your cross-platform designs will be complete and added to your online portfolio!

Learning Objectives

  • Evaluate platform considerations that impact designs
  • Draft a use case for a portfolio project
  • Describe common website layouts
  • Explain the importance of information architecture
  • Create a sitemap for a responsive website
  • Use ideation techniques to generate ideas for responsive website designs
  • Create wireframes for multiple screen sizes of a responsive website
  • Build a low-fidelity prototype for a responsive website
  • Plan and conduct a usability study for a low-fidelity prototype
  • Create mockups for a responsive website in Figma or Adobe XD
  • Build a high-fidelity prototype for a responsive website
  • Plan and conduct a usability study for a high-fidelity prototype
  • Create a case study for a portfolio project

TEST YOUR KNOWLEDGE ON COMMON WEBSITE LAYOUTS

1. What is the focal point on this website?

C7W4.1
Google Grow
  • The images, which draw a user’s attention to the categories (CORRECT)
  • The navigation bar, which is clearly anchored at the top of the page
  • The arrows, which are blue, and direct users where to find more details
  • The headers, which inform the user about how to find key information

Correct: A site’s focal point is the specific and distinct area of the website that captures the user’s attention. In this example, the images draw a user’s attention to the categories because images, especially of people, tend to attract more attention than text.

2. In a responsive website design, the content that’s above the fold should include the most important information for the user flow.

  • False
  • True (CORRECT)

Correct: Above the fold refers to the content on a webpage that doesn’t require scrolling to experience; it should include the most important information, since this is the content users will see when they first land on the page.

3. A designer creates a website with individual rows stacked on top of each other. Within each row, the designer includes a series of columns. What website layout is the designer using?

  • Tiered layer cake layout (CORRECT)
  • Featured image layout
  • Asymmetrical layout
  • Grid of cards layout

Correct: Tiered layer cake layouts feature individual rows, or layers, stacked on top of one another. Within each row, there can be different numbers of columns, which are not always consistent.

TEST YOUR KNOWLEDGE ON CREATING WIREFRAMES

1. Imagine that a designer creates wireframes for a mobile responsive website. Then they want to create wireframes for the companion desktop site and its larger screen size. They start with the mobile wireframe, and plot it on dot paper. What steps come next? Select all that apply.

  • Apply a template that matches the project specifications
  • Create wireframes for smaller screen sizes
  • Scale up the wireframes two or three times larger (CORRECT)
  • Add elements and components to the wireframes (CORRECT)

Correct: By plotting the wireframes on dot paper first, the designer can scale elements of the wireframe consistently for a larger and wider screen size.   They can also add elements and components that did not fit on mobile.

Correct: Since the designer plots the wireframes on dot paper, they can scale it up to fit larger screen sizes and add elements and components that did not fit on mobile.

2. What should a designer do with text when scaling up a wireframe from mobile to desktop?

  • Revise the site’s information architecture
  • Increase the size of the text (CORRECT)
  • Reposition text below the hero image
  • Adopt a desktop-friendly typeface

Correct: With more digital page space on a larger screen, the designer can add more elements and components and increase the size of text and images.

3. Fill in the blank: Designers can _____, scale, and resize content in wireframes for different screen sizes.

  • undo
  • contain
  • rearrange (CORRECT)
  • fold

Correct: Designers can resize, scale, and rearrange content within existing wireframes. For example, on a mobile screen, designers may hide the primary navigation behind a little “hamburger” menu. On a larger screen, they will not include that default behavior. The wireframes can account for these differences.

TEST YOUR KNOWLEDGE ON PLANNING AND CONDUCTING USABILITY STUDIES

1. What is the goal of a usability study?

  • Share rough design sketches to generate participant feedback early in the design process
  • Develop a research plan and confirm the correct sample size of participants
  • Assess how easy it is for participants to complete core tasks in a product (CORRECT)
  • Determine how product features can accommodate a participant’s design preferences

Correct: In a usability study, researchers assess how easy it is for participants to complete core tasks in a product. Usability studies offer a prime opportunity to gather feedback so designers can refine their work and improve the user experience.

2. A UX designer creates a website for a regional health nonprofit. They plan a usability study, recruit participants, and conduct the study. Then, they iterate on the initial design, and share the updated website with their client. What step did the designer skip in conducting this study?

  • Establish the website’s information architecture
  • Analyze and synthesize observations (CORRECT)
  • Write a research report
  • Decide which product to test

Correct: As their first step, the designer plans the usability study. Next, they recruit participants and conduct the study. After the study, the researcher neglects to analyze and synthesize observations.

3. How many times is it appropriate to conduct usability studies?

  • As many times as needed (CORRECT)
  • One usability study is sufficient
  • Twice, once before the project begins and after the product is released

Correct: You can conduct as many usability studies as you need to gather feedback, make changes to your designs, and improve the user experience. It is perfectly acceptable to conduct a study with your low-fidelity prototype.

TEST YOUR KNOWLEDGE ON DESIGNING MOCKUPS

1. Mockups should adhere to visual design principles, and include design elements like typography, color, and iconography.

  • True (CORRECT)
  • False

Correct: At this stage, the design is moving into the high-fidelity design phase, which should look and feel like the final product. This includes visual design elements.

2. Imagine a design team is building a mockup of a responsive website. Based on preliminary marketing research, they know a significant proportion of users will access the website using smartphones and tablets. What principles should they apply to improve cross-platform design? Select all that apply.

  • Reach out to the back-end developers to ask about changing website architecture
  • Wait until user research is complete before deciding on typography, color, and iconography
  • Consider how to change design elements and components to fit a new screen size (CORRECT)
  • Resize text, icons, images, buttons, and navigation bars to fit better on a responsive grid (CORRECT)

Correct: In addition to creating the mocks for the mobile version of your responsive website, you’ll also want to create mocks for larger screen sizes, resize text, icons, images, buttons, and navigation bars to fit better on a responsive grid.

Correct: When designing across platforms, you should consider how to change design elements and components to fit larger screen sizes.

3. When creating mockups of a responsive website, the design team should create mockups for various screen sizes.

  • False
  • True (CORRECT)

Correct: The designers should create mocks for mobile versions of the site and for larger screen sizes. As with wireframes, the designers should consider how to change the design elements and components to fit a new screen size.

TEST YOUR KNOWLEDGE ON UX PORTFOLIO CASE STUDIES

1. Imagine that you finish this program, and compile a concise and engaging case study about your responsive website to add to your portfolio. The case study includes the project goals and objectives, your role, the insights you gained through research, and what you learned from the project. What’s missing from this case study? Select all that apply.

  • Feedback on the project
  • Challenges and constraints (CORRECT)
  • Outcome of the project (CORRECT)
  • Design process and artifacts (CORRECT)

Correct: Challenges and constraints are critical components of the case study. Case studies should offer a concise, engaging, and detailed summary of the project. It should also include the outcome of the project, and information on the design process and artifacts.

Correct: A description of the project outcome is a critical component of the case study. Case studies should offer a concise, engaging, and detailed summary of the project. It should also include challenges and constraints you faced, and the design process and artifacts.

Correct: Design process and artifacts are critical components of the case study. Case studies should offer a concise, engaging, and detailed summary of the project.

2. When developing a case study, what artifacts should you include from a project? Select all that apply.

  • Design sketches from previous projects
  • Prototypes (CORRECT)
  • Final designs (CORRECT)
  • Wireframes (CORRECT)

Correct: You should include prototypes in a case study to demonstrate your design process over the course of the project.

Correct: You should present relevant artifacts produced throughout the project to demonstrate how well you used the design process to solve a user’s problem. This includes final designs.

Correct: You should include wireframes in a case study to demonstrate your progression through the project.

3. What does a use case describe?

  • How designers would learn about users’ needs and pain points while designing different experiences
  • How designers would apply findings from user research when mocking up a website
  • How users would report their pain points when participating in a usability study
  • How users would experience a product design when trying to complete a task (CORRECT)

Correct: A use case describes how users would experience a designer’s product design when trying to complete a task. Designers need to consider different use cases for each product, like a responsive website or a dedicated mobile app.

4. Fill in the blank: Information Architecture (IA) is the framework of a website. A designer should consider IA when planning a website because good IA _____.

  • helps the UX researchers design an effective user testing methodology
  • makes content easy to find and the product easy to use (CORRECT)
  • makes the coding process straightforward for back-end developers
  • helps the designer scale wireframes for large and small screen sizes

Correct: IA includes how a website is organized, categorized, and structured. As a result, IA is key to creating a seamless user journey.

5. What are the two most popular types of website structures? Select all that apply.

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

Correct: The two most popular website structures are sequential and hierarchical. A sequential website structure leads a user through a step-by-step process. A hierarchical website is organized by importance.

6. When sketching your site, you should consider your design approach, revisit the use case, and _____.

  • focus your creativity on innovating website structures
  • keep your users top of mind (CORRECT)
  • design your site for a large screen size
  • revise your use case based on the user’s needs

Correct: You should consider the user’s step-by-step journey as they try to meet their needs by using your website. This can help you consider the potential solutions to your user’s problems.

7. Identify best practices for the Crazy Eights exercise.

  • Complete the sketches in one sitting
  • Create one sketch per sheet on a large drawing pad
  • Draw the sketches in digital design software
  • Set a timer for 60 seconds for each sketch (CORRECT)

Correct: For the Crazy Eights exercise, you start by folding a piece of paper in half three times until you have eight boxes. Then set a timer to 60 seconds for each sketch, and get started.

Previous – Week 3
Next – Week 5

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