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

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

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

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

Design Systems

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

О курсе

Learn how to build and apply design systems to create consistent, scalable user interfaces across products and platforms. You’ll strengthen your command of repetition and unity, contribute to existing design systems and style guides, and define interactive behavior and feedback for core UI components to ensure designs look and work coherently. Progressing from foundational interface elements to responsive wireframes and polished mockups, you’ll translate low-fidelity layouts into high-fidelity visual designs and prototypes aligned with product requirements and brand identity. You’ll also practice iterating on mockups using stakeholder and user feedback to refine usability and clarity. Finally, explore how generative AI can support UI/UX work by producing UX writing, visual assets, design concepts, and realistic placeholder content that aligns with an established design system. No specific tools are required beyond a computer with internet access, and you’ll benefit from multiple instructor perspectives across CalArts, Microsoft, and SkillUp. Ideal for aspiring and practicing UI/UX designers who want job-ready design system and interface design capabilities.

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

Human Computer InteractionUsabilityDesign Elements And PrinciplesUser ExperienceUser Interface (UI)Layout DesignUser Interface (UI) DesignMockupsInteractive DesignUser Experience DesignGraphic and Visual DesignDigital DesignResponsive Web DesignDesign ReviewsUser Interface and User Experience (UI/UX) DesignStyle GuidesUsability TestingUI ComponentsInteraction DesignWireframing

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

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

01Start Here: Get Oriented and Check Your Skills2 материалов
Start Here: How This Skill-Based Course WorksЧтениеSkill Diagnostic: Find Your Recommended Starting PointЗадание
02Formal Elements of Interface Design8 материалов

Introduction and Project Brief

Design Before DesignВидео

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

Professionals from the Industry

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

Design Systems
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 19.3 ч

11 модулей

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

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

Часть программы вашего университета
Project BriefЧтение

Formal Elements of an Interface

Look and FeelВидеоLanguage as a design toolВидеоColor and ShapeВидеоImageryВидеоTypographyВидеоIconsВидео
03Design Systems and Style Guides16 материалов

The power of consistency

Module introduction: Design systems and style guidesВидеоThe importance of consistency in UX designВидеоThe benefits of design systemsЧтениеThe challenges of design projectsВидеоThe power of consistencyЗадание

Unveiling design systems

What is a design system?ВидеоAnatomy of a design systemЧтениеDesign system explorationВидеоLive tour Fluent 2 design systemВидеоActivity: Create a simple design systemЗаданиеUnveiling design systemsЗадание

Style guides: The language of design

The role of style guides in design systemsВидеоEssential elements of a style guideЧтениеStyle guide case studyВидеоStyle guides: The language of designЗаданиеProject: Style guide integration for the grocery shopping appЗадание
04Active Elements of Interface Design11 материалов

Static to Active

Static to ActiveВидеоFunctionalityВидеоTry it Yourself: Define the InteractionЧтение

Composing Interaction

Speed and StyleВидеоComposition and StructureВидеоPattern LibrariesЧтение

Points of Interaction

ButtonsВидеоDesigning Better ButtonsЧтениеNot ButtonsВидеоStates and ChangesВидеоTry it Yourself: Examine an interfaceЧтение
05Skills Assessment 13 материалов

Lesson

Practice for Design Systems and Interaction DesignЗаданиеLearner Expectations for AssessmentЧтениеCheckpoint 1 of 3 - Design Systems and Interaction DesignЗадание
06Not Getting Caught up in the Details: Wireframes24 материалов

Introduction to Wireframes

Project BriefЧтениеIntroduction to WireframesВидео

Responsive Design

Responsive Design: What size should your website be?ВидеоScrollingЧтениеFurther ReadingЧтение

Navigation Systems

Navigation SystemsВидеоWayfindingВидеоJakob’s law ЧтениеNavigation SystemsЗадание

Common Design Patterns

