​

Одна из самых восстребованных цифровых профессий современности - product designer, она же продуктовый дизайнер. Product Design это следующая ступень развития веб дизайна и UX/UI дизайна, за которую, естественно, платят гораздо больше.

Чем занимается продуктовый дизайнер


С помощью дизайна решает проблемы клиентов и улучшает показатели бизнеса. Для этого он вместе с командой разрабатывает интерфейсы цифровых продуктов: сайтов, приложений, онлайн-сервисов.

• Организует или проводит интервью с пользователями, тестирования, анкетирования и другие исследования
• Продумывает логику взаимодействия с продуктом и создаёт прототипы
• Анализирует результаты и на основе аналитики продолжает улучшать продукт

Спойлер: Программа

Регулярно обновляем её вместе с действующими дизайнерами и руководителями продуктовых команд — чтобы вы изучали только актуальные инструменты и методы
8 тем・8 часов
Бесплатно
Каково быть продуктовым дизайнером
Это бесплатная вводная часть: попробуете себя в роли продуктового дизайнера и поймёте, хотите ли развиваться в этом направлении

• UX/UI-дизайн
• Figma
• CJM
• Продуктовое мышление
• Карьера

О профессии
Кто такой продуктовый дизайнер, карьера на стыке IT, дизайна и бизнеса
Дизайн и продукт
Продуктовые и проектные компании, продуктовое мышление, продуктовая команда
Дизайн и исследования
Сигналы и продуктовые гипотезы, цели и виды исследований, как применить их результаты, взаимодействие с UX-исследователями
Дизайн и… дизайн
Промышленный и цифровой дизайн, знакомство с Figma, UI-кит, компонентный подход, взаимодействие с дизайнерами интерфейсов
Дизайн и разработка
Что такое код, взаимодействие с разработчиками
Дизайн и маркетинг
Коммуникационный дизайн, карта пользовательских путешествий, взаимодействие с маркетологами
Дизайн и аналитика
Влияние дизайна на бизнес, как измерять результаты изменений в дизайне, веб-аналитика, взаимодействие с аналитиками
Как учиться
Для кого этот курс, как он устроен, примеры работ выпускников, помощь с поиском работы
Увидите, что делает продуктовый дизайнер на каждом этапе работы над продуктом. Поймёте, что нужно знать и уметь, чтобы вести продукт к успеху

1
1 проект・2 недели
Введение в прототипирование
Сделаете первые шаги в Figma, познакомитесь с метриками и узнаете, как дизайн связан с эффективностью цифровых продуктов.

• Figma
• Пиратские метрики
• Визуальный вес
• Доминанта
• Сетки
• Expoze
• Лендинг

Анатомия лендинга и метрики
Что такое лендинг, виды лендингов, из чего складывается лендинг: первый экран, информация о продукте, форма, хедер и футер
Базовые инструменты Figma
Введение в Figma, работа с макетом
Композиция 1.0
Композиция в дизайне, как она влияет на метрики, на что опираться, продумывая композицию
Сетки 1.0
Знакомство и работа с сетками
Тепловые карты
Что такое тепловые карты, их виды
С помощью тепловых карт проанализируете проблему с конверсией на лендинге и сделаете его редизайн

2
1 проект・2 недели
Компонентный подход в Figma
Узнаете, как связать ключевые бизнес-метрики с метриками дизайн-задачи. Изучите текстовые и цветовые приёмы в интерфейсном дизайне, закрепите навыки в Figma.

• Notion
• Story Mapping
• Компоненты
• UI-кит
• Экранная инфографика
• Интерфейсные стили
• Цветовые сочетания
• Дизайн дашбордов

Бэклог
Что такое бэклог, связь метрик и задач
Figma 1.0
Стили в Figma, введение в Auto Layout
Компоненты 1.0
Компонентный подход, UI-кит
Вёрстка текста
Система типографики и отступов, шрифт, стили заголовков, текстовые и интерфейсные стили, библиотека стилей в Figma, вёрстка
Цвет
Знакомство с понятием цвета, работа с палитрами, подбор цветовых сочетаний
Проанализируете метрики продукта, найдёте ошибку в дашборде и сделаете его редизайн

3
1 проект・2 недели
Анимация прототипов в Figma
Знакомство с кодом: научитесь готовить документацию для передачи макета в разработку. А ещё освоите способы анимации в Figma.

• Коммуникация со стейкхолдерами
• Анимация
• Прототипирование
• HTML и CSS

