UX/UI-дизайнер: расширенный курс

Кому подойдёт курс

• Тем, кто хочет сменить сферу деятельности
• Освоите новую высокооплачиваемую профессию и сможете найти работу на фрилансе или в агентстве
• Графическим дизайнерам
• Поймёте, как применить свои знания в UX/UI-дизайне, расширите свои навыки и сможете сменить квалификацию
• Новичкам в UX/UI-дизайне
• Систематизируете свои знания и дополните профессиональные навыки, чтобы применить их на практике

Чему научитесь

• Работать с основными инструментами UX/UI-дизайнера 
• Создавать сложный дизайн сайтов в Figma 
• Разрабатывать анимацию интерфейса
• Создавать мобильные приложения под iOS и Android
• Проводить UX-исследования и работать
• с гипотезами
• Внедрять 3D-графику в дизайн-макет

Программа курса

Базовая ступень   

Освоите базовые навыки цифрового дизайнера, поработаете с веб‑платформой, узнаете особенности создания сайтов, адаптивности и веб-анимации. Изучите Tilda Publishing — один из самых гибких и удобных инструментов UX/UI-дизайнера.

Основы Adobe Photoshop и Illustrator

Если вы никогда раньше не открывали Photoshop и Illustrator, то в подготовительном модуле получите необходимую базу для работы с векторной и растровой графикой. Вы познакомитесь с ключевыми возможностями инструментов и сразу примените их на практике. В каждом занятии — задание для самостоятельной тренировки.

• Введение в Photoshop
• Двойная экспозиция
• Ретушь и цветокоррекция
• Постер
• Тонированное изображение
• Сайт в Photoshop
• Мокап
• GIF-анимация
• Иллюстрация
• Отрисовка логотипа в Illustrator

Опыт Mish.design. Основы Figma

Вы получите необходимую базу для работы с графикой и дизайн-макетами в Figma. Познакомитесь с ключевыми инструментами приложения и сразу примените их на практике. В каждом занятии — задание для самостоятельной тренировки.

• Экскурсия по Figma
• Первые шаги в Figma
• Интерфейсы
• Основы веб-дизайна
• Подготовка веб-макета к жизни
• Основы работы с мобильными платформами
• Компоненты и стили
• Кликабельный прототип мобильного приложения

Основы веб-дизайна

Изучите методы, которые помогают определить, каким должен быть интерфейс. Узнаете о техниках поиска идей для разработки интерфейса. На практике закрепите приёмы и принципы веб-дизайна, необходимые для создания современного сайта. 

Рассмотрите свойства формы и приёмы работы над композицией. Научитесь работать с цветом, подбирать шрифты, структурировать текст и использовать микротипографику. Освоите принципы создания визуальной иерархии в интерфейсе.

• Знакомство с веб-дизайном
• Модульные сетки
• Скетчинг и прототипирование
• Пользовательское взаимодействие
• Композиция
• Веб-типографика
• Теория цвета
• Вдохновение, творчество, импровизация

Создание проекта сайта

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

• Адаптивный дизайн
• Веб-анимация
• Системы ведения проектов
• Составление технического задания для вёрстки
• Модульный проект

Исследование пользовательского опыта

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

• Роль аналитики в UX
• Бизнес аналитика: анализ ЦА
• Бизнес-аналитика
• Системная аналитика в UX
• Дизайн-мышление
• Введение в методы исследования
• Особенности количественных исследований
• Качественные исследования
• Проведение качественного исследования
• Глубинные интервью
• Моделирование поведения: CJM
• Системная аналитика в UX
• Обзор аналитических инструментов
• A/B‑тестирования
• Немодерируемые удалённые тесты
• Accessibility-статистика
• Феномены зрительного восприятия
• Eye-tracking-тестирование

Опыт MateÇa. Создание сайтов на Tilda

Изучите стандартные блоки, возможности редактирования и настройки сервисов в Tilda. Узнаете все нюансы подготовки сайта к запуску. Разберётесь в возможностях кастомизации блоков и гибкости их использования. Научитесь создавать разные виды сайтов, подключать платёжные системы и работать с заявками.

