Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

11 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

Build your Mobile and Web Development expertise

This course is part of the Microsoft Front-End Developer Professional Certificate

When you enroll in this course, you'll also be enrolled in this Professional Certificate.

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 Microsoft

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV

Share it on social media and in your performance review

There are 4 modules in this course

This course introduces key UI/UX design concepts and tools. You'll learn to create user-centered, responsive designs, using wireframing, prototyping, and Microsoft Copilot to enhance CSS and improve workflows.

By the end of this program, you will be able to… Define the basic concepts of UI/UX design, design tools, and responsive design. Explain fundamental design principles, wireframing, prototyping, and responsive design testing techniques. Describe user-centered design, accessibility considerations, high-fidelity mockups, and mobile-first design principles. Use Microsoft Copilot to write and enhance CSS, generate responsive design suggestions, and improve UI/UX design in practical workflows.

In this module, you will delve into the essential principles of UI/UX design and their application in creating intuitive, user-friendly interfaces. You'll learn the foundational concepts of design, including user-centered approaches and key accessibility considerations. By the end, you’ll understand the design thinking process and how to implement these principles to craft engaging and inclusive user experiences.

What's included

17 videos8 readings6 assignments

17 videosTotal 73 minutes

Course Introduction1 minutePreview module
Introduction to Principles of UI/UX1 minute
What is UI/UX Design?3 minutes
The Relationship Between UI and UX6 minutes
The Importance of UI/UX Design5 minutes
Balance and Contrast6 minutes
Alignment and Proximity4 minutes
Hierarchy and Repetition3 minutes
Creating and Using User Personas4 minutes
Designing for Usability4 minutes
Accessibility in UI/UX6 minutes
Accessibility Guidelines for Front-End Engineers3 minutes
Practical Accessibility Techniques5 minutes
Design Thinking for Front-End Engineers5 minutes
Stages of the Design Thinking Process3 minutes
Applying Design Thinking to Real-World Front-End Challenges3 minutes
Conclusion: Principles of UI/UX Design2 minutes

8 readingsTotal 100 minutes

Course Syllabus10 minutes
UI/UX Design Concepts10 minutes
Essential Principles of UI/UX Design10 minutes
Activity: Create a User Persona - Answer Key30 minutes
User-Centered Design Principles for Front-End Engineers10 minutes
Accessibility Guidelines for Front-End Engineers10 minutes
Practical Accessibility Techniques10 minutes
Applying Design Thinking in Front-End Development10 minutes

6 assignmentsTotal 135 minutes

Practice Quiz: UI/UX Design Concepts20 minutes
Practice Quiz: Essential Principles of UI/UX Design20 minutes
Activity: Create a User Persona30 minutes
Practice Quiz: User-Centered Design Principles for Front-End Engineers20 minutes
Practice Quiz: Accessibility Best Practices for Front-End Engineers25 minutes
Practice Quiz: Applying Design Thinking in Front-End Development20 minutes

This module explores the foundational principles of prototyping and interaction design, focusing on tools like Figma and Adobe XD. You’ll learn how to create wireframes, design high-fidelity mockups, and leverage design tools for collaboration and sharing. By the end, you’ll be equipped to build and refine user-focused designs, applying industry-standard techniques and tools.

What's included

14 videos5 readings4 assignments

14 videosTotal 60 minutes

Introduction to Using Design Tools like Figma or Adobe XD for Mockups1 minutePreview module
Prototyping4 minutes
Principles of Interaction Design2 minutes
Prototyping for Front-End Development4 minutes
Introduction to Design Tools6 minutes
Key Features of Figma and Adobe XD5 minutes
Using Design Tools for Development4 minutes
The Role of Wireframes in Design4 minutes
Tools and Techniques for Creating Wireframes4 minutes
Best Practices in Wireframing3 minutes
From Wireframes to High-Fidelity Mockups5 minutes
Key Elements of High-Fidelity Mockups5 minutes
Best Practices for Collaborative Design5 minutes
Conclusion: Using Design Tools like Figma or Adobe XD for Mockups1 minute

5 readingsTotal 50 minutes

Prototyping and Interaction Design Principles for Front-End Engineers10 minutes
Leveraging Design Tools for UI/UX Development10 minutes
Creating Effective Wireframes for UI/UX Design10 minutes
Designing High-Fidelity Mockups for Realistic UI Representation10 minutes
Collaborating and Sharing UI/UX Designs Effectively10 minutes

4 assignmentsTotal 90 minutes

Practice Quiz: Prototyping and Interaction Design Principles for Front-End Engineers20 minutes
Practice Quiz: Leveraging Design Tools for UI/UX Development20 minutes
Practice Quiz: Creating Effective Wireframes for UI/UX Design30 minutes
Practice Quiz: Collaborating and Sharing UI/UX Designs Effectively20 minutes

In this module, you will learn the core principles of responsive design and how to apply them using CSS. You'll explore media queries, mobile-first design strategies, and techniques for creating adaptive layouts. By the end, you’ll understand how to test and refine your designs to ensure they function seamlessly across various devices and screen sizes.

What's included

5 videos6 readings1 assignment

5 videosTotal 12 minutes

Introduction: Implementing Responsive Design Using CSS1 minutePreview module
Responsive Design3 minutes
Describe the Key Benefits of Implementing Responsive Design3 minutes
What is Mobile-First Design?3 minutes
Conclusion: Implementing Responsive Design Using CSS1 minute

6 readingsTotal 60 minutes

Responsive Design Principles10 minutes
Mastering Media Queries for Responsive Design10 minutes
Using Flexbox for Responsive Design10 minutes
Using CSS Grid for Responsive Design10 minutes
Principles of Mobile-First Design10 minutes
Testing and Validating Responsive Designs10 minutes

1 assignmentTotal 20 minutes

Practice Quiz: Testing and Validating Responsive Designs20 minutes

In this module, you will learn how to use Microsoft Copilot to streamline your CSS and design workflow. You’ll explore how to generate and enhance CSS code, create responsive design suggestions, and improve UI/UX design with Copilot’s intelligent assistance. By the end, you’ll be able to integrate Copilot into your design process, applying its capabilities to practical design challenges.