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

Что такое визуальная иерархия и почему она важна?

Если посмотреть на приведенное ниже изображение между экранами A и B, то какой из них привлекает больше внимания, чем другой? Какой экран дает более прямое определение заголовка, подзаголовка и содержания?

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

Динь-динь! Да, это экран B!

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

Что такое визуальная иерархия и почему она важна в графическом дизайне?

Продолжайте читать, чтобы узнать больше.

Визуальная иерархия: 5 золотых принципов дизайна - обложка статьи

UniwexSoft — разрабатываем уникальные сайты, smart-контракты, мобильные приложения в сфере Blockchain, собираем IT-отделы под ключ для реализации вашего проекта, заменим CTO или сильно облегчим ему жизнь.

Если вам нужен сайт, мобильное приложение, NFT маркетплейс или крипто игра, напишите нам.

Что такое визуальная иерархия?

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

Какой из этих элементов является наиболее важным?

На что человек должен обратить внимание в первую очередь?

Чаще всего это название организации, затем имя человека, его должность и, наконец, контактная информация.

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

В наши дни, когда средняя продолжительность внимания человека составляет всего 8 секунд, для успешного создания интересного контента дизайнерам крайне важно придерживаться правильной визуальной иерархии.

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

No 1: Композиция

Каждый фрагмент контента должен быть хорошо встроен.

Всегда помните, что главноепровести читателя через весь контентсверху вниз.

Для начала необходимо ответить на два основных вопроса:

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

Здесь на помощь приходит композиция.

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

важная информация может быть расположена в виде буквы "F"

Схема чтения

Большинство людей читают слева направо.

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

Ориентация на простоту делает Z-образную схему уникальной для дизайна целевых страниц
Визуальная иерархия наглядно

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

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

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

Правило третей

Правило третей помогает определить, где в дизайне должна быть размещена важная информация.

Опять же, оно служит для зрителя ориентиром, на что он должен обратить внимание в первую очередь. Правило третей состоит из двух направляющих по горизонтали и двух направляющих по вертикали.

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

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

Правило третей

No 2: Типографика

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

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

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

Три основных компонента – это заголовок, подзаголовок и основная часть.

Давайте посмотрим на изображение ниже.

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

визуальная иерархия, использующая контрастные размеры шрифтов для привлечения внимания

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

Кроме того, он лучше читается, так как выглядит гораздо четче.

No 3: Размер и масштаб

Когда речь идет о дизайне, размер имеет значение.

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

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

Таким образом, сообщение передается более эффективно.

пример правильной реализации принципа визуальной иерархии.

В качестве примера можно привести визуальный образ, представленный выше: огромный текст находится прямо в центре изображения. Но поскольку слово “Integrated” вызывает любопытство, зрители склонны искать “ответы“. Они будут сканировать текст, расположенный в правой верхней части изображения, в левую нижнюю. Это пример правильной реализации принципа визуальной иерархии.

Что касается форм, то при правильном расположении различные размеры могут создавать перспективу и глубину резкости. Это также помогает определить, на чем следует сосредоточить внимание читателя при просмотре.

Журнал “Time” и журнал “The New Yorker” своими иллюстрированными обложками дают хорошие рекомендации. Например, на этой обложке журнала Times за 1954 год изображен Уолт Дисней. Легко заметить, что в центре внимания находится сам Уолт Дисней, а персонажи мультфильмов нарисованы в гораздо меньшем масштабе за его спиной. Эта обложка дает читателю понять, что основная тема номера посвящена именно ему.

Или взгляните на The New Yorker (апрельский номер 2020 года), где в центре внимания – медсестра, разговаривающая по видеосвязи со своей семьей на родине.

пример правильной реализации принципа визуальной иерархии
Источник: Time Magazine “Walt Disney” 1954 (левая), The New Yorker “Bedtime” April 2020 (правая)

No 4: Цвет и контраст

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

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

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

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

Смелые цвета легко заметить, их можно использовать для выделения объектов или создания контраста в дизайне.

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

Это называется психологией цвета

Вот еще один пример. Видите, что основные кнопки CTA, такие как “Sign Up Free“(Зарегистрироваться бесплатно) и “Sign Up“(Регистрация), выполнены в другом цвете по сравнению с кнопкойLog In“(Вход)?

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

четко указывает, где новые пользователи могут зарегистрироваться, контрастные цвета, чтобы кнопки CTA выделялись больше.
Источник: Mailchimp

No 5: Белое или негативное пространство

Загроможденный сайт может отвлекать и быть неприятным для глаз.

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

Правильное использование белого пространства помогает читателям оставаться на экране и непосредственно воспринимать важную информацию.

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

Посмотрите на пример ниже:

 пример правильной реализации принципа визуальной иерархии.
Источник: Apple website

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

Главный приоритет или цель дизайнера (особенно UI/UX-дизайнера) – создать пространство, в котором информация легко усваивается.

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

Изображения, где не указан источник, за источник считать сайт: admiral.digital


Статья переведена на русский язык компанией UniwexSoft.

UniwexSoft — разрабатываем уникальные сайты, smart-контракты, мобильные приложения в сфере Blockchain, собираем IT-отделы под ключ для реализации вашего проекта, заменим CTO или сильно облегчим ему жизнь.

Если вам нужен сайт, мобильное приложение, NFT маркетплейс или крипто игра, напишите нам.

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

Related Posts

Развитие цифрового искусства

Развитие цифрового искусства

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

Новые цифровые технологии в искусстве

Новые цифровые технологии в искусстве

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

Виды цифрового искусства

Виды цифрового искусства

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

Особенности 3D-моделирования

Особенности 3D-моделирования

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

Приложения для 3D моделирования на ПК

Приложения для 3D-моделирования на ПК

3D-моделирование занимает особое место в различных отраслях современной индустрии. Приложения для 3D-моделирования на ПК позволяют художникам, дизайнерам и инженерам воплощать свои идеи в трёхмерном пространстве, создавая реалистичные…

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

UI-дизайн: пользовательский интерфейс

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

Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять
Отказаться