Профессионалам, Продолжающим, Лучшие курсы, Веб-дизайн, UX-дизайн, Дизайн-мышление

UX/UI — точка входа: веб интерфейсы

анастасия попова

2 октября — 18 декабря
40 000

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

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

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

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

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

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

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

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

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

Расписание

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

Выбрав в самом начале один из проектов, вы получите не просто реальный кейс в портфолио с интерактивным прототипом, проработанными макетами и вишенкой в виде 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). Главное – иметь нормально работающий компьютер и доступ в интернет.

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

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

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

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

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

Анастасия Попова

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

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

Преподаватель работал для

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

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

Что в итоге

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

Запишитесь на курс «UX/UI – точка входа: веб интерфейсы» прямо сейчас
анастасия попова
2 октября — 18 декабря
40 000

Истории успеха


В набор профессионала входят


DesignWorkout
DesignWorkout
Дима Барбанель
10 500
Readymag. Дизайн без кода
Павел Кедич
Бесплатный
Самообучение
Работа с макетом
Сергей Нугаев
по подписке

июль 2018 года
История дизайна для тех, кто учит Photoshop
Софья Цыткина
по подписке

июль 2018 года
Как сделать книгу: от флэт-плана до типографии
Свят Вишняков
по подписке

август 2018
Устройство сайта
Сергей Нугаев
по подписке

август 2018 года
Знакомство с Javascript
Сергей Нугаев
по подписке

сентябрь 2018 года
Создание визуального языка бренда
Запись закрыта
Создание визуального языка бренда
Стас Хрусталев Игорь Киселев
Дизайн-менеджмент: как создавать и продавать дизайн
Запись закрыта
Дизайн-менеджмент: как создавать и продавать дизайн
Антон Гора Алексей Лури
Сила в словах
Запись закрыта
Сила в словах
Дмитрий Карпов
Кириллица, история и практика
Кириллица, история и практика
Виктория Лопухина
1 августа — 7 сентября
20 000
Дизайн-мышление — накачка идеями
Дизайн-мышление — накачка идеями
Дмитрий Карпов
7 августа — 7 сентября
30 000
Основы веб-разработки
Основы веб-разработки
Сергей Нугаев
14 августа — 14 октября
25 000
Fashion-иллюстрация как профессия
Fashion-иллюстрация как профессия
Лена Кер
20 августа — 20 сентября
15 000
Построение шрифта: четыре первых шага
Построение шрифта: четыре первых шага
Валерий Голыженков
22—29 августа
10 000
Образ мысли: скетч
Образ мысли: скетч
Ярослава Клепикова
3 сентября — 13 октября
15 000
Эксперименты в рамках кириллицы. Практический курс
Эксперименты в рамках кириллицы. Практический курс
Виталина Лопухина
4 сентября — 11 октября
20 000
3D Мастерская: иллюстрация, леттеринг и кинетическая типографика в Cinema4D
3D Мастерская: иллюстрация, леттеринг и кинетическая типографика в Cinema4D
Дмитрий Карпов Саша Кац
11 сентября — 18 октября
25 000 22 500 (до 6 августа)
Натюрморт акварелью
Натюрморт акварелью
Нина Орлова
12 сентября — 18 октября
17 000
Точка входа: движок Unity — десктоп, мобайл, VR, видео
Точка входа: движок Unity — десктоп, мобайл, VR, видео
Павел Васютин
13 сентября — 1 ноября
25 000
Дизайн персонажей для начинающих
Дизайн персонажей для начинающих
Максим Калякин
20 сентября — 20 ноября
21 000 18 900 (до 13 августа)
Рисуем кодом
Рисуем кодом
Александр Катин
25 сентября — 25 октября
16 000 14 400 (до 4 августа)
Фотореалистичные раскадровки
Фотореалистичные раскадровки
Татьяна Васьковская
1 октября — 16 ноября
30 000
1000 и 1 буква
1000 и 1 буква
Оля Панькова
2 октября — 6 ноября
16 000
Кристаллизация момента
Кристаллизация момента
Глеб Солнцев
5 октября — 12 ноября
18 000 16 200 (до 26 июля)
12 главных уроков по типографике
12 главных уроков по типографике
Свят Вишняков
16 октября — 30 ноября
22 000 19 800 (до 5 августа)
Идеи в иллюстрации
Идеи в иллюстрации
Илья Митрошин
30 октября — 7 декабря
25 000 22 500 (до 11 августа)
Основы анатомии для изображения человека
Основы анатомии для изображения человека
Ярослава Клепикова Александр Безин
15 января — 29 марта 2019
36 000 28 800 (до 1 сентября)