К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
UI/UX Design Principles · LearnSpace
Назад в каталог
courseraПрограммирование

UI/UX Design Principles

Курс от Microsoft
Начальный≈ 29 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

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.

Навыки, которые вы освоите

PrototypingAdobe XDUser Centered DesignWireframingFigma (Design Software)Interaction DesignMockupsUsabilityResponsive Web DesignCascading Style Sheets (CSS)Design ThinkingUser Interface and User Experience (UI/UX) DesignAI WorkflowsInteractive DesignWeb DesignMicrosoft CopilotUser Experience DesignUser ExperienceUser Interface (UI)

Программа курса

4 модулей · 136 учебных материалов

01Principles of UI/UX Design48 материалов

Introduction to Program

Course IntroductionВидеоInstructor IntroductionВидеоCourse SyllabusЧтениеThe What’s What of the CourseВидео

Учитесь у экспертов

Microsoft

Преподаватель курса

UI/UX Design Principles
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 29 ч

4 модулей

Язык: Английский

Субтитры: Арабский, Французский, Узбекский, Украинский, Китайский (Китай), Греческий, Итальянский, Бразильский португальский, Вьетнамский, Нидерландский, Корейский, Немецкий, Пушту, Русский, Тайский, Индонезийский, Шведский, Турецкий, Азербайджанский, Испанский, Дари, Хинди, Японский, Казахский, Венгерский, Польский

Часть программы вашего университета
Completing the Guided LabsВидео
Completing the Guided LabsЧтение
Microsoft Tools for Front-End DevelopmentЧтение
Introducing the AI Tool: Microsoft CopilotВидео
How to Be Successful in This ProgramВидео
Introduction to the ProjectВидео

UI/UX Design Concepts

Introduction to Principles of UI/UXВидеоWhat is UI/UX Design?ВидеоThe Relationship Between UI and UXВидеоThe Importance of UI/UX DesignВидеоUI/UX Design ConceptsЧтениеPractice Quiz: UI/UX Design ConceptsЗадание

Essential Principles of UI/UX Design

Balance and ContrastВидеоAlignment and ProximityВидеоHierarchy and RepetitionВидеоEssential Principles of UI/UX DesignЧтениеActivity: CSS in Front-End EngineeringЗаданиеActivity: CSS in Front-End Engineering - Answer KeyЧтениеPractice Quiz: Essential Principles of UI/UX DesignЗадание

User-Centered Design Principles for Front-End Engineers

User Needs in Front-End DevelopmentВидеоCreating and Using User PersonasВидеоDesigning for UsabilityВидеоActivity: Create a User PersonaЗаданиеActivity: Create a User Persona - Answer KeyЧтениеUser-Centered Design Principles for Front-End EngineersЧтениеPractice Quiz: User-Centered Design Principles for Front-End EngineersЗадание

Accessibility Best Practices for Front-End Engineers

Accessibility in UI/UXВидеоAccessibility Guidelines for Front-End EngineersВидеоPractical Accessibility TechniquesВидеоAccessibility Guidelines for Front-End EngineersЧтениеPractical Accessibility TechniquesЧтениеEnhancing Accessibility of an Existing Web Page with CSS and HTMLВидеоGuided Lab: Enhancing Accessibility of an Existing Web Page with CSS and HTMLPLUGINYou Try It! Enhancing Accessibility of an Existing Web Page with CSS and HTMLЛабораторнаяYou Try It! Enhancing Accessibility of an Existing Web Page with CSS and HTML - Answer KeyЧтениеPractice Quiz: Accessibility Best Practices for Front-End EngineersЗадание

Applying Design Thinking in Front-End Development

Design Thinking for Front-End EngineersВидеоStages of the Design Thinking ProcessВидеоApplying Design Thinking to Real-World Front-End ChallengesВидеоApplying Design Thinking in Front-End DevelopmentЧтениеActivity: Addressing UI/UX ChallengesЗаданиеPractice Quiz: Applying Design Thinking in Front-End DevelopmentЗаданиеGraded Quiz: Principles of UI/UX DesignЗаданиеConclusion: Principles of UI/UX DesignВидео
02Using Design Tools like Figma or Adobe XD for Mockups32 материалов

Prototyping and Interaction Design Principles for Front-End Engineers

Introduction to Using Design Tools like Figma or Adobe XD for MockupsВидеоPrototypingВидеоPrinciples of Interaction DesignВидеоPrototyping for Front-End DevelopmentВидеоPrototyping and Interaction Design Principles for Front-End EngineersЧтениеPractice Quiz: Prototyping and Interaction Design Principles for Front-End EngineersЗадание

Leveraging Design Tools for UI/UX Development

Introduction to Design ToolsВидеоKey Features of Figma and Adobe XDВидеоUsing Design Tools for DevelopmentВидеоLeveraging Design Tools for UI/UX DevelopmentЧтениеActivity: Using Microsoft Copilot to Generate UI/UX Code SnippetsЗаданиеActivity: Using Microsoft Copilot to Generate UI/UX Code Snippets - Answer KeyЧтение

Creating Effective Wireframes for UI/UX Design

