UI/UX Design Principles

Seize the savings! Get 40% off 3 months of Coursera Plus and full access to thousands of courses.

UI/UX Design Principles

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

Instructor: Microsoft

2,445 already enrolled

Included with

Learn more

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

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

28 assignments

Taught in English

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

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

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 videos Total 106 minutes

Course Introduction 2 minutes
Instructor Introduction 2 minutes
The What’s What of the Course 3 minutes
Completing the Guided Labs 4 minutes
Introducing the AI Tool: Microsoft Copilot 3 minutes
How to Be Successful in This Program 5 minutes
Introduction to the Project 4 minutes
Introduction to Principles of UI/UX 2 minutes
What is UI/UX Design? 4 minutes
The Relationship Between UI and UX 7 minutes
The Importance of UI/UX Design 6 minutes
Balance and Contrast 7 minutes
Alignment and Proximity 5 minutes
Hierarchy and Repetition 3 minutes
User Needs in Front-End Development 4 minutes
Creating and Using User Personas 4 minutes
Designing for Usability 5 minutes
Accessibility in UI/UX 6 minutes
Accessibility Guidelines for Front-End Engineers 4 minutes
Practical Accessibility Techniques 6 minutes
Enhancing Accessibility of an Existing Web Page with CSS and HTML 7 minutes
Design Thinking for Front-End Engineers 5 minutes
Stages of the Design Thinking Process 3 minutes
Applying Design Thinking to Real-World Front-End Challenges 4 minutes
Conclusion: Principles of UI/UX Design 2 minutes

12 readings Total 180 minutes

Course Syllabus 10 minutes
Completing the Guided Labs 30 minutes
Microsoft Tools for Front-End Development 10 minutes
UI/UX Design Concepts 10 minutes
Essential Principles of UI/UX Design 10 minutes
Activity: CSS in Front-End Engineering - Answer Key 30 minutes
Activity: Create a User Persona - Answer Key 30 minutes
User-Centered Design Principles for Front-End Engineers 10 minutes
Accessibility Guidelines for Front-End Engineers 10 minutes
Practical Accessibility Techniques 10 minutes
You Try It! Enhancing Accessibility of an Existing Web Page with CSS and HTML - Answer Key 10 minutes
Applying Design Thinking in Front-End Development 10 minutes

9 assignments Total 245 minutes

Practice Quiz: UI/UX Design Concepts 20 minutes
Activity: CSS in Front-End Engineering 30 minutes
Practice Quiz: Essential Principles of UI/UX Design 20 minutes
Activity: Create a User Persona 30 minutes
Practice Quiz: User-Centered Design Principles for Front-End Engineers 20 minutes
Practice Quiz: Accessibility Best Practices for Front-End Engineers 25 minutes
Activity: Addressing UI/UX Challenges 30 minutes
Practice Quiz: Applying Design Thinking in Front-End Development 20 minutes
Graded Quiz: Principles of UI/UX Design 50 minutes

1 ungraded lab Total 60 minutes

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

1 plugin Total 15 minutes

Guided Lab: Enhancing Accessibility of an Existing Web Page with CSS and HTML 15 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 videos Total 76 minutes

Introduction to Using Design Tools like Figma or Adobe XD for Mockups 2 minutes
Prototyping 4 minutes
Principles of Interaction Design 3 minutes
Prototyping for Front-End Development 4 minutes
Introduction to Design Tools 6 minutes
Key Features of Figma and Adobe XD 5 minutes
Using Design Tools for Development 5 minutes
The Role of Wireframes in Design 4 minutes
Tools and Techniques for Creating Wireframes 4 minutes
Best Practices in Wireframing 3 minutes
From Wireframes to High-Fidelity Mockups 6 minutes
Key Elements of High-Fidelity Mockups 6 minutes
Tools for Creating High-Fidelity Mockups 5 minutes
The Importance of Collaboration in Design 5 minutes
Tools for Collaboration and Feedback 5 minutes
Best Practices for Collaborative Design 5 minutes
Conclusion: Using Design Tools like Figma or Adobe XD for Mockups 2 minutes

6 readings Total 80 minutes

Prototyping and Interaction Design Principles for Front-End Engineers 10 minutes
Leveraging Design Tools for UI/UX Development 10 minutes
Activity: Using Microsoft Copilot to Generate UI/UX Code Snippets - Answer Key 30 minutes
Creating Effective Wireframes for UI/UX Design 10 minutes
Designing High-Fidelity Mockups for Realistic UI Representation 10 minutes
Collaborating and Sharing UI/UX Designs Effectively 10 minutes

9 assignments Total 255 minutes

