UI/UX Design Principles

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

Instructor: Microsoft

2,667 already enrolled

Included with

4 modules

Gain insight into a topic and learn the fundamentals.

Beginner level

Recommended experience

3 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

4 modules

Gain insight into a topic and learn the fundamentals.

Beginner level

Recommended experience

3 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

Skills you'll gain

Category: User Interface and User Experience (UI/UX) Design
Category: Microsoft Copilot
Category: User Experience
Category: User Experience Design
Category: User Centered Design
Category: Wireframing
Category: User Interface (UI)
Category: Mockups
Category: Prototyping
Category: Responsive Web Design

Tools you'll learn

Category: Figma (Design Software)
Category: Adobe XD
Category: Design Software
Category: Cascading Style Sheets (CSS)

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

28 assignments

Taught in English

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

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

25 videos12 readings9 assignments1 ungraded lab1 plugin

25 videosTotal 106 minutes

Course Introduction2 minutes
Instructor Introduction2 minutes
The What’s What of the Course3 minutes
Completing the Guided Labs4 minutes
Introducing the AI Tool: Microsoft Copilot3 minutes
How to Be Successful in This Program5 minutes
Introduction to the Project4 minutes
Introduction to Principles of UI/UX2 minutes
What is UI/UX Design?4 minutes
The Relationship Between UI and UX7 minutes
The Importance of UI/UX Design6 minutes
Balance and Contrast7 minutes
Alignment and Proximity5 minutes
Hierarchy and Repetition3 minutes
User Needs in Front-End Development4 minutes
Creating and Using User Personas4 minutes
Designing for Usability5 minutes
Accessibility in UI/UX6 minutes
Accessibility Guidelines for Front-End Engineers4 minutes
Practical Accessibility Techniques6 minutes
Enhancing Accessibility of an Existing Web Page with CSS and HTML7 minutes
Design Thinking for Front-End Engineers5 minutes
Stages of the Design Thinking Process3 minutes
Applying Design Thinking to Real-World Front-End Challenges4 minutes
Conclusion: Principles of UI/UX Design2 minutes

12 readingsTotal 180 minutes

Course Syllabus10 minutes
Completing the Guided Labs30 minutes
Microsoft Tools for Front-End Development10 minutes
UI/UX Design Concepts10 minutes
Essential Principles of UI/UX Design10 minutes
Activity: CSS in Front-End Engineering - Answer Key30 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
You Try It! Enhancing Accessibility of an Existing Web Page with CSS and HTML - Answer Key10 minutes
Applying Design Thinking in Front-End Development10 minutes

9 assignmentsTotal 245 minutes

Practice Quiz: UI/UX Design Concepts20 minutes
Activity: CSS in Front-End Engineering30 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
Activity: Addressing UI/UX Challenges30 minutes
Practice Quiz: Applying Design Thinking in Front-End Development20 minutes
Graded Quiz: Principles of UI/UX Design50 minutes

1 ungraded labTotal 60 minutes

You Try It! Enhancing Accessibility of an Existing Web Page with CSS and HTML60 minutes

1 pluginTotal 15 minutes

Guided Lab: Enhancing Accessibility of an Existing Web Page with CSS and HTML15 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

17 videos6 readings9 assignments

17 videosTotal 76 minutes

Introduction to Using Design Tools like Figma or Adobe XD for Mockups2 minutes
Prototyping4 minutes
Principles of Interaction Design3 minutes
Prototyping for Front-End Development4 minutes
Introduction to Design Tools6 minutes
Key Features of Figma and Adobe XD5 minutes
Using Design Tools for Development5 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 Mockups6 minutes
Key Elements of High-Fidelity Mockups6 minutes
Tools for Creating High-Fidelity Mockups5 minutes
The Importance of Collaboration in Design5 minutes
Tools for Collaboration and Feedback5 minutes
Best Practices for Collaborative Design5 minutes
Conclusion: Using Design Tools like Figma or Adobe XD for Mockups2 minutes

6 readingsTotal 80 minutes

Prototyping and Interaction Design Principles for Front-End Engineers10 minutes
Leveraging Design Tools for UI/UX Development10 minutes
Activity: Using Microsoft Copilot to Generate UI/UX Code Snippets - Answer Key30 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

9 assignmentsTotal 255 minutes

