Моя работа в качестве дизайнера началась в маленьком агентстве полиграфического дизайна в Манчестере, которое разрабатывало различные продукты: упаковки, издания, рекламные материалы, и…рассылки. Скоро я узнал, что принципы графического дизайна, которые я изучал в колледже, мало используются в разработке дизайна рассылок, где большое, жирное, и массивное в порядке вещей. Я помню слова одного клиента — «пустое место — потерянное место».

Заказчикам рассылок нужно, чтобы их материалы создавали впечатление недорогих, потому что они ориентированы на низшую ценовую категорию. И во многом мои клиенты не далеки от истины.

Знакомьтесь отступы.

Отступы — это пространство между элементами в композиции. Более конкретно, пространство между основными элементами композиции это «макро пространство». «микро пространство», как вы и подумали, пространство между элементами помельче: элементами списка, между заголовком и изображением, между словами, между строками и т. д.

Так что же делают отступы?

Микро-отступы и удобочитаемость

Пару месяцев назад мне повезло присутствовать на лекции, которую проводил Erik Spiekermann. Часть разговора была связана с его редизайном The Economist, который был частично мотивирован жалобами клиентов на то, что ее дизайн слишком тяжелый и газету трудно читать.

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

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

Кроме того, Спайкерман добавил макро отступы и изменил цветовое оформление The Economist. Его работа демонстрирует, что отступы между мелкими элементами могут очень сильно влиять на эффективность дизайна — это также относится и к веб дизайну.

Позиционирование бренда

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

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

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

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

Активное и пассивное пространство.

Отступы часто используются для создания сбалансированной и гармоничной композиции. Если отступы используются чтобы вести читателя от одного элемента к другому, они называются «активное пространство».

Посмотрите на пример того, как применено активное пространство.

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

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

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

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

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

Единственный способ овладеть такой субъективной техникой как использование пространства практиковаться. Иногда художники тратят час за часом, чтобы тренировать простые техники, графические дизайнеры должны делать то же самое. К счастью для нас некоторые легенды дизайна, оставили нам подсказки. Emil Ruder один из моих любимых.

Рудер, швейцарский типограф, который умер в 1970 году. После 21 года изучения типографии, написал книгу Типографика.

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

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

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

Translated with the permission of A List Apart Magazine and the author[s].