[ITsets] Дизайн-симулятор: Middle UI/UX-дизайнер 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 от Павла Дурова и занял призовое место.