Дмитрий Кирсанов - Веб-дизайн

• Название: Веб-дизайн
• Автор: Дмитрий Кирсанов
• Жанр: Интернет
• Год: 2006
• ISBN: 5-93286-003-0

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

---

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

Пространственные отношения

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

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

РАЗМЕР

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

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

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

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

Форма и размер. Зачастую объекты имеют сложные, почти аморфные (стр. 100) очертания, затрудняющие даже приблизительное определение их размеров. Взять, например, букву позаковыристее из какого–нибудь шрифта с засечками — от каких точек правильнее всего отсчитывать ее ширину и высоту?

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

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

Рис. 3 В (а) круг кажется уже, чем равновеликий ему квадрат; в (б) увеличенный фрагмент буквы с закруглением (справа) выступает вниз за базовую линию, проведенную по низу букв без закруглении (показаны строчные буквы «и» и «о» из шрифта Тайме)

(рис. 2). Теоретически максимальной компактностью обладает окружность (не имеющая «оболочки» вообще), минимальной — сложные фигуры с выступами и пустотами, лишенные какой–либо логики формы.

Но это лишь один из аспектов. При всевозможных выравниваниях элементов друг относительно друга (стр. 86) большое значение имеет то, насколько резко форма кончается в направлении, перпендикулярном отсчитываемому размеру. Так, круг и квадрат на рис. 3, а одинаковы по ширине, но квадрат кажется немного шире из–за того, что он прилегает обеими вертикальными сторонами к прямым, ограничивающим его в горизонтальном направлении, тогда как круг касается каждой из этих прямых только в одной точке. Можно сказать, что квадрат или прямоугольник обладают максимальной компактностью в горизонтальном и вертикальном направлениях (самых важных в любой композиции), превосходя в этом отношении изотропный, «абстрактно компактный» круг. Из–за этого, например, во всех шрифтах буквы округлой формы («о», «с») выступают вниз за базовую линию шрифта — только эта небольшая (2–3 %) искусственная неправильность, называемая наплывом, позволяет создать впечатление равной высоты букв в строке (рис. 3, б).

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

Искусство выравнивания текста. Рассмотрим более подробно пример с различными формами букв. Допустим, стоит задача визуально выровнять правый край строки текста по некоей вертикали — например, по габаритной вертикали прямоугольника, под или над которым расположен текст. Если используется шрифт без засечек и текст кончается, например, буквой «н», никаких проблем не возникает: мы просто выравниваем правый кран последней буквы по требуемой вертикали. Если же последней буквой является, скажем, «т», буква с закруглением типа «ь» или же «н» из шрифта с засечками, то выступающие горизонтальные штрихи или закругления обязательно должны немного свешиваться за вертикаль, выравнивания. Если же в конце стоит точка или запятая, се нередко выносят за линию выравнивания целиком (так называемая «висячая пунктуация», пример которой показан на рис. 38 на стр. '145). Засечки, впрочем, бывают разные. У шрифтов типа новой антиквы (рис. 4, б) о классификации шрифтов см. стр.126) тонкие засечки соединяются с прямолинейным и вертикальным основным штрихом под прямым углом. Напротив, в большинстве шрифтов классической и переходной антиквы (рис. 4, б) более толстые засечки соединяются с основным штрихом с помощью широких плавных закруглений, а основной штрих имеет иногда сложную, вогнутую в центре форму. Очевидно, что засечки второго типа гораздо больше добавляют к видимой ширине буквы и выносить их за линию выравнивания нужно в меньшей степени. Кроме того, как я уже упоминал, величина этой поправки зависит от размера букв; сильнее всего видимая ширина букв отличается от фактической для надписей мелким кеглем (это одна из причин, по которым для них следует отдавать предпочтение шрифтам без засечек), а при достаточно большом кегле шрифта, когда засечки хорошо различимы, такая коррекция размера может оказаться ненужной и даже вредной.