Stepik Веб-дизайн в Figma 2025. Основы UI/UX дизайна на практике
О курсе
Подробнее
Становимся веб-дизайнерами в FIGMA. От основ и теории до применения знаний на практике.
Это самый наполненный курс по веб-дизайну на русском языке. Я собрал весь свой опыт, который получил за 10 лет практики с русскими и иностранными клиентами.
⚡️ С нуля до PRO
Мы пройдем полный курс от новичка до уверенного веб-дизайнера, который готов выполнять рабочие проекты и защищать свои решения.
🔥 Два готовых проекта в портфолио
Мы создадим адаптивный макет под основные разрешения смартфонов и планшетов. Создадим стайл гайд для разработчиков и полностью подготовим работу к верстке.
В конце я помогу тебе создать презентацию твоей работы и мы вместе выложим ее на бихайнс. У тебя будет работа в портфеле, которую можно показывать потенциальным заказчикам.
🔥 Курс по FIGMA в подарок
Если даже ты не знаешь программу или хочешь освежить знания, то в подарок ты получишь курс по FIGMA совершенно бесплатно.
В курсе есть большой модуль по Figma в котором мы полностью разберем основные инструменты программы.
Для максимального эффекта от обучения курс состоит не только из видео уроков, но и из статей и домашних заданий. Без выполнения ДЗ теряется смысл обучения. Простой просмотр видео не даст 100% результата, только работа и практика сделают из тебя настоящего веб дизайнера.
Требования
Что нужно для старта
- Желание изучить Веб дизайн
- Компьютер и Интернет
Результат
Что вы получите
- Основы веб дизайна
- Углубленное изучение Figma
- Введение в типографику
- Прототипирование
- Создание Лендинга по ТЗ
- Создание Интернет Магазина по ТЗ
- Исследование продукта
- Понимание целевой аудитории
- Создание презентации своей работы
- План развития в профессии
- Способы заработка для веб дизайнера
- Создание концептов сайтов
Аудитория
Для кого этот курс
- для тех, кто никогда не изучал веб дизайн, но хотел бы начать;
- для начинающих веб дизайнеров;
- для тех, кто хочет узнать о процессе создания дизайна больше, чем дает ютуб и бесплатные курсы.
- для тех, кто хочет сменить профессию.
Содержание
12 занятийПрограмма курса
№ТемаЧто внутри
01Знакомство с Figma. Простые инструменты
Подробности будут доступны на странице курса
02Продвинутые инструменты Figma
- Стили. Цвет
- ПРАКТИКА. Стили Текст
- Стили. Эффект
- Constraints (Ограничения/привязки) Часть 1
- Constraints (Ограничения/привязки) Часть 2
- Сетки. Часть 1
- ПРАКТИКА. Работа с сетками и привязками Часть 1
- ПРАКТИКА. Работа с сетками и привязками Часть 2
- ПРАКТИКА. Работа с сетками и привязками Часть 3
- Auto Layout
- Auto Layout. Базовые настройки
- Auto Layout. Примеры использования
- ПРАКТИКА. Auto Layout Сложный пример работы
- ПРАКТИКА. Auto Layout делаем адаптив
- ПРАКТИКА. Auto Layout Адаптив блока с карточками
- Компоненты
- Компоненты. Удобная организация
- Компоненты. Свойства компонентов
- Компоненты. Варианты компонентов
- Переменные
- Переменные. Зона видимости
- ПРАКТИКА Переменные. Организация переменныех
03Практика работы в Figma
- Основа атомарного дизайна
- Анализ проекта
- Создание токенов. Текст
- Создание токенов. Цвет
- Создание атомов. Иконки
- Создание молекул
- Создание организмов. Хедер
- ПРАКТИКА Создание организмов. Сайд Бар
- Создание организмов. Виджет Юзера
- ПРАКТИКА Создание организмов. Виджет Группа
- Создание виджета. Пост
- ПРАКТИКА Создание организмов Виджет Пост 2
- Последний урок модуля
04Теория Веб-Дизайна
- Типографика Введение
- Типографика. Урок 2
- Типографика Душним
- Типографика. Установка шрифтов
- Типографика. Точки Управления
- Типографика. Практика + ДЗ
- ПРАКТИКА Типографика. Часть 1
- ПРАКТИКА Типографика. Часть 2
- ПРАКТИКА Типографика. Часть 3
- ПРАКТИКА Типографика. Часть 4
- ПРАКТИКА Типографика. Часть 5
- Информационная иерархия в UI дизайне
- Тест по типографике
- Сетки и направляющие
- Теория цвета
- Где брать картинки для веб дизайна
- Как подбирать картинки для проектов
- Выравнивание объектов
- Правило внутреннего и внешнего
- Иерархия в веб дизайне
05Практика. Создание дизайн концепции сайта(Шот)
- Что такое дизайн концепт
- Практика создания дизайн концепта сайта
06Практика. Создание Лендинга. Бюджет 650$
- Техническое задание проекта(ТЗ)
- UX Часть нашего проекта
- Подробнее о брифах
- Порядок выполнения проекта
- Определение целевой аудитории
- Аналитика конкурентов
- Создание прототипа сайта. Теория
- Создание прототипа сайта. Практика
- Создание концепта сайта
- Создаем блоки с информацией
- Создаем блок тарифов, форму связи и футер
- Работа со слоями. Доработка дизайна.
- Адаптив дизайна под планшет
- Создание мобильной версии дизайна
- Создание модальных окон + ДЗ
- Готовим работу к верстке. Стайл Гайд + ДЗ
- Этапы работы над проектом на фрилансе
- Создание личного кабинета
07Практика. Создания дизайна интернет магазина. Бюджет $1200
- Получение ТЗ
- Создание концепта интернет магазина
- Создание основных блоков главной страницы
- Создание рекламного баннера и формы подписки
- Создание футера
- Проверка дизайна главной
- Страница выдачи товара
- Создание страницы товара. Карточка товара
- Создание модального окна
- Создание корзины
- Создаем страницу оплаты
08Создание кликабельного макета.
- Введение в прототипирование в Figma
- Создание кликабельного макета
09Адаптивная версия дизайна интернет магазина
- Адаптация главной
- Адаптив страницы выдачи товаров
- Адаптив карточки товара + ДЗ
- Адаптив корзины
- Адаптив страницы оплаты
- Создаем открытое меню в мобильной версии сайта
- Проверка на ошибки
10Создание стайл гайда
- Создание стайл гайда
11Оформление работ в портфолио
- Обзор кейсов
- Оформление кейса по лендингу
- Презентация кейса
12Что делать дальше
- Где и как искать работу Веб дизайнеру
- Не очевидные способы способы дохода для веб дизайнера
01Знакомство с Figma. Простые инструменты
02Продвинутые инструменты Figma
- Стили. Цвет
- ПРАКТИКА. Стили Текст
- Стили. Эффект
- Constraints (Ограничения/привязки) Часть 1
- Constraints (Ограничения/привязки) Часть 2
- Сетки. Часть 1
- ПРАКТИКА. Работа с сетками и привязками Часть 1
- ПРАКТИКА. Работа с сетками и привязками Часть 2
- ПРАКТИКА. Работа с сетками и привязками Часть 3
- Auto Layout
- Auto Layout. Базовые настройки
- Auto Layout. Примеры использования
- ПРАКТИКА. Auto Layout Сложный пример работы
- ПРАКТИКА. Auto Layout делаем адаптив
- ПРАКТИКА. Auto Layout Адаптив блока с карточками
- Компоненты
- Компоненты. Удобная организация
- Компоненты. Свойства компонентов
- Компоненты. Варианты компонентов
- Переменные
- Переменные. Зона видимости
- ПРАКТИКА Переменные. Организация переменныех
03Практика работы в Figma
- Основа атомарного дизайна
- Анализ проекта
- Создание токенов. Текст
- Создание токенов. Цвет
- Создание атомов. Иконки
- Создание молекул
- Создание организмов. Хедер
- ПРАКТИКА Создание организмов. Сайд Бар
- Создание организмов. Виджет Юзера
- ПРАКТИКА Создание организмов. Виджет Группа
- Создание виджета. Пост
- ПРАКТИКА Создание организмов Виджет Пост 2
- Последний урок модуля
04Теория Веб-Дизайна
- Типографика Введение
- Типографика. Урок 2
- Типографика Душним
- Типографика. Установка шрифтов
- Типографика. Точки Управления
- Типографика. Практика + ДЗ
- ПРАКТИКА Типографика. Часть 1
- ПРАКТИКА Типографика. Часть 2
- ПРАКТИКА Типографика. Часть 3
- ПРАКТИКА Типографика. Часть 4
- ПРАКТИКА Типографика. Часть 5
- Информационная иерархия в UI дизайне
- Тест по типографике
- Сетки и направляющие
- Теория цвета
- Где брать картинки для веб дизайна
- Как подбирать картинки для проектов
- Выравнивание объектов
- Правило внутреннего и внешнего
- Иерархия в веб дизайне
05Практика. Создание дизайн концепции сайта(Шот)
- Что такое дизайн концепт
- Практика создания дизайн концепта сайта
06Практика. Создание Лендинга. Бюджет 650$
- Техническое задание проекта(ТЗ)
- UX Часть нашего проекта
- Подробнее о брифах
- Порядок выполнения проекта
- Определение целевой аудитории
- Аналитика конкурентов
- Создание прототипа сайта. Теория
- Создание прототипа сайта. Практика
- Создание концепта сайта
- Создаем блоки с информацией
- Создаем блок тарифов, форму связи и футер
- Работа со слоями. Доработка дизайна.
- Адаптив дизайна под планшет
- Создание мобильной версии дизайна
- Создание модальных окон + ДЗ
- Готовим работу к верстке. Стайл Гайд + ДЗ
- Этапы работы над проектом на фрилансе
- Создание личного кабинета
07Практика. Создания дизайна интернет магазина. Бюджет $1200
- Получение ТЗ
- Создание концепта интернет магазина
- Создание основных блоков главной страницы
- Создание рекламного баннера и формы подписки
- Создание футера
- Проверка дизайна главной
- Страница выдачи товара
- Создание страницы товара. Карточка товара
- Создание модального окна
- Создание корзины
- Создаем страницу оплаты
08Создание кликабельного макета.
- Введение в прототипирование в Figma
- Создание кликабельного макета
09Адаптивная версия дизайна интернет магазина
- Адаптация главной
- Адаптив страницы выдачи товаров
- Адаптив карточки товара + ДЗ
- Адаптив корзины
- Адаптив страницы оплаты
- Создаем открытое меню в мобильной версии сайта
- Проверка на ошибки
10Создание стайл гайда
- Создание стайл гайда
11Оформление работ в портфолио
- Обзор кейсов
- Оформление кейса по лендингу
- Презентация кейса
12Что делать дальше
- Где и как искать работу Веб дизайнеру
- Не очевидные способы способы дохода для веб дизайнера
Документ после выпуска
Сертификат Stepik
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Веб-дизайн в Figma 2025. Основы UI/UX дизайна на практике» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 28 июля 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
