VOOZH about

URL: https://www.coursera.org/learn/uiux-design-principles

⇱ UI/UX Design Principles | Coursera

UI/UX Design Principles

Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

UI/UX Design Principles

2,775 already enrolled

Included with

Ask Coursera

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

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
  • Graded Quiz: Principles of UI/UX Design•50 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
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
  • Graded Quiz: Using Design Tools like Figma or Adobe XD for Mockups•50 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

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
  • Graded Quiz: Implementing Responsive Design using CSS•50 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
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

343 Courses•2,617,428 learners

Explore more from Mobile and Web Development

Why people choose Coursera for their career

👁 Image

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

Jennifer J.

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

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

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.

Financial aid available,