Common Web Design PatternsВидеоCommon Form ElementsВидеоResource: Design Patterns CollectionЧтениеCommon Design PatternsЗадание

Homepage Content Strategies

Examples of Homepage Content StrategiesВидео

Build Your Wireframes

Wireframing ToolsВидеоWireframes: BradleyВидеоWireframes: Alyson, part 1ВидеоWireframes: Alyson, part 2ВидеоFurther ReadingЧтениеTry it yourself: Sketch out a wireframeЧтение

How Peer Review Works

What is peer review?ЧтениеWhy Peer Review? ВидеоPeer Review TipsВидеоHow to apply feedback Видео
07Make it Beautiful: The Mockup Phase19 материалов

Introduction to Visual Mockups

Visual MockupsВидео

Design Principles and Whitespace

Design PrinciplesВидеоWhat is whitespace?ВидеоAesthetic Usability EffectЧтениеUsing whitespace to style a formВидеоA visual comparisonВидеоDesign Principles/WhitespaceЗадание

The Grid

The GridЧтение

Web Typography

Web FontsВидеоWeb Typography: A few tipsВидеоFurther ReadingЧтениеWeb TypographyЗадание

Web History, Skeuomorphs & Flat Design

Web History, Skeuomorphs & Flat DesignЧтение

Moodboards

MoodboardsЧтение

Create Your Mockups

Creating Visual MockupsВидеоVisual Mockups ExampleВидеоMoodboards and Homepage Mockup: BradleyВидеоHomepage Mockup: AlysonВидео

Bonus Material

Bonus Material: Interview with Rob Hope on Web Design TrendsВидео
08Design Critiques and User Testing17 материалов

The power of user testing

Module introduction: Design critiques and user testingВидеоWhy user testing mattersВидеоUser testing methods every UX designer should knowЧтениеSetting up a simple user test sessionВидеоThe power of user testingЗадание

User testing strategies

Different types of user testingВидеоCrafting effective user testing questionsЧтениеUser testing reveals unexpected pain points in e-commerce checkoutЧтениеUser testing strategiesЗадание

The art of design critiques

Effective design critiques: Giving and receiving feedbackВидеоThe do's and don'ts of design critiquesЧтениеA critique case studyЧтениеThe art of design critiquesЗадание

Putting it all together

Iterating on designs based on user feedbackВидеоHow design iteration improved a mobile appЧтениеPutting it all togetherЗаданиеDesign critiques and user testingВидео
09Skills Assessment 23 материалов

Lesson

Practice for Responsive UI Design and MockupsЗаданиеLearner Expectations for AssessmentЧтениеCheckpoint 2 of 3 - Responsive UI Design and MockupsЗадание
10Foundations of UI UX Design with Generative AI14 материалов

Fundamentals of UI UX Enhanced by AI

Introduction to Generative AI in UI UX DesignВидеоPodcast: Generative AI for Designers: From Insights to InterfacesPLUGIN[Optional] Reading: Review of Usability and User-Centered DesignPLUGINVisual Hierarchy and Wireframes Using Generative AIВидеоAI-Generated Layout Patterns and Best PracticesВидеоLab: Evaluate and Refine an AI-Generated UI LayoutPLUGINFundamentals of UI UX Enhanced by AIЗадание

UX Ideation with Generative AI

Feature Discovery and Prioritization with Generative AIВидеоAI-Powered Scenarios and MoodboardsВидеоWriting UX Microcopy with Generative AIВидеоReading: Writing Effective Prompts for AI-Driven UX IdeationPLUGINLab: From Moodboard to Microcopy Building a Travel App with AIPLUGINUX Ideation with Generative AIЗадание

Module Summary and Assessment

Summary and Highlights: Foundations of UX UI Design with Generative AIЧтение
11Skills Assessment 33 материалов

Lesson

Practice for Generative AI for UX DesignЗаданиеLearner Expectations for AssessmentЧтениеCheckpoint 3 of 3 - Generative AI for UX DesignЗадание