UX/UI — точка входа: веб интерфейсы
Анастасия Попова
2 октября — 18 декабря

32 000
40 000
До 20 сентября

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

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

  • 30
    уроков
  • 8
    недель
  • 60
    минут в день

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

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

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

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

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

  1. Откроете для себя современные инструменты работы и варианты их выбора в разных ролях: фрилансер, дизайнер в студии или продуктовый дизайнер в команде.
  2. Проработаете не только успешные сценарии взаимодействия с интерфейсом, но и не менее важные варианты: когда что-то пошло не так с данными или с действиями пользователя.
  3. Сможете ответить на вопросы по функциональным модулям в макетах: как будет происходить вывод данных и работа с ними, сортировка, как будут обрабатываться ошибки и др.
  4. Научитесь применять различные элементы интерфейса и объяснять их интерактивное поведение, не всегда очевидное коллегам.
  5. Ускорите работу с использованием готовых дизайн-систем и разберетесь с фронтэнд фреймворками Bootstrap, Foundation.
  6. Начнете передавать в разработку макеты, за которые вас будут вспоминать только приятными словами.

Расписание

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

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

Блок 1. Начало работы


Лекция 1. Принятие поставленной задачи

Кто ставит задачи и как с этим жить. Шаблон анализа поставленной задачи: важные вопросы, дополнительные материалы и критерии исполнения и передачи результата, временная оценка. Синхронизация понимания задачи сторонами.


Лекция 2. Работа с техническими и бизнес-требованиями

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


Лекция 3. Выбор рабочей среды

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

Обзор популярных инструментов.

Преимущества и недостатки личной и командной работы в определенной среде. Ускорители работы и плагины. Особенности передачи материалов в разработку, бизнесу или на тесты.


Лекция 4. Обзор продуктов Adobe: Photoshop, Indesign, Adobe XD


Лекция 5. Sketch


Лекция 6. Figma


Лекция 7. Axure


Лекция 8. Invision, Flinto


Блок 2. Информационная архитектура и взаимодействие


Лекция 9. Основы проектирования

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


Лекция 10. Customer Journey maps и User Stories

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


Лекция 11. Функциональное проектирование

От общего к частному: информационная архитектура, выделение основных компонентов, их функций и логики работы. Примеры влияние контента на архитектуру.


Лекция 12. Прототипирование

Цифровое и бумажное прототипирование: принципы, детализация, инструменты. Быстрое тестирование результатов и критерии оценки.


Лекция 13. Вовлечение пользователя

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


Лекция 14. Расширение рамок

Методики генерации идей, количественный и качественный подходы. Их оценка и критерии. Доработка прототипа.


Блок 3. Практические решения


Лекция 15. Принципы макета

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

Лекция 16. Композиция и верстка

Основные принципы, вспоминаем гештальт. Привычные шаблоны позиционирования информации на странице (F, I, бургер и др) и блочность.


Лекция 17. Сетка и ритм

Принципы построения сеток, модульность и ритм. Особенности применения в веб и готовые решения из фреймворков Bootstrap, Foundation.


Лекция 18. Работа с текстом

Типографика, особенности набора и верстки. Работа с информационным посылом «call to action» и редактура.


Лекция 19. Вебинар атомарный дизайн

Методология от простого к сложному, особенности применения.


Лекция 20. Элементы интерфейса

Особенности применения и верстки атомарных контролов и элементов веб интерфейса. Поведение и стандартные состояния в веб.


Лекция 21. Формы

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


Лекция 22. Табличные данные

Анализ данных, верстка таблиц. Особенности проектирования сортировки и фильтрации, адаптивность.


Лекция 23. Вебинар: дизайн системы и фреймворки

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


Лекция 24. Модульность

Создание сложных UI-компонентов (модулей) и их стандартизация для переиспользования в разных частях проекта.


Лекция 25. Адаптивность

Обзор подходов к адаптивности, технические особенности в веб. Подготовка макетов и работа с графическими ресурсами.


Лекция 26. UI-анимация

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


Лекция 27. Вебинар: модули в дизайн-системах

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


Лекция 28. Передача материалов

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


Лекция 29. Масштабирование и работа в команде

Синхронизация и обновление макетов между несколькими дизайнерами, актуализация дизайн-системы. Обзор облачных символов Sketch, Craft и контроля версий Abstract.


Лекция 30. Дизайн-кейс

Подготовка кейса в портфолио, особенности и ошибки. Обзор площадок для публикации: Behance. Tilda и Readymag.

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

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

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

  • урок
  • домашняя работа
  • комментарии преподавателя
  • следующий урок
после прохождения курса вам выдается сертификат.

Что в итоге

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

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

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