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

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

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

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

High-Fidelity UI Design

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

О курсе

Learn how to transform wireframes into polished, high-fidelity user interface designs using modern visual design principles and industry-standard tools. In this course, you’ll apply concepts such as visual hierarchy, alignment, scale, and layout structure to arrange content and interface components effectively. You’ll also explore how brand guidelines for typography, color, and spacing create consistent and visually cohesive digital experiences. As you progress, you’ll use Figma and digital UI design environments to translate low-fidelity wireframes into detailed mockups. You’ll learn how to apply components from a design system to construct interface screens and use layout techniques such as grids, containment, and spacing to refine your designs. The course also introduces generative AI tools that can help generate design concepts and visual assets during the UI design process. This multi-author experience brings together insights from expert instructors who share diverse approaches to modern UI design workflows. Ideal for aspiring UX and UI designers who want to build practical skills in creating high-fidelity mockups and visually consistent interface designs.

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

TypographyDesign Elements And PrinciplesGenerative AIDigital DesignColor TheoryWireframingGraphic and Visual DesignLayout DesignUser Experience DesignUser Interface (UI) DesignUser Interface and User Experience (UI/UX) DesignMockupsUI ComponentsStyle GuidesFigma (Design Software)

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

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

01Start Here: Get Oriented and Check Your Skills2 материалов
Start Here: How This Skill-Based Course WorksЧтениеSkill Diagnostic: Find Your Recommended Starting PointЗадание
02Applying Visual Design Principles to Mockups23 материалов

Apply visual design principles to mockups (part 1)

Emphasis in UX designВидео

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

Professionals from the Industry

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

High-Fidelity UI Design
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 15 ч

8 модулей

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

Субтитры: Арабский, Французский, Украинский, Бразильский португальский, Корейский, Немецкий, Индонезийский, Турецкий, Испанский, Японский

Часть программы вашего университета
Use emphasis in mockupsЧтение
Hierarchy in UX designВидео
Use hierarchy in mockupsЧтение
Test your knowledge on emphasis and hierarchyЗадание

Apply visual design principles to mockups (part 2)

Scale and proportion in UX designВидеоUse scale and proportion in mockups ЧтениеTest your knowledge on scale and proportionЗаданиеUnity and variety in UX designВидеоUse unity and variety in mockups ЧтениеTest your knowledge on unity and variety ЗаданиеReview: Apply visual design principles to project mockupsЧтение

Refine mockup designs

Apply Gestalt Principles to mockupsВидеоLearn about additional Gestalt Principles ЧтениеTest your knowledge of Gestalt PrinciplesЗаданиеReview: Apply Gestalt principles to project mockupsЧтениеApply visual design principlesPLUGINReflect on your progress ВидеоConsider additional visual design elements and principles ЧтениеLearn about interface design principles ЧтениеInclude navigation in mockupsЧтениеSelf-Reflection: Include navigation in your mockupsЗадание

Review

Glossary termsЧтение
03Exploring Design Systems 15 материалов

Understand design systems

Introduction to design systemsВидеоBenefits of design systems ВидеоTest your knowledge on design systemsЗаданиеGoogle's design system: Material Design ВидеоShopify's design system: Polaris ВидеоExplore popular design systems ЧтениеTest your knowledge on features of open-source design systemsЗадание

Create a sticker sheet

Create a sticker sheet in FigmaВидеоCreate sticker sheets for design projectsЧтение

Use design systems

Use a design system library in FigmaВидеоGet inspiration from design systemsЧтениеOptional - Learn from Figma - Use a design system libraryЧтениеTest your knowledge on working with design systems in FigmaЗаданиеShabi - Consider assistive technologies when working in design systemsВидео

Review

Glossary termsЧтение
04Skill Assessment 13 материалов

Lesson

Practice for Analytics Dashboard Information HierarchyЗаданиеLearner Expectations for AssessmentЧтениеCheckpoint 1 of 3 - Analytics Dashboard Information HierarchyЗадание
05Starting to Create Mockups40 материалов

Introduction

Kunal - My journey to UXВидео

Begin to create a mockup

WelcomeВидеоIntroduction to mockups ВидеоChikezie - Transition from low-fidelity to high-fidelity designs ВидеоFoundational skills to build mockups in FigmaЧтениеReview: Use low-fidelity designs to start project mockupsЧтение

Use typography in mockups

Introduction to foundational elements of visual design ВидеоTypography in UX designВидеоThe importance of typography ВидеоTest your knowledge of typographyЗаданиеWork with type in mockupsЧтениеAdd product copy to mockupsЧтение

Use color in mockups

Color in UX designВидеоTest your knowledge on colorЗаданиеWork with color in mockups ЧтениеAccessibility considerations for colorЧтениеReview: Add color to project mockupsЧтение

Use iconography in mockups

Iconography in UX designВидеоWork with icons in mockups ЧтениеReview: Add icons to project mockupsЧтениеBuild a mockup from foundational elementsPLUGINLearn about more visual design elements ЧтениеAdd images to your mockupsВидео

Understand page layouts - grids and containment

Introduction to layoutsВидеоUse grids to guide layouts ВидеоCreate grids in mockupsЧтениеReview: Create grids in project mockupsЧтениеUse containment in layoutsВидеоCreate containment in mockupsЧтение

Understand page layouts - negative space

Use negative (white) space in layoutsВидеоUse negative space in mockupsЧтениеTest your knowledge on containment and negative space in designPLUGINReview: Revise project mockups by adding negative spaceЧтениеCommon design patterns in appsЧтениеSelf-Reflection: Share what you've learned about page layoutsЗадание

Review

Glossary termsЧтение
06Skill Assessment 23 материалов

Lesson

Practice for Figma Design System ImplementationЗаданиеLearner Expectations for AssessmentЧтениеCheckpoint 2 of 3 - Figma Design System ImplementationЗадание
07Finding a UX Job29 материалов

AI in UX design

Introduction to AI for UX designЧтениеPaolo: Driving impact with AI in the workplaceВидеоUse generative AI to work smarter and fasterЧтениеBoost your UX design skills with AIВидеоGenerate personas with help from AIВидеоUse AI to help with design iterationВидеоImprove stakeholder communication with AIВидеоSimplify complex frameworks using AIВидеоUse AI to help write your portfolio copyВидеоKeep your projects organized with NotebookLMВидеоActivity: Use AI to create a user journey mapЗаданиеKey takeaways for AI in UX designЧтениеIntroducing Google AI EssentialsВидео

Portfolio project

Introduction to website buildersВидеоExplore website builders for your portfolioЧтениеPlan your portfolio websiteЧтениеIntroduction to best practices for UX design portfoliosВидеоStart your online portfolioЧтениеConclusion to the portfolio project guideЧтение

Review

GlossaryЧтение
08Skill Assessment 32 материалов

Lesson

Learner Expectations for AssessmentЧтениеCheckpoint 3 of 3 - AI Prompt Refinement for UIЗадание
Review: Add typography to project mockupsЧтение
Find stock images for mockupsЧтение
Additional design considerationsЧтение
Review: Create containment in project mockupsЧтение
Capstone video guide for building new portfolio projects - Part 1Видео
Capstone video guide for building new portfolio projects - Part 2Видео
Prepare a UX portfolio for job applicationsВидео
Publish case studies to a portfolio websiteЧтение
Tailor a portfolio for types of jobs Чтение
Learn more about UX specializationsЧтение
Finalize your UX portfolio for job applicationsЧтение
Test your knowledge on UX portfoliosЗадание
Activity: Finish your UX portfolioЗадание