Key Visual — Курс по UI дизайну

Задать вопрос

Лист ожидания

курс по визуальному дизайну интерфейсов

сделай портфолио с вау-эффектом и найди новую работу

курс по визуальному дизайну интерфейсов.
сделай портфолио с вау-эффектом и найди новую работу

АВТОРЫ

Артур Кузьмин design lead ex. jetbrains, avito

Саша Юшкова middle+ product designer в sberdevices. ex. avito

Богдан Артеменко middle+ product designer в avito. ex. kaspi. kz, яндекс

Курс нацелен на обучение создания эффектной картинки и закрытие пробелов в фундаментальных знаниях по дизайну

0. Если ты вообще не дизайнер и хочешь научиться рисовать красивые интерфейсы

1. Если все хорошо с проектированием и UX, но не зовут на собеседования — значит проблема в визуале

2. Если ты работаешь в веб или граф дизайне и хочешь начать рисовать интерфейсы

3. Если ты чувствуешь пробелы в знаниях по визуалу и не умеешь аргументировать макеты с точки зрения визуала

4. Если рисуешь только как чувствуешь, качество нестабильно, иногда получается круто, иногда нет

Курс нацелен на создание эффектной картинки и закрытие пробелов в фундаментальных знаниях по дизайну

1

Если ты не дизайнер и хочешь научиться рисовать красивые интерфейсы
2

Если все хорошо с проектированием и UX, но не зовут на собеседования — значит проблема в визуале
3

Если ты работаешь в веб или граф дизайне и хочешь начать рисовать интерфейсы
4

Если ты чувствуешь пробелы в знаниях по визуалу и не умеешь аргументировать макеты с точки зрения визуала
5

Если рисуешь только как чувствуешь, качество нестабильно, иногда круто, иногда нет

Менторы — только миддлы и синьоры из бигтеха

Артур Ситдиков  Senior Product Designer InDrive (ex. Avito), 15 лет в дизайне

Валерия Смирнова 
Senior Product Designer в Avito, развиваю категорию Дом и дача

Александра Юшкова 
Middle+ Product Designer в SberDevices, развиваю виртуального ассистента Салют

Анна Ланская
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)

Анастасия Аксельрод
Senior Product designer InDrive (ex. Avito)

Татьяна Себало
Middle Product Designer, развиваю сайт Альфа-Банка

Олжас Жармакин
Senior+ Product Designer в InDrive, развиваю пассажирский флоу райдхейлинга

Артем Голубков
Lead Product Designer в Avito, развиваю опыт доставки для покупателей и продавцов (ex. Сбербанк, ВТБ, EY)

Полина Глотова
Middle+ Product Designer в Яндекс, работаю над развитием Алисы и Умного Дома

Александра Коробкова
Team Lead Designer в Kaspi Bank (ex. Product Designer в Яндекс, Сбере, Студии Лебедева), знаю, как делать продукты для клиентов и бизнеса

Сергей Стряпунин
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 темам

Результат

Умеет собирать базовые компоненты ДС
Знает минимальные размеры элементов для доступности

5 неделя. Проектирование базовых элементов

Создание базовых элементов экрана

карточки
формы
фильтры
таблица
навигация
модальные окна
верстка динамического контента

Задание

Нарисовать:

карточку
форму
фильтры
таблицу
модалку

Результат

Умеет собирать базовые элементы экрана
Умеет верстать динамический контент

Графика в интерфейсе

Какие использовать изображения для аватаров, лого, контента
Где их искать.
Как оформлять графику в Figma
Настройки изображений

Задание

Вёрстка экранов с фото:

много лиц в ряд
фотка с фоном
починить испорченное фото

Результат

Умеет подбирать и базово обрабатывать изображения в интерфейсе

6 неделя. Работа с референсами

Как работать с референсами

Где и как искать референсы
Как создавать своё, а не перерисовывать 1 к 1
Метод анализа референсов

Задание

Проанализировать референсы, дать состав по элементам и группам
Перерисовать экран в стиле референса
Сверстать экран приложения по описанию в стиле референса

Консультация с ментором!

Разбор домашних заданий ментором

Результат

Умеет подбирать референсы прямые и косвенные
Умеет комбинировать референсы, придумывать своё

7 — 8 недели. Проектирование навигации, передача в разработку, финальный проект

Навигация

Навигация для Ecommerce и SaaS
Навигационные контролы
Гайд по контролам

Задание

Проектирование без детальной отрисовки

Представь, что в дизайн системе нет тогглов
Конфигуратор свадеб
Тестовое задание на работу с серверами

Консультация с ментором!

Разбор домашних заданий ментором

Результат

Умеет самостоятельно подбирать контролы
Умеет делать навигацию для сервисов с большой вложенностью данных на мобилке и десктопе

Передача в разработку

Состояния элементов
Состояния экранов
Состояния системы
Передача изображений
Передача анимации
Тачзоны
Чек-лист самопроверки
Аннотации для разработчиков

Задание

Проектирование без детальной отрисовки

Представить, что в дизайн системе нет тогглов
Конфигуратор свадеб
Тестовое задание на работу с серверами

Результат

Прорабатывает состояния в макете, передает в разработку в соответствии с чек-листом

Финальный проект

Задание на веб

Карточка товара десктоп
Таблица с фильтрами или дашборд десктоп

по ТЗ и/или рефы

Задание на мобилку

2−3 экрана мобилки по ТЗ и/или референсам

Оформляете все в мокап как на дрибле

Результат

Прорабатывает состояния в макете, передает в разработку в соответствии с чек-листом

Консультация с ментором!

Мы мечтали иметь такую программу много лет назад, когда учились сами.

На интерфейсах, без рисования лендосов и баннеров. Без ковыряния в индизайне.

Без душноты: без упражнений для художников, разборов Тарковского, без зубрежки терминов (почти).

Без тумбы-юмбы: без «просто почувствуй, как надо», без долбежки референсов.

Системно. Как физика или математика. На пальцах объясним и покажем, как стабильно делать стильные макеты. Дадим шаблоны и гайды по всем темам.

Научим с нуля или закроем пробелы в базовых знаниях, не углубляясь в дебри. Без истории металлического набора и Библии Гутенберга.

Честно говоря, тут и думать нечего. Боитесь взять кота в мешке? Посмотрите разборы на ютубе или сходите на ОПД

просто жмите на кнопку