Новогодняя скидка на все курсы и годовую подписку до 14 января!

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

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

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

20 марта — 21 мая 2018
40 000 32 800 (до 14 января 2018)

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

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

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

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

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

Выбор рабочей среды остается за вами. Можете работать в привычных продуктах 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 мая 2018
40 000 32 800 (до 14 января 2018)

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


Кириллица, история и практика
Запись закрыта
Кириллица, история и практика
Виктория Лопухина
Эксперименты в рамках кириллицы. Практический курс
Эксперименты в рамках кириллицы. Практический курс
Виталина Лопухина
5 февраля — 12 марта 2018
20 000 16 400 (до 14 января 2018)
1000 и 1 буква
1000 и 1 буква
Оля Панькова
26 февраля — 30 марта 2018
16 000 13 120 (до 14 января 2018)
English through illustration
English through illustration
Сюзанна Гарден
14 марта — 30 апреля 2018
16 000 13 120 (до 14 января 2018)
Дизайн персонажей для начинающих
Дизайн персонажей для начинающих
Максим Калякин
13 марта — 14 мая 2018
21 000
UX-дизайн
UX-дизайн
Андрей Гаргуль
по подписке
Меловой леттеринг
Меловой леттеринг
Игорь Мустаев
по подписке
Про_движение
Про_движение
Дмитрий Карпов
по подписке
Образ мысли: скетч
Образ мысли: скетч
Ярослава Клепикова
16 мая — 26 июня 2018
15 000 12 300 (до 14 января 2018)
Идеи в иллюстрации
Идеи в иллюстрации
Илья Митрошин
13 февраля — 30 марта 2018
25 000 20 500 (до 14 января 2018)
Останемся адекватными
Останемся адекватными
Ольга Герасименко
5 февраля — 5 марта 2018
18 000 14 760 (до 14 января 2018)
Fashion-иллюстрация как профессия
Fashion-иллюстрация как профессия
Лена Кер
12 марта — 12 апреля 2018
15 000 12 300 (до 14 января 2018)
Натюрморт акварелью
Натюрморт акварелью
Нина Орлова
6 марта — 13 апреля 2018
17 000 13 940 (до 14 января 2018)
Пиксельная графика
Пиксельная графика
Сергей Костик
по подписке
Перспектива в иллюстрации
Перспектива в иллюстрации
Илья Митрошин
по подписке
Рисуем кодом
Рисуем кодом
Александр Катин
8 мая — 8 июня 2018
16 000 13 120 (до 14 января 2018)
Фотореалистичные раскадровки
Запись закрыта
Фотореалистичные раскадровки
Татьяна Васьковская
Основы анатомии для изображения человека
Основы анатомии для изображения человека
Ярослава Клепикова
14 января — 30 марта 2018
30 000 24 600 (до 14 января 2018)
3D Мастерская: иллюстрация, леттеринг и кинетическая типографика в Cinema4D
3D Мастерская: иллюстрация, леттеринг и кинетическая типографика в Cinema4D
Дмитрий Карпов Саша Кац
6 марта — 12 апреля 2018
25 000 20 500 (до 14 января 2018)
Кристаллизация момента
Кристаллизация момента
Глеб Солнцев
1 февраля — 6 марта 2018
18 000 14 760 (до 14 января 2018)
Дизайн-мышление — накачка идеями
Дизайн-мышление — накачка идеями
Дмитрий Карпов
16 января — 15 февраля 2018
22 000 18 040 (до 14 января 2018)
Дизайн-менеджмент: как создавать и продавать дизайн
Запись закрыта
Дизайн-менеджмент: как создавать и продавать дизайн
Антон Гора Алексей Лури
10 шагов в CInema 4D за 2 недели
10 шагов в CInema 4D за 2 недели
Саша Кац
23 января — 6 февраля 2018
9 999 8 199 (до 14 января 2018)
12 главных уроков по типографике
12 главных уроков по типографике
Свят Вишняков
1 февраля — 14 марта 2018
22 000 18 040 (до 14 января 2018)
Основы веб-разработки
Основы веб-разработки
Сергей Нугаев
22 января — 23 марта 2018
25 000 20 500 (до 14 января 2018)
33 совета для творческих людей
33 совета для творческих людей
Дмитрий Карпов
по подписке
Рисуем животных акварелью
Рисуем животных акварелью
Ася Лисина
по подписке
Ботаническая акварель для начинающих
Ботаническая акварель для начинающих
Анна Диричева
по подписке
Здоровые настройки
Здоровые настройки
Ольга Герасименко
по подписке
Современный веб
Сергей Нугаев
по подписке

до конца 2017 года
Секреты композиции
Секреты композиции
Ярослава Клепикова
по подписке
Язык дизайна
Дмитрий Карпов
по подписке

до конца 2017 года
English to sell your Ideas
English to sell your Ideas
Наталья Голубкова Оксана Блошенкова
по подписке
Точка входа: движок Unity — десктоп, мобайл, VR, видео
Точка входа: движок Unity — десктоп, мобайл, VR, видео
Павел Васютин
15 января — 21 февраля 2018
25 000 20 500 (до 14 января 2018)
Создание визуального языка бренда
Создание визуального языка бренда
Стас Хрусталев Игорь Киселев
19 февраля — 2 апреля 2018
19 000 15 580 (до 14 января 2018)
Все, что знает о брендинге Сергеев
Все, что знает о брендинге Сергеев
Даниил Сергеев
5—26 марта 2018
13 000 10 660 (до 14 января 2018)
Фантастическая архитектура виртуального мира
Фантастическая архитектура виртуального мира
Владимир Редёга
15 февраля — 12 апреля 2018
35 000 28 700 (до 14 января 2018)
Интерактивная архитектурная визуализация — VR-презентация, которая всех поразит
Интерактивная архитектурная визуализация — VR-презентация, которая всех поразит
Владимир Редёга
15 марта — 14 мая 2018
33 000 27 060 (до 14 января 2018)
язык программирования. что это?
Сергей Нугаев
по подписке

до конца 2017 года
Readymag. Дизайн без кода
Павел Кедич
по подписке

февраль 2018 года
Это — Photoshop! Борьбы с правдой, манипуляции с реальностью и другой обман
Софья Надеждина
по подписке

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

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

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

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

март 2018 года
DesignWorkout
DesignWorkout
Дима Барбанель
10 500