rss подписка
Читать designteka.ru в Яндекс.Ленте

Публикация

Что такое иерархия контента?

16 апреля 2014
В рубриках: Статьи

diagramma-a-blocchi-di-visio-gerarchia-clip-art_436329[1]При работе с содержанием в начале процесса, мы должны попытаться закрепить структуру, которая работает с содержанием. Также вспомним стадиюнабросков. Здесь, мы рассмотрели наши идеи, чтобы проложить наш контент таким образом, чтобы он работал хорошо и имел хорошую иерархию. Теперь мы хотим, чтобы работа иерархии контента была заметна в нашем дизайне.

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

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

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

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

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

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

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

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

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

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

Цвет

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

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

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

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

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

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

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

Задания

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