Принципы дизайна — введение в визуальную иерархию

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

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

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

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

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

Визуальная иерархия: новое понимание визуальной композиции для интерактивных интерфейсов

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

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

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

Цвет в визуальной иерархии

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

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

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

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

Хорошим примером значимого структурного использования цвета в веб-дизайне является сайт The Names for Change. Сайт сразу передает свою структуру с помощью цвета; по умолчанию организация разбросана, но ее можно изменить по теме и/или цвету.

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

Размер в визуальной иерархии

Давайте представим себе иллюстрацию одной большой птицы, сидящей рядом с тремя меньшими. Без какой-либо дополнительной информации этот простой рисунок сразу же передает отношения между его элементами: родителем и детьми, которые в совокупности сообщают о семье.

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

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

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

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

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

Выравнивание в визуальной иерархии

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

Жесткая композиция может казаться застойной и визуально неинтересной, если какой-либо элемент не выделяется из визуальной сетки, т. е. из чувства порядка. Несовпадение или «нарушение сетки» — это возможность придать графическому элементу больший визуальный вес. Эта концепция является фундаментальной для визуальной иерархии в дизайне.

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

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

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

Во-первых, посетителям предлагается послушать музыку, щелкнув треки альбома, которые традиционно выровнены в альбомном формате. Однако, позволяя посетителям перестраивать элементы ДНК сайта, концепция альбома передается не просто как серия треков, а как нелинейная конструкция фрагментированных элементов во времени.

Фигуры в визуальной иерархии

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

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

Цель «понравиться» изображению, загрузить файл, сделать телефонный звонок или проверить сообщение передается просто и непосредственно с помощью значков (геометрических фигур). Эта форма эффективной визуальной коммуникации становится все более важной на глобальном рынке, где цифровые продукты часто обслуживают обширную международную аудиторию, говорящую на нескольких языках.

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

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

Движение в визуальной иерархии

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

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

На сайте «Я помню» основной интерфейс (анимированный) сразу выделяется, так как приглашает к взаимодействию. Хотя движение и интерфейс являются функциональными навигационными инструментами, визуальные дизайнеры использовали возможную потерю этих элементов, чтобы сообщить основную миссию веб-сайта: болезнь Альцгеймера. Точно так же, как исчезают воспоминания пациентов, для которых организация собирает средства, веб-сайт медленно исчезает без активного взаимодействия.

Звук в иерархии информации

Звук — еще один инструмент, который невозможно использовать в печатных СМИ, но который еще предстоит развить в рамках принципов иерархии. Поскольку звук полностью невизуален, нет правил, на которые можно было бы ссылаться. Но звук также может быть инструментом дизайна, который эффективно передает содержание, а также настроение или смысл. Элементы дизайна, которые несут определенные звуки, могут быть сгруппированы относительно друг друга, а самые жирные могут казаться наиболее важными или обозначать отделение от группы.

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

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

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

Концепция визуальной иерархии

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

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

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

Дальнейшее чтение в блоге Toptal Design:

• Улучшите свой UX с помощью четкой визуальной иерархии
• Основы дизайна — руководство по визуальной иерархии (с инфографикой)
• Принципы проектирования: введение в иерархию
• Лучшие практики дизайна пользовательского интерфейса для лучшей сканируемости
• Улучшите свой UX с помощью этих успешных принципов дизайна взаимодействия