Три способа использовать визуальную иерархию в дизайне
Что такое визуальная иерархия?
Как правило, под этим термином подразумевают систему организованного ранжирования, которая позволяет определять главные и второстепенные структуры. Но в дизайне визуальная иерархия связана со всеми элементами и их восприятием в порядке важности.
Лучшие примеры иерархии — это дизайн плакатов. Подобно билбордам, плакаты также обычно печатаются в большом размере и размещаются в местах с высокой проходимостью. То есть у автора есть всего несколько секунд, чтобы привлечь внимание прохожего. Один из способов этого добиться — создать дизайн, создающий акцент на самом важном контенте.
Например этот плакат довольно прост в плане дизайна, но использование ограниченной цветовой палитры и интересной типографики привлекает взгляд зрителя. Но даже несмотря на то, что дизайн в основном состоит из шрифтов, иерархия в нем отчетливо видна. Сначала вы замечаете крупный заголовок One night only (всего одну ночь) так как он написан заглавными буквами и жирным шрифтом.
Изображение: Vengage
Почему визуальная иерархия важна?
Если все компоненты равнозначны, ничто не будет выделяться. Этого крайне важно избегать в веб-дизайне или дизайне приложений. Применение правил иерархии помогает направлять внимание клиента. Например, если пользователь впервые открывает приложение, грамотная презентация поможет ему познакомиться с ключевыми функциями программы. Первое впечатление очень важно, от него зависит, захочет ли пользователь посетить ресурс снова.
Взгляните на этот флаер. Да, в нем есть несколько хороших элементов дизайна, например, анимированный формат, который привлекает внимание. Но в нем слишком много отвлекающих элементов, и зритель не понимает, куда именно ему смотреть.
Изображение: Vengage
Чтобы сделать этот дизайн более привлекательным, необходимо продумать композицию и уменьшить важность некоторых иллюстраций.
Три способа создания визуальной иерархии
1. Масштаб
Один из самых простых и понятных способов создания иерархии в дизайне — это увеличить важный элемент.
Даже если остальные составляющие будут разного размера, в центре внимания всегда должен оставаться один элемент.
В этом любительском постере к фильму «Маленькие женщины» принцип масштабирования используется таким образом, что он нарушает правила дизайна. Но данное решение весьма уместно для передачи сюжета этого фильма.
Как мы уже писали ранее, один элемент должен быть больше другого. Но в данном примере все четыре персонажа фильма равнозначны, как по сюжету, так и на постере. Различается только содержимое фигур, что дает представление о характерах персонажей.
Изображение: SajadSafajooee
На этом плакате принцип масштабирования используется по-другому. Постер представляет собой коллаж из кадрированных фото джазовых инструментов и музыкантов. Все изображения равнозначны и визуально воспринимаются, как одна большая фотография, которая и является главной в иерархии. Клиент сразу понимает, что это реклама мероприятия, посвященного джазовой музыке. Если его интересует дополнительная информация, он опускает взгляд и изучает даты и место проведения.
Изображение: Vengage
Этот дизайн привлекает внимание не только масштабом, но и направляющими линиями и перспективой. Самый крупный элемент постера — это стилизованное слово Blame (вина), плавно соединяющееся с силуэтом, стоящим в дверном проеме. Палитра цветов дает зрителю понять, что это детективный фильм.
Изображение: IMDB
2. Цвет
Еще один способ создать иерархию в дизайне — это стратегическое использование цвета. Если вы ограничены определенной палитрой или у бренда, с которым вы работаете, есть собственные корпоративные цвета, это можно использовать, чтобы привлечь внимание к определенной части дизайна.
В этом примере используется всего несколько цветов: желтый, черный, белый и розовый. Желтый и розовый — это яркие цвета, и грамотное их применение позволяет направить внимание и создать иерархию. Даже несмотря на броский фон, розовая упаковка притягивает взгляд клиента гораздо эффективней. Здесь также используются и другие принципы дизайна, например масштабирование и пустое пространство.
Изображение: Commarts
Вне зависимости от палитры, которую вы используете для создания дизайна, необходимо использовать контрастные элементы. В этом примере это черный цвет. Он, как правило, выделятся больше других элементов, поэтому важно не переусердствовать.
Заголовок не только крупный и жирный, но также он является самым контрастным в этом дизайне. Именно этот прием позволяет создать иерархию.
Изображение: Nacorock
Вот пример плаката, в котором используется монохромная цветовая палитра для создания иерархии и единства. Для дизайна зонта использовался черно-синий цвет. Светлое название фильма и капли дождя выделяются на фоне двухцветного изображения персонажа, поющего под дождем. Удачное сочетание пустого пространства и картинки помогают привлечь внимание.
Изображение: Pinterest
3. Пустое пространство
Пустое (или негативное) пространство — это еще один прием по привлечению внимания зрителя.
Некоторые новички стараются использовать в своих работах как можно больше элементов. Однако хороший дизайн подразумевает наличие только самого важного и понятного визуального контента.
Вот хороший пример создания иерархии с помощью пустого пространства и масштаба. Дата и название мероприятия задаются более крупным шрифтом и композиционно отдалены от других элементов постера.
Изображение: Behance
Следующий плакат использует негативное пространство для создания заголовка. Обратите внимание на интересный прием, в котором «a» находится внутри букв «j» и «m». Благодаря использованию контрастных цветов, масштаба и пустого пространства, этот дизайн довольно необычным образом привлекает внимание зрителей.
Изображение: Page-online
Однако не обязательно следовать принципам минимализма, используя прием негативного пространства. В верхней части этого постера используется множество различных цветов и шрифтов, но они приводят взгляд зрителя к единой точке в центре плаката.
Иллюстрация, узоры и рукописный шрифт органично вписаны в очертания клубов дыма. Это пример красочного, яркого и веселого дизайна, который при этом сохраняет сильную иерархию.
Изображение: Pinterest
Советы по созданию лучшей визуальной иерархии
Делать несколько версий
Вне зависимости от того, что именно вы создаете, важно делать несколько версий дизайна. Если вы разрабатываете целевую страницу для бизнеса или создаете плакат для мероприятия, прежде чем приступить к реализации чистового варианта, попробуйте создать макет или набросайте несколько решений. Записывайте все идеи еще до начала проектирования. Это позволит вам быстрее работать и находить лучшие решения.
Изображение: Revelry
Возьмите лист бумаги, сложите его пополам, а затем еще раз пополам. Теперь у вас есть восемь маленьких холстов, на которых можно нарисовать различные варианты решения дизайнерской задачи.
Просить фидбэк
После того, как вы разработали несколько макетов, попросите мнение со стороны.
Покажите дизайн тому, кто в этом ничего не смыслит, и задайте ему открытые вопросы.
Например, если вы разрабатываете целевую страницу, спросите, что он замечает на ней в первую очередь. Все ли ему понятно? Какие действия он предпринял бы, просматривая страницу? Этот процесс называется пользовательским тестированием, но такой подход можно использовать практически для всего, что вы создаете. В конце концов, дизайн разрабатывается для людей, поэтому необходимо заранее убедиться в том, что он им понятен.
Изучать дизайн
Чем больше вы погружаетесь в эту тему, тем лучше вы замечаете прекрасное вокруг. Обращайте внимание на то, что вас окружает, учитесь и задавайте вопросы. Как бы вы улучшили тот или иной продукт, если были бы его дизайнером?
Источник.
Фото на обложке: HappyAprilBoy / Shutterstock
Визуальная иерархия на сайте
Визуальная иерархия
Визуальная иерархия — это грамотная организация и оформление всех материалов на сайте, которая позволяет пользователю постепенно знакомиться с информацией, продвигаясь от самого важного до второстепенного, или в том порядке, который необходим вам.
Продуманная визуальная иерархия — основа эффективного и функционального сайта, где все элементы подчиняются одной цели и управляют вниманием пользователя.
Основные задачи:
01
Провести посетителя сайта от точки А в точку Б самым простым путем и подсказать правильный порядок блоков.
02
Разместить элементы интерфейса по степени их важности.
03
Дать пользователю понять, какие задачи может решить данный интерфейс.
04
Создать эмоциональный контакт при помощи визуальных образов. Как правило, визуал откладывается в памяти сильнее, чем текстовая информация, и вызывает больше доверия.
Самый эффективный инструмент визуальной иерархии
В веб-дизайне одним из ключевых факторов визуальной иерархии является контраст. Он привлекает внимание к важным элементам, расставляя контрастные акценты, и дает понять, что требует меньшего внимания, а что — большего.
Контраст — эффективный инструмент для создания интуитивно понятной навигации и сильного интерфейса с высокой конверсией.
Типы контраста в веб-дизайне
Размер
Чем больше элемент, тем выше его значение. Это один из самых простых, но действенных способов создания иерархии. Пользователь в первую очередь обращает внимание на элементы, которые выделяются и бросаются в глаза.
Рекомендации:
01
Используйте 3 размера шрифта: для заголовка, подзаголовка и основного текста. Это позволит избежать лишнего нагромождения и создать четкую понятную иерархию.
02
Уменьшайте менее важные элементы, а главные — увеличивайте. Следите за тем, чтобы крупных элементов было не больше 2-х, иначе смысл может потеряться.
Цвет
Это эффективный визуальный инструмент, который помогает расставить приоритеты в иерархии. Яркие цвета заметнее, чем приглушенные оттенки.
Рекомендации:
01
Не используйте много цветов. Достаточно 2-х основных и 2-х второстепенных. В ином случае восприятие иерархии будет нарушено, а интерфейс перегружен.
02
Отслеживайте насыщенность цвета. Чем ярче элемент — тем он заметнее, и наоборот.
03
Не полагайтесь только на цветовую схему. Пользователь с дальтонизмом может не заметить разницу, а иерархия должна быть доступна для каждого.
Форма
Также эффективный инструмент для привлечения внимания пользователей. Форма одного элемента должна отличаться от остальных, если его необходимо выделить и сделать заметнее.
Текстура
«Плоский» сайт привлекает меньше внимания, чем сайт с интересным дизайном и элементами погружения в атмосферу. Например, можно поиграть с текстурой изображений: задать определенную форму, цвета, добавить градиент — интерфейс станет привлекательнее.
Пример использования текстуры в логотипе. Обратите внимание, как удачно эффект смотрится на чистом фоне:
Пример использования текстуры на фоне сайта:
Рекомендации:
01
Добавляйте текстурированные элементы строго после того, как изучите визуальную иерархию, чтобы не перегружать интерфейс.
02
Не увлекайтесь этим инструментом, выдерживайте баланс, иначе текстура будет отвлекать пользователя, а не информировать его.
Дополнительные инструменты
Негативное пространство
Негативное пространство — это свободное место между элементами. Продуманный объем пустого пространства помогает пользователям заметить каждый элемент в нужный момент, а также разгружает контент и помогает сконцентрироваться на главном. Это важный инструмент иерархии, который влияет на создание общей структуры и обеспечивает грамотную навигацию по сайту.
Рекомендации:
01
Подбирайте гармоничный фон для негативного пространства, чтобы он не мешал пользователю считывать информацию и не утяжелял интерфейс.
Шрифты
Инструмент типографики, без которого не создать качественную визуальную иерархию. При помощи разного размера, толщины и стиля шрифтов, вы направляете внимание пользователя к важным элементам.
Рекомендации:
01
Не используйте большое количество разных шрифтов — это введет пользователя в заблуждение и может отвлечь от главной цели.
Принцип близости
Это группировка элементов, которые каким-то образом связаны между собой или относятся к одному блоку.
Принцип близости помогает пользователю ориентироваться на сайте и делить информацию на нужные категории.
Рекомендации:
01
Следите за тем, чтобы отступы между элементами внутри одной группировки или одного блока были меньше, чем у элементов снаружи.
Выравнивание
Выравнивание элементов — это инструмент, направленный на согласованность интерфейса и на определение значимости компонентов. С его помощью устанавливают начало и конец страницы, а также расставляют приоритеты.
На примере, указанном ниже, можно разглядеть, как блок слева отходит от остальных блоков — обычно на этом месте располагается логотип.
Золотое сечение
Это математический расчет пропорции между деталями разного размера. Такой расчет помогает определить точную площадь пустого пространства, которую нужно оставить между элементами.
Сегодня этот инструмент уходит на второй план и не является обязательным, но в целях ознакомления приведем примеры:
Так это выглядит на практике:
Повторение
Сильный инструмент визуализации, который отвечает за систему единства. Он увеличивает скорость обработки информации, пользователям легче усваивать повторяющиеся фрагменты.
Если некоторые элементы повторяются в каждом разделе интерфейса, значит они играют важную роль в решении задач.
Рекомендации:
01
Вы можете повторять такие элементы, как шрифты, изображения, цветовые решения, линии, таблицы и так далее.
Паттерны сканирования
Когда пользователь заходит на сайт, в первую очередь он сканирует страницу и решает, остаться или закрыть вкладку.
Необходимо помнить, что существуют две главные траектории, по которым человек считывает информацию — F-паттерн и Z-паттерн. Ключевой контент должен располагаться именно по этим маршрутам.
Z-паттерн
Контент расположен по траектории буквы Z.
Вся важная информация размещена в верхней части экрана — от левого угла к правому, затем пользователь сканирует страницу по диагонали и переходит к нижней части экрана.
Главные тезисы располагаются в углах, так как это основные точки, в которых задерживается взгляд пользователя.
Чаще всего Z-паттерн используется при минимальном количестве текста с призывом к действию в конце страницы.F-паттерн
Здесь основной упор идет на шапку и левую сторону экрана — по траектории буквы F.
Взгляд пользователя сканирует верхнюю часть веб-страницы слева направо по левому краю и ищет визуальные подсказки о нужной ему информации.
Первые два фрагмента вверху страницы являются основными, поэтому должны быть заметными для пользователя.
Шаблон предназначен для веб-страницы с большим объемом информации.Паттерны сканирования на мобильных устройствах
Экран мобильного устройства, в отличие от монитора компьютера или ноутбука, способен отобразить меньший объем контента.
Существует 2 основных метода размещения контента на мобильном устройстве:
01
Список
Блоки располагаются вертикально друг за другом, чтобы пользователю было удобно просматривать страницу. Все внимание уделено заголовкам, минимум изображений.
02
Сетка
Позволяет разместить больший объем информации. Внимание читателей могут привлечь только яркие и контрастные изображения.
Наглядный пример: слева — список, справа — сетка.Типографическая иерархия
Типографическая иерархия включает:
- заголовки,
- подзаголовки,
- основное содержание,
- подписи,
- сноски.
Типографическая иерархия создает контраст между главными текстовыми элементами и второстепенными при помощи шрифтов, регулируя их размеры, цвета, выравнивание.
Для того чтобы пользователь перемещался от одной части текста к другой в правильном порядке, существует система уровней:
01
Уровень
Направлен на привлечение внимания посетителей и содержит основную информацию.
Включает в себя заголовки, крупный текст, приоритетный контент.
02
Уровень
Отвечает за краткие содержательные элементы, которые позволяют быстро и легко перемещаться по сайту. Например: подзаголовки, короткие выжимки, аннотации.
03
Уровень
Содержит основной текст и дополнительную информацию: описание иллюстраций, детальная информация о продукте. Чаще всего здесь используется мелкий, но читабельный шрифт.
Для мобильных устройств рекомендуется применять только два уровня — первый и третий. Для второго уровня недостаточно объема пространства, поэтому подзаголовки можно опустить.
Для того чтобы страница не была перегружена, а информация воспринималась последовательно, желательно использовать только один хороший шрифт, изменяя его размер и начертание.
Советы по созданию лучшей визуальной иерархии
01
Выбор шрифта
Подберите читабельный шрифт без эффектов, засечек и всего, что может затруднять чтение. Используйте одинаковый шрифт в разных разделах, чтобы сохранить единый стиль и показать, что все данные связаны между собой.
02
Выбор размера
Для того чтобы обратить внимание на важный фрагмент текста или иллюстрацию — увеличьте их. Но следите за тем, чтобы за крупным изображением или фрагментом не скрылись остальные элементы.
03
Отступы
Информация воспринимается легче, если блоки разделены между собой пробелами. Для того чтобы выделить нужный компонент, достаточно оставить вокруг него пустое пространство.
04
Акценты
Расставьте элементы таким образом, чтобы подвести пользователя к целевому действию простым и доступным способом.
05
Тестирование
Это позволит внести важные корректировки перед запуском и повысить доверие пользователей.
Пример сильной и слабой визуальной иерархииСлева мы видим иерархию в действии: четкая структура, акцентные элементы, удобное восприятие информации. Пример справа демонстрирует отсутствие визуального порядка, соответственно, шанс привлечь внимание пользователя и удержать его на странице минимальный.
Заключение
Визуальная иерархия заключается в эффективной передаче информации людям при помощи грамотно расположенных элементов: от важного к второстепенному.
Веб-страница может иметь сложную структуру, но при этом необходимо обеспечить удобное восприятие содержимого и интуитивные переходы от одного действия к другому.
Методы визуальной иерархии составлены с учетом особенностей человеческого восприятия, поэтому помогают грамотно расположить элементы интерфейса, создать удобное перемещение по сайту и подвести пользователей к целевому действию.
Визуальная иерархияСамый эффективный инструмент визуальной иерархииДополнительные инструментыТипографическая иерархияЗаключение
Примеры визуальной иерархии
Иерархия помогает ранжировать важность элементов дизайна. Что вы хотите, чтобы кто-то увидел в первую очередь? Это может быть заголовок на веб-странице, фотография или иллюстрация, дающая больше контекста. Давайте узнаем больше с этими примерами визуальной иерархии.
Что такое визуальная иерархия? Существует множество определений иерархии, большинство из которых относится к системе организованного ранжирования или порядка или структуры власти, чтобы помочь каждому узнать, кто находится на вершине и наиболее важен в цепочке подчинения.
Но когда дело доходит до дизайна, визуальная иерархия связана со всеми элементами, которые вы видите в дизайне, и с тем, как они воспринимаются в порядке важности.
Лучшими примерами иерархии в дизайне являются плакаты. Подобно рекламному щиту, плакаты обычно размещаются большими за пределами здания или в местах с интенсивным пешеходным движением, но у вас есть всего несколько секунд, чтобы привлечь чье-то внимание, прежде чем они пройдут мимо. Один из способов сделать это — оформить плакат таким образом, чтобы что-то выделялось по важности.
Взгляните на этот постер, обратите внимание, насколько простой дизайн, он использует ограниченную цветовую палитру и в основном типографику и линии для создания этого поразительного дизайна. Но даже несмотря на то, что дизайн в основном состоит из шрифта, все еще существует уровень иерархии, вы сначала замечаете большой заголовок «Только одна ночь», потому что он больше по размеру, в нем все заглавные буквы и используется жирный шрифт.
Пример дизайна плаката с использованием типографики для создания строгой иерархии (источник)
Чтобы узнать больше о хорошей и плохой иерархии в дизайне, ознакомьтесь с этой публикацией на тему «Понимание иерархии в дизайне».
Почему визуальная иерархия важна в дизайне?Если каждая часть вашего дизайна одинаково важна, ничто не будет выделяться. Когда дело доходит до веб-дизайна или дизайна приложений, этого крайне важно избегать. Использование иерархии поможет вам направить пользователя по правильному пути. Это первый раз, когда они используют это приложение? Хороший опыт онбординга поможет познакомить их с ключевыми функциями приложения. Точно так же первое впечатление о веб-сайте имеет жизненно важное значение для повторения.
Взгляните на этот пример листовки. Да, у него есть несколько приятных элементов дизайна, например, это анимированный GIF-файл, который помогает привлечь чье-то внимание. Но так много всего происходит, куда вы смотрите в первую очередь? есть забавные линейные иллюстрации, причудливая типографика и смелые цвета.
Чтобы сделать этот дизайн более успешным, вы можете подумать о негативном пространстве и уменьшить важность некоторых иллюстраций, чтобы даже название выделялось больше.
Пример флаера с отсутствием иерархии в дизайне (источник)
Посмотрите это видео, в котором Ран рассказывает, почему иерархия так важна в веб-дизайне.
Примеры визуальной иерархии. примеры визуальной иерархии. Существует несколько способов создания иерархии в дизайне, но в наших примерах мы сосредоточимся на нескольких ключевых элементах. Вы скоро поймете, что хотя один из них может быть более доминирующим в создании иерархии, но в большинстве этих примеров (и в дизайне в целом) используется множество принципов проектирования для создания успешного дизайна.
Масштаб Один из самых простых и понятных способов немедленно создать иерархию в вашем дизайне — сделать один элемент значительно больше остальных.
Вы хотите иметь хорошую вариацию масштаба для всех элементов, но один из них должен быть в центре внимания.
В этом фанатском воссоздании фильма «Маленькие женщины» мы видим масштаб, использованный таким образом, который может нарушать правила дизайна, но на самом деле весьма эффективен для передачи сюжета этого фильма.
Исходя из того, что мы упоминали ранее, при использовании масштаба для создания иерархии один элемент должен быть больше другого. Но в этой сюжетной линии этого сюжета четыре разных женских персонажа имеют равный вес. По этой причине логично, что силуэты всех четырех женщин имеют одинаковый размер. Что меняется, так это то, что показано внутри каждого силуэта, что дает вам представление об этом персонаже.
Пример использования масштаба для иерархии в дизайне (источник)
На этом плакате шкала используется еще одним хитрым способом. Главный акцент — коллаж из обрезанных джазовых инструментов и музыкантов. Ни одно изображение не является более важным, чем другое, но когда они продуманно соединены вместе с пространством и цветом, они создают одну большую фотографию, которая служит самой высокой в иерархии.
Мы сразу же понимаем, что это реклама джазового музыкального мероприятия. Если мы хотим узнать больше, мы сканируем вниз, чтобы прочитать даты, место проведения и информацию об исполнителе.
Пример использования масштаба для иерархии в дизайне (источник)
Этот плакат привлекает внимание не только использованием масштаба, но и направляющими линиями и перспективой. Самым большим элементом дизайна является иллюстрированное слово «Blame», заключенное в черную форму, соединенную с силуэтом, стоящим в дверном проеме. По использованию цветов сразу возникает ощущение, что это сюжет для детективного фильма об убийстве.
Пример использования масштаба для иерархии в дизайне (источник)
Цвет Еще один способ создать иерархию в дизайне — стратегически использовать цвет. Может быть, вы решите использовать ограниченную цветовую палитру или у бренда, с которым вы работаете, есть своя предопределенная цветовая палитра.
Используйте это в своих интересах, чтобы привлечь внимание к одной части вашего дизайна, а не к другой.
В этом примере в дизайне используется ограниченная цветовая палитра, состоящая в основном из желтого, черного, белого и розового цветов. Желтый и розовый — два смелых цвета, но то, как они используются вместе, помогает привлечь внимание и создать иерархию. Ярко-желтый — это веселый и яркий фон, но розовый в контейнере с клавишами пианино действительно сужает ваше внимание. Но обратите внимание, как используются и другие принципы дизайна, такие как масштаб и эффективное использование отрицательного пространства.
Пример использования цвета для иерархии в дизайне (источник)
В зависимости от цветов, которые вы используете для дизайна, обычно они добавляют больше контраста и, следовательно, внимания. В данном примере это черный цвет. Черный имеет тенденцию выделяться больше всего в дизайне, поэтому вы должны использовать его экономно. Мало того, что заголовок большой и жирный, но и потому, что он выполнен в черном цвете, а все остальные цвета фона светлее по контрасту, это помогает создать четкое ощущение иерархии.
Если кто-то достаточно заинтригован, он подойдет ближе, чтобы прочитать дополнительный текст, чтобы узнать больше.
Пример использования цвета для иерархии в дизайне (источник)
Вот пример дизайна плаката, в котором используется монохромная цветовая палитра для создания иерархии и единства. В зонте используется темный, почти черный, синий цвет. Название фильма и капли дождя перевернуты из основного двухцветного изображения персонажа, поющего под дождем. Удачное использование отрицательного пространства вокруг зонта и изображения поможет еще больше привлечь ваше внимание.
Использование монохроматических цветовых палитр для создания иерархии (источник)
Пробел или отрицательное пространство Пробел не обязательно означает «белое» пространство. В большей степени это связано с тем, как вы используете негативное пространство или передышку. Дизайнеры-новички могут попытаться упаковать свой дизайн как можно больше, думая, что это поможет ему выглядеть лучше.
Это ошибка. Хороший дизайн предполагает удаление ненужных элементов до тех пор, пока не останется только то, что является самым важным и по-прежнему передает смысл.
Это прекрасный пример создания иерархии с пробелами и масштабом. Дата и название события набраны более крупным шрифтом, но также отделены пробелом или отрицательным пробелом от других элементов шрифта и насыщенного градиентного цвета.
Пример дизайна для создания иерархии с правильным использованием пробелов (Behance)
Этот постер умело использует пустое пространство для создания заголовка. Обратите внимание, как a в заголовке «варенье» показаны внутри j и m . С помощью цвета (черный создает темный контраст в сочетании с другими цветами), масштаба и пустого пространства этот дизайн привлекает к себе внимание привлекательным способом.
Пример использования отрицательного пространства для создания иерархии (источник)
Не все примеры использования пробелов для создания иерархии должны иметь минимальную эстетику.
Вот пример, когда в верхней половине плаката происходит много всего, но все это ведет к одной конечной точке внизу посередине. Иллюстрация, узор и рукописный шрифт органично вписываются в формы, создающие потоки дыма. Он красочный, яркий, веселый, и в нем все еще присутствует сильное чувство иерархии.
Пример использования отрицательного пространства для создания иерархии (источник)
Советы по созданию лучшей визуальной иерархииЕсли вам интересно, как еще улучшить иерархию в вашем дизайне, рассмотрите некоторые из этих советов.
Создание нескольких версий Независимо от того, что вы разрабатываете, вы должны создать несколько версий. Если вы разрабатываете целевую страницу для бизнеса или создаете афишу для мероприятия, прежде чем приступить к созданию идеальных до пикселя дизайнов, сделайте каркас или набросайте несколько решений. Держите свои идеи и итерации дизайна в начале процесса проектирования, чтобы помочь вам быстро двигаться и сразу найти лучшее решение.
Пример использования упражнения «Безумные восьмерки» для дизайна (источник)
Отличный способ сделать это — попробовать упражнение «Безумные восьмерки». Возьмите лист бумаги, сложите его пополам, а затем еще раз пополам. Теперь у вас есть восемь панелей для наброска восьми различных вариантов дизайнерской задачи.
Запросить отзывПосле того, как вы поработаете над несколькими каркасами и эскизами и начнете разрабатывать более точную версию в своей любимой программе проектирования, получайте отзывы как можно раньше и чаще. Покажите свой дизайн тому, кто ничего не смыслит в дизайне, и задайте ему открытые вопросы.
Например, если вы разрабатываете целевую страницу, спросите их, что они замечают в первую очередь, когда смотрят на эту веб-страницу? Есть ли какая-то часть, которую они находят запутанной? Какие действия они пытаются предпринять, просматривая веб-страницу? Это называется пользовательским тестированием, но вы можете использовать его форму практически для всего, что вы разрабатываете.
В конце концов, мы разрабатываем для людей, поэтому мы должны убедиться, что они понимают наши проекты. Если они этого не сделают, наше дизайнерское решение провалено, и это нормально, нам просто нужно переоценить и перепроектировать.
Изучение дизайнаЧем больше вы изучаете дизайн и тратите время на проектирование, тем больше вы замечаете, как много дизайна живет вокруг вас в вашей повседневной жизни. Принимайте к сведению то, что вы видите, учитесь на этом, подвергайте сомнению. Как бы вы улучшили его, если бы вы были дизайнером, создающим опыт?
Хотите узнать больше о дизайне?Ознакомьтесь с другими статьями блога Flux, где вы можете узнать больше о веб-дизайне, Webflow и фрилансе. Если вам нужны подробные видеоуроки по дизайну, загляните на наш канал YouTube, где мы еженедельно публикуем новые видео.
Канал дизайна Flux на YouTube
Если вы хотите узнать больше о процессе веб-дизайна от начала до конца, рассмотрите возможность ознакомиться с нашей программой «Процесс веб-сайта за 10 000 долларов».
Вы откроете для себя пошаговый процесс создания красивых и ценных веб-сайтов, которые помогут достичь стратегических целей ваших клиентов. Овладейте искусством и стратегией дизайна веб-сайтов и повысьте ценность своих услуг, а также свои ставки.
Что такое визуальная иерархия в дизайне? (Поясняется с примерами)
Визуальная иерархия в дизайне — это расположение элементов таким образом, что устанавливается иерархический порядок. Именно это определяет, на что зритель смотрит первым, вторым, третьим и так далее.
Управляя пятью различными понятиями — масштабом, цветовым контрастом, пустым пространством, форматом и положением — вы можете создавать визуальную иерархию в своих дизайнерских композициях.
В этом сообщении блога мы обсудим, что такое визуальная иерархия и как ее можно использовать, чтобы привлечь внимание зрителя к наиболее важным элементам вашего дизайна. Мы также рассмотрим некоторые распространенные ошибки, которые люди совершают с визуальной иерархией, и почему это важно сделать правильно, особенно в веб-дизайне.
Что такое визуальная иерархия в дизайне?
Как упоминалось во введении, визуальная иерархия — это порядок, в котором люди просматривают элементы в вашей дизайнерской композиции. Элементы в верхней части иерархии замечаются первыми, а элементы в нижней части иерархии видны позже. Эти элементы, по порядку, рассказывают историю, передают сообщение и могут даже передавать настроение или чувство.
Короче говоря, визуальная иерархия позволяет зрителям понять, на чем сосредоточить свое внимание.
Вот почему так важно иметь хорошо продуманную визуальную иерархию — если ваша визуальная иерархия отключена, ваши зрители, скорее всего, пропустят важную информацию или будут сбиты с толку вашим общим сообщением. Наличие однозначной и преднамеренной визуальной иерархии гарантирует, что ваши идеи будут переданы громко и ясно.
Как создать визуальную иерархию?
По существу существует 5 основных концепций, которыми можно манипулировать для создания визуальной иерархии:
- Масштаб
- Цветовой контраст
- Пустое пространство
- Формат
- Позиция
Независимо от того, используются ли они по отдельности или в унисон, эти концепции помогут вам создать четкую визуальную иерархию в композиции вашего дизайна.
Давайте подробно рассмотрим каждый из них:
Масштаб
Масштаб важен, потому что он определяет относительный размер каждого элемента в вашем дизайне. Вы можете использовать масштаб, чтобы привлечь внимание к определенным элементам. Как правило, в первую очередь замечаются более крупные элементы.
Итак, все очень просто: если вы хотите выделить определенный элемент, просто сделайте его больше, чем остальные элементы в композиции. Это поможет выделиться и привлечь внимание зрителя.
Помимо визуальной иерархии, если вы хотите создать ощущение порядка, вы можете использовать масштаб, чтобы сделать все элементы в композиции одинакового размера. Визуальная последовательность поможет зрителям легче просматривать ваш дизайн и быстрее понять ваше сообщение (человеческий мозг любит последовательность).
Правильно используя масштаб, вы можете контролировать то, как люди видят вашу композицию, и убедиться, что они правильно воспринимают ваше сообщение.
Вы заметите круги в порядке убывания размера.
Красиво выполненная иерархия шкалы с использованием шрифта. Обратите внимание на достаточные различия в размерах, чтобы иерархия была ясной и очевидной. Через Виктора Гайловича на DribbbleЦветовой контраст
Цветовой контраст — еще один действенный и действенный инструмент в вашем распоряжении.
Контраст создает иерархию, сопоставляя поразительно разные элементы (пример: сильно насыщенная ярко-синяя иллюстрация поверх белого фона). Эта поразительная разница делает видимым элемент, который находится на переднем плане.
Чем более выражена разница в яркости (это можно количественно оценить с помощью коэффициента контрастности), тем выше видимость элемента на переднем плане.
Самый простой способ использовать контраст для привлечения внимания к элементу — сделать текст жирным и черным, а фон — белым. Это создает резкий контраст между двумя элементами (текстом и фоном), что придает тексту массу визуального веса и, следовательно, заметность. Отличная видимость означает, что он будет высоко в визуальной иерархии.
Говоря о цветовом контрасте и его полезности в визуальной иерархии, важно не стать жертвой упрощенной дезинформации, такой как «яркие цвета обычно привлекают больше внимания, чем более тусклые оттенки».
Что нас действительно волнует, так это цвет контраст , что означает разницу в яркости между цветами переднего плана и фона. Убедитесь, что разница в яркости достаточно велика для создания иерархии.
Разница в яркости между чисто черным кругом и серым фоном больше, чем разница в яркости между темно-серыми кругами и серым фоном. Таким образом, черный круг будет замечен первым. Эти различия можно количественно оценить с помощью коэффициента контрастности. Коэффициент контрастности между красной кнопкой и белым фоном выше, чем у серого приклада 9.0050 Пустое пространство Белое пространство создает иерархию, обрамляя элемент в негативном пространстве (пустом пространстве), что, в свою очередь, привлекает к нему внимание. Как это работает? Что ж, меньше беспорядка в пространственной области означает меньшую когнитивную нагрузку на наш мозг (меньше мышления — мы ненавидим думать), а значит, мы можем уделить чему-то больше внимания.
Итак, чем больше негативного пространства вокруг элемента, тем легче он привлекает и удерживает внимание (так как это легче для нашего мозга) и, следовательно, тем выше он будет в иерархии композиции.
Является ли элемент очень важным или должен занимать высокое место в визуальной иерархии? Добавьте значительное количество белого пространства вокруг него. Это поможет «выделить» этот элемент и выделить его из окружающего контента.
Количество отрицательного пространства, которым вы окружаете элемент, будет определять степень важности этого элемента и, следовательно, его видимость. Опять же, его степень видимости будет определять его «рейтинг» в иерархии композиции.
Как и в случае с контрастом и масштабом, можно использовать пустое пространство, чтобы эффективно управлять тем, как люди видят композицию, и гарантировать, что сообщение будет передано так, как задумано.
Сначала вы можете заметить группу кругов, но первый отдельный круг, который вы заметите, скорее всего, будет тот, который находится в одиноком правом круге.
Сначала вы заметите изображение справа, так как оно окружено большим количеством белого пространстваФормат
Содержание формат недооценен, потому что 1) о нем редко говорят и 2) он сильно вовлечен и влияет на визуальную иерархию.
6 основных форматов контента в порядке убывания видимости (Напоминание: когда мы говорим «видимость», мы имеем в виду визуальную известность или рейтинг в визуальной иерархии):
- Текст
- Фигуры/линии
- Иконки
- Изображения
- Изображения с лицами
- Видео и GIF.
Допустим, у вас есть целевая страница, а в главном разделе есть следующее содержимое:
- Видео с автоматическим воспроизведением
- Некоторый текст
- Кнопка
всегда обращайте внимание в первую очередь. «Движущийся элемент будет иметь больший визуальный вес в группе неподвижных элементов», — Миклош Филипс для Toptal.
Затем, если текст и кнопка имеют одинаковый цвет и размер, кнопка будет замечена второй (фигуры и линии будут замечены перед текстом), а текст будет замечен последним.
Позиция
Наконец, у нас есть позиция. Как люди, мы привыкли потреблять макеты (например, книги) сверху вниз, а на западе, в частности, это вверху слева внизу.
Эта акклиматизация привела к тому, что любые элементы в левом верхнем углу любой композиции получили визуальный приоритет. Визуальная значимость уменьшается по мере спуска по макету.
Верхний левый кружок замечается первым, прежде чем наши глаза переходят к нижнему кругу. Здесь используется иерархия позиций, чтобы облегчить чтение слов «Демонстрации, а не заметки». Работа Никола СолерьеВот небольшая диаграмма, которая обобщает все, что мы только что обсудили:
Все, что вам нужно знать о визуальной иерархииДве наиболее распространенные ошибки визуальной иерархии
вероятно, будет запутанным или неэффективным. В этом разделе я расскажу о 10 наиболее распространенных ошибках визуальной иерархии в дизайне.
1. Недостаточная очевидность различий
Мы обсудим эту ошибку, используя понятие масштаба.
Создание разницы в размерах между двумя элементами — самый простой и эффективный способ создания визуальной иерархии. Однако, если эта разница в размерах недостаточно значительна, иерархия становится неясной, а в композиции в целом становится сложнее ориентироваться. Наш мозг и глаза не совсем уверены, на что смотреть в первую очередь и куда двигаться дальше.
2. Использование слишком большого количества контрастных цветов
Цветовой контраст также является важным инструментом для создания визуальной иерархии, но если им злоупотреблять. поскольку существует множество различных контрастных цветов, это может создать визуальную перегрузку для зрителя. Контраст отлично подходит для создания четкой системы ранжирования в композиции, но слишком много контрастирующих элементов приводит к визуальному шуму и когнитивной нагрузке. Мы ненавидим думать. Не заставляйте нас думать.
Это один из тех случаев, когда слишком много чего-то плохого.
Примеры визуальной иерархии
Масштаб
Обложка альбома The Strokes для Comedown Machine демонстрирует фантастическое использование иерархии масштабов типографики Этот дизайн плаката для John Hiatt & The Goners является примером относительно плохого сочетания масштаба и иерархии позиций.
Различия в размерах шрифтов в сочетании с расположением элементов заставляют наши глаза постоянно прыгать вверх и вниз. Это немного дезориентирует.Цветовой контраст
Какой цвет упаковки лучше выделяет кокос? Левый конечно! Все благодаря более высокому коэффициенту контраста между оранжевым кокосом и голубым фоном. Какой из двух силуэтов голов на обложке этой книги кажется нам ближе и заметнее? Если вы ответили на темный, обращенный вправо, то вы’ d быть правильным. Силуэт, обращенный влево, не так резко контрастирует со светло-зеленым фоном, что снижает его визуальную значимость. Виа Эшли Армор КиттреллПустое пространство
Хотите сделать элемент фокусом? Окружите его большим количеством белого пространства, как эта птица. Через Themeforest Несмотря на то, что текст заголовка «РАСКРЫТЬ» огромен, вы все равно сначала замечаете улыбающееся лицо. Изображения с лицами несут массу визуального веса. Через ThemeforestПозиция
Куда перемещаются ваши глаза после того, как вы заметили изображение? Вероятно, прямо в словах «Элс Нил Янг.
..» в левом верхнем углу. Виа ХуманаВизуальная иерархия в веб-дизайне
Прежде чем закончить, я хотел бы отметить, что визуальная иерархия особенно важна в мире веб-дизайна. Вот почему:
- Магазин электронной коммерции со страницами продуктов, на которых отсутствует четкая визуальная иерархия, может привести к упущенным продажам (пример: зрители не замечают предложения или подходящих функций продукта, что означает, что они могут не купить)
- Блог с плохой иерархия может привести к сокращению времени пребывания на сайте, что может означать меньшее количество подписок
- Сайт-портфолио с нечеткой иерархией может привести к тому, что клиенты не найдут то, что ищут, и впоследствии не наймут вас
- Целевая страница приложения с плохой иерархией может означать меньше загрузок и доходов
Чтобы доказать ее важность, Eyequant провел исследование визуальной иерархии на 50 самых популярных веб-сайтах электронной коммерции в мире.
Ошеломляющие 70% этих гигантов электронной коммерции не выдержали испытания. Ознакомьтесь с некоторыми результатами ниже.
Подведение итогов
Целью дизайна является создание отличительных черт. Различать, что важно, а что нет, на чем сосредоточиться, а что игнорировать. И хотя есть много способов создать это различие, визуальная иерархия — один из самых эффективных и распространенных. В этой статье мы говорили о различных аспектах визуальной иерархии — масштабе, цветовом контрасте, пустом пространстве, формате, положении — и о том, почему они так важны в дизайне. Мы также обсудили некоторые из наиболее распространенных ошибок, которые допускают люди при создании визуальной иерархии, и способы их избежать. Наконец, мы рассмотрели, почему визуальная иерархия так важна в веб-дизайне, и несколько примеров хороших и плохих вариантов использования.
