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.
UI/UX Design Principles
您将获得的技能
要了解的详细信息
可分享的证书
添加到您的领英档案
作业
28 项作业
授课语言：英语（English）
了解顶级公司的员工如何掌握热门技能
积累 Mobile and Web Development 领域的专业知识
本课程是 Microsoft Front-End Developer 专业证书 专项课程的一部分
在注册此课程时，您还会同时注册此专业证书。
- 向行业专家学习新概念
- 获得对主题或工具的基础理解
- 通过实践项目培养工作相关技能
- 通过 Microsoft 获得可共享的职业证书
该课程共有4个模块
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.
涵盖的内容
25个视频12篇阅读材料9个作业1个非评分实验室1个插件
25个视频• 总计106分钟
- Course Introduction• 2分钟
- Instructor Introduction• 2分钟
- The What’s What of the Course• 3分钟
- Completing the Guided Labs• 4分钟
- Introducing the AI Tool: Microsoft Copilot• 3分钟
- How to Be Successful in This Program• 5分钟
- Introduction to the Project• 4分钟
- Introduction to Principles of UI/UX• 2分钟
- What is UI/UX Design?• 4分钟
- The Relationship Between UI and UX• 7分钟
- The Importance of UI/UX Design• 6分钟
- Balance and Contrast• 7分钟
- Alignment and Proximity• 5分钟
- Hierarchy and Repetition• 3分钟
- User Needs in Front-End Development• 4分钟
- Creating and Using User Personas• 4分钟
- Designing for Usability• 5分钟
- Accessibility in UI/UX• 6分钟
- Accessibility Guidelines for Front-End Engineers• 4分钟
- Practical Accessibility Techniques• 6分钟
- Enhancing Accessibility of an Existing Web Page with CSS and HTML• 7分钟
- Design Thinking for Front-End Engineers• 5分钟
- Stages of the Design Thinking Process• 3分钟
- Applying Design Thinking to Real-World Front-End Challenges• 4分钟
- Conclusion: Principles of UI/UX Design• 2分钟
12篇阅读材料• 总计180分钟
- Course Syllabus• 10分钟
- Completing the Guided Labs• 30分钟
- Microsoft Tools for Front-End Development• 10分钟
- UI/UX Design Concepts• 10分钟
- Essential Principles of UI/UX Design• 10分钟
- Activity: CSS in Front-End Engineering - Answer Key• 30分钟
- Activity: Create a User Persona - Answer Key• 30分钟
- User-Centered Design Principles for Front-End Engineers• 10分钟
- Accessibility Guidelines for Front-End Engineers• 10分钟
- Practical Accessibility Techniques• 10分钟
- You Try It! Enhancing Accessibility of an Existing Web Page with CSS and HTML - Answer Key• 10分钟
- Applying Design Thinking in Front-End Development• 10分钟
9个作业• 总计245分钟
- Practice Quiz: UI/UX Design Concepts• 20分钟
- Activity: CSS in Front-End Engineering• 30分钟
- Practice Quiz: Essential Principles of UI/UX Design• 20分钟
- Activity: Create a User Persona• 30分钟
- Practice Quiz: User-Centered Design Principles for Front-End Engineers• 20分钟
- Practice Quiz: Accessibility Best Practices for Front-End Engineers• 25分钟
- Activity: Addressing UI/UX Challenges• 30分钟
- Practice Quiz: Applying Design Thinking in Front-End Development• 20分钟
- Graded Quiz: Principles of UI/UX Design• 50分钟
1个非评分实验室• 总计60分钟
- You Try It! Enhancing Accessibility of an Existing Web Page with CSS and HTML• 60分钟
1个插件• 总计15分钟
- Guided Lab: Enhancing Accessibility of an Existing Web Page with CSS and HTML• 15分钟
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.
涵盖的内容
17个视频6篇阅读材料9个作业
17个视频• 总计76分钟
- Introduction to Using Design Tools like Figma or Adobe XD for Mockups• 2分钟
- Prototyping• 4分钟
- Principles of Interaction Design• 3分钟
- Prototyping for Front-End Development• 4分钟
- Introduction to Design Tools• 6分钟
- Key Features of Figma and Adobe XD• 5分钟
- Using Design Tools for Development• 5分钟
- The Role of Wireframes in Design• 4分钟
- Tools and Techniques for Creating Wireframes• 4分钟
- Best Practices in Wireframing• 3分钟
- From Wireframes to High-Fidelity Mockups• 6分钟
- Key Elements of High-Fidelity Mockups• 6分钟
- Tools for Creating High-Fidelity Mockups• 5分钟
- The Importance of Collaboration in Design• 5分钟
- Tools for Collaboration and Feedback• 5分钟
- Best Practices for Collaborative Design• 5分钟
- Conclusion: Using Design Tools like Figma or Adobe XD for Mockups• 2分钟
6篇阅读材料• 总计80分钟
- Prototyping and Interaction Design Principles for Front-End Engineers• 10分钟
- Leveraging Design Tools for UI/UX Development• 10分钟
- Activity: Using Microsoft Copilot to Generate UI/UX Code Snippets - Answer Key• 30分钟
- Creating Effective Wireframes for UI/UX Design• 10分钟
- Designing High-Fidelity Mockups for Realistic UI Representation• 10分钟
- Collaborating and Sharing UI/UX Designs Effectively• 10分钟
9个作业• 总计255分钟
- Practice Quiz: Prototyping and Interaction Design Principles for Front-End Engineers• 20分钟
- Activity: Using Microsoft Copilot to Generate UI/UX Code Snippets• 30分钟
- Practice Quiz: Leveraging Design Tools for UI/UX Development• 20分钟
- Activity: Creating a Wireframe• 30分钟
- Practice Quiz: Creating Effective Wireframes for UI/UX Design• 30分钟
- Activity: High Fidelity Mockup• 30分钟
- Practice Quiz: Designing High-Fidelity Mockups for Realistic UI Representation• 25分钟
- Practice Quiz: Collaborating and Sharing UI/UX Designs Effectively• 20分钟
- Graded Quiz: Using Design Tools like Figma or Adobe XD for Mockups• 50分钟
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.
涵盖的内容
19个视频8篇阅读材料7个作业2个非评分实验室2个插件
19个视频• 总计88分钟
- Introduction: Implementing Responsive Design Using CSS• 1分钟
- Responsive Design• 4分钟
- Describe the Key Benefits of Implementing Responsive Design• 3分钟
- Differences Between Responsive and Adaptive Design Approaches• 6分钟
- Media Queries• 6分钟
- Common Use Cases for Media Queries• 4分钟
- Best Practices for Writing Media Queries• 5分钟
- Creating a Responsive Webpage Using Media Queries• 4分钟
- Using Flexbox for Responsive Design• 6分钟
- Using CSS Grid for Responsive Design• 6分钟
- Combining Flexbox and Grid for Complex Layouts• 6分钟
- Building Responsive Layouts with Flexbox and Grid• 5分钟
- What is Mobile-First Design?• 3分钟
- Benefits of Mobile-First Design• 4分钟
- Implementing Mobile-First Design in Practice• 9分钟
- Tools for Testing Responsive Design• 6分钟
- Best Practices for Responsive Testing• 5分钟
- Documenting and Addressing Responsive Issues• 5分钟
- Conclusion: Implementing Responsive Design Using CSS• 1分钟
8篇阅读材料• 总计80分钟
- Responsive Design Principles• 10分钟
- Mastering Media Queries for Responsive Design• 10分钟
- You Try It! Creating a Responsive Webpage Using Media Queries - Answer Key• 10分钟
- Using Flexbox for Responsive Design• 10分钟
- Using CSS Grid for Responsive Design• 10分钟
- You Try It! Building Responsive Layouts with Flexbox and Grid - Answer Key• 10分钟
- Principles of Mobile-First Design• 10分钟
- Testing and Validating Responsive Designs• 10分钟
7个作业• 总计175分钟
- Practice Quiz: Responsive Design Principles• 20分钟
- Practice Quiz: Mastering Media Queries for Responsive Design• 20分钟
- Practice Quiz: Techniques for Building Responsive Layouts• 15分钟
- Practice Quiz: Principles of Mobile-First Design• 20分钟
- Activity: Test Responsive Layouts• 30分钟
- Practice Quiz: Testing and Validating Responsive Designs• 20分钟
- Graded Quiz: Implementing Responsive Design using CSS• 50分钟
2个非评分实验室• 总计120分钟
- You Try It! Creating a Responsive Webpage Using Media Queries• 60分钟
- You Try It! Building Responsive Layouts with Flexbox and Grid• 60分钟
2个插件• 总计30分钟
- Guided Lab: Creating a Responsive Webpage Using Media Queries• 15分钟
- Guided Lab: Building Responsive Layouts with Flexbox and Grid• 15分钟
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.
涵盖的内容
14个视频3个作业1次同伴评审
14个视频• 总计81分钟
- Introduction: Using Microsoft Copilot for Generating CSS and Design Suggestions• 2分钟
- Introduction to Using Copilot for CSS• 4分钟
- Generating Advanced CSS Techniques with Copilot• 9分钟
- Optimizing Existing CSS Code• 7分钟
- Responsive Design with Copilot• 3分钟
- Implementing Copilot's Responsive Design Suggestions• 9分钟
- Evaluating Responsive Design Enhancements• 8分钟
- Enhancing User Interaction with Copilot• 3分钟
- Improving Visual Aesthetics with Copilot• 9分钟
- Incorporating Feedback to Optimize UI/UX• 8分钟
- Integrating Copilot into Daily Workflow• 4分钟
- Using Copilot for Project Management• 9分钟
- Finalizing a Design Project with Copilot• 4分钟
- Course Conclusion: UI/UX Principles• 2分钟
3个作业• 总计90分钟
- Activity: Writing and Enhancing CSS with Microsoft Copilot• 30分钟
- Activity: Generate Responsive Design Suggestions with Microsoft Copilot• 30分钟
- Activity: Enhancing UI/UX Design Using Microsoft Copilot• 30分钟
1次同伴评审• 总计60分钟
- Submit Your Project• 60分钟
获得职业证书
将此证书添加到您的 LinkedIn 个人资料、简历或履历中。在社交媒体和绩效考核中分享。
位教师
287 门课程• 2,373,262 名学生
提供方
提供方
Microsoft
Our goal at Microsoft is to empower every individual and organization on the planet to achieve more. In this next revolution of digital transformation, growth is being driven by technology. Our integrated cloud approach creates an unmatched platform for digital transformation. We address the real-world needs of customers by seamlessly integrating Microsoft 365, Dynamics 365, LinkedIn, GitHub, Microsoft Power Platform, and Azure to unlock business value for every organization—from large enterprises to family-run businesses. The backbone and foundation of this is Azure.
从 Mobile and Web Development 浏览更多内容
人们为什么选择 Coursera 来帮助自己实现职业发展
Felipe M.
自 2018开始学习的学生
''能够按照自己的速度和节奏学习课程是一次很棒的经历。只要符合自己的时间表和心情，我就可以学习。'
Jennifer J.
自 2020开始学习的学生
''我直接将从课程中学到的概念和技能应用到一个令人兴奋的新工作项目中。'
Larry W.
自 2021开始学习的学生
''如果我的大学不提供我需要的主题课程，Coursera 便是最好的去处之一。'
Chaitanya A.
''学习不仅仅是在工作中做的更好：它远不止于此。Coursera 让我无限制地学习。'
常见问题
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.
更多问题
提供助学金，