Skip to content

Как создается визуальная иерархия

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

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

На сайте Neonmob по части визуальных элементов все отлично.
На сайте Neonmob по части визуальных элементов все отлично.

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

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

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

Визуальная иерархия через изображения

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

Думайте о тоне, который вы хотите задать

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

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

Hopskoch надо рассказать пользователям о своем продукте - и они показывают его в действии. И это помогает им немедленно привлечь внимание пользователя
Hopskoch надо рассказать пользователям о своем продукте — и они показывают его в действии. И это помогает им немедленно привлечь внимание пользователя

Никогда не заменяйте текст изображениями

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

Стоковые фото или свои фото?

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

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

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

Hopskoch также используют свои иконки, чтобы продемонстрировать свой продукт и его работу. Если бы они были сделаны в стиле стоковых/стандартных иконок, посыл бренда и его вид был бы в половину слабее
Hopskoch также используют свои иконки, чтобы продемонстрировать свой продукт и его работу. Если бы они были сделаны в стиле стоковых/стандартных иконок, посыл бренда и его вид был бы вполовину слабее

Будьте осторожны с размерами и контрастом

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

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

Fitbit использует размеры и контраст, чтобы показать продукт в действии
Fitbit использует размеры и контраст, чтобы показать продукт в действии

Используйте все преимущества от цвета

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

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

Fitbit использует свои цвета последовательно на всем сайте
Fitbit использует свои цвета последовательно на всем сайте

Не забудьте о форме!

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

Типичные паттерны визуальной иерархии

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

Z-макет

Z-макет — это основной композиционный макет, проглядываемый в большом количестве дизайнов. Он описывает то, что бросается нам в глаза при просмотре сайта. Именно так наши глаза обычно сканируют сайт: от верхнего левого угла по горизонтали к правому, по диагонали вниз влево и снова вправо; в форме буквы «Z».

Z-макет в действии на BBC News
Z-макет в действии на BBC News

Золотое сечение

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

Золотое сечение на Twitter
Золотое сечение на Twitter

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

Задания

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

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Создаем иерархию контента

Тренды веб-дизайна и все о них