Продолжая использовать наш сайт, вы даете согласие на обработку файлов cookie, которые обеспечивают
правильную работу сайта. Благодаря им мы улучшаем сайт и обслуживание, подробнее здесь.

Подтверждаю

Интенсив

Дизайн-симулятор

Вернуться на сайт

Работы участников
интенсива

Работы участников
интенсива

Получите профессию дизайнера
приложений
и зарабатывайте до 1 500 $

Пройдите основы UI-дизайна
за 3 занятия и получите возможность
пройти стажировку, сделав проект известной компании.

Начать бесплатно

© 2022 ИП Яковлев Виталий Борисович | Оферта | Политика конфиденциальности | Контакты

Начать бесплатно

© 2022 ИП Яковлев Виталий Борисович | Оферта | Политика конфиденциальности | Контакты

План дизайн-интенсива

Интенсив состоит из 3 основных
и нескольких бонусных занятий

Вы обладаете усидчивостью
и терпением

Вы готовы анализировать,
а не просто работать руками

Вы готовы развивать свою
внимательность к мелочам

Вам важно сделать что-то
лучше, чем у других

Как начать?

Чтобы поступить на дизайн-интенсив, вам нужен мессенджер Telegram. Далее нужно нажать кнопку Start в боте, после этого следуйте инструкциям и мы автоматически вышлем вам занятия.

Делайте упражнения, которые мы даём и в конце получите в подарок возможность консультации с автором интенсива бесплатно.

Начать интенсив бесплатно

© 2022 ИП Яковлев Виталий Борисович | Оферта | Политика конфиденциальности | Контакты

Этап 1 Этап 2 Этап 3 Этап 4 Этап 5 Этап 6 Этап 7 Этап 8

Этап 1

Принципы качества, референсы, ошибки

Разбор качественных и некачественных работ. Какие отличия и принципы.
Поиск удачных референсов и список ресурсов. Как работать с референсами.
Самые частые ошибки — под запись. Много эффектов. Креатив. Придумывать что-то с нуля. Использование креативных шрифтов. Перебор с цветами, перебор с контрастом или его отсутствие. Масштабы UI-элементов. Размер, ритм, цвет, масса. Последовательность и иерархия.

Этап 2

Типографика, принцип близости

Размер шрифта, трекинг, интерлиньяж, абзацы.
Иерархия и структура текста.
Элементы типографики.
- Размер.
- Начертание.
- Отступы.
- Цвет и контрастность.
Не делать наборный текст капсом.
Не делать текст жирным или медиум слишком много.
Не делать слишком тонкий текст.
Не использовать в одной работе более 1–2 шрифтов.
Не делать абзацы более 5–7 строк.
Не допускать на один заголовок более 4–5 абзацев.
Достаточный интерлиньяж.
Оправданные отступы. Не делать слишком большие. Соблюдать последовательность.
Текст в интерфейсах и стили текста.
Принцип близости и система отступов на примере типографики.
Размер наборного текста, размер текста в кнопках и других UI-элементах.

Этап 3

Создание UI элементов в вебе и мобайле

Создание кнопок

Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей кнопок.
Проработка состояний при наведении и нажатии.
Чек-лист по кнопкам.

Иконки

Область применения.
Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей иконок.
Чек-лист по иконкам.

Формы

Инпуты.
Выпадающие списки.
Календарь (выбор дат).
Слайдеры.
Радиобаттоны.
Чекбоксы.
Текстареа.
Тоглы / свитчеры.
Кнопки.
Принципы построения.
Типы и виды.
Как нельзя делать.
Проработка состояний.
Правила создания стилей форм.
Чек-лист по формам.

Карусели

Функциональное назначение.
Принципы построения.
Типы и виды.
Как нельзя делать.
Пагинация в каруселях.
Проработка состояний.

Пагинация

Функциональное назначение.
Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей пагинации.
Чек-лист по пагинации.

