Курс PRO. Продуктовый подход в UX/UI‑дизайне

Изучим возможные интерактивные приемы для взаимодействия с сайтами, а также поймем, как работать в команде со смежными специалистами: иллюстраторами, графическими дизайнерами, копирайтерами, motion-дизайнерами

1. Вводная лекция. UX‑аналитика
2. Бизнес‑аналитика

1. Сопроводительное письмо
2. Составление резюме
3. Портфолио
4. Каналы поиска для дизайнера
5. Отклики
6. Собеседование и тестовое задание
7. Форматы трудоустройства

1. Компоненты
2. Варианты для компонентов
3. Стили
4. Мультиплеер и шеринг
5. Комментирование
6. Прототипирование
7. Привязки и инструменты
8. Параметры
9. Маски
10. Auto Layout

Тестовое задание от банка

1. Основы работы с продуктовой задачей
2. Ресёрч. Практика

1. Сбор референсов по визуальному стилю: типографике, композиции, сетке, верстке, цветам, формам и иллюстрациям
2. Поиск референсов по механикам: паттернам поведения пользователя и его взаимодействию с интерфейсом

Тестовое задание от сервиса доставки

1. Изучение и обсуждение ТЗ

2. Конкурентный анализ

3. Создание персонажей, CJM, job stories

4. Генерация дополнительных идей и фич продукта

5. Создание навигационной архитектуры продукта

Разберемся, как работать с брифом клиента, с референсами, развивать креативность и выбирать тот самый стилистический приём для сайта

Научимся использовать брендинг клиента и изучим теорию по работе с типографикой, цветом и изображениями (2D- и 3D-иллюстрации, фотографии)

Расскажем, что важно учесть при создании дизайн-макетов, сделаем прототип сайта и его адаптивные версии

Узнаете особенности упаковки кейса на Behance и других платформах, а также расскажем, как дизайнеру продвигать себя и развиваться в карьере

Изучение ТЗ, разработка 
идеи и структуры сайта

1. Базовые принципы работы и применения
2. Общие паттерны и преимущества
3. Ускорение процессов
4. Комбинации AI-инструментов для эффективной работы

1. Знакомство с наставником и процессом работы Студии Олега Чулакова
2. Работа с референсами и насмотренностью
3. Получаение первой задачи. Подготовка UI‑kit, включающего в себя цветовые стили, типографику, кнопки и инпуты

1. Вводная лекция
2. Работа с референсами
3. Работа со стоковыми иллюстрациями
4. Как грамотно составить ТЗ для иллюстратора
5. Иконки в дизайне интерфейсов
6. Создание пака иконок. Практика
7. Изометрическая илюстрация. Практика

1. Основные понятия типографики и инструменты верстки.
2. Строки и отступы. Математические символы.
3. Знаки препинания
4. Шрифт
5. Комбинация шрифтов
6. Шрифты в пользовательском интерфейсе
7. Типографическая система

1. Интерфейс: UX‑законы и UX‑аудит. Поиск проблемных мест в интерфейсе с помощью UX‑аудита.
2. Методы исследования

1. Проектирование пользовательских сценариев
2. Создание прототипов сервиса

1. Создание дизайа 3 экранов главной страницы
2. Создание типографической системы
3. Идеи/фичи/особенности в дизайн-решениях

Тестовое задание от мобильного оператора

Тестовое задание от банка

1. Отрисовка вайрфреймов, проработка функционала
2. Отрисовка детальных прототипов продукта

3. Проектирование сценариев

Изучите, что важно знать дизайнеру о возможностях no-code-платформ и как грамотно передать макеты в верстку разработчику

Разработка дизайн‑концепции

1. Текстовый контент
2. Визуальный контент
3. Концепции
4. Аналитика

1. Создание мудборда: подбор палитры, шрифта и референсов по стилистике
2. Создание мобильного адаптива для макета

1. UX-копирайтинг. Информационный стиль
2. Кнопки, CTA и 3 главных правила UX-копирайтинга
3. Заголовки, преимущества, поля ввода, TOV
4. Краткость и принципы информационного стиля
5. Информационный стиль и главные ошибки в копирайтинге
6. Лингвистический фастфуд

1. Интерфейс: UX‑тестирование
2. Глубинное интервью и сложности, с которыми сталкивается пользователь
при взаимодействии с продуктом.

1. Теория цвета (часть 1)
2. Теория цвета (часть 2)
3. Психология цвета
4. Как подобрать цвет под ваш продукт
5. Ошибки новичков

1. Проработка структуры всех страниц
2. Проработка композиции, размеров и отступов для всех элементов
3. Дизайн всех страниц (декстопная версия)
4. Проработка состояний всех элементов
5. Создание дизайн-системы

Работа над портфолио

Работа над портфолио

1. Сбор референсов и определение направления стилистики

2. Создание дизайн‑концепции

3. Создание дизайн‑системы

4. Отрисовка дизайна по прототипам

5. Подготовка макетов для передачи на frontend

Создание дизайн‑макетов для десктоп-версии

1. Изучение ТЗ для продукта клиента
2. Конкурентный анализ
3. Создание навигационной архитектуры
4. Отписовка прототипа

1. Создание мудборда
2. Создание дизайн-концепции
3. Создание UI-kit
4. Дизайн десктопной и мобильной версий сервиса

‍

1. Loader

2. Switcher и segment control
3. Selector и pop-up

4. Slider
5. Input и buttons

6. Context menu и burger menu

7. Pagination

1. СJM, Job Stories
2. User Flow и персоны

1. Создание сетки и теория близости
2. Использование колоночной сетки
3. Использование модульной сетки

1. Как оформить кейс
2. Упаковка кейса в Notion

1. Выбор сетки для адаптивов
2. Создание типографической системы для адаптивной версии
3. Адаптирование дизайна с учетом мобильных механик

1. Подготовка презентации

2. Презентация и защита проекта

Создание адаптивов и защита проекта

1. Сбор референсов и отрисовка дизайн-концепции
2. Создание UI-kit
3. Обратная связь от наставника по пройденной стажировке и рекомендации по началу карьеры и развитию в дизайне

1. UX‑проектирование
2. Создание прототипов. Часть 1
3. Создание прототипов. Часть 2
4. Создание прототипов. Часть 3

1. Правило якорных объектов
2. Правило якорных объектов. Практика
3. Теория близости. Практика
4. Гештальт‑принципы. Модульность. Сетка. Воздух
5. Сетка. Практика
6. Равновесие. Контраст. Глубина
7. Равновесие и контраст. Практика
8. Глубина. Практика
9. Верстка таблиц и новые механики

1. Регистрация и изучение работы с Behance
2. Проработка структуры кейса
3. Создание макетов кейса

1. Адаптивный дизайн 1 неделя
2. Адаптивность и дизайн‑система
3. Адаптивность. Практика

1. Публикация проекта на Behance
2. Подготовка структуры и текста защиты
3. Видеозапись защиты

1. UI‑кит и дизайн‑система
2. Атомарный дизайн
3. Дизайн‑система. Практика