Курс нацелен на создание эффектной картинки и закрытие пробелов в фундаментальных знаниях по дизайну
- Если ты не дизайнер и хочешь научиться рисовать красивые интерфейсы
- Если все хорошо с проектированием и UX, но не зовут на собеседования — значит проблема в визуале
- Если ты работаешь в веб или граф дизайне и хочешь начать рисовать интерфейсы
- Если ты чувствуешь пробелы в знаниях по визуалу и не умеешь аргументировать макеты с точки зрения визуала
- Если рисуешь только как чувствуешь, качество нестабильно, иногда круто, иногда нет
Менторы — только миддлы и синьоры из бигтеха
Артур Ситдиков
Senior Product Designer InDrive (ex. Avito), 15 лет в дизайне
Валерия Смирнова
Senior Product Designer в Avito, развиваю категорию Дом и дача
Senior Product Designer в Avito, развиваю категорию Дом и дача
Александра Юшкова
Middle+ Product Designer в SberDevices, развиваю виртуального ассистента Салют
Middle+ Product Designer в SberDevices, развиваю виртуального ассистента Салют
Анна Ланская
Middle Product Designer в Avito за 1,5 года из маркетолога
Middle Product Designer в Avito за 1,5 года из маркетолога
Богдан Артеменко
Middle+ Product Designer в Avito (ex. Kaspi. kz, Яндекс Практикум)
Андрей Головин
Senior Product designer в Alfa-Bank (ex. Design Lead в ВТБ)
Асылхан Назир
Дизайн директор в Bereke Bank (ex. red_mad_robot, Design Team Lead в Kcell, Alfa-Bank Kazakhstan)
Дизайн директор в Bereke Bank (ex. red_mad_robot, Design Team Lead в Kcell, Alfa-Bank Kazakhstan)
Анастасия Аксельрод
Senior Product designer InDrive (ex. Avito)
Senior Product designer InDrive (ex. Avito)
Татьяна Себало
Middle Product Designer, развиваю сайт Альфа-Банка
Middle Product Designer, развиваю сайт Альфа-Банка
Олжас Жармакин
Senior+ Product Designer в InDrive, развиваю пассажирский флоу райдхейлинга
Senior+ Product Designer в InDrive, развиваю пассажирский флоу райдхейлинга
Артем Голубков
Lead Product Designer в Avito, развиваю опыт доставки для покупателей и продавцов (ex. Сбербанк, ВТБ, EY)
Lead Product Designer в Avito, развиваю опыт доставки для покупателей и продавцов (ex. Сбербанк, ВТБ, EY)
Полина Глотова
Middle+ Product Designer в Яндекс, работаю над развитием Алисы и Умного Дома
Middle+ Product Designer в Яндекс, работаю над развитием Алисы и Умного Дома
Александра Коробкова
Team Lead Designer в Kaspi Bank (ex. Product Designer в Яндекс, Сбере, Студии Лебедева), знаю, как делать продукты для клиентов и бизнеса
Team Lead Designer в Kaspi Bank (ex. Product Designer в Яндекс, Сбере, Студии Лебедева), знаю, как делать продукты для клиентов и бизнеса
Сергей Стряпунин
Senior Product Designer в InDrive, лидирую продуктовый дизайн в вертикали Курьеры
Senior Product Designer в InDrive, лидирую продуктовый дизайн в вертикали Курьеры
Мы учим ребят без опыта и повышаем квалификацию опытных дизайнеров. Выпускников наших программ нанимают в большие команды, что очень нас радует
15 лекций по 2 часа: от композиции до юзабилити
Сделай три новые работы или освежи работы из своего портфолио
3
работы в портфолио
30
часов теории
7 часовых консультации 1:1 с ментором из бигтеха (можно докупить)
7
часов фидбэка
Легенда: каждый цвет карточки означает свой тип материала или активности
Теория
Зеленым отмечены лекционные материалы в записи или текстовые гайды
Зеленым отмечены лекционные материалы в записи или текстовые гайды
Задания
Синим отмечены задания. К ним есть записанные видео-разборы по их выполнению от авторов курса
Синим отмечены задания. К ним есть записанные видео-разборы по их выполнению от авторов курса
Консультация с ментором!
Оранжевым отмечены консультации с ментором или прямые эфиры с авторами курса или приглашенными спикерами
Оранжевым отмечены консультации с ментором или прямые эфиры с авторами курса или приглашенными спикерами
Результат
На серых карточках перечислено, что вы будете уметь, когда пройдете блок теория + задание
На серых карточках перечислено, что вы будете уметь, когда пройдете блок теория + задание
1 неделя. Основы визуального дизайна
Образ макета (UI)
- Как сделать так, чтобы макет нравился любому человеку
- Какие инструменты есть у дизайнера, чтобы влиять на восприятие макета
Задание
Сопоставить описание эмоции / характера интерфейса с макетом
Сопоставить описание эмоции / характера интерфейса с макетом
Результат
Понимает, как с помощью графических инструментов влиять на восприятие макетов
Понимает, как с помощью графических инструментов влиять на восприятие макетов
Визуальная иерархия
- Управление вниманием
- Цвет
- Расположение
- Пространство
- Размер
- Графика
Мини-задание
Найти ошибки в иерархии сломанного экрана
+ смотреть видео-разбор
Найти ошибки в иерархии сломанного экрана
+ смотреть видео-разбор
Результат
Понимает, как управлять вниманием пользователей с помощью графических приемов
Понимает, как управлять вниманием пользователей с помощью графических приемов
Цвет и образ бренда
- Управление ассоциациями
- Остранение, как сделать нескучно
- Сочетания цветов
- Выбор цвета для бренда, безопасные зоны
- Bad Practice
Построение палитр
- Построение палитр для всех цветов
- 7 плагинов для палитр
- Цвета состояний и компонентов
- Гайд по серому цвету
- Доступность WCAG & APCA
- OKHCL
- Темная тема
- Аллерты
Задание
+ смотреть видео-разбор
- Построить палитру
- Покрасить этой палитрой несколько экранов
+ смотреть видео-разбор
Результат
- Понимает, как цвет влияет на настроение и характер бренда.
- Умеет собирать цветовую палитру для продукта
- Знает, как использовать стили и может создать свой набор стилей
Типографика
- Как типографика влияет на восприятие продукта
- Как настраивать текст в Figma. Какие есть параметры
- Иерархия. Что чем писать для разных поверхностей
- Как построить свой размерный ряд
- Как создать стили текста
- Линейки для разных девайсов
Задание
+ смотреть видео-разбор
- Построить размерный ряд типографики
- Расставить правильно размеры текста на экране моб и веб
+ смотреть видео-разбор
Результат
- Понимает, как шрифт влияет на настроение и характер бренда.
- Умеет поддерживать иерархию стилей текста.
- Знает стандартные размеры
- Знает, как использовать стили и может создать свой набор стилей
Отступы, Скругления
- Принцип внутреннего и внешнего
- Как строить и использовать оптическую линейку
- Стандарты отступов в разных системах
- Скругления для внешнего и внутреннего элемента
Задание
- Построить линейку
- Расставить отступы на карточке
- Расставить отступы на экране
Консультация с ментором
Обобщаем знания по всему. Берём ровный экран и расставляем акценты текстом, цветом и отступами
Обобщаем знания по всему. Берём ровный экран и расставляем акценты текстом, цветом и отступами
Результат
- Использует принцип внутреннего и внешнего.
- Умеет делать и использовать линейку отступов.
- Знает, как скругления влияют на восприятие.
- Умеет строить линейку скруглений для элементов интерфейса.
2 неделя. Работа с дизайн системой, композиция
Работа с дизайн системой
- Как выбрать готовую дизайн систему
- Как адаптировать систему под себя.
- Что можно, а что нельзя менять в ДС на работе
Задание
- Выбрать ДС и поменять там цвета и шрифт
- Взять экран и сделать в выбранной ДС
Результат
Умеет пользоваться ДС и адаптировать ее под свои нужды
Умеет пользоваться ДС и адаптировать ее под свои нужды
Композиция
- Принцип прямоугольника
- Выравнивание и оптические компенсации
- Базовая сетка
- Движение, воздух, напряжение
Задание
- Сборка экрана по ТЗ мобилка
- Сборка экрана по ТЗ веб
Консультация с ментором
Разбор домашнего задания ментором
Разбор домашнего задания ментором
Результат
- Умеет красиво расставлять элементы.
- Понимает, как композиция влияет на восприятие интерфейса.
- Может собрать разные по плотности композиции.
3 неделя. Чистый дизайн
Сетки, брейкпоинты, адаптивность
- Какие размеры девайсов существуют, их особенности
- Сетки для веб и моб
- Брейкпоинты
- Сборка резиновых компонентов на Autolayout, Constraints
Задание
+ смотреть видео-разбор
- Собрать экраны веб и моб на сетке
- Собрать резиновый компонент
+ смотреть видео-разбор
Результат
- Умеет создавать сетку. для разных устройств.
- Использует Autolayout и Constraints
Чистота
- Управление вниманием
- Цвет
- Расположение
- Пространство
- Размеры
- Графика
UI аудит
- Визуальная иерархия
- Когнитивная очистка
- Раскрыть или свернуть модальность
- Логическая группировка
Задание
Почистить экран, переделать плохие решения
Почистить экран, переделать плохие решения
Результат
- Может собрать чистый экран для мобильного и веб-интерфейса
- Видит ошибки в чужом дизайне, может их исправить
4 неделя. Создание дизайн системы
Контент в интерфейсе
- Основные тексты в интерфейсах
- Логика повествования
- Сокращение повторов
- Невнятный смысл и канцеляризмы
- Как писать заголовки и CTA
- Аллерты и ошибки
Задание
Переписать текст на экране: убрать повторы, спецлексику, сократить текст
Переписать текст на экране: убрать повторы, спецлексику, сократить текст
Результат
Пишет приемлемые тексты без популярных стилистических ошибок
Пишет приемлемые тексты без популярных стилистических ошибок
Создание базовых компонентов ДС
- Контролы
- Ячейки
- Иконки
- Тач зоны
- Гайды IOS / Android
- Состояние компонентов
Задание
Собрать каждый элемент
+ смотреть видео-разбор
Собрать каждый элемент
+ смотреть видео-разбор
Консультация с ментором
По 4 темам
По 4 темам
Результат
- Умеет собирать базовые компоненты ДС
- Знает минимальные размеры элементов для доступности
5 неделя. Проектирование базовых элементов
Создание базовых элементов экрана
- карточки
- формы
- фильтры
- таблица
- навигация
- модальные окна
- верстка динамического контента
Задание
Нарисовать:
Нарисовать:
- карточку
- форму
- фильтры
- таблицу
- модалку
Результат
- Умеет собирать базовые элементы экрана
- Умеет верстать динамический контент
Графика в интерфейсе
- Какие использовать изображения для аватаров, лого, контента
- Где их искать.
- Как оформлять графику в Figma
- Настройки изображений
Задание
Вёрстка экранов с фото:
Вёрстка экранов с фото:
- много лиц в ряд
- фотка с фоном
- починить испорченное фото
Результат
Умеет подбирать и базово обрабатывать изображения в интерфейсе
Умеет подбирать и базово обрабатывать изображения в интерфейсе
6 неделя. Работа с референсами
Как работать с референсами
- Где и как искать референсы
- Как создавать своё, а не перерисовывать 1 к 1
- Метод анализа референсов
Задание
- Проанализировать референсы, дать состав по элементам и группам
- Перерисовать экран в стиле референса
- Сверстать экран приложения по описанию в стиле референса
Консультация с ментором!
Разбор домашних заданий ментором
Разбор домашних заданий ментором
Результат
- Умеет подбирать референсы прямые и косвенные
- Умеет комбинировать референсы, придумывать своё
7 — 8 недели. Проектирование навигации, передача в разработку, финальный проект
Навигация
- Навигация для Ecommerce и SaaS
- Навигационные контролы
- Гайд по контролам
Задание
Проектирование без детальной отрисовки
Проектирование без детальной отрисовки
- Представь, что в дизайн системе нет тогглов
- Конфигуратор свадеб
- Тестовое задание на работу с серверами
Консультация с ментором!
Разбор домашних заданий ментором
Разбор домашних заданий ментором
Результат
- Умеет самостоятельно подбирать контролы
- Умеет делать навигацию для сервисов с большой вложенностью данных на мобилке и десктопе
Передача в разработку
- Состояния элементов
- Состояния экранов
- Состояния системы
- Передача изображений
- Передача анимации
- Тачзоны
- Чек-лист самопроверки
- Аннотации для разработчиков
Задание
Проектирование без детальной отрисовки
Проектирование без детальной отрисовки
- Представить, что в дизайн системе нет тогглов
- Конфигуратор свадеб
- Тестовое задание на работу с серверами
Результат
Прорабатывает состояния в макете, передает в разработку в соответствии с чек-листом
Прорабатывает состояния в макете, передает в разработку в соответствии с чек-листом
Финальный проект
Задание на веб
- Карточка товара десктоп
- Таблица с фильтрами или дашборд десктоп
Задание на мобилку
- 2−3 экрана мобилки по ТЗ и/или референсам
Результат
Прорабатывает состояния в макете, передает в разработку в соответствии с чек-листом
Прорабатывает состояния в макете, передает в разработку в соответствии с чек-листом
Консультация с ментором!
Консультация с ментором!
Мы мечтали иметь такую программу много лет назад, когда учились сами.
На интерфейсах, без рисования лендосов и баннеров. Без ковыряния в индизайне.
Без душноты: без упражнений для художников, разборов Тарковского, без зубрежки терминов (почти).
Без тумбы-юмбы: без «просто почувствуй, как надо», без долбежки референсов.
Системно. Как физика или математика. На пальцах объясним и покажем, как стабильно делать стильные макеты. Дадим шаблоны и гайды по всем темам.
Научим с нуля или закроем пробелы в базовых знаниях, не углубляясь в дебри. Без истории металлического набора и Библии Гутенберга.
Честно говоря, тут и думать нечего. Боитесь взять кота в мешке? Посмотрите разборы на ютубе или сходите на ОПД
На интерфейсах, без рисования лендосов и баннеров. Без ковыряния в индизайне.
Без душноты: без упражнений для художников, разборов Тарковского, без зубрежки терминов (почти).
Без тумбы-юмбы: без «просто почувствуй, как надо», без долбежки референсов.
Системно. Как физика или математика. На пальцах объясним и покажем, как стабильно делать стильные макеты. Дадим шаблоны и гайды по всем темам.
Научим с нуля или закроем пробелы в базовых знаниях, не углубляясь в дебри. Без истории металлического набора и Библии Гутенберга.
Честно говоря, тут и думать нечего. Боитесь взять кота в мешке? Посмотрите разборы на ютубе или сходите на ОПД
Ваш ник в телеграм и номер телефона
Мы не будем звонить вам, ждите сообщения в телеграм