ITsets - Дизайн-симулятор - Middle UI - UX-дизайнер (2023) бесплатно

"Содержание:"

Этап 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
Поиск работы, заказов, развитие карьеры
Как развиваться и что делать дальше. Практические задания по поиску работы, заказов и проектов. Стурктура модуля секретна.