Принцип обобщенного контраста

Принцип обобщенного контраста. База знаний для веб-дизайнера

Выдано в печать 2014-10-16

В разделе о прототипах мы выяснили, как при создании простого скетча-эскиза решается главная задача информационного дизайна – расположение информации на сайте в соответствии с её приоритетом.

Сейчас я расскажу о том, как решить эту задачу на более детальном уровне. Мы наконец подошли к «живому» макету в PSD!

Основной инструмент, который тебе понадобится, я называю методом обобщенного контраста. Это общеизвестная вещь, и названий для неё существует много.

Для того, чтобы выделить в дизайне сайта главное и убрать второстепенное, нужно как-то разграничить, отделить друг от друга элементы, из которых состоит сайт. Другими словами, нужно добиться контраста: главное – контрастное, второстепенное – приглушенное.

Есть множество способов сделать элементы контрастными:
1. Контраст в размерах. Это самое простое и очевидное, что может быть. Важные блоки делаем большими, второстепенные – маленькими. Взгляни на какую-нибудь хорошо свёрстанную газету или сайт газеты. Ты увидишь крупные заголовки, крупный текст главных новостей и аккуратно распиханные по разным углам мелкие блоки с второстепенными новостями.

2. Контраст в цвете. Именно это обычно и имеют в виду, когда говорят слово «контраст». В том же примере (на новостном сайте) главный текст может быть написан черными буквами на белом фоне (с максимальным контрастом), а второстепенный – серыми буквами на белом фоне или даже на светло-серой подложке.

3. Контраст в резкости и насыщенности. Об этом знает любой фотограф: главный объект находится «в фокусе», он чёткий и резкий. А второстепенные – расплывчаты (или приглушенные, по принципу воздушной перспективы). Например, есть на сайте 10 преимуществ компании с иконками, причем из них 7 второстепенные, а 3 – главные. Что можно сделать: первые 3 иконки сделать яркими, а остальные 7 – полупрозрачными, «отдалёнными».

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

5. Контраст в детализации наоборот. Предыдущий принцип может работать и в обратную сторону. Например, есть на сайте несколько блоков, которые выглядят как иконка + текст. И есть один другой блок, который более детализирован: текст с подпунктами, с буллитами-иконками, и фон у него – легкий полупрозрачный паттерн. В этом случае, наоборот, выделенным получается более детализированный объект!

6. Контраст в форме. По мотивам задач из начальной школы типа «вот 2 кружка и один треугольник, найдите лишнее». Да, так тоже можно делать. Если у тебя на сайте везде округлые формы, то прямоугольная плашка с каким-то важным сообщением будет выделяться. Правда, тут вопрос скорее в том, как сделать это графично и стильно.

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

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

Это уже творчество, речь ведь идет об уникальном дизайне сайта, а не шаблонном.