курс по визуальному дизайну интерфейсов
сделай портфолио с вау-эффектом и найди новую работу
курс по визуальному дизайну интерфейсов.
сделай портфолио с вау-эффектом и найди новую работу
сделай портфолио с вау-эффектом и найди новую работу
АВТОРЫ
Артур Кузьмин design lead ex. jetbrains, avito
Саша Юшкова middle+ product designer в sberdevices. ex. avito
Богдан Артеменко middle+ product designer в avito. ex. kaspi. kz, яндекс
Курс нацелен на обучение создания эффектной картинки и закрытие пробелов в фундаментальных знаниях по дизайну
0. Если ты вообще не дизайнер и хочешь научиться рисовать красивые интерфейсы
0. Если ты вообще не дизайнер и хочешь научиться рисовать красивые интерфейсы
1. Если все хорошо с проектированием и UX, но не зовут на собеседования — значит проблема в визуале
2. Если ты работаешь в веб или граф дизайне и хочешь начать рисовать интерфейсы
2. Если ты работаешь в веб или граф дизайне и хочешь начать рисовать интерфейсы
3. Если ты чувствуешь пробелы в знаниях по визуалу и не умеешь аргументировать макеты с точки зрения визуала
4. Если рисуешь только как чувствуешь, качество нестабильно, иногда получается круто, иногда нет
4. Если рисуешь только как чувствуешь, качество нестабильно, иногда получается круто, иногда нет
Курс нацелен на создание эффектной картинки и закрытие пробелов в фундаментальных знаниях по дизайну
- 1Если ты не дизайнер и хочешь научиться рисовать красивые интерфейсы
- 2Если все хорошо с проектированием и UX, но не зовут на собеседования — значит проблема в визуале
- 3Если ты работаешь в веб или граф дизайне и хочешь начать рисовать интерфейсы
- 4Если ты чувствуешь пробелы в знаниях по визуалу и не умеешь аргументировать макеты с точки зрения визуала
- 5Если рисуешь только как чувствуешь, качество нестабильно, иногда круто, иногда нет
Менторы — только миддлы и синьоры из бигтеха
Артур Ситдиков
Senior Product Designer InDrive, 15 лет в дизайне
Владислав Юшев
Senior Product Designer в TakeProfit (ex. Design System Lead Designer в Альфа-Банке)
Senior Product Designer в TakeProfit (ex. Design System Lead Designer в Альфа-Банке)
Валерия Смирнова
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, развиваю сайт Альфа-Банка
Богдан Артеменко
Middle+ Product Designer в Avito (ex. Kaspi. kz, Яндекс Практикум)
Андрей Головин
Senior Product designer в Alfa-Bank (ex. Design Lead в ВТБ)
Асылхан Назир
Head of Design в tekmates ex. red_mad_robot Asia, ex. Design Team Lead в Kcell, Alfa-Bank Kazakhstan
Анастасия Аксельрод
Senior Product designer InDrive (ex. Avito)
Senior Product designer InDrive (ex. Avito)
Алёна Чибичик
Senior Product designer в Alfa-bank (ex. Открытие инвестиции)
Senior Product designer в Alfa-bank (ex. Открытие инвестиции)
Игорь Старков
Senior Product Designer в Альфа-Банке (ex. ВТБ)
Алишер Сатыбалдин
Design Lead в Tinkoff ex. Design Lead в Beeline Казахстан
Сергей Стряпунин
Senior Product Designer в InDrive, лидирую вертикаль Курьеры
Олжас Жармакин
Senior+ Product Designer в InDrive, развиваю пассажирский флоу райдхейллинга
Senior+ Product Designer в InDrive, развиваю пассажирский флоу райдхейллинга
Мы учим ребят без опыта и повышаем квалификацию опытных дизайнеров. Выпускников наших программ нанимают в большие команды, что очень нас радует
15 лекций по 2 часа: от композиции до юзабилити
Сделай три новые работы или освежи работы из своего портфолио
3
работы в портфолио
30
часов теории
6 часовых консультации 1:1 с ментором из бигтеха (можно докупить)
6
часов фидбэка
Легенда: каждый цвет карточки означает свой тип материала или активности
Теория
Зеленым отмечены лекционные материалы в записи или текстовые гайды
Зеленым отмечены лекционные материалы в записи или текстовые гайды
Задания
Синим отмечены задания. К ним есть записанные видео-разборы по их выполнению от авторов курса
Синим отмечены задания. К ним есть записанные видео-разборы по их выполнению от авторов курса
Консультация с ментором!
Оранжевым отмечены консультации с ментором или прямые эфиры с авторами курса или приглашенными спикерами
Оранжевым отмечены консультации с ментором или прямые эфиры с авторами курса или приглашенными спикерами
Результат
На серых карточках перечислено, что вы будете уметь, когда пройдете блок теория + задание
На серых карточках перечислено, что вы будете уметь, когда пройдете блок теория + задание
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 экрана мобилки по ТЗ и/или референсам
Результат
Прорабатывает состояния в макете, передает в разработку в соответствии с чек-листом
Прорабатывает состояния в макете, передает в разработку в соответствии с чек-листом
Консультация с ментором!
Консультация с ментором!
Мы мечтали иметь такую программу много лет назад, когда учились сами.
На интерфейсах, без рисования лендосов и баннеров. Без ковыряния в индизайне.
Без душноты: без упражнений для художников, разборов Тарковского, без зубрежки терминов (почти).
Без тумбы-юмбы: без «просто почувствуй, как надо», без долбежки референсов.
Системно. Как физика или математика. На пальцах объясним и покажем, как стабильно делать стильные макеты. Дадим шаблоны и гайды по всем темам.
Научим с нуля или закроем пробелы в базовых знаниях, не углубляясь в дебри. Без истории металлического набора и Библии Гутенберга.
Честно говоря, тут и думать нечего. Боитесь взять кота в мешке? Посмотрите разборы на ютубе или сходите на ОПД
На интерфейсах, без рисования лендосов и баннеров. Без ковыряния в индизайне.
Без душноты: без упражнений для художников, разборов Тарковского, без зубрежки терминов (почти).
Без тумбы-юмбы: без «просто почувствуй, как надо», без долбежки референсов.
Системно. Как физика или математика. На пальцах объясним и покажем, как стабильно делать стильные макеты. Дадим шаблоны и гайды по всем темам.
Научим с нуля или закроем пробелы в базовых знаниях, не углубляясь в дебри. Без истории металлического набора и Библии Гутенберга.
Честно говоря, тут и думать нечего. Боитесь взять кота в мешке? Посмотрите разборы на ютубе или сходите на ОПД
Ваш ник в телеграм и почта