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

​ Освойте UI/UX-дизайн на уровне Middle и станьте востребованным специалистом На обучении вы сделаете профессиональный дизайн мобильных приложений и веб-интерфейсов. Осторожно! Практика зашкаливает, нужно будет много работать. Долой скучные лекции по 2–3 часа с нудной теорией. Их записывают, чтобы вы дольше учились и не думали про возврат, пока всё не изучите. На таких лекциях обычных курсов вам будут рассказывать то, что не понадобится в ежедневной и реальной работе.На симуляторе нет лекций, вы делаете реальные задачи по 15–20 минут, а мы их проверяем. Так вы обучитесь быстрее. Лучший способ освоить навык — не знания, а практика. Ещё лучше — практика, основанная на задачах, похожих на реальные. Дизайн-симулятор — воплощение этой идеи и имитация рабочего процесса. Самые частые ошибки — под запись. Много эффектов. Креатив. Придумывать что-то с нуля. Использование креативных шрифтов. Перебор с цветами, перебор с контрастом или его отсутствие. Масштабы 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 от Павла Дурова и занял призовое место.

Освойте UI/UX-дизайн на уровне Middle и станьте востребованным специалистом.. На обучении вы сделаете профессиональный дизайн мобильных приложений и веб-интерфейсов. Осторожно! Практика зашкаливает, нужно будет много работать. Надоела тонна теории? Долой скучные лекции по 2–3 часа с нудной теорией. Их записывают, чтобы вы дольше учились и не думали про возврат, пока всё не изучите. На таких лекциях обычных курсов вам будут рассказывать то, что не понадобится в ежедневной и реальной работе.На симуляторе нет лекций, вы делаете реальные задачи по 15–20 минут, а мы их проверяем. Так вы обучитесь быстрее. Лучший способ освоить навык — не знания, а практика. Ещё лучше — практика, основанная на задачах, похожих на реальные. Дизайн-симулятор — воплощение этой идеи и имитация рабочего процесса. Программа практикума Предобучение Организационная информация Figma Figma Mirror Pixso Домашнее задание Первый этап Качественный UI-дизайн (теория) Портим макет Домашнее задание Второй этап Цвет: HEX vs HSB Система 60-30-10 Фоновые цвета Градиентные цвета Домашнее задание Третий этап 3. Библиотека иконок, компоненты 4. UI-кит — простые Inputs 5. Закрепление по Inputs 6. Inputs с иконками 7. Custom Inputs 8. Labels, Textarea и Variants 9. Система отступов и AL 10. Простые кнопки 11. Составные кнопки 12. Selectors 13. Dropdowns 14. Dropdown Calendar 15. Radio Buttons, Checkboxes, Toggles 16. Labels & Social Icons 17. Tabs & Choice Chips 18. Tooltips 19. Notifications 20. Sliders 21. Pagination & Carousel 22. Breadcrumbs, Progress Bars & Indicators 23. Таблицы 24. Таблицы с компонентами 25. Таблицы с высокими строками 26. Самостоятельная работа 27. Graph Bars 28. Graphs 29. Pie Charts 30. Dark Mode 31. Адаптация Dropdowns 32. Адаптация таблиц 33. Адаптация виджетов Обратная связь Четвертый этап 1. PopUps: Moodboard & User Flow 2. PopUps: UI & micro UX 3. Аудиоплеер: композиция, мудборд 4. Аудиоплеер: процесс UI&UX 5. Видеоплеер 6. Products Cards, Spacers, AL 7. Авторизация: теория и Notion 8. Авторизация: описание в Notion и User Flow 9. Авторизация: основы атомарного дизайна 10. Авторизация: создание организмов формы 11. Авторизация: создание шаблонов, страниц и UI-дизайн 12. Дашборд: лейауты и самостоятельная работа Обратная связь Пятый этап 1. Форма: основы интерактивного прототипирования макро-UX 2. Форма: интерактивные компоненты, микро-UX 3. Освоение Smart Animate, изинги 4. Тестирование и аналитика UX 5. Простановка токенов, освоение Figma Tokens 6. Создание библиотек, документация ДС, проекты в Figma Обратная связь Шестой этап 1. Бренд, тематика + описание задачи 2. Ресерч, исследования, мудборд и User Flow 3. Дизайн-концепт 4. UI + UX дизайн приложения 5. Тестирование и доработка дизайна 6. Описание ДС приложения 7. Оформление презентации проекта, зачёт 8. Публикация кейса Обратная связь Седьмой этап 1. Бренд, тематика + описание задачи 2. Ресерч, исследования, мудборд и User Flow 3. Дизайн-концепт 4. UI + UX интерфейса 5. Тестирование и доработка дизайна 6. Описание ДС интерфейса 7. Презентация интерфейса и зачёт 8. Публикация кейса Обратная связь Восьмой этап 1. Работа, заказы, карьера 2. Экзамен и сертификация Завершение курса

Дизайн-симулятор: Middle UI/UX-дизайнер 2023 [ITsets, Виталий Яковлев]​ Школа: ITsets Об авторе Создатель дизайн-симулятора Виталий Яковлев — практикующий Senior UI/UX-дизайнер с опытом в сфере дизйна интерфейсов 14 лет. Работал с проектами Shell, Chery, Suzuki, РЖД, Johnson & Johnson. В 2019-м году принял участие в официальном конкурсе по редизайну Telegram от Павла Дурова и занял призовое место. Освойте 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 Поиск работы, заказов, развитие карьеры Как развиваться и что делать дальше. Практические задания по поиску работы, заказов и проектов. Стурктура модуля секретна. Продажник: Тариф: Экономный