Один из ударных приёмов обеспечения эффективности («выигрышности») подачи контента — построение иерархических последовательностей средствами типографики. Иерархизм средствами типографского оформления — это целая система, где шрифт служит одним из инструментов градации данных по степени их значимости для облегчения читателю поиска нужных сведений и навигации среди контента. Компоненты такой иерархической последовательности направляют внимание пользователя на начало и конец раздела, позволяя ему при этом выделять для себя определённые фрагменты данных, специально и унифицированно оформленные в текстовом виде особым образом.
«Типографика изначально призвана привлекать внимание к контенту». — Роберт Брингхёрст, «Компоненты стилистики типографского оформления» (Robert Bringhurst, «The Elements of Typographic Style»).
Простой пример
Давайте рассмотрим примеры подачи контента, следуя определённой иерархии, и игнорируя её.
Ниже приведён список концертных мероприятий, предлагаемых публике на открытой площадке недалеко от моего дома. Для большей наглядности нашего примера, скажем, я свободен в выходные с 15 по 17 августа, и меня интересует возможность посещения концерта в один из этих дней. Выбрать что-либо из того списка, который вы здесь видите, — задача, куда более трудная, чем могла бы быть. Совершенно не упорядоченный массив данных, из которого нужные мне сведения — даты концертов — приходится выуживать в ходе утомительного просмотра большого объёма лишней информации. Представьте только, каково это — одолеть целый такой перечень с описанием 50 концертов.
Ну, может, я сгустил немного краски в моём примере, однако, поступить можно было гораздо проще.
Посмотрите на другой пример: названия концертных программ, даты и описания даны в специальном оформлении по единому шаблону, отделены друг от друга отступами. Мы сразу же по стилю самих надписей видим, где даты выступлений (а где имена исполнителей, если уж на то пошло), к тому же, нам не приходится просматривать ненужные нам сведения. Очевидно, мы сходим-таки на концерт Avett Brothers!
Иерархизм в веб-среде
Стоит заметить, что веб-ресурсы дизайнеру приходится проектировать с учётом особенностей сетевой среды. Иерархизм изначально заложен в структуру самой веб-страницы, предназначенной не только для чтения, но и для интерактивного взаимодействия с пользователем. Страница должна проектироваться в едином ключе, как органичная общность составных компонентов, и ясно демонстрировать человеку имеющийся в его распоряжении выбор доступных для выполнения действий, а также пути лёгкого доступа к нужным ему сведениям, порядок совершения и оплаты покупок, и т. п.
Однако, чтобы не уходить от темы нашей статьи, мы будем говорить об иерархизме, достигаемом только средствами типографского оформления. К счастью, у нас есть собственный удобный в использовании HTML-тег, позволяющий нам семантически выстраивать средствами типографики иерархию контента на проектируемых нами веб-сайтах. Теги оформления заголовков (H-теги) дают нам возможность устанавливать приоритет значимости контента в порядке убывания: от H1 до H6, H1 — наиболее значимые текстовые фрагменты, H6 — наименее. Поисковые механизмы определяют приоритет контента на веб-странице именно по этим данным.
Но как же нам оптимально задать параметры этих H-тегов с учётом характера нашего контента? Рад, что вы спросили!
Приёмы оформления
Наглядная иерархия контента средствами типографики достигается за счёт варьирования ряда основных параметров:
* Размера шрифта
* Толщины контура
* Цвета
* Расположения текста
* Контрастности Шрифта
Чаще всего эти оформительские приёмы применяются в сочетаниях друг с другом. В списке концертных мероприятий, который вы уже видели, размер, цвет, плотность и контрастность шрифта были специально заданы для достижения определённого эффекта. Сочетать приёмы оформления текста можно буквально, как и сколько угодно.
Варьирование размера символов
Простейший и самый распространённый способ задания иерархии.
Варьирование толщины штриха
Более жирный шрифт уже бросается в глаза.
Варьирование цвета
Наш глаз различает объекты, как главные и второстепенные, в очень большой степени, по их цвету. В двух словах: тёплые цвета придают им значимость, броскость, холодные делают их менее заметными.
Варьирование расположения
Порядок размещения массивов текстовой информации относительно друг друга может отражать значимость содержащихся в ней сведений, их место в иерархии.
Варьирование контрастности шрифтов
Отличный способ задания иерархии — применение контрастирующих друг с другом шрифтов.
Применение данных приёмов в различных сочетаниях
Как уже было сказано, данные приёмы лучше всего использовать в различных сочетаниях друг с другом. Выбрать среди них наиболее подходящее для отображения вашего контента в вашей же разметке решение – вот курьёзным образом сложная задача!
Плотность набора текста
Один из важнейших этапов типографской разметки текста — подбор его плотности. Начинающим дизайнерам трудно в это поверить, несмотря на очевидную, заметную каждому важность данного фактора. Иерархия текстовых фрагментов сразу определяется по плотности набора внутри них; ведь разница между «кучей-малой» и отчётливой, явной весомостью каждого слова говорит сама за себя. В большинстве иерархических построений данный аспект учитывается, посмотреть, как именно, можно на любом примере в нашей публикации.
Компоненты на странице размещают рядом, следуя принципу их смысловой связи — близкие по каким-то параметрам объекты соседствуют лучше, чем совершенно чуждые друг другу. Однако, жёстко заложенные пробелы между абзацами — не единственный признак оптимально заданной плотности набора. Как правило, аппаратный переход в начало первой строки нового абзаца оставляет слишком большие просветы внутри текста самого абзаца. Приходится – сначала или потом – устанавливать значение плотности набора специально для него. Я обычно задаю плотность набора в абзаце в половину высоты строки (или величины интерлиньяжа). Это придаёт массиву контента общую монолитность, не нарушая естественное смысловое деление внутри него.
Прочие аспекты
Планируя задание иерархии, важно учитывать значение каждой отдельной единицы контента. Какова его тематика? Что он должен сообщать аудитории? Если не знаете, то сначала ознакомьтесь с ним, а уж потом принимайте решения относительно иерархии и способов оформления.
Иногда вам предоставляется полная свобода в выборе методов построения иерархии из числа вышеназванных, в других случаях вас может стеснять недостаток места по горизонтали или по вертикали, либо необходимость считаться с параметрами фонового текста в плане контрастности. Выбирайте решения, пригодные именно в вашей ситуации, причём, обдуманно. Древняя мантра «простота — залог успеха» здесь вполне к месту. Помните, ваша цель — подать контент оптимально упорядоченным.
Ресурсы
Пора приступать к построению иерархических шедевров. А если тема вас увлекла, то вот вам несколько любопытных публикаций по вопросам типографики, иерархизма и особенностей сетевой среды:
* Typekit: Typographic Hierarchy («Набор типографских инструментов: Иерархизм средствами типографики»)
* Typography and the Web, Samantha Warren («Типографика в сетевой среде», Саманта Уоррен)
* Creating Exciting And Unusual Visual Hierarchies («Построение впечатляющих и необычных иерархических систем средствами визуального воздействия») на сайте Smashing Magazine
* Design Basics: The Proximity Principle («Азы дизайна: Принцип смыслового соседства»)
* The Elements of Typographic Style, Robert Bringhurst («Компоненты стилистики типографского оформления», Роберт Брингхёрст)
