Основы дизайна. Размеры и пространство

 

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

Любой дизайн состоит из двух частей:

1. Материалы – размер, форма, цвет, текстура, шрифт.

2. Принципы – единства, баланс, контраст, динамика, нюансировка.

 

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

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

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

Квадрат или прямоугольник обладают максимальной компактностью в горизонтальном и вертикальном направлениях, превосходя в этом отношении круг. Из-за этого во всех шрифтах буквы округлой формы (о, с, э, е) выступают вниз за линию шрифта – только эта небольшая (2-3%) искусственная неправильность, называемая наплывом, позволяет создать впечатление равной высоты букв в строке.

 

 

У шрифтов есть еще несколько иллюзий: вертикальные линии кажутся тоньше равных им по толщине горизонтальных, а изогнутые тоньше прямых, симметричные фигуры кажутся более компактными и меньшими по размеру, чем равновеликие им несимметричные.

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

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

 

Архитекторы и художники древности придавали огромное значение пропорциям. Некоторые из их открытий, такие, как золотое сечение, вполне могут пригодиться и сегодняшнему дизайнеру. Золотое сечение (sectio aurea) заключается в том, что часть A относится к части B, как A относится к A+B.

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

Относительной популярностью пользуются простые пропорции равновеликих объектов, а также кратных соотношений их размеров 1:2 и 1:3. Но не следует увлекаться простотой – композиция, где все выровнено со всем может показаться скучной. Достаточно общим является принцип ограничения пропорций сверху.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

3. Материалы дизайнера – Формы

 

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

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

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

 

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

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

В дизайне прямые линии выполняют две противоположные функции: разделителей и соединителей. Прием использования линий-разделителей опирается на традицию книжного оформления (типографы называют такие горизонтальные разделители линейками). Тем не менее в современном дизайне в качестве разделителей чаще используются другие средства – пустые интервалы, переходы фонового цвета и т.п., если же линии-разделители и присутствуют, то, как правило, они являются частью более сложных форм.

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

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

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

 

 

 

а б в г

 

 

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

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

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

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

 

 

Кривые Безье – главный инструмент построения криволинейных форм во всех без исключения программах компьютерной графики.

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

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