Графика и Дизайн [Виталий Яковлев] [ITsets] Дизайн-симулятор: Middle UI/UX-дизайнер 2023. Тариф Экономный (2023)

[Sigma]

[Виталий Яковлев] [ITsets] Дизайн-симулятор: Middle UI/UX-дизайнер 2023. Тариф Экономный (2023)

Освойте UI/UX-дизайн на уровне Middle и станьте востребованным специалистом
На обучении вы сделаете профессиональный дизайн мобильных приложений и веб-интерфейсов.
Осторожно! Практика зашкаливает, нужно будет много работать.
Долой скучные лекции по 2–3 часа с нудной теорией. Их записывают, чтобы вы дольше учились и не думали про возврат, пока всё не изучите.
На таких лекциях обычных курсов вам будут рассказывать то, что не понадобится в ежедневной и реальной работе.
На симуляторе нет лекций, вы делаете реальные задачи по 15–20 минут, а мы их проверяем. Так вы обучитесь быстрее.

Лучший способ освоить навык — не знания, а практика.
Ещё лучше — практика, основанная на задачах, похожих на реальные.
Дизайн-симулятор — воплощение этой идеи и имитация рабочего процесса.

Программа:
Этап 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. Поиск работы, заказов, развитие карьеры

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

Автор - Виталий Яковлев:
Создатель дизайн-симулятора Виталий Яковлев — практикующий Senior UI/UX-дизайнер с опытом в сфере дизйна интерфейсов 14 лет.
Работал с проектами Shell, Chery, Suzuki, РЖД, Johnson & Johnson. В 2019-м году принял участие в официальном конкурсе по редизайну Telegram от Павла Дурова и занял призовое место.