Продуктовый дизайнер [Яндекс Практикум]
Чем занимается продуктовый дизайнер
С помощью дизайна решает проблемы клиентов и улучшает показатели бизнеса. Для этого он вместе с командой разрабатывает интерфейсы цифровых продуктов: сайтов, приложений, онлайн-сервисов.
Старт курса: 18 января
Одна из самых восстребованных цифровых профессий современности - product design, продуктовый дизайн. Product Designer это следующая ступень развития веб дизайна и UX/UI дизайна, за которую, естественно, платят гораздо больше.Чем занимается продуктовый дизайнер
С помощью дизайна решает проблемы клиентов и улучшает показатели бизнеса. Для этого он вместе с командой разрабатывает интерфейсы цифровых продуктов: сайтов, приложений, онлайн-сервисов.
- Организует или проводит интервью с пользователями, тестирования, анкетирования и другие исследования
- Продумывает логику взаимодействия с продуктом и создаёт прототипы
- Анализирует результаты и на основе аналитики продолжает улучшать продукт
Регулярно обновляем её вместе с действующими дизайнерами и руководителями продуктовых команд — чтобы вы изучали только актуальные инструменты и методы
8 тем・8 часов
Бесплатно
Каково быть продуктовым дизайнером
Это бесплатная вводная часть: попробуете себя в роли продуктового дизайнера и поймёте, хотите ли развиваться в этом направлении
Кто такой продуктовый дизайнер, карьера на стыке IT, дизайна и бизнеса
Дизайн и продукт
Продуктовые и проектные компании, продуктовое мышление, продуктовая команда
Дизайн и исследования
Сигналы и продуктовые гипотезы, цели и виды исследований, как применить их результаты, взаимодействие с UX-исследователями
Дизайн и… дизайн
Промышленный и цифровой дизайн, знакомство с Figma, UI-кит, компонентный подход, взаимодействие с дизайнерами интерфейсов
Дизайн и разработка
Что такое код, взаимодействие с разработчиками
Дизайн и маркетинг
Коммуникационный дизайн, карта пользовательских путешествий, взаимодействие с маркетологами
Дизайн и аналитика
Влияние дизайна на бизнес, как измерять результаты изменений в дизайне, веб-аналитика, взаимодействие с аналитиками
Как учиться
Для кого этот курс, как он устроен, примеры работ выпускников, помощь с поиском работы
Увидите, что делает продуктовый дизайнер на каждом этапе работы над продуктом. Поймёте, что нужно знать и уметь, чтобы вести продукт к успеху
1
1 проект・2 недели
Введение в прототипирование
Сделаете первые шаги в Figma, познакомитесь с метриками и узнаете, как дизайн связан с эффективностью цифровых продуктов.
Что такое лендинг, виды лендингов, из чего складывается лендинг: первый экран, информация о продукте, форма, хедер и футер
Базовые инструменты Figma
Введение в Figma, работа с макетом
Композиция 1.0
Композиция в дизайне, как она влияет на метрики, на что опираться, продумывая композицию
Сетки 1.0
Знакомство и работа с сетками
Тепловые карты
Что такое тепловые карты, их виды
С помощью тепловых карт проанализируете проблему с конверсией на лендинге и сделаете его редизайн
2
1 проект・2 недели
Компонентный подход в Figma
Узнаете, как связать ключевые бизнес-метрики с метриками дизайн-задачи. Изучите текстовые и цветовые приёмы в интерфейсном дизайне, закрепите навыки в Figma.
Что такое бэклог, связь метрик и задач
Figma 1.0
Стили в Figma, введение в Auto Layout
Компоненты 1.0
Компонентный подход, UI-кит
Вёрстка текста
Система типографики и отступов, шрифт, стили заголовков, текстовые и интерфейсные стили, библиотека стилей в Figma, вёрстка
Цвет
Знакомство с понятием цвета, работа с палитрами, подбор цветовых сочетаний
Проанализируете метрики продукта, найдёте ошибку в дашборде и сделаете его редизайн
3
1 проект・2 недели
Анимация прототипов в Figma
Знакомство с кодом: научитесь готовить документацию для передачи макета в разработку. А ещё освоите способы анимации в Figma.
Введение в кликабельные прототипы, анимация прототипа
Передача макета в разработку
Знакомство с документацией, подготовка макета для разработчика
Введение в HTML и CSS
Фронтенд и бэкенд, связь HTML и CSS, инструменты разработчика, анимация в коде
Создадите анимированный прототип приложения и передадите макет разработчикам
4
1 проект・2 недели
Пользовательские портреты и сценарии
Научитесь проводить исследования, чтобы лучше понимать поведение пользователей и влиять на их действия в интерфейсе.
Постановка задачи, портрет пользователя, пользовательские истории
Качественные исследования: интервью
Подготовка, проведение и анализ результатов
Пользовательские сценарии
Знакомство с пользовательскими сценариями, их анализ и дополнение
Проведёте интервью с пользователями интернет-магазина и создадите новый сценарий их действий
5
1 проект・2 недели
Разработка лендинга под репозиционирование бизнеса
Коммуникационная сфера работы дизайнера: узнаете, как с помощью визуальных приёмов транслировать аудитории нужные смыслы и влиять на эффективность цифровых продуктов.
Связь позиционирования и дизайна, работа над лендингом
Лендинг и работа с изображениями
Поиск и подбор консистентных дизайну изображений, авторские права
Продвинутая композиция
Основные правила композиции, статика, динамика, ритмичность, работа с пустым пространством
Основы типографики
Что такое типографика, анатомия текста, как подобрать шрифт
С нуля разработаете дизайн лендинга для нового позиционирования продукта
6
1 проект・3 недели
Маркетинг в продуктовом дизайне
Продолжите изучать визуальную коммуникацию и ещё больше углубитесь в связь между дизайном продукта и бизнесом.
Насмотренность в мобильных интерфейсах, мобильные гайдлайны
Бизнес и визуальный дизайн
Бизнес-модели, работа с брендбуком
Как работать с адаптивностью
Адаптивный дизайн, адаптивный макет в Figma, сетки 2.0
Как презентовать свою работу
Аргументация решений, презентация кейсов, видеопитч
Разработаете интерфейс мобильного приложения и дизайн лендинга в 2 версиях: для десктопа и для смартфона, презентуете работу стейкхолдерам
7
1 проект・2 недели
Улучшение этапа CJM через Userflow
Научитесь строить гипотезы на основе аналитики и проверять их с помощью быстрых исследований. Углубитесь в Figma, чтобы повысить скорость и качество создания дизайн-макетов.
Знакомство с CJM, аналитика и CJM
Прототипирование и его детали
Знакомство с дизайн-системами, Auto Layout в компонентах и персональный вклад в дизайн-систему
Кликабельный прототип 2.0
Эвристики и паттерны юзабилити, связь детальности прототипов и точности тестирования
Коридорные исследования
Теория коридорных исследований, как их проводить
Создадите прототип и протестируете его с помощью коридорного исследования, на основе полученных данных улучшите дизайн-макеты
8
1 проект・3 недели
Улучшение этапа CJM в коде
Выйдете за рамки Figma и немного потренируетесь с кодом.
Библиотека компонентов разработки, как быстро собрать интерфейс из веб-компонентов
Релиз проекта
Интернет и системы версионирования, работа с GitHub, установка веб-аналитики
Сверстаете страницу продукта в HTML и CSS, установите на неё Яндекс Метрику
9
1 проект・2 недели
Дизайн новой фичи существующего продукта
Узнаете, как анализировать юнит-экономику проекта. Поймёте связь гипотез и метрик. Научитесь собирать данные в новой предметной области.
Юнит-экономика 1.0, продуктовые гипотезы и метрики, предметная область продукта
Кликабельный прототип 3.0
Создание UI-кита, функциональность variants в Figma
Проанализируете юнит-экономику, разработаете новую фичу для страницы оплаты, соберёте полноценный UI-кит
10
1 проект・2 недели
Сигнал и формулирование гипотез
Начнёте изучение полного цикла продуктовой разработки, начиная с формулирования гипотез
Коммуникация в команде, продуктовый цикл и продуктовый менеджмент
Сбор информации
Сигналы для построения гипотез, поиск проблемной области по внешним сигналам, Product-market fit, иерархия целей в компании
Формулирование продуктовых гипотез
Генерация и гигиена продуктовых гипотез
Проанализируете задачу заказчика, сформулируете гипотезы по улучшению CJM в проблемной области
11
1 проект・2 недели
Скоринг и валидация
Сформируете бэклог и превратите гипотезы из предыдущего спринта в задачи.
Конструирование историй из гипотез, методы скоринга и приоритизации задач
Наполнение и оценка задач
Отбор задач для груминга, оценка трудоёмкости задачи, финальная формулировка задачи
Подготовите отчёт по исследованиям в продукте, выберете гипотезу для работы и презентуете её стейкхолдерам
12
1 проект・2 недели
Прототипирование
Перейдёте от гипотез к дизайну, узнаете, как собирать информацию внутри бизнеса. Разберёте 2 больших источника данных: бизнес-модели и финмодели.
Сбор информации внутри бизнеса
Пользовательские сценарии и вайрфреймы
Создание пользовательского сценария с нуля, что такое вайрфрейм и как его сделать
Дизайн-системы
Структура полноценной дизайн-системы, Material design и HIG, применение принципов дизайн-систем при проектировании
Продумаете новые пользовательские сценарии в продукте, отрисуете вайрфреймы новых экранов и создадите сложные кликабельные прототипы
13
1 проект・2 недели
Валидация и улучшение продукта
Погрузитесь в следующий этап цикла — тестирование. Узнаете, что такое юзабилити и почему это ключевой фактор качества дизайна интерфейса.
Юзабилити и бизнес, юзабилити и доступность
Юзабилити-тестирование
Подходы к юзабилити-тестированию и его проведение
Проведёте юзабилити-тестирование прототипов и доработаете их по его результатам
14
1 проект・2 недели
Передача макетов в разработку
Продолжите создавать спецификации дизайна и научитесь выстраивать отношения с программистами.
Процесс и роли в формировании документации, как дизайнеру говорить с разработкой
Спецификации и техническая документация
Культура документирования проектов, презентация группового кейса
Разработаете спецификации для разработчиков и передадите макет в работу
15
Самостоятельно・4 недели
Итоговый проект
Этот проект станет главным в вашем портфолио и отразит весь цикл продуктовой разработки. На первом этапе вы рассмотрите существующие в экосистеме направления, продуктовое видение компании, общую маркетинговую стратегию, UI-кит и действующие дизайн-решения. Затем выберете продукт внутри экосистемы, исследуете его бизнес-модель, ключевые метрики, целевую аудиторию и части CJM. Проведёте качественные исследования аудитории и юзабилити-тестирование новой фичи. Разработаете продуктовые гипотезы, сверстаете анимированные прототипы, протестируете и улучшите их. Презентуете результаты своей работы, а также дорожную карту дальнейшего развития продукта в рамках экосистемы.
Карьерный центр・от 5 недель
Поиск работы
При поддержке наших HR-специалистов изучите стратегии поиска работы и узнаете о тонкостях выбора компании-работодателя, подготовите портфолио, напишете резюме и сопроводительные письма.
Дополнительно・по желанию
Бонусные модули
Если захотите, сможете изучить ещё 3 темы: основы коммуникационного дизайна, личность бренда и look and feel. Эти знания помогут вашему профессиональному росту.
С наставниками
Воркшопы для отработки ключевых навыков
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
- Яндекс Метрики
Библиотека компонентов разработки, как быстро собрать интерфейс из веб-компонентов
Релиз проекта
Интернет и системы версионирования, работа с 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. Эти знания помогут вашему профессиональному росту.
С наставниками
Воркшопы для отработки ключевых навыков
https://practicum.yandex.ru/product-designer-basic/