• Настройки сайта
• Настройки страницы
• Подключение домена
• Настройки и редактирование стандартных блоков 
• Адаптивность в стандартных блоках
• Подключение внешних шрифтов
• Многостраничные сайты
• Функционал для интернет-магазина и рассылок
• Функция «Потоки»
• Личный кабинет
• CRM Tilda

Опыт MateÇa. Tilda Zero Block

Научитесь работать во встроенном графическом редакторе Zero Block: создавать дизайн любой сложности, переносить макеты из Figma или Photoshop, создавать адаптивность и работать с анимациями. Познакомитесь с базовым функционалом Zero Block, а также со скрытыми функциями, которые позволяют делать сайты фестивального уровня.

• Работа в редакторе
• Адаптивность в Zero Block
• Базовая анимация
• Пошаговая анимация
• Триггерная анимация
• Модульный проект

Продвинутые навыки   

Начнёте работать с мобильной платформой. Разберётесь в тонкостях гайдлайнов iOS и Android, выясните, чем нативное приложение отличается от мобильной версии сайта. Узнаете, как проектируют интерфейсы в компании Agima. Научитесь создавать 3D-графику и анимацию интерфейсов.

Основы дизайна мобильных интерфейсов

Погрузитесь в принципы дизайна мобильных интерфейсов. Научитесь использовать паттерны при разработке интерфейса. Изучите гайдлайны современных операционных систем и сможете использовать их при создании макетов.

• Принципы дизайна мобильных интерфейсов
• Системная аналитика  
• Принципы проектирования UX
• Анатомия iOS-приложения
• Основные принципы Material Design
• Композиция, цвет и типографика в диджитале
• Основы работы в Figma
• Модульная сетка в дизайне интерфейсов

Запуск и тестирование мобильного приложения

Научитесь создавать анимации и микровзаимодействия, готовить макет для передачи в разработку. Разберётесь в особенностях взаимодействия с разработчиками, в нюансах составления технического задания. Научитесь проводить юзабилити-тестирование и использовать полученные данные для улучшения интерфейса.

• Анимация интерфейсов. Микровзаимодействия
• Практическое прототипирование
• Основы прототипирования
• Юзабилити-тестирование мобильных приложений
• Работа с брендбуком
• Передача проекта разработчикам
• Навыки создания презентации на Behance
• Модульный проект

Опыт AGIMA. Проектирование интерфейсов

Узнаете, как устроена работа над прототипированием и проектированием интерфейсов в агентстве AGIMA. Эксперты компании расскажут про цели и особенности анализа целевой аудитории при создании продукта, основные этапы и артефакты прототипирования. Вы потренируетесь разрабатывать в Figma веб- и мобильные интерфейсы разной степени детализации. Научитесь презентовать прототип в нестандартных форматах.

• История дизайна интерфейсов  
• Цели исследований продукта и аудитории
• Методы исследований
• Введение в проектирование 
• Что проектируем: основные артефакты
• UX-проектирование: принципы и инструменты анализа
• Основы работы в Figma
• Инструменты и паттерны прототипирования
• Прототип высокой детализации в Figma 
• Гайдлайны iOS и Android. Особенности проектирования мобильного приложения
• Презентация прототипа
• Что выбрать UX-проектировщику: работу в агентстве
• или в продукте
• Модульный проект

Проектирование UX и прототипирование

Изучите принципы построения пользовательских интерфейсов и рассмотрите их основные элементы. Углубитесь в методологию командной работы и формирование командного взаимодействия. Освоите инструменты для сбора и обработки данных о пользователях продукта, основы стратегии в концепции бережливого производства.

• Введение в предметную область
• Азбука пользовательского интерфейса
• Методологии командной работы: Kanban, Scrum
• Воркшоп. Персоны
• Lean UX strategy
• Воркшоп. UX strategy
• Customer journey mapping — CJM
• Информационная архитектура
• Воркшоп. UX design
• Инструменты прототипирования
• Воркшоп. UI design
• Модульный проект

Опыт ITECH. 3D-графика для интерфейсов в Cinema 4D

Погрузитесь в работу с 3D. Изучите функционал Cinema 4D — одного из популярных ПО для работы с 3D-графикой. Освоите навыки моделирования и анимирования объекта. Научитесь создавать материалы и подбирать свет для создания реалистичных сцен. Поймёте основные принципы использования 3D в работе с интерфейсами. 