Practice Quiz: Prototyping and Interaction Design Principles for Front-End Engineers20 minutes
Activity: Using Microsoft Copilot to Generate UI/UX Code Snippets30 minutes
Practice Quiz: Leveraging Design Tools for UI/UX Development20 minutes
Activity: Creating a Wireframe30 minutes
Practice Quiz: Creating Effective Wireframes for UI/UX Design30 minutes
Activity: High Fidelity Mockup30 minutes
Practice Quiz: Designing High-Fidelity Mockups for Realistic UI Representation25 minutes
Practice Quiz: Collaborating and Sharing UI/UX Designs Effectively20 minutes
Graded Quiz: Using Design Tools like Figma or Adobe XD for Mockups50 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

19 videos8 readings7 assignments2 ungraded labs2 plugins

19 videosTotal 88 minutes

Introduction: Implementing Responsive Design Using CSS1 minute
Responsive Design4 minutes
Describe the Key Benefits of Implementing Responsive Design3 minutes
Differences Between Responsive and Adaptive Design Approaches6 minutes
Media Queries6 minutes
Common Use Cases for Media Queries4 minutes
Best Practices for Writing Media Queries5 minutes
Creating a Responsive Webpage Using Media Queries4 minutes
Using Flexbox for Responsive Design6 minutes
Using CSS Grid for Responsive Design6 minutes
Combining Flexbox and Grid for Complex Layouts6 minutes
Building Responsive Layouts with Flexbox and Grid5 minutes
What is Mobile-First Design?3 minutes
Benefits of Mobile-First Design4 minutes
Implementing Mobile-First Design in Practice9 minutes
Tools for Testing Responsive Design6 minutes
Best Practices for Responsive Testing5 minutes
Documenting and Addressing Responsive Issues5 minutes
Conclusion: Implementing Responsive Design Using CSS1 minute

8 readingsTotal 80 minutes

Responsive Design Principles10 minutes
Mastering Media Queries for Responsive Design10 minutes
You Try It! Creating a Responsive Webpage Using Media Queries - Answer Key10 minutes
Using Flexbox for Responsive Design10 minutes
Using CSS Grid for Responsive Design10 minutes
You Try It! Building Responsive Layouts with Flexbox and Grid - Answer Key10 minutes
Principles of Mobile-First Design10 minutes
Testing and Validating Responsive Designs10 minutes

7 assignmentsTotal 175 minutes

Practice Quiz: Responsive Design Principles20 minutes
Practice Quiz: Mastering Media Queries for Responsive Design20 minutes
Practice Quiz: Techniques for Building Responsive Layouts15 minutes
Practice Quiz: Principles of Mobile-First Design20 minutes
Activity: Test Responsive Layouts30 minutes
Practice Quiz: Testing and Validating Responsive Designs20 minutes
Graded Quiz: Implementing Responsive Design using CSS50 minutes

2 ungraded labsTotal 120 minutes

You Try It! Creating a Responsive Webpage Using Media Queries60 minutes
You Try It! Building Responsive Layouts with Flexbox and Grid60 minutes

2 pluginsTotal 30 minutes

Guided Lab: Creating a Responsive Webpage Using Media Queries15 minutes
Guided Lab: Building Responsive Layouts with Flexbox and Grid15 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.

What's included

14 videos3 assignments1 peer review

14 videosTotal 81 minutes

Introduction: Using Microsoft Copilot for Generating CSS and Design Suggestions2 minutes
Introduction to Using Copilot for CSS4 minutes
Generating Advanced CSS Techniques with Copilot9 minutes
Optimizing Existing CSS Code7 minutes
Responsive Design with Copilot3 minutes
Implementing Copilot's Responsive Design Suggestions9 minutes
Evaluating Responsive Design Enhancements8 minutes
Enhancing User Interaction with Copilot3 minutes
Improving Visual Aesthetics with Copilot9 minutes
Incorporating Feedback to Optimize UI/UX8 minutes
Integrating Copilot into Daily Workflow4 minutes
Using Copilot for Project Management9 minutes
Finalizing a Design Project with Copilot4 minutes
Course Conclusion: UI/UX Principles2 minutes

3 assignmentsTotal 90 minutes

Activity: Writing and Enhancing CSS with Microsoft Copilot30 minutes
Activity: Generate Responsive Design Suggestions with Microsoft Copilot30 minutes
Activity: Enhancing UI/UX Design Using Microsoft Copilot30 minutes

1 peer reviewTotal 60 minutes

Submit Your Project60 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

Microsoft

287 Courses2,507,522 learners

Offered by

Microsoft

Why people choose Coursera for their career

Felipe M.

Learner since 2018

"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."

Jennifer J.

Learner since 2020

"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."

Larry W.

Learner since 2021

"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Frequently asked questions

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Certificate, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.