Табы

Функциональное назначение.
Принципы создания.
Типы и виды.
Как нельзя делать.
Правила создания стилей табов.
Чек-лист по табам.

Чойс-чипсы
Функциональное назначение.
Принципы создания.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Чек-лист.

Навигация и меню: обычное и всплывающее

Функциональное назначение.
Принципы создания.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Чек-лист.

Фильты, сортировка

Функциональное назначение.
Принципы создания.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Чек-лист.

Таббары

Функциональное назначение.
Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Чек-лист.

Индикаторы

Функциональное назначение.
Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Чек-лист.

Tooltips

Функциональное назначение.
Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Чек-лист.

Нотификации

Функциональное назначение.
Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Чек-лист.

Прогресс бары

Функциональное назначение.
Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Чек-лист.

Хлебные крошки

Функциональное назначение.
Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Чек-лист.

Бабблы

Функциональное назначение и области применения.
Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Чек-лист.

Таблицы

Принципы построения.
Адаптивная версия таблиц.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Чек-лист.

Графики

Функциональное назначение и области применения.
Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Чек-лист.

Гистограммы и диаграммы

Функциональное назначение и области применения.
Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Чек-лист.

Карточки и виджеты

Функциональное назначение и области применения.
Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Чек-лист.

Модальные окна

Функциональное назначение и области применения.
Принципы построения.
Типы и виды.
Как нельзя делать.
Правила создания стилей.
Проработка состояний при наведении и нажатии.
Адаптив попапов.
Чек-лист.

Состояния UI-элементов на смартфонах и десктопах

Адаптив UI-элементов.
Состояния на разных девайсах.

Этап 4

Создание первых UI-композиций, микро UX

Экран проигрывателя аудио-трека

Сбор и анализ референсов.
Создание мудборда.
Использование Figma Mirror.
Создание иконок.
Дизайн экрана.
Проверка по чек-листу.
Обзор работы.

Экран видеоплеера

Сбор и анализ референсов
Создание мудборда.
Создание иконок.
Дизайн виджета видеоплеера.
Проверка по чек-листу.
Обзор работы.

Карточка товара или статьи для каталога или блога

Сбор и анализ референсов.
Создание мудборда.
Создание иконок.
Дизайн карточек.
Дизайн фильтров.
Проверка по чек-листу.
Обзор работы.

Регистрация и авторизация

Сбор и анализ референсов.
Создание мудборда.
Создание иконок.
Дизайн карточек.
Дизайн фильтров.
Проверка по чек-листу.
Обзор работы.

Дашборд

Сбор и анализ референсов.
Создание мудборда.
Создание иконок.
Дизайн карточек.
Дизайн фильтров.
Проверка по чек-листу.
Обзор работы.

Этап 5

Макро UX, интерактивные прототипы, анимация

Проработка сценария.
Принципы анимации — изинги, тайминги.
Подготовка ключевых фреймов.
Создание интерактивного прототипа.
Создание анимированного интерактивного прототипа.
Запись процесса.
Рендеринг и публикация.

Этап 6

Дизайн мобильного приложения

Описание.
Создание мудборда.
Сбор референсов.
Создание функциональной модели и CJM.
Создание концепта для согласования стиля.
Принципы качественного дизайна мобильных приложений.
Разработка оставшихся экранов.
Проработка интерактива.
Создание анимации.
Оформление и публикация кейса.

Этап 7

Дизайн интерфейса для PC/WEB

Описание.
Создание мудборда.
Сбор референсов.
Создание функциональной модели и CJM.
Создание концепта для согласования стиля.
Принципы качественного дизайна мобильных приложений.
Разработка оставшихся экранов.
Проработка интерактива
Создание анимации.
Оформление и публикация кейса.

Этап 8

Дизайн интерфейса для PC/WEB

Как развиваться и что делать дальше. Практические задания по поиску работы, заказов и проектов. Стурктура модуля секретна.