Whitespace by Mark Boulton (перевод)
[COLOR="Navy"]Заспорил с одним человеком о межабзацных отступах на веб-страницах. Мое мнение было, что они необходимы, его, что нужно писать как в книге. Довод о прокрутке колесом и потере нужной строки считался глупым. Тогда я поискал материалы по теме и нашел на ALA нужную статью. Так как все равно ее перевел, вываливаю сюда - может и сгодится кому-нибудь. Оригинал по ссылке: http://www.alistapart.com/articles/whitespace[/COLOR]
[COLOR="Black"][SIZE="3"]Сила – в «воздухе»[/SIZE][/COLOR] (1)
Марк Болтон
Моя первая работа в качестве дизайнера была связана с небольшим полиграфическим агентством в Манчестере, которое сотрудничало с различными печатными средствами массовой информации: дизайн обложки, верстка материалов, маркетинговые ходы и… прямая почтовая рассылка.(2) Когда я работал над этой рассылкой, обратил внимание, что изучаемые в колледже принципы дизайна, здесь почти не используются – большой, жирный и плотный текст был самым популярным решением. По словам одного из клиентов, я их никогда не забуду – «воздух – это просто пустота».
Заказчики прямой почтовой рассылки ориентировались в первую очередь на рынок небогатых потребителей(3), потому как здесь зафиксированы основные продажи. А раз продажи высоки, неужели воздух действительно просто пустота?
Что такое «воздух»?
«Воздух» или «пустое место» - это пространство между некими элементами композиции. В частности, пространство между основными, крупными элементами – «макро воздух» (http://alistapart.com/d/whitespace/figure1_macro.jpg). И соответственно, «микро воздух» - пустоты между деталями: пунктами списков, надписями, изображениями или между словами и буквами (http://alistapart.com/d/whitespace/figure2_micro.jpg).
«Микро воздух» и читабельность.
Несколько месяцев назад мне удалось познакомиться с работой Эрика Спикерманна во время его лекции. Кроме прочего, речь шла об оптимизации верстки газеты «The Economist», которая была обусловлена нареканиями со стороны читателей относительно возникающих при чтении трудностей.
Материалы на полосе располагались слишком плотно. Иногда, как и в веб-дизайне, трудно добавить «воздух», если его появление ничем не мотивировано. Газетам часто приходится сталкиваться с необходимостью перехода на более легкий для чтения шрифт вкупе с микро воздухом между строками и буквами. Разговор об этом стал частью лекции Спикерманна.
Для начала, оставив причудливость оригинального шрифта «The Economist», Спикерманн внес небольшие изменения, добавив воздуха между символами. Затем он уменьшил кегль и увеличил интерлиньяж.(4) Все эти изменения на микро уровне добавили воздух в материалы полосы. Работа была тонкая: читабельность увеличилась, общее восприятие блоков упростилось, а количество информации осталось прежним.
И хотя Спикерманн добавил также и макро воздух, и другие элементы дизайна, вышеприведенный пример свидетельствует о том, что даже небольшие микро изменения могут оказать существенное влияние на восприятие. Это касается и веб-дизайна.
Реклама
Дизайнеры используют воздух, чтобы создать иллюзию утонченности и элегантности при создании рекламы. Сочетание грамотного использования типографических элементов, фото вместе с пустотами – считается высокохудожественным решением. Косметические компании, например, используют много воздуха в своих рекламных плакатах, чтобы поведать потребителю о высоком качестве, изысканности и, как правило, высокой цене.
Мой давешний клиент по прямой почтовой рассылке был прав относительно воздуха в его рекламных проспектах – это не будет работать на рынке небогатых потребителей, потому что искусственно создаст впечатление дороговизны и высокого качества. Вот вам пример: http://alistapart.com/d/whitespace/figure3_luxury_direct.jpg .
И фото, и рекламные слоганы одинаковы. Но композиции на разных полюсах: мало пробелов – дешево, много пробелов – дорого.
Воздух – не только и не столько эффективный инструмент позиционирования продукции, сколько указатель на уровень ценовой доступности. Поэтому не исключено, что производитель и его потенциальные клиенты воспримут композицию, как рекламу другого, более дорогого продукта конкурентов.
Активный и пассивный воздух
Часто воздух используется для создания баланса и гармонии. Но это только вершина айсберга. Воздух может быть неотъемлемой частью дизайна – подобный эффект используют фотографы, снимая большую часть комнаты при портретной съемке, оставляя непосредственный объект в стороне.
Когда пробел ведет читателя от одного элемента к другому – это называется «активный воздух». Рассмотрим пример: http://alistapart.com/d/whitespace/figure4_nowhitespace.gif
Всё очень плотно. Нам необходимо добавить воздух для создания визуальной гармонии и комфорта для читателя. Во-первых, я добавляю поля, меняю шрифт и его размер, а также увеличиваю межстрочные интервалы (line-height в CSS). Всё это «пассивный воздух». http://alistapart.com/d/whitespace/figure5_passivewhitespace.gif
Кто-то может возразить, что на "пассивный воздух" можно не обращать внимания, что он не играет роли. Я не соглашусь: если вы не работаете со своим "воздухом", значит вы плохой дизайнер. "Пассивный воздух" создает иллюзию свободы и равновесия. Это важно.
Но мы не закончили. В предыдущей иллюстрации я хотел бы дополнительно выделить часть текста - вторую цитату. Можно акцентировать на ней внимание, изменив цвет или увеличив размер шрифта, но я просто увеличил микро воздух между абзацами до макро, чтобы привлечь взгляд читателя, и уменьшил межбуквенные интервалы, сделав шрифт жирным. http://alistapart.com/d/whitespace/figure6_activewhitespace.gif
Это пример активного воздуха - добавить пустое пространство, чтобы выделить часть информации из общей структуры.
Практика, практика, практика
Единственный способ понять, как работает воздух - практика. Художнику-оформителю, подобно профессиональному военному, день ото дня марширующему по плацу, придется тратить часы и часы на совершенствование понимания и навыков. Упражнения по композиции в течение многих десятилетий решались студентами, и, к счастью для нас, некоторые из этих работ были задокументированы гуру от дизайна прошлых лет. Одним из них был Эмиль Рудер.
Рудер был типографом-печатником, швейцарцем по национальности. Он умер в 1970 году. После 21-летней практики преподавания, он подготовил и выпустил книгу - "Typography: A Design Manual" (5) , где пишет:
[COLOR="Black"][SIZE="3"]Сила – в «воздухе»[/SIZE][/COLOR] (1)
Марк Болтон
Моя первая работа в качестве дизайнера была связана с небольшим полиграфическим агентством в Манчестере, которое сотрудничало с различными печатными средствами массовой информации: дизайн обложки, верстка материалов, маркетинговые ходы и… прямая почтовая рассылка.(2) Когда я работал над этой рассылкой, обратил внимание, что изучаемые в колледже принципы дизайна, здесь почти не используются – большой, жирный и плотный текст был самым популярным решением. По словам одного из клиентов, я их никогда не забуду – «воздух – это просто пустота».
Заказчики прямой почтовой рассылки ориентировались в первую очередь на рынок небогатых потребителей(3), потому как здесь зафиксированы основные продажи. А раз продажи высоки, неужели воздух действительно просто пустота?
Что такое «воздух»?
«Воздух» или «пустое место» - это пространство между некими элементами композиции. В частности, пространство между основными, крупными элементами – «макро воздух» (http://alistapart.com/d/whitespace/figure1_macro.jpg). И соответственно, «микро воздух» - пустоты между деталями: пунктами списков, надписями, изображениями или между словами и буквами (http://alistapart.com/d/whitespace/figure2_micro.jpg).
«Микро воздух» и читабельность.
Несколько месяцев назад мне удалось познакомиться с работой Эрика Спикерманна во время его лекции. Кроме прочего, речь шла об оптимизации верстки газеты «The Economist», которая была обусловлена нареканиями со стороны читателей относительно возникающих при чтении трудностей.
Материалы на полосе располагались слишком плотно. Иногда, как и в веб-дизайне, трудно добавить «воздух», если его появление ничем не мотивировано. Газетам часто приходится сталкиваться с необходимостью перехода на более легкий для чтения шрифт вкупе с микро воздухом между строками и буквами. Разговор об этом стал частью лекции Спикерманна.
Для начала, оставив причудливость оригинального шрифта «The Economist», Спикерманн внес небольшие изменения, добавив воздуха между символами. Затем он уменьшил кегль и увеличил интерлиньяж.(4) Все эти изменения на микро уровне добавили воздух в материалы полосы. Работа была тонкая: читабельность увеличилась, общее восприятие блоков упростилось, а количество информации осталось прежним.
И хотя Спикерманн добавил также и макро воздух, и другие элементы дизайна, вышеприведенный пример свидетельствует о том, что даже небольшие микро изменения могут оказать существенное влияние на восприятие. Это касается и веб-дизайна.
Реклама
Дизайнеры используют воздух, чтобы создать иллюзию утонченности и элегантности при создании рекламы. Сочетание грамотного использования типографических элементов, фото вместе с пустотами – считается высокохудожественным решением. Косметические компании, например, используют много воздуха в своих рекламных плакатах, чтобы поведать потребителю о высоком качестве, изысканности и, как правило, высокой цене.
Мой давешний клиент по прямой почтовой рассылке был прав относительно воздуха в его рекламных проспектах – это не будет работать на рынке небогатых потребителей, потому что искусственно создаст впечатление дороговизны и высокого качества. Вот вам пример: http://alistapart.com/d/whitespace/figure3_luxury_direct.jpg .
И фото, и рекламные слоганы одинаковы. Но композиции на разных полюсах: мало пробелов – дешево, много пробелов – дорого.
Воздух – не только и не столько эффективный инструмент позиционирования продукции, сколько указатель на уровень ценовой доступности. Поэтому не исключено, что производитель и его потенциальные клиенты воспримут композицию, как рекламу другого, более дорогого продукта конкурентов.
Активный и пассивный воздух
Часто воздух используется для создания баланса и гармонии. Но это только вершина айсберга. Воздух может быть неотъемлемой частью дизайна – подобный эффект используют фотографы, снимая большую часть комнаты при портретной съемке, оставляя непосредственный объект в стороне.
Когда пробел ведет читателя от одного элемента к другому – это называется «активный воздух». Рассмотрим пример: http://alistapart.com/d/whitespace/figure4_nowhitespace.gif
Всё очень плотно. Нам необходимо добавить воздух для создания визуальной гармонии и комфорта для читателя. Во-первых, я добавляю поля, меняю шрифт и его размер, а также увеличиваю межстрочные интервалы (line-height в CSS). Всё это «пассивный воздух». http://alistapart.com/d/whitespace/figure5_passivewhitespace.gif
Кто-то может возразить, что на "пассивный воздух" можно не обращать внимания, что он не играет роли. Я не соглашусь: если вы не работаете со своим "воздухом", значит вы плохой дизайнер. "Пассивный воздух" создает иллюзию свободы и равновесия. Это важно.
Но мы не закончили. В предыдущей иллюстрации я хотел бы дополнительно выделить часть текста - вторую цитату. Можно акцентировать на ней внимание, изменив цвет или увеличив размер шрифта, но я просто увеличил микро воздух между абзацами до макро, чтобы привлечь взгляд читателя, и уменьшил межбуквенные интервалы, сделав шрифт жирным. http://alistapart.com/d/whitespace/figure6_activewhitespace.gif
Это пример активного воздуха - добавить пустое пространство, чтобы выделить часть информации из общей структуры.
Практика, практика, практика
Единственный способ понять, как работает воздух - практика. Художнику-оформителю, подобно профессиональному военному, день ото дня марширующему по плацу, придется тратить часы и часы на совершенствование понимания и навыков. Упражнения по композиции в течение многих десятилетий решались студентами, и, к счастью для нас, некоторые из этих работ были задокументированы гуру от дизайна прошлых лет. Одним из них был Эмиль Рудер.
Рудер был типографом-печатником, швейцарцем по национальности. Он умер в 1970 году. После 21-летней практики преподавания, он подготовил и выпустил книгу - "Typography: A Design Manual" (5) , где пишет:
Цитата:
"Эта книга умышленно занимается только вопросами работы со сборными элементами в типографском деле, которые относятся к точным системам измерений. Ее цель в создании законов типографики, а также, несмотря на наличие общих черт, в разделении типографики и графического дизайна, который из-за выбора средств и инструментов, является более свободным и более трудным занятием".
Книга Рудера несколько однобока - акцентирована на типографике и тонкостях проектирования бланков. Но вместе с тем, Рудер указывает, какие пути верны, а какие нет, что позволяет, опираясь на этот труд, начать обучение фундаментальным принципам композиции. Книга битком набита отличными упражнениями по работе с "воздухом" и другими композиционными элементами. Книга дорогая, но стоящая.
Когда вы научитесь грамотно использовать воздух, реорганизовывать пустое пространство снаружи, внутри и между элементами композиции, вы сможете не только помочь восприятию читателя, формированию его мнения и оценки, но и, возможно, сами иначе взгляните на свою работу.
(1) Я использовал при переводе газетный термин «воздух». Он наиболее точен. Воздухом называется пустое пространство на газетной полосе.
(2) Direct mail - метод маркетинга, при котором компании рассылают рекламные материалы и образцы своей продукции потенциальным покупателям.
(3) Down-market - рынок товаров для небогатых покупателей, предпочитающих покупать товары по низким или сниженным ценам.
(4) Кегль – размер шрифта. Интерлиньяж – межстрочный интервал.
(5) Книга заявлена на Озоне, но там не бывает - заказывайте и ждите. Печаталась в СССР двадцать пять лет назад: http://www.ozon.ru/context/detail/id/2676535/
Комаджу, спасибо за перевод интересная статья.
PS Хотел плюсик поставить, а система не дала этого сделать :(
PS Хотел плюсик поставить, а система не дала этого сделать :(
Цитата: skywalker
PS Хотел плюсик поставить, а система не дала этого сделать :(
Думаю, не умру без плюсика ))
Закину бы еще на Webmascon (http://www.webmascon.com/about/about.asp) как раз в духе этого ресурса.
Цитата: skywalker
Комаджу, спасибо за перевод
PS Хотел плюсик поставить, а система не дала этого сделать :(
PS Хотел плюсик поставить, а система не дала этого сделать :(
Хе хе... ты тут не один :D
Интервалы между абзацами нужны обязательно, если абзацы начинаются не с красной строки. В противном же случае, самих отступов в начале каждого абзаца достаточно и дополнительные интервалы между абзацами использоваться не должны.
Речь о том, что межобзацный воздух удобнее для воприятия, чем абзацные отступы. Особенно, когда текст висит большим кирпичом.