Приближение

Купить книгу

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

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

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

Этот принцип иллюстрируется очень простым примером. Что можно сказать о цветах, перечисленных в списке слева? Вероятно, у них есть что-то общее, правда? А о цветах в списке справа? Судя по расположению элементов, четыре последних чем-то отличаются. Это вы понимаете сразу. Причем на подсознательном уровне. Вы знаете, что последние четыре цветка чем-то отличаются, потому что от остального списка они отделены физически. Это и есть принцип приближенности — на странице (как и в жизни) физическая близость подразумевает отношения.

proximity-1

А теперь взгляните на визитку. Сколько отдельных элементов вы видите на этом небольшом пространстве? Сколько раз ваш взгляд остановился,
когда вы ее рассматривали?

Пять? Конечно — ведь на визитке пять элементов.

Откуда вы начали читать? Надо полагать, с середины, потому что слова в центре набраны жирным шрифтом.

Что вы читаете потом, — то, что расположено справа? Куда направляете взгляд, дойдя до правого нижнего угла? По кругу- смотрите, не пропущены ли какие-нибудь углы?

business-card-1

А что если перемешать все еще больше:

business-card-2

Теперь уже две фразы выделены жирным — откуда же вы начали? С центра или с левого верхнего угла?

А к чему перешли после этих двух элементов? Так и смотрите на них по очереди, судорожно пытаясь разглядеть, что же там за слова в углах.

Знаете ли вы, когда это закончится?

А ваши знакомые читают в таком же порядке? Или нет?

 

Несколько элементов, расположенных в непосредственной близости друг от друга, образуют один визуальный блок, они перестают быть независимыми. Как и в жизни, близость рождает отношения. Когда несколько похожих элементов объединяются, происходит сразу несколько событий: страница обретает структуру; вы знаете, где начать чтение и где оно заканчивается; более организованным становится и белое пространство (пространство, окружающее буквы).

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

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

business-card-3

Остались ли какие-то вопросы по поводу того, где начинать чтение? Что читать потом? И когда заканчивается этот процесс?

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

 

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

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

bulletin-1

Два элемента в левой верхней части стоят рядом, что наводит на мысль об их взаимосвязанности. Но должны ли они быть взаимосвязаны?

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

Правильный пример взаимосвязи элементов показан ниже.

bulletin-2

Обратите внимание, что заодно я внесла и еще кое-какие изменения:

  • везде заменила капитель строчными буквами, благодаря чему освободилось пространство, позволившее мне усилить заголовок и сделать его более заметным;
  • заострила скругленные углы, придав всей странице более четкий и серьезный вид;
  • увеличила самолет, позволив ему выйти за рамки страницы (это обычный прием, позволяющий расширить белое пространство).

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

grouping-ru-1

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

Располагая подобные элементы (как текстовые, так и графические) ближе друг к другу, иногда приходится менять их, увеличивая или уменьшая, выдвигая вперед или, наоборот, ставя на второй план. Не обязательно набирать текст кеглем 12 пунктов! Размер таких второстепенных элементов, как номер и год выпуска бюллетеня, может не превышать 7-8 пунктов.

poster-1

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

Скажите, например, сколько всего концертов планируется дать?

Принцип приближенности не требует, чтобы все элементы располагались близко друг к другу. Он подразумевает, что элементы, между которыми существует смысловая (информационная) связь, должны быть связаны и визуально. Необходимо, чтобы остальные элементы или их группы не находились в непосредственной близости друг от друга. Приближенность элементов или ее отсутствие указывает на наличие отношений.

poster-2

Сколько концертов в цикле?

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

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

Тот же пример, что и выше. Скажите, что вы думаете об этих трех концертах?

А почему вы думаете, что один концерт не похож на другие? Дело в том, что он от них отделен. Вы мгновенно видите, что он чем-то отличается, — это следует из пространственных взаимосвязей.

poster-3

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

На этом рекламном листке («флаере»), возвещающем о распродаже, дизайнер, надо полагать, намеревался изобразить нечто забавное и энергичное. Однако можно ли с первого взгляда понять, где и когда эта распродажа состоится?

flyer-1flyer-2

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

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

lasso-1

Toт, кто создал эту мини-афишу, после каждого заголовка и каждого абзаца по два раза нажимал клавишу Enter (Return). Поэтому заголовки находятся на одинаковом расстоянии и от основного текста, и друг от друга. Выглядят они, таким образом, отдельными, никак не связанными элементами. Поскольку все расстояния одинаковые, нельзя определить, к какому блоку основного текста относится заголовок- верхнему или нижнему.

Белого пространства здесь более чем достаточно, но все оно беспорядочно разорвано. А некоторые участки смотрятся как чужеродные элементы (это можно сказать, например, о пространстве между заголовками и соответствующими им фрагментами основного текста). Когда белое пространство так вот «окружено», оно визуально отдаляет элементы.

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

lasso-2

Если в этом объявлении заголовки всего лишь поставить поближе к связанным с ними абзацам, произойдет сразу несколько изменений:

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

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

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

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

 

ad-block-1

Это объявление я нашла в газете. Нет, правда. Кроме всего прочего (оно набрано капителью), плохо в нем то, что вся информация сбита в один блок.

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

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

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

ad-block-2

На исходном варианте объявления хуже всего то, что информация никак не разбита. Кроме того, капитель, собранная в один блок, поглотила все свободное пространство (то самое пространство, на котором должен отдыхать глаз читателя). Можете мне поверить: нет ничего страшного в том, чтобы задать кегль меньше 12 пунктов!

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

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

 

luddites-1

Как на этой странице все запутано! Посмотрите на ссылки под заголовком. Все ли они равнозначны? Кажется, что да. Однако на самом деле нет.

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

luddites-2

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

Цитату я поместила немного поодаль от основного текста, поскольку она не относится к нему непосредственно.

Еще здесь применен принцип выравнивания (см. главу 3): текст выровнен по левому краю.