Skip to content

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

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

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

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

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

Инструменты в помощь

Размер и контраст

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

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

Стили шрифтов

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

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

Хотя многие A List Apart статьи чрезвычайно тяжелые, им все же удается отобразить содержание в действительно сбалансированной, усваиваемой форме. И использование различных размеров и стилей шрифта помогает в этом.
Хотя многие A List Apart статьи чрезвычайно тяжелые, им все же удается отобразить содержание в действительно сбалансированной, усваиваемой форме. И использование различных размеров и стилей шрифта помогает в этом.

Цвет

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

Позиционирование и выравнивание

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

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

Близость и пространство

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

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

Задания

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

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

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

Введение в иерархию

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