—»     —»   Методы задания иерархизма контента средствами типографики
  Раздел: Шрифты   Нет комментариев  

Методы задания иерархизма контента средствами типографики



Один из ударных приёмов обеспечения эффективности ("выигрышности") подачи контента - построение иерархических последовательностей средствами типографики. Иерархизм средствами типографского оформления - это целая система, где шрифт служит одним из инструментов градации данных по степени их значимости для облегчения читателю поиска нужных сведений и навигации среди контента. Компоненты такой иерархической последовательности направляют внимание пользователя на начало и конец раздела, позволяя ему при этом выделять для себя определённые фрагменты данных, специально и унифицированно оформленные в текстовом виде особым образом.

"Типографика изначально призвана привлекать внимание к контенту". - Роберт Брингхёрст, "Компоненты стилистики типографского оформления" (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
* The Elements of Typographic Style Applied to the Web ("Применение элементов типографского оформления в веб-среде")
* Design Basics: The Proximity Principle ("Азы дизайна: Принцип смыслового соседства")
* The Elements of Typographic Style, Robert Bringhurst ("Компоненты стилистики типографского оформления", Роберт Брингхёрст)
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: шрифты
Опубликовал Design FactoRy   Прочитано (раз): 5073   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Декабрь 2018    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31