Пользовательский интерфейс и представление информации

все курсы

Программирование

Курс находится на модерации. Данные могут быть неактуальны.

3.1

4 недели,

начало 25 апреля

Сложность

Начинающий

Тип обучения

Курс

Формат обучения

С проверкой домашнего задания

Трудоустройство

Отсутствует

Стоимость курса

53 100 ₽

нет рассрочки

Хороший пользовательский интерфейс учитывает человеческие слабости, перекладывает работу на машину, минимизирует ошибки и раздражение пользователя. Но как именно?

Классические примеры интерфейса, такие как Гугль‑карты, Айфон или калькулятор кредитов на сайте польского банка, демонстрируют универсальные принципы проектирования, которые не зависят от стандартов операционной системы, среды или устройства. Они работают и в компьютерах, и в телефонах, и в часах, и в голосовых помощниках, и в виртуальной реальности. Кроме общих принципов на курсе рассматриваются и важные детали: мобильная вёрстка, анимация, звук, пиктограммы.

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

Эти идеи и принципы рассматриваются в теоретической части курса.

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

Курс вырос из классического курса Артёма Горбунова. С 2012 года Илья Бирман дополняет программу новыми темами и примерами.

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

Предварительные знания участников полезны, но необязательны.

Дистанционный курс

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

Что вы получите после обучения

Приобретаемые навыки

Анимация

Пользовательский интерфейс

Информационный стиль

Представление информации

Человечность и технозависимость

Модальность

Прицеливание и закон Фиттса

Экранная и бумажная типографика

Вёрстка для мобильных устройств

Вёрстка и разработка экранных форм

Коэффициент информативности

Информационные слои

Систематизация

Вас будут обучать

Илья Бирман

курсов

Арт‑директор бюро, соавтор «Советов». Создатель сайта правил русского языка, типографской раскладки, движка блогов «Эгея». Автор книги «Пользовательский интерфейс»

Образовательная организация

Бюро Горбунова

0 отзывов

Бюро Горбунова открыто в 2007 году. Миссия бюро — передача дизайнерских знаний, идей пользы и работоспособного дизайна. Рубрика «Советы» — главный русскоязычный источник практических знаний о дизайне. Бюро издаёт книги и проводит курсы о дизайне, отношениях с клиентами, навигации, редактуре и управлении. Длительные программы Школ бюро дают билет в профессию дизайнерам, редакторам и руководителям.

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

Идея архитектурной платформы в двух словах — «доступный кайф».

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

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

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

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

В бюро принята система «Ресурс». Мы работаем где и когда удобно. Это вдохновило нас открыть Коворкафе — удобное и тихое пространство для труда, знакомства, обмена знаниями с единомышленниками: бюрошниками, предпринимателями и дизайнерами из других студий.

Программа курса

1 неделя

Что такое интерфейс. Правила игры и их физическое воплощение

Человечность и технозависимость. Пусть потеет машина. Данные пользователя бесконечно ценны. Сначала данные, потом фильтры. Технологии — под капот

Привычка. Окна подтверждения и рассказы о новшествах при запуске программы. Нативность. Управление привычкой как коммерческий инструмент

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

Последовательное волшебство. «Законы физики» виртуального мира

Взгляд новичка. Каждый экран имеет смысл. Пустые и заполненные состояния экранов

Обратная связь. Адекватность, нежность, честность, мгновенность, непрерывность, физичность. В чём состоял главный прорыв Айфона

Прицеливание и закон Фиттса. Точка под курсором, углы и стороны экрана. Мышь и палец. Один объект — одна ссылка. Без дыр. Движение и клик — один жест. Прицеливание на мобильных устройствах

Близость. Закон близости и визуальная структура. Группировка элементов

Информативность. Убрать всё лишнее. Вынести за скобки. Соединить информационные функции. Добавить сигнал. Миф о семи элементах.

Задание. Дизайн фрагмента интерфейса

2 неделя

Текст в интерфейсе. Синтаксис элементов интерфейса

Информационный стиль. Стоп‑слова в интерфейсе. Навигация и формулировка сообщений

Язык роботов

Навигация на сайтах

Окна. Многодокументный и однодокументный интерфейс. Конфигурация окон. Теорема о попапах

Экранная и бумажная типографика. Модульная сетка в экранном дизайне. Удобочитаемость экранного текста

Вёрстка для мобильных устройств

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

Вёрстка и разработка экранных форм. Все ненавидят формы. Как и когда сообщать об ошибках

Задание. Дизайн таблицы, графика, формы

3 неделя

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

Случайные искажения информации

Выбор формата. Предложение, таблица, график. Разрешение носителя информации

Информационный мусор. Регулярные структуры. Контраст. Эффект «1+1=3+». Данные не требуют украшения

Коэффициент информативности

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

Восприятие больших объёмов информации

Сравнения

Многомерный мир на плоском носителе

Умножение информационных элементов. Зафиксировать дизайн и заменять данные. Пространственная организация элементов. Эффект множества

Информационные слои. Фон, линии и точки, подписи. Изменение расслоения в ответ на действия пользователя. Слои и языки

Транспортные схемы

Параллельное изложение. Не просто дублирование, а взгляд с разных сторон

Задание. Редизайн фрагмента интерфейса

4 неделя

Разработка нестандартных элементов интерфейса. Нестандартность ради пользы

Визуальная семантика. Знаки и символы. Пиктограммы

Листание и прокрутка. Как выбрать. Как не выбирать

Звук в интерфейсе. Разрешение носителя информации. Уведомления и реакция

Подготовка и анализ интерфейсной задачи

Анимация. Зачем: внимание, объяснение, реалистичность, шоу. Как: ненавязчивость, естественность, согласованность, чистота

Доступность. Не для галочки. Ограниченные возможности — у всех. Зрение. Слух. Моторика. Инклюзивный дизайн.

Систематизация. Стандарты, гайдлайны, сетки, юай‑киты и дизайн‑системы. Внедрение и поддержание системы. Гибкость и адаптивность стандартов. Технологичность и взаимодействие с разработчиками