UX/UI: проектирование пользовательского интерфейса

Анастасия Попова
2 курса про ux-дизайн

объемный онлайн-курс старшего дизайнера ibm про дизайн интерфейсов для всех участников продуктовой команды. этот курс — гарантия успешной карьеры в ux/ui-среде. сложившаяся культура цифрового потребления требует от бизнеса продуктов, в которых важна простота и удобство в повседневном использовании. однако за этой простотой стоит кропотливый труд продуктовых команд, которые прорабатывают десятки решений, учитывая реальные процессы в бизнесе и свои технические возможности.

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

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

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

в графическую составляющую дизайна, которая важна для промо-сайтов или лендингов глубоко погружаться мы не будем, а сфокусируемся на функциональных интерфейсах с проработкой практических решений в макетах и особенностях взаимодействия.
  • 30уроков
  • 8недель
  • 60минут в день

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

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

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

  • откроете для себя современные инструменты работы и варианты их выбора в разных ролях: фрилансер, дизайнер в студии или продуктовый дизайнер в команде.
  • проработаете не только успешные сценарии взаимодействия с интерфейсом, но и не менее важные варианты: когда что-то пошло не так с данными или с действиями пользователя.
  • сможете ответить на вопросы по функциональным модулям в макетах: как будет происходить вывод данных и работа с ними, сортировка, как будут обрабатываться ошибки и др.
  • научитесь применять различные элементы интерфейса и объяснять их интерактивное поведение, не всегда очевидное коллегам.
  • ускорите работу с использованием готовых дизайн-систем и разберетесь с фронтэнд фреймворками bootstrap, foundation.
  • начнете передавать в разработку макеты, за которые вас будут вспоминать только приятными словами.

Расписание

начало работы

  1. принятие поставленной задачи кто ставит задачи и как с этим жить. шаблон анализа поставленной задачи: важные вопросы, дополнительные материалы и критерии исполнения и передачи результата, временная оценка. синхронизация понимания задачи сторонами.
  2. работа с техническими и бизнес-требованиями анализ материалов и главные вопросы, проверка на прочность. поиск решений в сложных примерах с громоздкой бизнес-логикой или слишком жесткими техническими ограничениями.
  3. выбор рабочей среды краткий обзор современных инструментов проектирования взаимодействия, дизайна, анимации и коммуникации в команде. их выбор в зависимости от процессов в компании и этапов работы над проектом. структура рабочего пространства для хранения данных.
  4. обзор продуктов adobe photoshop, indesign, adobe xd. преимущества и недостатки личной и командной работы в определенной среде. ускорители работы и плагины. особенности передачи материалов в разработку, бизнесу или на тесты.
  5. sketch
  6. figma
  7. axure
  8. invision, flinto

информационная архитектура и взаимодействие

  1. основы проектирования подходы и стандарты в области человеко-компьютерного взаимодействия. критерии оценки качества взаимодействия и интерфейса.
  2. customer journey maps и user stories работа с глобальными сценариями и шагами взаимодействия, рекомендации по применению, декомпозиция. проработка негативных сценариев взаимодействия с интерфейсом. инструменты.
  3. функциональное проектирование от общего к частному: информационная архитектура, выделение основных компонентов, их функций и логики работы. примеры влияние контента на архитектуру.
  4. прототипирование цифровое и бумажное прототипирование: принципы, детализация, инструменты. быстрое тестирование результатов и критерии оценки.
  5. вовлечение пользователя психология внимания и восприятия, гештальт. открытые возможности или контроль пользователя, формирование привычки и информационная перегрузка. геймификация и сторителлинг.
  6. расширение рамок методики генерации идей, количественный и качественный подходы. их оценка и критерии. доработка прототипа.

практические решения

  1. принципы макета выбор основных параметров фронтэнда: рабочее разрешение экрана, адаптивность, сетка, модульность и др. особенности поведения и реализации web интерфейсов и почему это все важно дизайнеру.
  2. композиция и верстка основные принципы, вспоминаем гештальт. привычные шаблоны позиционирования информации на странице (f, i, бургер и др) и блочность.
  3. сетка и ритм принципы построения сеток, модульность и ритм. особенности применения в веб и готовые решения из фреймворков bootstrap, foundation.
  4. работа с текстом типографика, особенности набора и верстки. работа с информационным посылом «call to action» и редактура.
  5. вебинар. атомарный дизайн методология от простого к сложному, особенности применения.
  6. элементы интерфейса особенности применения и верстки атомарных контролов и элементов веб интерфейса. поведение и стандартные состояния в веб.
  7. формы работа с вводом данных и контролем результата, валидация и обработка ошибок. особенности применения и верстки полей ввода, выпадающих списков, переключателей и др.
  8. табличные данные анализ данных, верстка таблиц. особенности проектирования сортировки и фильтрации, адаптивность.
  9. вебинар. дизайн системы и фреймворки

подходы к работе над интерфейсом: придумать свое, взять готовый ui-kit или играть по правилам целого фреймворка. использование привычных или уникальных элементов интерфейса.

  1. модульность создание сложных ui-компонентов (модулей) и их стандартизация для переиспользования в разных частях проекта.
  2. адаптивность обзор подходов к адаптивности, технические особенности в веб. подготовка макетов и работа с графическими ресурсами.
  3. ui-анимация основные принципы и сферы использования. виды реализации: слоями, нодами, кодом. обзор современных инструментов для создания анимации: какие из них удобны и понятны для разработчиков.
  4. вебинар: модули в дизайн-системах как не плодить лишние сущности, но выделять новые модули и вносить доработки в дизайн-систему. ответы на вопросы.
  5. передача материалов подготовка макетов для разработки, экспорт графических ресурсов, описание функционала и коммуникация с разработчиками.
  6. масштабирование и работа в команде синхронизация и обновление макетов между несколькими дизайнерами, актуализация дизайн-системы. обзор облачных символов sketch, craft и контроля версий abstract.
  7. дизайн-кейс подготовка кейса в портфолио, особенности и ошибки. обзор площадок для публикации: behance. tilda и readymag.

Необходимые материалы и инструменты

Выбор рабочей среды остается за вами. Можете работать в привычных продуктах Adobe или открыть для себя что-то новое в Sketch (Mac) или Figma (Win/Mac). Главное — иметь нормально работающий компьютер и доступ в интернет.

как проходит обучение

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

Что в итоге

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

успешная карьера и трудоустройство

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

Кто будет преподавать

Попова Анастасия — старший UX-дизайнер IBM Interactive Experience, методолог фреймворка по поиску и разработке клиенто-ориентированных решений IBM Design Thinking. Преподаватель на курсах «UX/UI дизайн» в Британской Высшей Школе Дизайна.

За 8 лет в дизайне прошла путь от дизайнера в потоковой веб-студии, контрактного фрилансера и стартапера до продуктового дизайнера, сфокусированного на проектах в финансовой индустрии. Участвовала в создании ряда крупных цифровых банковских продуктов российского рынка для компаний Сбербанк, Росбанк, Пробизнесбанк и др. Один из которых получил награду Red Dot в номинации «Дизайн интерфейсов» с формулировкой «За высокое качество дизайна». Работала над интерактивными инсталляциями для фестивалей Политех и Midsummer Night Dream. Исследует возможности цифрового и физического взаимодействия в личных проектах.
Преподаватель работал для

в bang bang education учатся студенты из компаний

и многих других