Кликабельный прототип
Введение в кликабельные прототипы, анимация прототипа
Передача макета в разработку
Знакомство с документацией, подготовка макета для разработчика
Введение в HTML и CSS
Фронтенд и бэкенд, связь HTML и CSS, инструменты разработчика, анимация в коде
Создадите анимированный прототип приложения и передадите макет разработчикам

4
1 проект・2 недели
Пользовательские портреты и сценарии
Научитесь проводить исследования, чтобы лучше понимать поведение пользователей и влиять на их действия в интерфейсе.

• User Story
• Фреймворк «Персона»
• Интервью

Бизнес-требования и пользовательские истории
Постановка задачи, портрет пользователя, пользовательские истории
Качественные исследования: интервью
Подготовка, проведение и анализ результатов
Пользовательские сценарии
Знакомство с пользовательскими сценариями, их анализ и дополнение
Проведёте интервью с пользователями интернет-магазина и создадите новый сценарий их действий

5
1 проект・2 недели
Разработка лендинга под репозиционирование бизнеса
Коммуникационная сфера работы дизайнера: узнаете, как с помощью визуальных приёмов транслировать аудитории нужные смыслы и влиять на эффективность цифровых продуктов.

• Целевая аудитория
• Референсы
• Мудборд
• Консистентность
• Ритмичность композиции
• Шрифты и лицензии

Позиционирование продукта
Связь позиционирования и дизайна, работа над лендингом
Лендинг и работа с изображениями
Поиск и подбор консистентных дизайну изображений, авторские права
Продвинутая композиция
Основные правила композиции, статика, динамика, ритмичность, работа с пустым пространством
Основы типографики
Что такое типографика, анатомия текста, как подобрать шрифт
С нуля разработаете дизайн лендинга для нового позиционирования продукта

6
1 проект・3 недели
Маркетинг в продуктовом дизайне
Продолжите изучать визуальную коммуникацию и ещё больше углубитесь в связь между дизайном продукта и бизнесом.

• Lean Canvas
• Брендбук
• Аргументация дизайн-решений
• Мобильные приложения

Мобильные приложения
Насмотренность в мобильных интерфейсах, мобильные гайдлайны
Бизнес и визуальный дизайн
Бизнес-модели, работа с брендбуком
Как работать с адаптивностью
Адаптивный дизайн, адаптивный макет в Figma, сетки 2.0
Как презентовать свою работу
Аргументация решений, презентация кейсов, видеопитч
Разработаете интерфейс мобильного приложения и дизайн лендинга в 2 версиях: для десктопа и для смартфона, презентуете работу стейкхолдерам

7
1 проект・2 недели
Улучшение этапа CJM через Userflow
Научитесь строить гипотезы на основе аналитики и проверять их с помощью быстрых исследований. Углубитесь в Figma, чтобы повысить скорость и качество создания дизайн-макетов.

• Customer Journey Map
• Users Flow
• Miro
• Google Analytics
• Коридорные исследования
• Auto Layout
• Дизайн-система

Анализ пути пользователя
Знакомство с CJM, аналитика и CJM
Прототипирование и его детали
Знакомство с дизайн-системами, Auto Layout в компонентах и персональный вклад в дизайн-систему
Кликабельный прототип 2.0
Эвристики и паттерны юзабилити, связь детальности прототипов и точности тестирования
Коридорные исследования
Теория коридорных исследований, как их проводить
Создадите прототип и протестируете его с помощью коридорного исследования, на основе полученных данных улучшите дизайн-макеты

8
1 проект・3 недели
Улучшение этапа CJM в коде
Выйдете за рамки Figma и немного потренируетесь с кодом.

• GitHub Pages
• Vercel
• Яндекс Метрики

Вёрстка 2.0
Библиотека компонентов разработки, как быстро собрать интерфейс из веб-компонентов
Релиз проекта
Интернет и системы версионирования, работа с GitHub, установка веб-аналитики
Сверстаете страницу продукта в HTML и CSS, установите на неё Яндекс Метрику

9
1 проект・2 недели
Дизайн новой фичи существующего продукта
Узнаете, как анализировать юнит-экономику проекта. Поймёте связь гипотез и метрик. Научитесь собирать данные в новой предметной области.

• Юнит-экономика
• LTV
• CAC
• Функциональность variants

Самостоятельное погружение в задачу
Юнит-экономика 1.0, продуктовые гипотезы и метрики, предметная область продукта
Кликабельный прототип 3.0
Создание UI-кита, функциональность variants в Figma
Проанализируете юнит-экономику, разработаете новую фичу для страницы оплаты, соберёте полноценный UI-кит