The Role of Wireframes in DesignВидеоTools and Techniques for Creating WireframesВидеоBest Practices in WireframingВидеоCreating Effective Wireframes for UI/UX DesignЧтениеActivity: Creating a WireframeЗаданиеPractice Quiz: Creating Effective Wireframes for UI/UX DesignЗадание

Designing High-Fidelity Mockups for Realistic UI Representation

From Wireframes to High-Fidelity MockupsВидеоKey Elements of High-Fidelity MockupsВидеоTools for Creating High-Fidelity MockupsВидеоDesigning High-Fidelity Mockups for Realistic UI RepresentationЧтениеActivity: High Fidelity MockupЗаданиеPractice Quiz: Designing High-Fidelity Mockups for Realistic UI RepresentationЗадание

Collaborating and Sharing UI/UX Designs Effectively

The Importance of Collaboration in DesignВидеоTools for Collaboration and FeedbackВидеоBest Practices for Collaborative DesignВидеоCollaborating and Sharing UI/UX Designs EffectivelyЧтениеPractice Quiz: Collaborating and Sharing UI/UX Designs EffectivelyЗаданиеGraded Quiz: Using Design Tools like Figma or Adobe XD for MockupsЗадание
03Implementing Responsive Design Using CSS38 материалов

Responsive Design Principles

Introduction: Implementing Responsive Design Using CSSВидеоResponsive DesignВидеоDescribe the Key Benefits of Implementing Responsive DesignВидеоDifferences Between Responsive and Adaptive Design ApproachesВидеоResponsive Design PrinciplesЧтениеPractice Quiz: Responsive Design PrinciplesЗадание

Mastering Media Queries for Responsive Design

Media QueriesВидеоCommon Use Cases for Media QueriesВидеоBest Practices for Writing Media QueriesВидеоMastering Media Queries for Responsive DesignЧтениеCreating a Responsive Webpage Using Media QueriesВидеоGuided Lab: Creating a Responsive Webpage Using Media QueriesPLUGIN

Techniques for Building Responsive Layouts

Using Flexbox for Responsive DesignВидеоUsing Flexbox for Responsive DesignЧтениеUsing CSS Grid for Responsive DesignВидеоUsing CSS Grid for Responsive DesignЧтениеCombining Flexbox and Grid for Complex LayoutsВидеоBuilding Responsive Layouts with Flexbox and GridВидео

Principles of Mobile-First Design

What is Mobile-First Design?ВидеоBenefits of Mobile-First DesignВидеоImplementing Mobile-First Design in PracticeВидеоPrinciples of Mobile-First DesignЧтениеPractice Quiz: Principles of Mobile-First DesignЗадание

Testing and Validating Responsive Designs

Tools for Testing Responsive DesignВидеоBest Practices for Responsive TestingВидеоDocumenting and Addressing Responsive IssuesВидеоTesting and Validating Responsive DesignsЧтениеActivity: Test Responsive LayoutsЗаданиеPractice Quiz: Testing and Validating Responsive DesignsЗадание
04Using Microsoft Copilot for Generating CSS and Design Suggestions18 материалов

Enhancing CSS with Microsoft Copilot

Introduction: Using Microsoft Copilot for Generating CSS and Design SuggestionsВидеоIntroduction to Using Copilot for CSSВидеоGenerating Advanced CSS Techniques with CopilotВидеоOptimizing Existing CSS CodeВидеоActivity: Writing and Enhancing CSS with Microsoft CopilotЗадание

Generating Responsive Design with Microsoft Copilot

Responsive Design with CopilotВидеоImplementing Copilot's Responsive Design SuggestionsВидеоEvaluating Responsive Design EnhancementsВидеоActivity: Generate Responsive Design Suggestions with Microsoft CopilotЗадание

Optimizing UI/UX Design with Microsoft Copilot

Enhancing User Interaction with CopilotВидеоImproving Visual Aesthetics with CopilotВидеоIncorporating Feedback to Optimize UI/UXВидеоActivity: Enhancing UI/UX Design Using Microsoft CopilotЗадание

Integrating Microsoft Copilot into the Design Workflow

Integrating Copilot into Daily WorkflowВидеоUsing Copilot for Project ManagementВидеоFinalizing a Design Project with CopilotВидеоSubmit Your ProjectВзаимная проверкаCourse Conclusion: UI/UX PrinciplesВидео
Practice Quiz: Leveraging Design Tools for UI/UX DevelopmentЗадание
Conclusion: Using Design Tools like Figma or Adobe XD for MockupsВидео
You Try It! Creating a Responsive Webpage Using Media QueriesЛабораторная
You Try It! Creating a Responsive Webpage Using Media Queries - Answer KeyЧтение
Practice Quiz: Mastering Media Queries for Responsive DesignЗадание
Guided Lab: Building Responsive Layouts with Flexbox and GridPLUGIN
You Try It! Building Responsive Layouts with Flexbox and GridЛабораторная
You Try It! Building Responsive Layouts with Flexbox and Grid - Answer KeyЧтение
Practice Quiz: Techniques for Building Responsive LayoutsЗадание
Graded Quiz: Implementing Responsive Design using CSSЗадание
Conclusion: Implementing Responsive Design Using CSSВидео