2% скидка за регистрацию!

После регистрации вы получите скидку 2% к стоимости любого курса.

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


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

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

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

20 марта — 21 мая
40 000

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

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

Вы научитесь создавать рабочие интерфейсы для современных требований рынка и реальных технологий, а не просто рисовать красивые картинки на 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. Исследует возможности цифрового и физического взаимодействия в личных проектах.

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

Что в итоге

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

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

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


Кириллица, история и практика
Кириллица, история и практика
Виктория Лопухина
15 мая — 29 июня
20 000
Эксперименты в рамках кириллицы. Практический курс
Эксперименты в рамках кириллицы. Практический курс
Виталина Лопухина
4 сентября — 11 октября
20 000 18 000 (до 16 марта)
1000 и 1 буква
1000 и 1 буква
Оля Панькова
26 февраля — 30 марта
16 000
English through illustration
English through illustration
Сюзанна Гарден
14 марта — 30 апреля
16 000
Дизайн персонажей для начинающих
Дизайн персонажей для начинающих
Максим Калякин
13 марта — 14 мая
21 000
Образ мысли: скетч
Образ мысли: скетч
Ярослава Клепикова
16 мая — 26 июня
15 000
Идеи в иллюстрации
Идеи в иллюстрации
Илья Митрошин
13 февраля — 30 марта
25 000
Рисуем кодом
Рисуем кодом
Александр Катин
8 мая — 8 июня
16 000
Фотореалистичные раскадровки
Фотореалистичные раскадровки
Татьяна Васьковская
1 октября — 16 ноября
30 000
Основы анатомии для изображения человека
Основы анатомии для изображения человека
Ярослава Клепикова Александр Безин
29 мая — 13 августа
30 000
Кристаллизация момента
Кристаллизация момента
Глеб Солнцев
12 июня — 18 июля
18 000 17 201 (до 9 марта)
Дизайн-мышление — накачка идеями
Дизайн-мышление — накачка идеями
Дмитрий Карпов
16 мая — 16 июня
22 000
Дизайн-менеджмент: как создавать и продавать дизайн
Дизайн-менеджмент: как создавать и продавать дизайн
Антон Гора Алексей Лури
21 мая — 25 июня
20 000
12 главных уроков по типографике
12 главных уроков по типографике
Свят Вишняков
15 мая — 30 июня
22 000 19 800 (до 9 марта)
Основы веб-разработки
Основы веб-разработки
Сергей Нугаев
13 июня — 13 августа
25 000
Точка входа: движок Unity — десктоп, мобайл, VR, видео
Точка входа: движок Unity — десктоп, мобайл, VR, видео
Павел Васютин
13 июня — 25 июля
25 000
Создание визуального языка бренда
Создание визуального языка бренда
Стас Хрусталев Игорь Киселев
19 февраля — 2 апреля
19 000
DesignWorkout
DesignWorkout
Дима Барбанель
10 500
Клиент не всегда лев
Клиент не всегда лев
Дмитрий Карпов
10 апреля — 15 мая
27 000
Это — Photoshop! Борьбы с правдой, манипуляции с реальностью и другой обман
Софья Надеждина
по подписке

февраль 2018 года
Readymag. Дизайн без кода
Павел Кедич
по подписке

февраль 2018 года
Работа с макетом
Сергей Нугаев
по подписке

март 2018 года
История дизайна для тех кто учит Photoshop
Софья Надеждина
по подписке

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

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

апрель 2018 года