Веб-дизайн

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

Если элементов столько, что все они не умещаются в один горизонтальный или вертикальный ряд, неизбежен выход в новое измерение — построение двумерной «таблицы» элементов. Здесь можно порекомендовать выделить одно из направлений (горизонтальное или вертикальное), сблизив элементы по этому направлению заметно сильнее, чем по перпендикулярному. Это позволяет достичь группирования на двух уровнях и, как результат, более оживленных и разнообразных пространственных отношений в композиции (особенно если такое группирование оправдано содержимым элементов). При этом следует учитывать и пропорции самих элементов, как показано на рис. 8. Преимущества одного из направлений перед другим можно достичь и другими способами — например, только вертикальной или только горизонтальной разлиновкой, чередованием фонового цвета в строках или столбцах таблицы (стр. 228).

Из других типов размещения одноуровневых элементов следует особо выделить намеренно случайное, хаотическое расположение — весьма сильнодействующий композиционный прием, почти всегда выступающий на первый план (а потому применимый только к элементам, которые сами по себе достаточно активны в композиции) и обязательно требующий поддержки со стороны других элементов. Хотя прием этот популярен в современном дизайне, пользоваться им нужно с большой осторожностью; у профессиональных дизайнеров «псевдослучайное» расположение, как правило, прочно зафиксировано множеством малозаметных нюансных координации (стр. 173). Любители же, чувствуя носящуюся в воздухе моду на разбросанность, обычно вытесняют этот прием на задворки композиции, применяя хаотическое расположение для элементов заднего плана — так возникают бессчетные фоны со «звездным небом» или «мятой бумагой», беспорядочность которых только раздражает (еще и потому, что она нередко сочетается с назойливой повторяемостью изразца фонового изображения, стр.259).

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

Разноуровневые элементы. Разнообразие сочетаний элементов, из которых один занимает более высокое место в иерархии страницы, чем остальные, очень велико, но здесь достаточно рассмотреть самый простои и в то же время самый типичный случай — сочетание заголовка и относящегося к нему текста. Задача дизайнера состоит здесь в том, чтобы средствами размещения выразить зависимое положение одного элемента от другого, их связь и иерархию соподчинения. В более общем случае «заголовком» может быть весь заглавный графический блок веб–страницы (с логотипом, навигационной панелью и т. п.), а «текстом» — все остальное содержимое этой страницы.

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

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

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

Конечно, иногда такое необычное расположение мотивируется не ролью заголовка, а вполне естественным желанием страницы выглядеть «не как все» или даже «осадить зрителя», заставив его поискать взглядом непонятно где прячущийся заголовок или поразмышлять над причинами такого расположения. Нельзя не согласиться, что традиционная парадигма заголовка как самой выдающейся, «издалека видной» части композиции не всегда практически оправдана — очень часто прочтение заголовка совсем не необходимо для понимания относящегося к нему текста, так что заголовку отводится роль не обязательного введения, а всего лишь комментария к тексту.

Нам осталось рассмотреть, чем определяется соотношение заполненного и пустого пространства при различных видах размещения. Вспомним понятие компактности формы, введенное на стр.79; плотность размещения является аналогом этого понятия для случая двух и более элементов, как–либо скомпонованных на плоскости страницы. Очевидно, что прежде всего плотность композиции должна быть увязана с компактностью составляющих его элементов — как правило, компактные формы требуют более плотного размещения, чем «дырявые».

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

Артистического склада страницы гораздо свободнее используют не только увеличенные промежутки между элементами, но и нулевые и даже отрицательные (т. е. сопряжение элементов вплотную и наложение их друг на друга). Часто на одной и той же странице можно видеть вплотную прижатые друг к другу заголовок и текст, с частично подстеленной под них фотографией, отделенные сравнительно большим пространством от соседних элементов. Такой рваный, синкопический ритм плотности бывает совершенно необходим для свободного и выразительного звучания материала (пример в, см. раздел «Галерея» на стр.323).