|
Продолжение. См. № 1-4/2009
Заметка 5. Контраст
Контраст — это одно из самых
эффективных средств, позволяющих сделать
страницу визуально более интересной: вызвать в
читателе живое любопытство, притягивающее его
взгляд, и создать стройную структуру из
разрозненных элементов оформления. Запомните
важное правило: контраст должен быть сильным,
только тогда он работает. Не будьте мямлей.
Контраст порождает различия между
двумя элементами. Если элементы “вроде бы”
отличаются друг от друга, то это уже не
контраст, а конфликт. Вот в чем все дело —
правило контраста гласит: если элементы не
похожи как две капли воды, сделайте их разными.
По-настоящему разными.
Для создания контраста есть масса
способов. Можно противопоставить крупному
шрифту мелкий; изящной гарнитуре старого стиля —
жирную рубленую; тонкой линии — толстую;
холодному цвету — теплый; гладкой текстуре —
грубую; горизонтальному элементу (длинной строке
текста) — вертикальный (высокую узкую колонку);
большому интерлиньяжу — маленький; небольшому
рисунку — крупный.
Но только помните — невозможно
создать контраст, противопоставляя надписи,
набранные кеглем 12 и 14 пунктов. Линия толщиной
полпункта не контрастирует с линией в 1 пункт.
Нет контраста между черным и темно-коричневым.
Возьмитесь за дело всерьез.
Робин Вильямс “Дизайн для
недизайнеров”
Посмотрите на документы,
представленные на рис. 1 и 2.
Рис. 1
Документ на рисунке 1
Приближение (выходные данные
приближены к заголовку документа, заголовки
разделов — к своему содержанию), выравнивание
(выключка слева), повтор (одинаковый стиль
оформления разделов) — все эти принципы
работают. Аккуратно, “по-взрослому”, но ничто не
притягивает взгляд. Бесполезно такой листок
располагать на школьной доске объявлений — он не
будет прочитан. Скорее всего его просто не
заметят.
Рис. 2
Документ на рисунке 2
Что изменилось? Заголовки сделаны
жирными и укрупнены. Больше ничего! Но совсем
другое дело, правда? Документ перестал быть
плоским, обрел структуру, объем и даже цвет, хотя
по-прежнему остался черно-белым. Вот так принцип
контраста изменил жизнь простого документа:
сделал ее интересной для читателей. Школьники
заметят такую листовку, прочтут, и, возможно, их
собственные дизайнерские опыты станут более
продуманными.
Однако не будем мямлями, продолжим
опыты! Чтобы сделать документ интереснее,
запишем текст в две колонки серифным шрифтом
“Georgia” (вместо поднадоевшего “Times”), а для
заголовков возьмем рубленый шрифт “Centure Gothic”.
Результат показан на рис. 3.
Рис. 3
Заголовок отлично выделяется на
странице, подзаголовки создают визуальный
конспект материала, который содержательно с ними
совпадает. Обратите внимание, как выходные
данные контрастируют с заголовком страницы (хотя
записаны одним шрифтом): жирное и обычное
начертание, крупный (28 пунктов) и мелкий (10
пунктов) кегль, стандартный и увеличенный
трекинг (расстояние между соседними символами).
Если документ представляет собой
рекламный материал (или, например, обложку книги),
то можно еще усилить контраст при помощи
выворотки. Листок, изображенный на рис. 4,
точно привлечет внимание. Заголовки в нем
написаны более насыщенным рубленым шрифтом
“FuturaPress”.
Рис. 4
Для спокойного употребления документ
можно сделать менее контрастным. Например, в
варианте на рис. 3 можно убрать жирность с
главного заголовка и понизить кегль
подзаголовков. Посмотрите на рис. 5 —
выглядит неплохо: контраст не вызывающий, но
достаточный для придания содержанию четкой
структуры.
Рис. 5
Типичная ошибка новичка — выделение
всех элементов на странице. Посмотрите на рис.
6 и 7. Автор был огорчен, что листок 6 никто не
заметил. “Ну, ладно, — решил он. — Держитесь!”
Выделил весь текст и сделал его жирным. Листок 7
от этого стал более темным, но контраст на
текстовых элементах не изменился. Не зря
начинающим упорно твердят: “выделить все,
значит, не выделить ничего”.
Рис. 6
Рис. 7
“А как же картинки?” — спросите вы, и
будете правы. Картинки, безусловно, являются
сильным средством повышения контраста. Они
хорошо выделяются на фоне текста и,
следовательно, привлекают внимание. На рис. 8
и 9 показаны два варианта. В первом случае
иллюстрация помещается в колонку, во втором — в
середину листа, раздвигая “плечами” колонки
слева и справа. Конечно, возможны и другие
варианты.
Рис. 8
Рис. 9
Посмотрим примеры разных работ и
обсудим контрастность представленных
документов.
Работы студентов Роботландского
университета
Сайт “Микеланджело”
Невероятно, но почти вся страница
“залита” одним-единственным абзацем текста (см. рис.
10). Этот серый “туман” читать невозможно.
Деление на абзацы и колонки добавило бы контраст
за счет пустых полос (см. рис. 11). Заодно нужно
изменить заголовок, который смотрится чужим на
странице, и выровнять его по содержимому.
Рис. 10
Рис. 11
Сайт филиала гимназии № 99
Название сайта теряется на шершавом
фоне, не привлекает внимание. Зато приветствие
“Добро пожаловать” (совершенно избыточное)
бросается в глаза (см. рис. 12). Подправленный
вариант показан на рис. 13.
Рис. 12
Рис. 13
Сайты “Золотые виды спорта” и “От Роси
к России”
На первом сайте (см. рис. 14) потерян
заголовок, на втором — вертикальное меню (см. рис.
15).
Рис. 14
Рис. 15
Сайт “Лицей”
Не всегда для контраста нужен огромный
кегль. Мелкая заголовочная часть на рис. 16
выглядит хорошо: небольшой по размеру
логотип-заголовок контрастно выделяется на
широкой полосе пустого пространства. Несколько
правок выравнивания (логотип — по ширине меню,
подвал — выключка справа, заголовок страницы
— добавлен для выравнивания текста по картинке),
и сайт приобретает элегантный вид (см. рис. 17).
Рис. 16
Рис. 17
Сайты в Интернете
Сайт Санкт-Петербургской гимназии № 610
(610.ru)
Контрастная заголовочная часть,
совмещенная с оригинальным горизонтальным меню.
Смотрится очень хорошо. Впечатление немного
портят выключенное по центру меню в нижней части,
ошибки выравнивания, показанные на иллюстрации
(см. рис. 18), и грамматическая ошибка в
заголовке (нет пробела между знаком номера и
числом).
Рис. 18
Отличный контраст! Страница,
безусловно, притягивает внимание (см. рис. 19).
Рис. 19
Очень хороший сайт! Контраст позволил
разработчикам четко структурировать материал и
сделать его привлекательным (см. рис. 20).
Единственное замечание: заголовки внутри
страницы не приближены к своему содержимому. В
остальном оформление достойно похвал: хорошее
выравнивание (даже иллюстрации в анонсах
одинакового размера, как и сами анонсы), единый
стиль подразделов (задействован принцип
повтора). На странице много материала, но
перегрузки благодаря хорошему дизайну не
ощущается.
Рис. 20
На этом сайте проигнорированы все
принципы дизайна: четыре, которые мы
рассматривали в заметках, и много других, о
которых мы не говорили (см. рис. 21). Сайт
детский, а страницы — вялые, сумбурные, тесные и
холодные.
Рис. 21
На этом сайте можно найти погрешности
(чрезмерно плотные ссылки на верхней полосе,
малозаметные списочные маркеры там же, логотип и
заголовок не выровнены по левому краю и не
являются ссылками на Главную на вторых
страницах, продолжение строки “библиотеки” в
списке на полосе не выровнено по ее началу,
горизонтальное меню на Главной не совпадает с
тем же меню на других страницах…). Но в целом сайт
построен очень неплохо, и следы применения
четырех законов дизайна видны отчетливо (см. рис.
22).
Попробуйте самостоятельно выполнить
разбор этой страницы по четырем составляющим:
приближение, выравнивание, повтор и контраст. А
заодно поставьте закладку на этот ресурс —
наверняка окажется полезным по содержанию.
Рис. 22
Правила дизайна
В заметках были рассмотрены четыре
правила дизайна:
1. Приближение.
2. Выравнивание.
3. Повтор.
4. Контраст.
Надеюсь, мы хорошо запомнили их по
именам! Теперь красота стала нашей: мы понимаем,
из чего она состоит, и можем конструировать ее в
своих документах.
А есть ли в дизайне другие правила? Да,
конечно, много... Вот только некоторые из наиболее
универсальных (но могу вас утешить, что мы
освоили самые главные).
Уместность
Приглашение на свадьбу можно оформить
в стиле документа на рис. 3. Все четыре закона
работают, но работают не слишком весело! Нет, для
свадьбы это явно не подойдет. Нужны веселые
иллюстрации, соответствующий шрифт — вот тогда
документ “заиграет” марш Мендельсона!
А что если обложку реферата по химии
оформить в стиле приглашения на вечеринку? Пусть
друзья и учитель улыбнутся! Да нет, обложка
научного труда — совсем другой жанр, голубки и
розочки здесь неуместны (что если обрамить
сердечками заявление в ГИБДД о постановке на
учет автомобиля?).
Уместность, вот о чем должен помнить
дизайнер!
У каждого жанра свой стиль и характер. Если под
рукой пропадают веселый фон и необычный шрифт, то
это еще не повод использовать их в текущем
проекте. Подойдут ли они? Будут ли уместны?
Конструирование эмоций
Самое оптимистичное направление —
вверх и вправо, самое пессимистичное — вниз и
влево (см. рис. 23 и 24).
Рис. 23
Рис. 24
Проверьте это правило на двух
вариантах заголовочной части сайта “Покупки в
Интернете” (см. рис. 25 и 26).
Рис. 25
Рис. 26
Подробнее об этом правиле читайте в
“Ководстве” Артемия Лебедева (§137 “Матрица
эмоций”, www.artlebedev.ru/kovodstvo/sections/137).
Пропорции
С древних времен соотношение, при
котором b так относится к a, как a к сумме a + b,
считалось самым совершенным и гармоничным
(“золотое сечение”) (см. рис. 27).
Рис. 27
В силу некоторой субъективности
восприятия размеров (худым рекомендуют носить
платья в горизонтальную полоску, полным — в
вертикальную…) нет смысла использовать на
практике эту величину с точностью до третьего
знака. Вполне подойдет упрощенный вариант: b/a = 2/3
— все равно на практике придется немного
корректировать соотношение в каждом конкретном
случае.
Соотношение можно использовать,
создавая объекты с “золотыми” пропорциями.
Например, стандартный лист бумаги A4 является
“золотым”. Кроме того, золотая пропорция
полезна в композиционных решениях. Проведите в
прямоугольнике вертикали и горизонтали,
разделяющие его стороны на три равные части.
Старайтесь располагать объекты так, чтобы самые
важные элементы находились на этих прямых (на рис.
28 и 29 это глаза персонажа).
Рис. 28
Рис. 29
На рис. 30 и 31 показано “золотое”
конструирование с использованием нескольких
объектов.
Рис. 30
Рис. 31
Золотая пропорция полезна при
кадрировании фотоснимка. Располагайте глаза
людей и животных на “золотых” прямых (см. рис.
32 и 33).
Рис. 32
Рис. 33
Подробнее о “божественной пропорции”
читайте в книге Дэна Брауна “Код да Винчи”.
Простота
Артемий Лебедев в параграфе 89 (“Боязнь
простоты”) своего “Ководства” пишет:
Дизайнер боится показаться простым. Он
уверен, что за простоту мало платят. Ему кажется,
что шрифт с завитушками придает работе
законченный вид, а простой шрифт свидетельствует
о том, что дизайнер не знает, как установить себе
завитушечный. Дизайнер не считает работу
законченной, если под текст не положено
изображение. А если еще и заголовки безобразно и
нечитабельно набраны — проект сдается с чистой
совестью.
Артемий Лебедев
(www.artlebedev.ru/kovodstvo/sections/89)
Современные компьютерные приложения
обладают такими потрясающими возможностями, что
дизайнеру трудно удержать себя от соблазна
задействовать на минимальной площади
максимальное количество эффектов и трюков. В
итоге страница демонстрирует пестроту и хаос.
Давайте искать красивые решения в
своей голове и окружающих теплых примерах.
Холодные недра компьютерных сред будут только
мешать.
Правило о нарушении правил
Можно ли сверстать хороший документ,
нарушая правила дизайна? Да, но на такое способны
лишь опытные дизайнеры. В таких работах одно
умышленное нарушение компенсируется другим
умышленным нарушением, и гармония в итоге
сохраняется.
Чтобы нарушать правила, их надо изучать и
осваивать на практике. |