• Введение в 3D
• Cinema 4D. Основные возможности программы
• Камера и сцена
• Материалы, свет, рендер
• Воркшоп. Практика создания 3D-графики
• Примитивы, деформеры, альтернативные способы
• Полигональное моделирование
• Генеративное и параметрическое моделирование. Часть 1
• Генеративное и параметрическое моделирование. Часть 2
• Mograph
• Воркшоп. Практика создания 3D-графики
• Анимация сцены
• Подготовка и оформление проекта
• Модульный проект

Опыт «Атвинта». Анимация интерфейсов в ProtoPie и After Effects

Изучите основные принципы анимации и поймёте, как превратить статичный дизайн в динамичный креативный интерфейс. Разберёте основы веб- и мобильной анимации. Освоите ProtoPie для создания интерактивных интерфейсов. Изучите основной функционал After Effects, научитесь работать с масками и слоями и поймёте, как работать с анимациями в сочетании

с 3D-элементами.

• История анимации в интерфейсах
• 10 принципов Уолта Диснея и как это связано с интерфейсами
• Ограничения и возможности
• Инструменты для анимации
• Введение вAfter Effects и ProtoPie
• Воркшоп. Работа в After Effects
• Воркшоп. Работа в ProtoPie
• Создание анимации в Rive и Haiku
• Вдохновение, идеи, поиск
• Взаимодействие с фронтендом, CodePen
• Разбор кейсов
• Модульный проект

Насмотренность в дизайне

Вы узнаете, как лучше тренировать насмотренность — один из основных навыков в профессии дизайнера. Будете анализировать работы из разных сфер искусства и дизайна и одновременно углублять навыки работы с цветом, композицией и типографикой. В итоге соберёте референсы, которые сможете использовать в своих проектах.

• Насмотренность: почему она так важна для профессионального развития
• Принципы построения композиции, использования цветов и типографики
• Насмотренность на практике: пополняем и структурируем библиотеку изображений

CX: как собирать фидбек внутри продукта. Опыт компании UX Feedback 

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

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

• Введение в работу с фидбеком внутри продукта
• Сбор фидбека: от целей и гипотез к созданию первых опросов
• Обработка фидбека. Превращение «хотелок» в нужды
• Принятие решения на основе фидбека

Дизайн-менеджмент 

Научитесь управлять креативной командой и создавать масштабные дизайн-проекты.

• Введение в арт-дирекшн
• Обработка брифа и проектирование
• Тренды в диджитале
• Инструменты дизайнера. Разбор кейсов
• Цифровая графика и анимация. Разбор кейсов
• Формирование дизайн-системы
• Креативные методики
• Формирование команды и управление
• Постановка и контроль задач
• Работа с мотивацией и коммуникация внутри команды
• Анализ эффективности и аналитика проекта. Продуктовый подход
• Презентация и защита проекта
• PR и личный бренд

Дипломный проект

Создадите полноценный цифровой продукт на основе полученных во время обучения навыков.

Вы пройдёте все этапы создания продукта. Начнёте с исследования аудитории и анализа конкурентов. Спроектируете пользовательский опыт и займётесь прототипированием. Создадите визуальный дизайн с использованием 3D-графики и анимации. Адаптируете своё решение под разные платформы.

Ключевые навыки

• Проектирование пользовательского опыта
• Построение композиции и использование сетки в её проектировании
• Подбор шрифтов и работа с типографикой
• Создание нужного впечатления с помощью психологии цвета
• Кернинг, треккинг, интерлиньяж, оптические компенсации
• Взаимодействие с разработчиками и контроль качества
• Работа с гайдлайнами для iOS и Android
• Тестирование и оптимизация дизайна
• Создание 3D-графики для интерфейсов в Cinema 4D
• Подбор и настройка рендеров для достижения реалистичной сцены
• Внедрение 3D-графики в интерфейсы с учётом композиции
• Оценка логики интерфейсов сайтов и приложений
• Проведение количественных и качественных исследований пользователей
• Создание в ProtoPie и After Effects анимации для веб- и мобильных интерфейсов
• Разработка анимации с учётом логики интерфейса
• Создание анимированной 3D-графики в After Effects
• Разработка концептов, выбор релевантных методологий
• Создание писем для email-рассылок в Tilda
• Работа по методологии Agile