Build Dynamic User Interfaces (UI) for Websites
Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
Build Dynamic User Interfaces (UI) for Websites
This course is part of Google UX Design Professional Certificate
283,627 already enrolled
Included with
3,862 reviews
3,862 reviews
What you'll learn
Apply each step of the UX design thinking framework (empathize, define, ideate, prototype, test) to create a dynamic website.
Plan information architecture and sitemaps for website designs.
Apply common layouts for web pages.
Complete a design project and include it in your professional UX portfolio.
Skills you'll gain
- Web Design
- User Experience
- User Research
- Information Architecture
- Layout Design
- Design Research
- Prototyping
- Software Design Documents
- Wireframing
- Mockups
- User Interface (UI) Design
- User Centered Design
- Usability Testing
- User Experience Design
- Design Reviews
- User Interface and User Experience (UI/UX) Design
- Responsive Web Design
Tools you'll learn
Details to know
See how employees at top companies are mastering in-demand skills
Build your Design and Product expertise
- Learn new concepts from industry experts
- Gain a foundational understanding of a subject or tool
- Develop job-relevant skills with hands-on projects
- Earn a shareable career certificate from Google
There are 4 modules in this course
Build Dynamic User Interfaces (UI) for Websites is the sixth course in a program that will equip you with the skills you need to apply to entry-level jobs in user experience (UX) design. In this course, you will plan a design for a website, create wireframes and prototypes, and test your designs to get feedback. Additionally, you will learn about engaging in design critique sessions and how to give and receive feedback. By the end of this course, you will have a new design project to include in your professional UX portfolio. In addition, you’ll learn how to search for entry-level UX design jobs, create a resume that highlights your skills and accomplishments, and build your professional portfolio website.
Current UX designers and researchers at Google will serve as your instructors, and you will complete hands-on activities that simulate real-world UX design scenarios. Learners who complete the courses in this certificate program should be equipped to apply for entry-level jobs as UX designers. By the end of this course, you will be able to: - Apply each step of the UX design thinking framework (empathize, define, ideate, prototype, test) to create a responsive website. - Plan information architecture and create sitemaps for website designs. - Apply common layouts for web pages. - Plan and conduct a usability study to gather feedback about designs. - Iterate on designs based on research insights. - Work with design systems. - Add a new design project to your professional UX portfolio. - [Optional] Create or update a UX-focused resume. - [Optional] Learn how to search for and apply to introductory-level jobs in the field of UX. This course is suitable for beginner-level UX designers who have completed the previous five courses of the Google UX Design Certificate. Alternatively, learners need to have a strong foundational understanding of the design process; experience creating wireframes, mockups, and prototypes; and the ability to conduct usability studies. No previous experience with Figma is required.
Get started with the basics of responsive web design. To create a responsive website, you’ll follow the steps of the UX design process: empathize, define, ideate, prototype, and test. In this part of the course, you'll complete the empathize and define phases.
What's included
14 videos14 readings5 assignments4 plugins
14 videos•Total 59 minutes
- Understand responsive websites•3 minutes
- Differentiate between dedicated mobile apps and responsive web apps•4 minutes
- Plan information architecture for a website•2 minutes
- Explore common website structures •7 minutes
- Explore sitemaps•3 minutes
- Build a sitemap for your website•5 minutes
- Explore common layouts for website home pages•7 minutes
- The basics of wireframes •9 minutes
- Plot a responsive layout•3 minutes
- Adjust page layouts based on screen size•3 minutes
- Transition from paper to digital wireframes•1 minute
- Refine wireframes to enhance accessibility•6 minutes
- Evaluate wireframes using Gestalt Principles•3 minutes
- Wrap-up: Creating wireframes for a responsive website •1 minute
14 readings•Total 70 minutes
- Welcome to Course 6•8 minutes
- Helpful resources and tips•4 minutes
- Learn more about information architecture•4 minutes
- Learn more about building a sitemap•4 minutes
- Learn more about common website layouts•8 minutes
- Learn more about wireframes•4 minutes
- Review: Create paper wireframes for a responsive website•8 minutes
- Learn more about plotting responsive layouts•8 minutes
- Common elements used in responsive design•4 minutes
- Review: Create digital wireframes for a desktop screen size•4 minutes
- Exemplars: Create digital wireframes for a desktop screen size•4 minutes
- Review: Create wireframes for additional screen sizes•4 minutes
- Learn more about Gestalt Principles in wireframes•4 minutes
- Glossary terms from course 6, module 1•2 minutes
5 assignments•Total 130 minutes
- Module 1 Challenge•30 minutes
- Test your knowledge on responsive website design •2 minutes
- Test your knowledge on website structures •8 minutes
- Activity: Create a sitemap for a website•30 minutes
- Activity: Refine wireframes to meet standards•60 minutes
4 plugins•Total 65 minutes
- Understand dedicated mobile apps and responsive web apps•15 minutes
- Explore website structures•10 minutes
- Identify the website layout•30 minutes
- Explore responsive website design•10 minutes
Now that you’ve created digital wireframes, it’s time to build, test, and iterate on a low-fidelity prototype. First, you'll learn how to build a low-fidelity prototype. You’ll get feedback about your prototype by planning and conducting a usability study. Then, you'll make changes to your low-fidelity designs based on insights from your research.
What's included
7 videos13 readings6 assignments
7 videos•Total 21 minutes
- Understand low-fidelity prototypes•2 minutes
- Begin to design mockups•2 minutes
- Work with design systems•3 minutes
- Review: Introduction to high-fidelity prototypes •4 minutes
- Review: Create a high-fidelity prototype in Figma •4 minutes
- Annotate prototypes for web accessibility•5 minutes
- Wrap-up: Creating and testing high-fidelity designs•1 minute
13 readings•Total 70 minutes
- Review: Create a low-fidelity prototype for your responsive website•4 minutes
- Exemplars: Create a low-fidelity prototype for your responsive website•4 minutes
- Review foundational elements of visual design•8 minutes
- Review how to arrange elements in mockups•10 minutes
- Review visual design principles•10 minutes
- Learn more about design systems•8 minutes
- Review: Create a sticker sheet in Figma•4 minutes
- Review: Create mockups for a website•4 minutes
- Create mockups for a mobile website in Figma•4 minutes
- Review: Create a mockup for the homepage of a mobile website•4 minutes
- Learn more about web accessibility•4 minutes
- Glossary terms from course 6, module 2•2 minutes
- Exemplars: Create a high-fidelity prototype for a responsive website•4 minutes
6 assignments•Total 140 minutes
- Module 2 Challenge•60 minutes
- Test your knowledge on wireframes versus prototypes•4 minutes
- Test your knowledge on the basics of mockups•6 minutes
- Test your knowledge on working with design systems•4 minutes
- Test your knowledge on web accessibility•6 minutes
- Activity: Create a high-fidelity prototype for a responsive website•60 minutes
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. Finally, you’ll update and refine your wireframes to enhance accessibility.
What's included
9 videos2 readings4 assignments1 plugin
9 videos•Total 35 minutes
- Give and receive feedback as a UX designer•5 minutes
- The basics of design critique sessions•4 minutes
- Best practices for design critique sessions•3 minutes
- Kunal - My experience with design critique sessions•4 minutes
- Introduction to a mock crit session •2 minutes
- Observe a mock crit session •6 minutes
- Turn crit session feedback into actions•6 minutes
- Iterate on mockups based on feedback from crit sessions•5 minutes
- Wrap-up: Participating in design critique sessions•1 minute
2 readings•Total 6 minutes
- Learn more about design critique sessions•4 minutes
- Glossary terms from course 6, module 3•2 minutes
4 assignments•Total 150 minutes
- Module 3 Challenge•60 minutes
- Test your knowledge on design critique sessions•30 minutes
- Self-Reflection: Request feedback on your work•30 minutes
- Test your knowledge on implementing feedback from crit sessions•30 minutes
1 plugin•Total 15 minutes
- Practice giving and receiving design feedback•15 minutes
With your responsive website designs complete, you'll be ready to share your work with others. To start, you’ll learn how to prepare and handoff designs to engineers, who will build the final product. You’ll also add a case study to your professional UX portfolio featuring your responsive website designs. Then, you'll pivot to focus on your big picture goal: getting a job as a UX designer. You'll learn tips and tricks to scan job postings, and you'll create a compelling resume that highlights your new UX skills.
What's included
8 videos7 readings4 assignments
8 videos•Total 28 minutes
- Understand common jobs for UX designers•6 minutes
- Explore types of companies that UX designers work at•6 minutes
- Kenny - Perseverance•4 minutes
- Dane - My advice for UX design resumes•3 minutes
- Tim - A recruiter's advice for UX design resumes•3 minutes
- Collaborate with engineering teams •2 minutes
- Add a project to your portfolio •2 minutes
- Congratulations on completing Course 6: Build Dynamic User Interfaces (UI) for Websites•1 minute
7 readings•Total 28 minutes
- Learn more about jobs in the field of user experience•4 minutes
- Elements in a typical UX design resume•8 minutes
- Glossary terms from course 6, module 4•2 minutes
- Exemplars: Add a case study to your portfolio•4 minutes
- Reflect and connect with your peers•4 minutes
- Course 6 glossary•2 minutes
- Start the next course•4 minutes
4 assignments•Total 108 minutes
- Module 4 Challenge•60 minutes
- Self-Reflection: Share your professional goals and interests•10 minutes
- Activity: Add a case study to your portfolio•30 minutes
- Test your knowledge on portfolio case studies•8 minutes
Earn a career certificate
Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.
Instructor
Explore more from Design and Product
Why people choose Coursera for their career
Learner reviews
- 5 stars
85.31%
- 4 stars
10.69%
- 3 stars
2.27%
- 2 stars
0.88%
- 1 star
0.82%
Showing 3 of 3862
Reviewed on Sep 18, 2021
It was a great experience working with a different tool (Adobe XD). I would have liked to have more time or exercises meant to emphasize the responsiveness dimension of the design.
Reviewed on Nov 20, 2023
This Course helped me a lot, I didn't know how to build a resume and what I should include in my resume, but after enrolling in this Course I learned many things and I built my resume.
Reviewed on Dec 1, 2021
Good course. Reinforces concepts learned. Not enough time given for competitive analysis, research and usability studies - these were really rushed in order to incorporate job search information.
Frequently asked questions
User experience (UX) designers focus on the experience that users have while using products like websites, apps, and physical objects. UX designers make those everyday interactions useful, enjoyable, and accessible. The role of an entry-level UX designer might include coming up with ideas to address user problems, conducting research with users, and designing wireframes, mockups, and prototypes.
If you enjoy talking to and empathizing with people, drawing, thinking creatively, or paying attention to details, a job as a UX designer might be a good fit for you!
This course is the sixth of seven courses that will equip you with the skills you need to apply to entry-level jobs in user experience design. We strongly recommend that you complete the first five courses of the Google UX Design Certificate before completing this one:
- Course 1: Foundations of User Experience (UX) Design
- Course 2: Start the UX Design Process: Empathize, Define, and Ideate
- Course 3: Build Wireframes and Low-Fidelity Prototypes
- Course 4: Conduct UX Research and Test Early Concepts
- Course 5: Build High-Fidelity Designs and Prototypes in Figma
Alternatively, if you’re hoping to take this as your first course of the program, you should have experience conducting user research in order to empathize with user needs and determine specific user pain points. You need to have the ability to create personas, user stories, user journey maps, and problem statements. You also need to know how to create wireframes and low-fidelity prototypes on paper. It’s helpful to have experience conducting usability studies and iterating on designs, as well. If you are unfamiliar with any of these topics, they are covered in earlier courses of the Google UX Design Certificate.
Adobe XD and Figma are the design tools taught in the Google UX Design Certificate. This course focuses on creating designs in Adobe XD. Learners have nine months of free access to the Single App version of Adobe XD to share unlimited links to prototypes. You must complete Course 1 (including all graded assignments) of the Google UX Design Certificate in order to receive this offer. As a reminder, this offer is exclusive to Google UX Design Certificate learners, and you cannot resell, loan, or share this subscription. After qualifying learners complete Course 1 they will receive an email, and a Coursera message with offer redemption instructions.
Spreadsheets, word processing applications, and presentation applications will also be used. Throughout the program, you will create a professional portfolio, using the platform of your choice, to showcase your UX design work.
More questions
Financial aid available,
¹ Some assignments in this course are AI-graded. For these assignments, your data will be used in accordance with Coursera's Privacy Notice.