объемный онлайн-курс старшего дизайнера ibm про дизайн интерфейсов для всех участников продуктовой команды. этот курс — гарантия успешной карьеры в ux/ui-среде. сложившаяся культура цифрового потребления требует от бизнеса продуктов, в которых важна простота и удобство в повседневном использовании. однако за этой простотой стоит кропотливый труд продуктовых команд, которые прорабатывают десятки решений, учитывая реальные процессы в бизнесе и свои технические возможности.
дизайнер в подобных командах является связующим звеном — создает визуальные артефакты, понятные как бизнесу, так и другим участникам процесса вывода продукта на рынок. именно поэтому сейчас требуются специалисты, не отмахивающиеся от технических деталей в своей работе и способные объяснить всем, как будет работать интерфейс.
в рамках трех блоков курса мы рассмотрим основные этапы работы дизайнера. вы пройдете путь от создания глобальной информационной архитектуры и проектирования взаимодействия до практических решений при работе над интерфейсом в макетах.
выбрав в самом начале проект, над которым будете работать в течение курса, вы получите не просто реальный кейс с интерактивным прототипом, проработанными макетами и вишенкой в виде ui-анимации в портфолио — лучшие студенты будут приглашены на собеседования в компании, которые предоставят брифы и выступят в качестве партнеров образовательной программы.
в графическую составляющую дизайна, которая важна для промо-сайтов или лендингов глубоко погружаться мы не будем, а сфокусируемся на функциональных интерфейсах с проработкой практических решений в макетах и особенностях взаимодействия.
- 30уроков
- 8недель
- 60минут в день
Кому подойдет курс
дизайнерам-новичкам, которые только погружаются в профессию, а также специалистам, которые хотят систематизировать свои знания по созданию продуктов в веб-среде. менеджерам, аналитикам и всем участникам продуктовых команд, которые хотят расширить свои компетенции в создании интерфейсов или найти общий язык с дизайнерами.
Чему вы научитесь
- откроете для себя современные инструменты работы и варианты их выбора в разных ролях: фрилансер, дизайнер в студии или продуктовый дизайнер в команде.
- проработаете не только успешные сценарии взаимодействия с интерфейсом, но и не менее важные варианты: когда что-то пошло не так с данными или с действиями пользователя.
- сможете ответить на вопросы по функциональным модулям в макетах: как будет происходить вывод данных и работа с ними, сортировка, как будут обрабатываться ошибки и др.
- научитесь применять различные элементы интерфейса и объяснять их интерактивное поведение, не всегда очевидное коллегам.
- ускорите работу с использованием готовых дизайн-систем и разберетесь с фронтэнд фреймворками bootstrap, foundation.
- начнете передавать в разработку макеты, за которые вас будут вспоминать только приятными словами.
Расписание
начало работы
- принятие поставленной задачи кто ставит задачи и как с этим жить. шаблон анализа поставленной задачи: важные вопросы, дополнительные материалы и критерии исполнения и передачи результата, временная оценка. синхронизация понимания задачи сторонами.
- работа с техническими и бизнес-требованиями анализ материалов и главные вопросы, проверка на прочность. поиск решений в сложных примерах с громоздкой бизнес-логикой или слишком жесткими техническими ограничениями.
- выбор рабочей среды краткий обзор современных инструментов проектирования взаимодействия, дизайна, анимации и коммуникации в команде. их выбор в зависимости от процессов в компании и этапов работы над проектом. структура рабочего пространства для хранения данных.
- обзор продуктов adobe photoshop, indesign, adobe xd. преимущества и недостатки личной и командной работы в определенной среде. ускорители работы и плагины. особенности передачи материалов в разработку, бизнесу или на тесты.
- sketch
- figma
- axure
- invision, flinto
информационная архитектура и взаимодействие
- основы проектирования подходы и стандарты в области человеко-компьютерного взаимодействия. критерии оценки качества взаимодействия и интерфейса.
- customer journey maps и user stories работа с глобальными сценариями и шагами взаимодействия, рекомендации по применению, декомпозиция. проработка негативных сценариев взаимодействия с интерфейсом. инструменты.
- функциональное проектирование от общего к частному: информационная архитектура, выделение основных компонентов, их функций и логики работы. примеры влияние контента на архитектуру.
- прототипирование цифровое и бумажное прототипирование: принципы, детализация, инструменты. быстрое тестирование результатов и критерии оценки.
- вовлечение пользователя психология внимания и восприятия, гештальт. открытые возможности или контроль пользователя, формирование привычки и информационная перегрузка. геймификация и сторителлинг.
- расширение рамок методики генерации идей, количественный и качественный подходы. их оценка и критерии. доработка прототипа.
практические решения
- принципы макета выбор основных параметров фронтэнда: рабочее разрешение экрана, адаптивность, сетка, модульность и др. особенности поведения и реализации web интерфейсов и почему это все важно дизайнеру.
- композиция и верстка основные принципы, вспоминаем гештальт. привычные шаблоны позиционирования информации на странице (f, i, бургер и др) и блочность.
- сетка и ритм принципы построения сеток, модульность и ритм. особенности применения в веб и готовые решения из фреймворков bootstrap, foundation.
- работа с текстом типографика, особенности набора и верстки. работа с информационным посылом «call to action» и редактура.
- вебинар. атомарный дизайн методология от простого к сложному, особенности применения.
- элементы интерфейса особенности применения и верстки атомарных контролов и элементов веб интерфейса. поведение и стандартные состояния в веб.
- формы работа с вводом данных и контролем результата, валидация и обработка ошибок. особенности применения и верстки полей ввода, выпадающих списков, переключателей и др.
- табличные данные анализ данных, верстка таблиц. особенности проектирования сортировки и фильтрации, адаптивность.
- вебинар. дизайн системы и фреймворки
подходы к работе над интерфейсом: придумать свое, взять готовый ui-kit или играть по правилам целого фреймворка. использование привычных или уникальных элементов интерфейса.
- модульность создание сложных ui-компонентов (модулей) и их стандартизация для переиспользования в разных частях проекта.
- адаптивность обзор подходов к адаптивности, технические особенности в веб. подготовка макетов и работа с графическими ресурсами.
- ui-анимация основные принципы и сферы использования. виды реализации: слоями, нодами, кодом. обзор современных инструментов для создания анимации: какие из них удобны и понятны для разработчиков.
- вебинар: модули в дизайн-системах как не плодить лишние сущности, но выделять новые модули и вносить доработки в дизайн-систему. ответы на вопросы.
- передача материалов подготовка макетов для разработки, экспорт графических ресурсов, описание функционала и коммуникация с разработчиками.
- масштабирование и работа в команде синхронизация и обновление макетов между несколькими дизайнерами, актуализация дизайн-системы. обзор облачных символов sketch, craft и контроля версий abstract.
- дизайн-кейс подготовка кейса в портфолио, особенности и ошибки. обзор площадок для публикации: behance. tilda и readymag.
Необходимые материалы и инструменты
Выбор рабочей среды остается за вами. Можете работать в привычных продуктах Adobe или открыть для себя что-то новое в Sketch (Mac) или Figma (Win/Mac). Главное — иметь нормально работающий компьютер и доступ в интернет.
как проходит обучение
обучение проходит в группе фейсбука и включает в себя домашние задания и их разбор на групповых вебинарах. курс предполагает свободный, но организованный график. нужно смотреть лекции, задавать вопросы в фейсбуке — для студентов и преподавателя будет организована закрытая группа, выполнять домашние задания — их будет проверять преподаватель, комментировать и давать советы по улучшению работы. после прохождения курса вам выдается сертификат.
Что в итоге
Вы систематизируете свои знания и добавите качественный кейс в портфолио, совершите качественный рост и получите в профессиональной среде преимущество думающего и вникающего в детали сертифицированного специалиста.
успешная карьера и трудоустройство
лучших студентов рекомендуем главным дизайн-студиям, крупным компаниям и на отдельные проекты.
Попова Анастасия — старший UX-дизайнер IBM Interactive Experience, методолог фреймворка по поиску и разработке клиенто-ориентированных решений IBM Design Thinking. Преподаватель на курсах «UX/UI дизайн» в Британской Высшей Школе Дизайна.
За 8 лет в дизайне прошла путь от дизайнера в потоковой веб-студии, контрактного фрилансера и стартапера до продуктового дизайнера, сфокусированного на проектах в финансовой индустрии. Участвовала в создании ряда крупных цифровых банковских продуктов российского рынка для компаний Сбербанк, Росбанк, Пробизнесбанк и др. Один из которых получил награду Red Dot в номинации «Дизайн интерфейсов» с формулировкой «За высокое качество дизайна». Работала над интерактивными инсталляциями для фестивалей Политех и Midsummer Night Dream. Исследует возможности цифрового и физического взаимодействия в личных проектах.
