Контраст часть 1

Купить книгу

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

Контраст порождается различиями между двумя элементами. Если элементы «вроде бы» отличаются друг от друга, то это уже не контраст, а конфликт. Вот в чем все дело – правило контраста гласит: если элементы не похожи как две капли воды, сделайте их разными. По-настоящему разными.

Для создания контраста есть масса способов. Можно противопоставить крупному шрифту мелкий; изящной гарнитуре старого стиля – жирную рубленую; тонкой линии – толстую; холодному цвету – теплый; гладкой текстуре – грубую; горизонтальному элементу (длинной строке текста) – вертикальный (высокую узкую колонку); большому интерлиньяжу – маленький; небольшому рисунку – крупный.

Но только помните – невозможно создать контраст, противопоставляя надписи, набранные кеглем 12 и 14 пунктов. Линия толщиной пол-пункта не контрастирует с линией в 1 пункт. Нет контраста между черным и темно-коричневым. Возьмитесь за дело всерьез.

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

newsletter-5-1

Мило и аккуратно, но ничто не притягивает к нему взгляд, а значит, ее никто и не прочитает.

Совершенно понятно, за счет чего здесь получается контраст. Для заголовков выбран более энергичный, жирный шрифт. Этот же шрифт я повторила (принцип повтора, помните?) в названии бюллетеня. Оно было набрано капителью, а теперь здесь есть строчные и заглавные буквы, поэтому я смогла увеличить кегль, что также способствовало усилению контраста. Раз заголовки стали такими сильными, то название вообще можно напечатать вывороткой, еще раз повторяя темный цвет и усиливая контраст.

newsletter-5-2

Эта страница сильнее притягивает взгляд, чем предыдущая, согласны?

Контраст играет ключевую роль в структурировании информации. Взглянув на страницу, читатель должен мгновенно видеть, что к чему.

resume-5-1

Перед вами довольно типичное резюме. Вся информация на месте, и если кто-то захочет ее прочитать, он ее прочтет, но внимание она не привлекает – это точно.

Есть и ошибки:

  • на странице сразу два типа выравнивания: по центру и по левому краю;
  • интервалы между разными разделами слишком невыразительны;
  • описания выполняемой работы смешиваются с основным текстом.

Обратите внимание, что применение контраста не только повышает привлекательность страницы, но и делает намного яснее структуру и цель документа.

resume-5-2

Ошибки были без труда исправлены.

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

 

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

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

rules-5-1

Контраст между шрифтами и линейками есть, но какой-то неубедительный. Линейки имеют разную толщину. Это сделано специально или ошибочно?

rules-5-2

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

 

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

mac-5-1

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

 

Внизу вы видите типичный рекламный модуль из телефонного справочника. Кроме всего прочего, нехорошо, что текст набран шрифтом практически одной жирности и одного кегля. В результате все слова имеют почти одинаковое значение: «Builders Exchange Member» (участник строительной биржи) визуально так же важны, как «Remodel and Repair Specialists» (специалисты по ремонту и реконструкции). Но правильно ли это?

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

construct-5-1

С чего начать улучшение этого модуля?

  • Определитесь с центром внимания, а затем сделайте его заметным, увеличив кегль шрифта и выбрав жирное начертание.
  • Первые буквы сделайте прописными, откажитесь от капители.
  • Решите, на какие группы будет разбита информация, и объедините соответствующие элементы (правило приближенности), оставляя между группами свободное пространство, подчеркивающее взаимосвязи между ними.
  • Расположите все элементы вдоль жесткой линии выравнивания.

Удалите конфликтующие элементы:

  • непонятно, зачем нужна такая гипертрофированная рамка, ведь она не имеет здесь первостепенного значения;
  • читателю необходимо помочь сосредоточиться на сути рекламы, а здесь на значительную часть его внимания претендуют звездочки;
  • углы вполне можно оставить пустыми – одного орла вполне достаточно!

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

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

construct-5-2

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

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