Practice Quiz: Prototyping and Interaction Design Principles for Front-End Engineers 20 minutes
Activity: Using Microsoft Copilot to Generate UI/UX Code Snippets 30 minutes
Practice Quiz: Leveraging Design Tools for UI/UX Development 20 minutes
Activity: Creating a Wireframe 30 minutes
Practice Quiz: Creating Effective Wireframes for UI/UX Design 30 minutes
Activity: High Fidelity Mockup 30 minutes
Practice Quiz: Designing High-Fidelity Mockups for Realistic UI Representation 25 minutes
Practice Quiz: Collaborating and Sharing UI/UX Designs Effectively 20 minutes
Graded Quiz: Using Design Tools like Figma or Adobe XD for Mockups 50 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 videos Total 88 minutes

Introduction: Implementing Responsive Design Using CSS 1 minute
Responsive Design 4 minutes
Describe the Key Benefits of Implementing Responsive Design 3 minutes
Differences Between Responsive and Adaptive Design Approaches 6 minutes
Media Queries 6 minutes
Common Use Cases for Media Queries 4 minutes
Best Practices for Writing Media Queries 5 minutes
Creating a Responsive Webpage Using Media Queries 4 minutes
Using Flexbox for Responsive Design 6 minutes
Using CSS Grid for Responsive Design 6 minutes
Combining Flexbox and Grid for Complex Layouts 6 minutes
Building Responsive Layouts with Flexbox and Grid 5 minutes
What is Mobile-First Design? 3 minutes
Benefits of Mobile-First Design 4 minutes
Implementing Mobile-First Design in Practice 9 minutes
Tools for Testing Responsive Design 6 minutes
Best Practices for Responsive Testing 5 minutes
Documenting and Addressing Responsive Issues 5 minutes
Conclusion: Implementing Responsive Design Using CSS 1 minute

8 readings Total 80 minutes

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

7 assignments Total 175 minutes

Practice Quiz: Responsive Design Principles 20 minutes
Practice Quiz: Mastering Media Queries for Responsive Design 20 minutes
Practice Quiz: Techniques for Building Responsive Layouts 15 minutes
Practice Quiz: Principles of Mobile-First Design 20 minutes
Activity: Test Responsive Layouts 30 minutes
Practice Quiz: Testing and Validating Responsive Designs 20 minutes
Graded Quiz: Implementing Responsive Design using CSS 50 minutes

2 ungraded labs Total 120 minutes

You Try It! Creating a Responsive Webpage Using Media Queries 60 minutes
You Try It! Building Responsive Layouts with Flexbox and Grid 60 minutes

2 plugins Total 30 minutes

Guided Lab: Creating a Responsive Webpage Using Media Queries 15 minutes
Guided Lab: Building Responsive Layouts with Flexbox and Grid 15 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 videos Total 81 minutes

Introduction: Using Microsoft Copilot for Generating CSS and Design Suggestions 2 minutes
Introduction to Using Copilot for CSS 4 minutes
Generating Advanced CSS Techniques with Copilot 9 minutes
Optimizing Existing CSS Code 7 minutes
Responsive Design with Copilot 3 minutes
Implementing Copilot's Responsive Design Suggestions 9 minutes
Evaluating Responsive Design Enhancements 8 minutes
Enhancing User Interaction with Copilot 3 minutes
Improving Visual Aesthetics with Copilot 9 minutes
Incorporating Feedback to Optimize UI/UX 8 minutes
Integrating Copilot into Daily Workflow 4 minutes
Using Copilot for Project Management 9 minutes
Finalizing a Design Project with Copilot 4 minutes
Course Conclusion: UI/UX Principles 2 minutes

3 assignments Total 90 minutes

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

1 peer review Total 60 minutes

Submit Your Project 60 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 Courses 2,323,864 learners

Offered by

Microsoft

Explore more from Mobile and Web Development

Status: Free Trial
Coursera
UX Design: Research, Prototyping, Accessible Interactions
Course
Status: Free Trial
Coursera
User Interface Design: Principles, Prototyping, Practices
Course
Status: Free Trial
Xbox
Interaction Design and UX/UI Principles
Course
Status: Free Trial
Meta
Principles of UX/UI Design
Course

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."

Open new doors with Coursera Plus

Unlimited access to 10,000+ world-class courses, hands-on projects, and job-ready certificate programs - all included in your subscription

Learn more

Advance your career with an online degree

Earn a degree from world-class universities - 100% online

Explore degrees

Join over 3,400 global companies that choose Coursera for Business

Upskill your employees to excel in the digital economy

Learn more

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.