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

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

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

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

Макропространство Микропространство

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

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

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

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

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

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

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

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

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

Сравнение дизайна для рассылки и дорогого бренда

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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