8 800 500 30 94
9:00-19:00 по МСК
9:00-19:00 по МСК
* Нажимая на кнопку, вы даете согласие на обработку своих персональных данных и получение sms-, email-сообщений и сообщений в# мессенджерах от Среды обучения
Азбука Дизайна / 28 февраля
и
«И» — это информационный дизайн и интерфейсы. Об этом в новом выпуске «Азбуки дизайна»
ТЕОРИЯ
Термины
(пользовательский интерфейс, user interface, UI) — способ доступа, использования и передачи информации между пользователем и системой. Включает в себя средства вывода информации (например, экран, дисплей, динамик) и средства ввода информации (например, кнопки, сенсорные панели, датчики и др.). Средства ввода и вывода, как и интерфейсы в целом, должны проектироваться в соотвествии с требованиями эргономики: быть удобными и практичными, располагаться и компоноваться разумно и понятно, соответствовать физиологии человека, не приводить к негативным последствиям для пользователя. UI-дизайн — набор графически оформленных функциональных элементов сайта или приложения. Совокупность того, как в целом выглядит сайт, программа или мобильное приложение.
Возможные виды интерфейсов:
— Визуальный: графический и текстовый (например, интерфейс командной строки);
— Тактильный (осязательный);
— Голосовой;
— Жестовый и др.
Возможные виды интерфейсов:
— Визуальный: графический и текстовый (например, интерфейс командной строки);
— Тактильный (осязательный);
— Голосовой;
— Жестовый и др.
— это принцип организации системы, при котором цель достигается информационным обменом между ее элементами. Принцип интерактивности применяется в информатике, программировани и теории информации, системах телекоммуникаций, социологии и дизайне. Функциональная задача дизайна заключается в проектировании эффективного взаимодействия. Например, проектирование сценария взаимодействия пользователя с медиаобъектом (сайтом, мобильным приложением, программой), отвечающего ряду определенных технических требований и стандартов.
— возвращаясь, к предыдущему выпуску «Азбуки» про знаки, иконка или пиктограмма — это знак, в котором «форма является объяснительной схемой функции объекта». Иконка изображается без подписи, поэтому она должна быть максимально «говорящей», чтобы изображаемый объект узнавался за доли секунды.
Как элемент графического дизайна, иконка — это небольшая картинка в интерфейсе системы, представляющая приложение, файл, каталог, окно, устройство и др. Иконки были изобретены в 1970 году в исследовательском центре PARC компании «Ксерокс», чтобы облегчить взаимодействие с компьютером для новичков. Сегодня иконки составляют основу дизайна интерфейсов мобильных приложений.
Говоря об иконках, мы всегда вспоминаем нашего студента Факультета дизайна Сергея Ершова. Он начал с самых основ, а теперь может нарисовать привлекательные иконки для всего на свете. Теперь он автор действительно большого количества наборов иконок на разные темы. И находит свои работы в самых неожиданных местах.
Как элемент графического дизайна, иконка — это небольшая картинка в интерфейсе системы, представляющая приложение, файл, каталог, окно, устройство и др. Иконки были изобретены в 1970 году в исследовательском центре PARC компании «Ксерокс», чтобы облегчить взаимодействие с компьютером для новичков. Сегодня иконки составляют основу дизайна интерфейсов мобильных приложений.
Говоря об иконках, мы всегда вспоминаем нашего студента Факультета дизайна Сергея Ершова. Он начал с самых основ, а теперь может нарисовать привлекательные иконки для всего на свете. Теперь он автор действительно большого количества наборов иконок на разные темы. И находит свои работы в самых неожиданных местах.
— это представление понятий и явлений в виде графических образов — иконок. Иконографика используется в визуальных пользовательских интерфейсах. Каждую иконку, как элемент набора однородных символов, отличают наглядность, единый визуальный стиль и, пожалуй, минимализм. В дизайне иконок важно ничего не усложнять, чтобы пользователь имел возможность моментально воспринять объект, который скрывается за изображением, особенно если иконка небольшого размера. При создании иконок учитываются особенности человеческого восприятия и размеры экранов устройств (компьютеров, планшетов, мобильных телефонов и др.). Важный критерий иконки — ее максимальная адаптивность к видам дисплеев.
Информационный дизайн — оформление и подача различной информации с учетом эргономики, функциональных возможностей, психологических критериев восприятия информации человеком. Сборка сложных и неструктурированных данных и отношений в системную информацию с помощью визуальных инструментов — изображений, цвета, диаграмм, блоков, схем, символов, стрелок, карт и др.
Функции инфографики:
— визуализировать большой объём взаимосвязанных данных;
— придать эмоциональную окраску данным («оживить»);
— проиллюстрировать принцип работы схем или оборудования;
— продемонстрировать определённую тенденцию;
— рассказать о соотношение каких-либо предметов и фактов;
— указать на преимущества и выгоды.
Цель информационного дизайна — популяризировать информацию, отобразить то, для чего недостаточно слов. А задача информационного дизайнера — расположить данные, компоненты схемы, части диаграммы таким образом, чтобы пользователь сразу нашел необходимые ему сведения. Первоклассные образцы инфографики можно найти в популярных изданиях: New York Times, National Geographic и др.
Функции инфографики:
— визуализировать большой объём взаимосвязанных данных;
— придать эмоциональную окраску данным («оживить»);
— проиллюстрировать принцип работы схем или оборудования;
— продемонстрировать определённую тенденцию;
— рассказать о соотношение каких-либо предметов и фактов;
— указать на преимущества и выгоды.
Цель информационного дизайна — популяризировать информацию, отобразить то, для чего недостаточно слов. А задача информационного дизайнера — расположить данные, компоненты схемы, части диаграммы таким образом, чтобы пользователь сразу нашел необходимые ему сведения. Первоклассные образцы инфографики можно найти в популярных изданиях: New York Times, National Geographic и др.
В отличие от других жанров изобразительного искусства иллюстрация (художественная, книжная, журнальная и др.) призвана с помощью визуальных образов помочь человеку понять содержание текста, передать настроение написанного, наглядно изобразить основную идею всего материала или его части. Принципиальный признак иллюстрации: ее сюжет определяется не свободным выбором художника, а текстом, который она визуализирует. Первые наглядные изображения, поясняющие суть текста, известны со времен Древнего Египта — они сопровождали написанные на папирусах заклинания и гимны.
Другой существенный нюанс: иллюстрация является коммерческим продуктом (например, рекламная иллюстрация, графика для делового или развлекательного сайта / издания с определенной аудиторией и др.), а значит, требования к ней выходят за рамки творческого самовыражения. Иллюстратор может иметь свой «фирменный» неповторимый стиль рисования, но техника исполнения конкретного проекта (вместе с тематикой, объемом, сроками выполнения и др.) может быть поставлена в техническом задании / брифе. В этом случае задача иллюстратора включает мастерски продуманную техническую работу — соблюсти условия проекта и правила подачи визуального материала для аудитории, а не только творческий труд.
Наконец, современная иллюстрация должна учитывать ряд технических требований, например, корректно адаптироваться для экранов разных устройств и быть пригодной для тиражирования с учетом технологий полиграфии.
Для слушателей своего курса «Иллюстрация» преподаватель Люба Березина подготовила большую подборку выразительных художников и иллюстраторов — для вдохновения и формирования представления о современной иллюстрации. Часть из них мы решили показать вам.
Другой существенный нюанс: иллюстрация является коммерческим продуктом (например, рекламная иллюстрация, графика для делового или развлекательного сайта / издания с определенной аудиторией и др.), а значит, требования к ней выходят за рамки творческого самовыражения. Иллюстратор может иметь свой «фирменный» неповторимый стиль рисования, но техника исполнения конкретного проекта (вместе с тематикой, объемом, сроками выполнения и др.) может быть поставлена в техническом задании / брифе. В этом случае задача иллюстратора включает мастерски продуманную техническую работу — соблюсти условия проекта и правила подачи визуального материала для аудитории, а не только творческий труд.
Наконец, современная иллюстрация должна учитывать ряд технических требований, например, корректно адаптироваться для экранов разных устройств и быть пригодной для тиражирования с учетом технологий полиграфии.
Для слушателей своего курса «Иллюстрация» преподаватель Люба Березина подготовила большую подборку выразительных художников и иллюстраторов — для вдохновения и формирования представления о современной иллюстрации. Часть из них мы решили показать вам.
— изображение, образ, репутация, авторитет — то, как персона, компания, бренд, продукт или услуга воспринимаются в обществе. Имидж существует только в восприятии аудитории. Создание и поддержание имиджа связано с манипуляциями общественным мнением, а значит, предполагает знания социальной психологии. Составные элементы имиджа включают идентичность (буквально то, что компания или продукт представляет собой на самом деле), фирменный стиль, стратегию коммуникации с аудиторией / потребителем. Задача дизайнера как члена команды по формированию имиджа — создать узнаваемый и запоминающийся образ.
Имиджевый дизайн — (или брендинг) — создание и поддержание мнения аудитории на основе брендинговой стратегии с помощью визуальных элементов фирменного стиля (фирменных цветов и шрифта, визуальных образов, узнаваемой полиграфии, упаковки и т. д.)
Имиджевый дизайн — (или брендинг) — создание и поддержание мнения аудитории на основе брендинговой стратегии с помощью визуальных элементов фирменного стиля (фирменных цветов и шрифта, визуальных образов, узнаваемой полиграфии, упаковки и т. д.)
(indexed color) — способ передачи цветовой палитры в изображении для задания наиболее часто использующихся цветов и экономии дискового пространства при создании выходного файла. Активно используется в файлах формата GIF. Файлы с индексированными цветами, содержат индексные номера цветов, применяемые для передачи цвета в изображении.
На самом деле, инструментов множество. И у каждого специалиста и слаженной команды есть свой необходимый минимум для продуктивной работы: графические редакторы, инструменты для проектирования сайтов и приложений; верстки, прототипирования, тестирования; сервисы постановки задач и управления проектами; хранилища и системы организации материалов. Регулярно появляются новинки программного обеспечения и онлайн-сервисы, с дополнительным функционалом или оптимизирующие всем известные алгоритмы, которые специалисты успешно применяют в своей работе.
Если говорить о базе:
— владение векторным редактором Adobe Illustrator;
— владение растровым редактором Adobe Photoshop;
— владение редактором компоновки и подготовки к публикации электронных и печатных изданий Adobe InDesign.
Дизайнеру интерфейсов еще не обойтись без инструментов проектирования сайтов / интерфейсов. И тут выбор по-настоящему широк: Sketch, Balsamiq Mockups, Axure RP и др.
Если говорить о базе:
— владение векторным редактором Adobe Illustrator;
— владение растровым редактором Adobe Photoshop;
— владение редактором компоновки и подготовки к публикации электронных и печатных изданий Adobe InDesign.
Дизайнеру интерфейсов еще не обойтись без инструментов проектирования сайтов / интерфейсов. И тут выбор по-настоящему широк: Sketch, Balsamiq Mockups, Axure RP и др.
на заметку
Дизайнеры
на заметку
Наши преподаватели
Специалист по маркетинговым исследованиям. Разрабатывает методологии для решения нестандартных исследовательских задач. 20-летний опыт работы на стороне заказчика и на стороне агентства. Работал с брендами Procter&Gamble, Wella, Wrigley's, Philip Morris, Pfizer, Bayer, Renault, Gillette, Bourgeois, Colgate-Palmolive, Yves Rocher и др.
Владимир Изгаршев
Преподаватель курса «Маркетинговые исследования»
на заметку
Немного об информационном дизайне
В рамках обучения вы пройдете:
Инструменты пакета Adobe
Преподаватели: Илья Черникович и Дмитрий Федотов
3 курса — по одному для каждого инструмента:
— Adobe Photoshop;
— Adobe Illustrator;
— Adobe InDesign.
Не менее 78 часов практики в каждом из курсов, чтобы научиться полноценно работать с векторными и растровыми изображениями, ретушировать, проектировать и верстать электронные и печатные издания
3 курса — по одному для каждого инструмента:
— Adobe Photoshop;
— Adobe Illustrator;
— Adobe InDesign.
Не менее 78 часов практики в каждом из курсов, чтобы научиться полноценно работать с векторными и растровыми изображениями, ретушировать, проектировать и верстать электронные и печатные издания
Иллюстрация
Преподаватель: Александр Богомолов
Курс будет полезен особенно тем, кому, так или иначе, приходится сталкиваться с рисованием и применением иконок. Но помимо этого даст более широкое понимание визуальных коммуникаций в целом. Начиная с истории и заканчивая восприятием человека, мы детально всё разберём и с головой погрузимся в тему. Польза от этого будет точно.
Курс будет полезен особенно тем, кому, так или иначе, приходится сталкиваться с рисованием и применением иконок. Но помимо этого даст более широкое понимание визуальных коммуникаций в целом. Начиная с истории и заканчивая восприятием человека, мы детально всё разберём и с головой погрузимся в тему. Польза от этого будет точно.
Иконографика
Преподаватель: Александр Богомолов
На курсе студенты учатся создавать емкие информативные символы как часть удобного и понятного интерфейса и для более широкого применения. Разрабатывают целостную систему иконок для решения задач дизайн-проекта. Формируют понимание о визуальных коммуникациях, начиная с истории знаков и заканчивая психологическими особенностями восприятия человека.
На курсе студенты учатся создавать емкие информативные символы как часть удобного и понятного интерфейса и для более широкого применения. Разрабатывают целостную систему иконок для решения задач дизайн-проекта. Формируют понимание о визуальных коммуникациях, начиная с истории знаков и заканчивая психологическими особенностями восприятия человека.
Инфографика
Преподаватель:
Курс помогает студентам сформировать навык изображения сложной информации наглядно и подходящим к контексту образом. Учит с помощью визуальных средств демонстрировать большие объемы данных, показывать соотношение данных во времени и пространстве, демонстрировать тенденции.
Курс помогает студентам сформировать навык изображения сложной информации наглядно и подходящим к контексту образом. Учит с помощью визуальных средств демонстрировать большие объемы данных, показывать соотношение данных во времени и пространстве, демонстрировать тенденции.
на заметку
А теперь о дизайне интерфейсов
В рамках обучения вы пройдете:
Репродукция интерфейсов
Преподаватель: Дмитрий Головков
На курсе студенты знакомятся с разными видами сайтов и типами интерфейсов. Учатся отличать удачные от неудачных. Детально разбирая готовые продукты, учатся понимать логику мобильных и веб-интерфейсов. При создании собственного продукта ориентируются на существующие качественные решения. Тренируют навыки проектирования, начиная с отрисовки и адаптации веб-интерфейсов. Затем переходят к мобильным интерфейсам. Подробно разбирают инструменты для удобного и быстрого проектирования.
На курсе студенты знакомятся с разными видами сайтов и типами интерфейсов. Учатся отличать удачные от неудачных. Детально разбирая готовые продукты, учатся понимать логику мобильных и веб-интерфейсов. При создании собственного продукта ориентируются на существующие качественные решения. Тренируют навыки проектирования, начиная с отрисовки и адаптации веб-интерфейсов. Затем переходят к мобильным интерфейсам. Подробно разбирают инструменты для удобного и быстрого проектирования.
Дизайн сайтов
Преподаватель: Роман Шелехов
Цель курса: научиться оценивать диджитал-продукт по четким критериям и разрабатывать качественные решения с учетом данных пользовательского опыта. Дизайнер диджитал-продукта участвует практически во всех этапах создания и вывода его на рынок. Дизайнер определяет, каким должен быть продукт, для какой аудитории предназначается. Продумывает его концепцию, занимается детальным проектированием и дизайном, аналитикой и тестированием на реальных пользователях, а также анализирует дистрибуцию и маркетинговое продвижение. На курсе студенты изучают критерии оценки интерфейса и последовательно разберают элементы, делающие цифровой продукт качественным: архитектуру и навигацию, типографику, визуальные образы, иконографику и анимацию. Анализируют инструменты прототипирования, знакомятся с юзабилити-аналитикой и тестированием продукта.
Цель курса: научиться оценивать диджитал-продукт по четким критериям и разрабатывать качественные решения с учетом данных пользовательского опыта. Дизайнер диджитал-продукта участвует практически во всех этапах создания и вывода его на рынок. Дизайнер определяет, каким должен быть продукт, для какой аудитории предназначается. Продумывает его концепцию, занимается детальным проектированием и дизайном, аналитикой и тестированием на реальных пользователях, а также анализирует дистрибуцию и маркетинговое продвижение. На курсе студенты изучают критерии оценки интерфейса и последовательно разберают элементы, делающие цифровой продукт качественным: архитектуру и навигацию, типографику, визуальные образы, иконографику и анимацию. Анализируют инструменты прототипирования, знакомятся с юзабилити-аналитикой и тестированием продукта.
Мобильные приложения
Преподаватель: Роман Шелехов и Маргарита Петухова
Курс будет полезен особенно тем, кому, так или иначе, приходится сталкиваться с рисованием и применением иконок. Но помимо этого даст более широкое понимание визуальных коммуникаций в целом. Начиная с истории и заканчивая восприятием человека, мы детально всё разберём и с головой погрузимся в тему. Польза от этого будет точно.
Курс будет полезен особенно тем, кому, так или иначе, приходится сталкиваться с рисованием и применением иконок. Но помимо этого даст более широкое понимание визуальных коммуникаций в целом. Начиная с истории и заканчивая восприятием человека, мы детально всё разберём и с головой погрузимся в тему. Польза от этого будет точно.
Мастерская интерактива
Преподаватель: Роман Шелехов
Курс моделирует деятельность диджитал-агентства. Студенты пошагово работают над проектом в качестве дизайнеров, преподаватель выступает в роли арт-директора. Соблюдаем максимальную достоверность :)
Курс моделирует деятельность диджитал-агентства. Студенты пошагово работают над проектом в качестве дизайнеров, преподаватель выступает в роли арт-директора. Соблюдаем максимальную достоверность :)
sredaobuchenia
Есть сервисы, которыми можно просто пользоваться, а есть те, которых ждешь не дождешься, чтобы еще раз ими воспользоваться
НА ЗАМЕТКУ
Полезные подсказки в цифрах:
15 удачных примеров подсказок в интерфейсе
Пользователи спотыкаются на каждом шагу, не понимая что это, зачем, как это использовать. В большинстве этих случаев может помочь простая подсказка.
Подробнее
9 лучших сеток для веб и мобильного интерфейса
Несколько разных систем, с помощью которых, вам будет легче работать.
Подробнее
26 лекций для дизайнеров интерфейсов
Узнаете много нового о принципах организаций и различных деятельностей в области проектирования и дизайна интерфейсов.
Подробнее
ГИПЕРРЕАЛЬНОСТЬ: ИНТЕРФЕЙСЫ БУДУЩЕГО
на заметку
Еще немного об интерактиве
Главное, что нужно понимать, создавая интерактивный дизайн, это право выбора. Технологии не появляются из ниоткуда. Революционные вещи появляются благодаря длительным наблюдениям и постоянным исследованиям.
ШОН ФОЛМЕР TED
ИНТЕРАКТИВНЫЕ ТЕХНОЛОГИИ БУДУЩЕГО
Дизайнер Шон Фоллмер создаёт будущее
при помощи машин, которые делают информацию
доступной для физического взаимодействия
при помощи машин, которые делают информацию
доступной для физического взаимодействия
