Недавно я перебирала старые архивы по веб-дизайну и нашла сохраненную заметку Марка Болтона, опубликованную на A List Apart еще в начале 2007 года. Многие ссылки в ней не работали, в который раз напоминая о недолговечности веб. Это была хорошая статья о важности использования пробелов и отступов, как в веб-дизайне, так и в любом другом. Порыскав, я собрала ее воедино, хотя, к примеру, иллюстраций дизайна журнала Economist до изменений 2001 года уже не нашлось. Хотелось бы воскресить эту интересную статью, чтобы молодые дизайнеры также имели возможность почерпнуть знания из родника опыта профессионалов-корифеев дизайна.

Я привожу наиболее красивый перевод этой статьи, сделанный Максимом Комаджу с очень творческим подходом к делу. Иллюстрации Кевина Корнелла, бессменного иллюстратора A List Apart.

Важно:

Переводчик использовал в статье для определения понятия «whitespace» газетный термин «воздух». По его мнению (тут я с ним абсолютно согласна), он наиболее точен. Воздухом называется пустое пространство на газетной полосе.

Другие замечания переводчика:

1. Direct mail — метод маркетинга, при котором компании рассылают рекламные материалы и образцы своей продукции потенциальным покупателям.
2. Down-market — рынок товаров для небогатых покупателей, предпочитающих покупать товары по низким или сниженным ценам.
3. Кегль – размер шрифта. Интерлиньяж – межстрочный интервал.
4. Книга заявлена на Озоне, но там не бывает — заказывайте и ждите. Печаталась на русском в СССР лет тридцать назад

Сила – в «воздухе»

Марк Болтон

Моя первая работа в качестве дизайнера была связана с небольшим полиграфическим агентством в Манчестере, которое сотрудничало с различными печатными средствами массовой информации: дизайн обложки, верстка материалов, маркетинговые ходы и… прямая почтовая рассылка⁽¹⁾. Когда я работал над этой рассылкой, обратил внимание, что изучаемые в колледже принципы дизайна, здесь почти не используются – большой, жирный и плотный текст был самым популярным решением. По словам одного из клиентов, я их никогда не забуду – «воздух – это просто пустота».

Заказчики прямой почтовой рассылки ориентировались в первую очередь на рынок небогатых потребителей⁽²⁾, потому как здесь зафиксированы основные продажи. Следовательно, рассылка должна была выглядеть «небогато». Но во всех остальных случаях, неужели воздух действительно просто пустота?

Что такое «воздух»?

Воздух, или контрастное пространство — это отступы между некими элементами композиции. В частности, пространство между основными, крупными элементами – «макро воздух»

«Макро воздух»

И соответственно, «микро воздух» — пустоты между деталями: пунктами списков, надписями, изображениями или между словами и буквами

«Микро воздух»

Микро воздух и читабельность

Несколько месяцев назад мне удалось познакомиться с работой Эрика Спикерманна во время его лекции. Кроме прочего, речь шла об оптимизации верстки газеты The Economist, которая была обусловлена нареканиями со стороны читателей относительно возникающих при чтении трудностей.

Нажмите, чтобы рассмотреть детали проведенных изменений

Материалы на полосе располагались слишком плотно. Иногда, как и в веб-дизайне, трудно добавить «воздух», если его появление ничем не мотивировано. Газетам часто приходится сталкиваться с необходимостью перехода на более легкий для чтения шрифт вкупе с микро воздухом между строками и буквами. Разговор об этом стал частью лекции Спикерманна.

Для начала, оставив причудливость оригинального шрифта «The Economist», Спикерманн внес небольшие изменения, добавив воздуха между символами. Затем он уменьшил кегль и увеличил интерлиньяж₍₃₎. Все эти изменения на микро уровне добавили воздух в материалы полосы. Работа была тонкая: читабельность увеличилась, общее восприятие блоков упростилось, а количество информации осталось прежним.

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

Воздух в рекламе

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

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

Пример сравнения дизайна «дешевого» рассылочного объявления и «богатого» рекламного постера

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

Активный и пассивный воздух

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

Когда пробел ведет читателя от одного элемента к другому – это называется активный воздух. Рассмотрим пример: 

Всё очень плотно. Нам необходимо добавить воздух для создания визуальной гармонии и комфорта для читателя. Во-первых, я добавляю поля, меняю шрифт и его размер, а также увеличиваю межстрочные интервалы (line-height в CSS). Всё это — пассивный воздух

Кто-то может возразить, что на «пассивный воздух» можно не обращать внимания, что он не играет роли. Я не соглашусь: если вы не работаете со своим «воздухом», значит вы плохой дизайнер. «Пассивный воздух» создает иллюзию свободы и равновесия. Это важно.

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

Это — пример активного воздуха: добавить пустое пространство, чтобы выделить часть информации из общей структуры.

Практика, практика, практика

Единственный способ понять, как работает воздух — практика. Художнику-оформителю, подобно профессиональному военному, день ото дня марширующему по плацу, придется тратить часы и часы на совершенствование понимания и навыков. Упражнения по композиции в течение многих десятилетий решались студентами, и, к счастью для нас, некоторые из этих работ были задокументированы гуру от дизайна прошлых лет. Одним из них был Эмиль Рудер.

Рудер был типографом-печатником, швейцарцем по национальности. Он умер в 1970 году. После 21-летней практики преподавания, он подготовил и выпустил книгу — «Typography: A Design Manual»₍₄₎, где пишет:

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

Книга Рудера несколько однобока — акцентирована на типографике и тонкостях проектирования бланков. Но вместе с тем, Рудер указывает, какие пути верны, а какие нет, что позволяет, опираясь на этот труд, начать обучение фундаментальным принципам композиции. Книга битком набита отличными упражнениями по работе с «воздухом» и другими композиционными элементами. Книга дорогая, но стоящая.

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

Оригинал статьи.



Комментарии