Значение «воздуха» для восприятия

Воскресенье, 15 Июль, 2007

Решил начать блог с публикации этого перевода. Не особенно он удачен местами (точнее, он сохранил признаки оригинала, хотя и не дословен, но мне все-таки не нравится местами), однако нужно его куда-то «приткнуть».

Представляет перевод собой материал с небезызвестного A List Apart, а если быть точным – вот это.

Сила — в «воздухе» (1) . Статья Марка Болтона

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

Заказчики прямой почтовой рассылки ориентировались в первую очередь на рынок небогатых потребителей (3), потому как здесь зафиксированы основные продажи. А раз продажи высоки, неужели воздух действительно просто пустота?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(1) Я использовал при переводе газетный термин «воздух». Он наиболее точен. Воздухом называется пустое пространство на газетной полосе.
(2) Direct mail — метод маркетинга, при котором компании рассылают рекламные материалы и образцы своей продукции потенциальным покупателям.
(3) Down-market — рынок товаров для небогатых покупателей, предпочитающих покупать товары по низким или сниженным ценам.
(4) Кегль – размер шрифта. Интерлиньяж – межстрочный интервал.
(5) Книга заявлена на Озоне, но там не бывает — заказывайте и ждите. Печаталась в СССР двадцать пять лет назад: http://www.ozon.ru/context/detail/id/2676535/

Иллюстрации Кевина Корнелла

Translated with the permission of A List Apart Magazine and the author. Переведено с разрешения A List Apart Magazine и автора.

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: