Дизайн по правилам

Продолжение. См. № 1/2009

Детская болезнь пестроты

Естественное желание новичка — украсить работу картинками, цветами, причудливыми орнаментами. Больше элементов, больше контраста, еще больше... И там и сям... В итоге контраст съедает сам себя, превращаясь в пестроту.

Посмотрите на следующий рисунок:

Завораживает? Безусловно! Такое цветное пятно (в черно-белой газете его, увы, не видно) на унылой однотонной стене обязательно привлечет внимание. Как любой яркий мазок на сером бетоне.

Привлекает пятно. Если на белый лист опрокинуть цветную палитру, то этот “рисунок” обязательно привлечет внимание.

— Скажите, Автор, зачем вам этот шершавый фон на рисунке, ведь он мешает читать текст?

— Ну и пусть мешает, ведь не роман написан, всего несколько слов. Зато этот фон здорово имитирует плохо приклеенную на стену пленку!

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

— У меня все продумано и обоснованно: на лошади почтальон (это по теме объявления), белые окружности имитируют окошки, стрелки “продвигают” читателя в нужных направлениях, палец показывает заголовок, знак вопроса наводит на размышления, обезьяна предупреждает, что за аренду придется платить!

— Почему обезьяна?

— А что, красивая картинка, была под рукой.

— А зачем все эти рожицы?

— Для настроения! Смотрите, как с ними весело! И чтобы занять пустые места.

Да, действительно. В этом документе все по отдельности красиво: и фон, и рисунки, и графические элементы, и текст (шрифт “Times” банален, но, безусловно, красив). Но все свалено в одну аморфную кучу. Можно долго смотреть на это “произведение искусства” (особенно в очереди на почте, когда делать нечего), но так и не заметить на нем важного сообщения. Конечно, видно, что на листочке что-то написано, но это не текст, а элемент декора.

А теперь отдохнем на таком варианте:

Второе задание по дизайну

Уважаемые студенты курса 42 Роботландского университета!

Давайте сделаем визитку для Ивана Александровича Сидорова.

Иван — программист, работает в “Роботландии”. Его электронный адрес: sidorov@pereslavl.ru, его телефон: (48535) 1-23-45 begin_of_the_skype_highlighting              (48535) 1-23-45      end_of_the_skype_highlighting begin_of_the_skype_highlighting              (48535) 1-23-45      end_of_the_skype_highlighting. Предприятие “Роботландия” находится в Переславле-Залесском, сайт предприятия: www.botik.ru/~robot.

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

Приближение

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

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

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

…

Это и есть принцип приближенности — на странице (как и в жизни) физическая близость подразумевает отношения.

Робин Вильямс “Дизайн для недизайнеров”

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

Иван Сидоров, программист Роботландии, сделал такую визитку (см. рис. 4):

Рис. 4

Посмотрим на его работу! Сначала наше внимание привлекает текст “Иван Александрович Сидоров” — он выделен жирностью и кеглем. И это правильно, ведь имя владельца — самое главное на визитке. А как читать дальше? Непонятно, правда? Слова разбросаны по карточке без всякой взаимосвязи друг с другом.

Телефон, номер которого записан на визитке, — это личный телефон Ивана или телефон фирмы, в которой он работает? А сайт? Это сайт Ивана или сайт фирмы? Переславль-Залесский — это город, в котором живет Иван, или город, в котором прописана Роботландия?

Пользуясь принципом приближения, наведем на визитке порядок (см. рис. 5):

Рис. 5

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

Посмотрите на меню, расположенное на главной странице сайта “Группа города Сатка” (одна из конкурсных работ 2002/2003 учебного года):

Рис. 6

Позиции меню расположены далеко друг от друга, кроме того, они центрированы — как следствие, нет ничего, что объединяло бы эти элементы в одно целое. Заголовок страницы “Группа” отдален от содержания, значит, не связан с ним.

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

Рис. 7

Еще пример из конкурсной работы того же 2002/2003 учебного года (см. рис. 8).

Рис. 8

Заголовки на рис. 8 отделены значительными и одинаковыми промежутками от своего и предыдущего разделов. Они “гуляют” сами по себе, игнорируя содержание страницы. Но заголовок, как шапка, должен быть на своей голове! Что же нужно сделать? Ну, конечно, приблизить шапку к своему телу и отдалить от чужого (см. рис. 9):

Рис. 9

Практический совет

По умолчанию браузер выводит заголовки именно так, как показано на рис. 8. Чтобы добиться успеха, нужно изменить умолчание, записав в стилевом файле (файл с расширением css) пару примерно таких определений (см. табл. на с. 31).

На рис. 10 — главная страница конкурсной работы 2006/2007 учебного года. Заголовочная часть состоит из логотипа, на котором (довольно бледно) написан родной город авторов — Лукоянов и заголовок сайта “Мифы в астрономии”. Эти два элемента открещиваются друг от друга, отрицая всякую связь. А жаль! Заголовочная часть должна впечатлять цельным образом, ведь она — общий домик и для логотипа, и для заголовка, а получается, что эти элементы едва терпят друг друга.

Давайте подружим логотип с заголовком, приблизив их друг к другу (рис. 11).

Рис. 11

Уже лучше, но логотип смотрит свысока. Уменьшим его спесь. Смотрите, они уже партнеры, почти друзья (рис. 12):

Рис. 12

А ну-ка прислоним их плечами, как братьев (рис. 13):

Рис. 13

По-родственному! Но текст заголовка прилип к логотипу! Это случилось, когда удалили белое пространство между элементами. Внимательный взгляд на рис. 12 и 13 подсказывает потрясающую по важности и простоте мысль: оказывается, друзей связывает не только физический контакт, но и общая среда обитания, в нашем случае общая фоновая полоска. Двое остаются в одной лодке, даже если разойдутся в ней на нос и корму (рис. 14).

Рис. 14

Рисуем общую фоновую подложку для связи элементов. Теперь они вместе, хотя обходятся без поцелуев (рис. 15).

Рис. 15

Заголовочной части можно придать большую выразительность, выдвинув новую идею: запустим Лукоянов на орбиту вокруг заголовка! А что? Идея по теме сайта, рисунок привлечет оригинальностью, а объединение орбитой еще больше свяжет наших друзей (рис. 16):

Рис. 16

Вывод

Чтобы подчеркнуть структуру документа и упростить его восприятие, логически связанные элементы нужно связывать композиционно. Эта связь достигается физическим приближением элементов и (или) размещением их в общей графической оболочке (“в одной лодке”). Билет “в одну лодку” часто получают элементы, просто выровненные по одной вертикальной прямой.

Команда 4212

Руководитель: Зарубина Людмила Леонидовна

Вариант команды 4212

Слова “тел.”, “e-mail”, “web-сайт” — лишние, они только загромождают визитку.

Приближение. Было бы лучше разделить информацию на две смысловые группы: “Сидоров” (главная группа) и “Роботландия” (вспомогательная). Сейчас на визитке 4 группы, которые хорошо обособлены, но рассеивают внимание читателя.

Выравнивание. Выполнено неплохо, но правый нижний угол перевешивает.

Контраст. Самый заметный элемент — “Сидоров Иван Александрович”, что обоснованно.

В целом визитка смотрится неплохо.

Команда 4205

Руководители: Пономарева Маргарита Михайловна, Леус Елена Владимировна

Вариант команды 4205

Рис. 18

Комментарий куратора

Слова “тел.”, “e-mail” — лишние.

Приближение. Различаем 4 группы, а логично иметь две.

Выравнивание. Очень хорошо.

Контраст. Самым заметным на визитке получилось слово “Роботландия”, что неверно (визитка Сидорова, а не Роботландии).

В целом композиционное решение хорошее.

Команда 4216

Руководитель: Федека Лилия Михайловна

Варианты команды 4216

Рис. 19

Рис. 20

Комментарий куратора

После точки в тексте “г. Переславль-Залесский” (рис. 19) должен быть пробел, а после знака “@” пробела быть не должно.

Приближение. В варианте на рис. 19 текстовые элементы практически равномерно распределены по карточке, в итоге визитка не имеет структуры, информация воспринимается с трудом. Вариант на рис. 20 необоснованно предлагает три группы (“программист” не связан ни с Сидоровым, ни с Роботландией).

Выравнивание. На рис. 19 — хорошо. В варианте на рис. 20 длины строк близки, поэтому центрирование смотрится плохо.

Контраст. В варианте на рис. 19 контраст на тексте не задействован. В варианте на рис. 20 правильно выделен “Сидоров”.

Команда 4211

Руководитель: Струкова Наталья Николаевна

Варианты команды 4211

Рис. 21

Рис. 22

Рис. 23

Комментарий куратора

Цитата из Робин Вильямс: “рамка закрывает пространство, создавая ощущение замкнутости”. Особенно такая толстая, как в вариантах на рис. 21 и 23. Слова “электронный адрес”, “телефон”, “сайт предприятия”, “предприятие Роботландия находится” — являются лишними. Карточки под завязку забиты элементами, нет пустого пространства, на котором мог бы отдохнуть взгляд.

Приближение. Ни в одном варианте этот принцип не просматривается.

Выравнивание. С небольшими погрешностями выполнено во всех вариантах.

Контраст. В вариантах на рис. 21 и 23 сильнее Сидорова выделено слово “программист”, что неправильно. В варианте на рис. 22 необоснованный акцент поставлен на фразе “Роботландский университет”.

Команда 4246

Руководитель: Малышев Александр Викторович

Вариант команды 4246

Рис. 24

Комментарий куратора

Слово “Роботландия” сверху — лишнее (как и слова “Тел.”, “Email”).

Приближение. Удачно, что предприятие, город и сайт собраны в одну группу, но Роботландию надо поставить первой. Группу “программист” тоже можно считать удачной. Если убрать название предприятия сверху, то получится хорошая визитка.

Выравнивание. Хорошее.

Контраст. Правильно выделен “Сидоров Иван Александрович”.

Команда 4203

Руководитель: Жемеркин Максим Геннадьевич

Рис. 25

Комментарий куратора

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

Команда 4214

Руководитель: Чмелева Елена Николаевна

Варианты команды 4214

Рис. 26

Рис. 27

Рис. 28

Рис. 29

Комментарий куратора

Рисунок 26. Контактную информацию надо разбить на “Сидоров” и “Роботландия”. “Программист” не дружит с Сидоровым — слишком далеко от него расположен (центрированные строки не создают ощущения “общей лодки”). Нет выравнивания текста в правом нижнем углу. Правильно выделен Сидоров. Карточка перегружена.

Рисунок 27. Хороший акцент на Сидорове, город и сайт правильно приближены к Роботландии, а вот почта и телефон отделены от Сидорова. “Рамка закрывает пространство, создавая ощущение замкнутости”.

Рисунок 28. Контактную информацию нужно разобрать на “Сидоров” и “Роботландия”. Правильно сделан акцент на Сидорове. Выравнивание хорошее, но межстрочное расстояние в нижней полоске слишком большое.

Рисунок 29. Контактная информация правильно расположена, но нет города (который нужно отнести к Роботландии). Сидоров не выделен на карточке (по отношению к Роботландии). Имя центрировано, а слово “программист” выровнено по левому краю — такая смесь воспринимается как погрешность. Если Сидорова подровнять влево, будет гораздо лучше (см. рис. 30):

Рис. 30

Из всех вариантов последний по композиции получился самым интересным.

Команды 4225 и 4255

Руководитель: Попович Александр Борисович

Варианты команд

Рис. 31

Рис. 32

Комментарий руководителя

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

Шрифт, используемый на сайте, для названия ни подбирать, ни имитировать не стали. Решили, что задача не в этом, а в устойчивой (четырехногой) позиции дизайнера.

Комментарий куратора

Обе работы хороши, оригинальны, выполнены с осознанным использованием всех четырех принципов дизайна. Но работа 4225 очень хороша! Она лучше работы 4255 по трем главным причинам. Во-первых, в ней больше воздуха (“белого пространства”). То есть правильно поставленная задача “разгрузить рабочую область” в работе 4225 выполнена гораздо лучше (карточка 4255 перегружена элементами). Во-вторых, в работе 4255 акцент сделан не на Сидорове, а на Роботландии, что Сидорову (а это его визитка) немного обидно. Наконец, группировка элементов по принципу приближения в работе 4225 сделана логичнее.

Приближение. В варианте 4225 — идеально. В первую группу слева собрана информация о Роботландии, во второй — о Сидорове. Вторую группу объединяет выравнивающая вертикаль справа (элементы в одной лодке, хотя занимают середину, нос и корму). Если бы этого выравнивания не было, элементы распались бы на три независимые группы.

В варианте 4255 к Роботландии привязан телефон и почта Сидорова, что неверно. “Программист” на визитке больше связан с Роботландией, чем с Сидоровым, хотя профессия — это атрибут Сидорова, а не предприятия.

Выравнивание. Если в визитке 4225 убрать значки с изображением телефона и компьютера (сместив текст вправо), то выравнивание справа станет заметно лучше.