10
1 проект・2 недели
Сигнал и формулирование гипотез
Начнёте изучение полного цикла продуктовой разработки, начиная с формулирования гипотез

• Коммуникация в команде
• Фреймворк DACI
• Product-market fit
• Техники мозгового штурма

Цикл продуктовой разработки
Коммуникация в команде, продуктовый цикл и продуктовый менеджмент
Сбор информации
Сигналы для построения гипотез, поиск проблемной области по внешним сигналам, Product-market fit, иерархия целей в компании
Формулирование продуктовых гипотез
Генерация и гигиена продуктовых гипотез
Проанализируете задачу заказчика, сформулируете гипотезы по улучшению CJM в проблемной области

11
1 проект・2 недели
Скоринг и валидация
Сформируете бэклог и превратите гипотезы из предыдущего спринта в задачи.

• Модель ICE
• Методы MoSCoW
• Скоринг
• Груминг
• Демо
• Ревью
• Ретроспектива

Формирование историй и их скоринг
Конструирование историй из гипотез, методы скоринга и приоритизации задач
Наполнение и оценка задач
Отбор задач для груминга, оценка трудоёмкости задачи, финальная формулировка задачи
Подготовите отчёт по исследованиям в продукте, выберете гипотезу для работы и презентуете её стейкхолдерам

12
1 проект・2 недели
Прототипирование
Перейдёте от гипотез к дизайну, узнаете, как собирать информацию внутри бизнеса. Разберёте 2 больших источника данных: бизнес-модели и финмодели.

• Бриф
• Вайрфреймы
• Material design
• HIG

Анализ требований бизнеса
Сбор информации внутри бизнеса
Пользовательские сценарии и вайрфреймы
Создание пользовательского сценария с нуля, что такое вайрфрейм и как его сделать
Дизайн-системы
Структура полноценной дизайн-системы, Material design и HIG, применение принципов дизайн-систем при проектировании
Продумаете новые пользовательские сценарии в продукте, отрисуете вайрфреймы новых экранов и создадите сложные кликабельные прототипы

13
1 проект・2 недели
Валидация и улучшение продукта
Погрузитесь в следующий этап цикла — тестирование. Узнаете, что такое юзабилити и почему это ключевой фактор качества дизайна интерфейса.

• Принципы Дитера Рамса
• Принципы HCD
• Юзабилити-тестирование
• Вебвизор

Принципы юзабилити
Юзабилити и бизнес, юзабилити и доступность
Юзабилити-тестирование
Подходы к юзабилити-тестированию и его проведение
Проведёте юзабилити-тестирование прототипов и доработаете их по его результатам

14
1 проект・2 недели
Передача макетов в разработку
Продолжите создавать спецификации дизайна и научитесь выстраивать отношения с программистами.

• Спецификации
• Проектирование и дизайн
• Definition of Done

Коммуникация с разработкой
Процесс и роли в формировании документации, как дизайнеру говорить с разработкой
Спецификации и техническая документация
Культура документирования проектов, презентация группового кейса
Разработаете спецификации для разработчиков и передадите макет в работу

15
Самостоятельно・4 недели
Итоговый проект
Этот проект станет главным в вашем портфолио и отразит весь цикл продуктовой разработки. На первом этапе вы рассмотрите существующие в экосистеме направления, продуктовое видение компании, общую маркетинговую стратегию, UI-кит и действующие дизайн-решения. Затем выберете продукт внутри экосистемы, исследуете его бизнес-модель, ключевые метрики, целевую аудиторию и части CJM. Проведёте качественные исследования аудитории и юзабилити-тестирование новой фичи. Разработаете продуктовые гипотезы, сверстаете анимированные прототипы, протестируете и улучшите их. Презентуете результаты своей работы, а также дорожную карту дальнейшего развития продукта в рамках экосистемы.

Карьерный центр・от 5 недель
Поиск работы
При поддержке наших HR-специалистов изучите стратегии поиска работы и узнаете о тонкостях выбора компании-работодателя, подготовите портфолио, напишете резюме и сопроводительные письма.

Дополнительно・по желанию
Бонусные модули
Если захотите, сможете изучить ещё 3 темы: основы коммуникационного дизайна, личность бренда и look and feel. Эти знания помогут вашему профессиональному росту.

С наставниками
Воркшопы для отработки ключевых навыков