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

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

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

Давно уже писали об этом в разных источниках, и множество авторов рекомендуют при ширине станицы 960px использовать разметку колонок с отношением 593px/367px или при ширине 100% — 61.8%/38.2%, если не отвлекаться на отступы.

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

Можно пойти более извращенным путем и разделить большую часть и получить узкую колонку 23.6%, соединить остаток большей части с меньшей и опять разделить по золотому сечению и получить среднюю часть 47.2% и боковую колонку 29.2%. Но эти методы для тех, кто ищет истину, где её нет (например, для таких как я).

А почему ширина боковой панели должна быть 38.2%? Почему не 36.7% или 31.2%? Да не почему! Пользователь не будет считать ваши пиксели и высчитывать соотношение содержимого и боковой панели. Важно то, что он поймет что правая колонка предназначена для различного рода дополнительной информации к текущему содержимому страницы или всего сайта (в зависимости от оформления). И ширина этой колонки может зависеть только от её содержимого.

А теперь самое важное.

Смею заявить, что точность разметки колонок по золотому сечению — это подножка самому себе. Объясняю почему.

Зачем используется золотое сечение в живописи или фотографии? Чтобы определить зрительные центры. Они определяются следующим образом:

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

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

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

А что же предлагают авторы «золотых колонок»? Чтобы в местах зрительных центров была пустота или раздельная линия различных по смыслу элементов? Золотая пропорция, это очень хорошо, но применять её следует более осмысленно.

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

Привожу примеры пар элементов, размеры которых могут соотноситься с упомянутым соответствием:

• расстояние от абзаца до заголовка/расстояние от заголовка до абзаца
• расстояние от заголовка до абзаца/расстояние между абзацами
• расстояние между абзацами/высота строки
• высота строки/размер шрифта
• ширина и высота абзаца (высота — меньший размер)
• ширина и высота иллюстрации (высота — меньший размер)
• ширина иллюстрации/ширина абзаца

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

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

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

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

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

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

Здесь всё очень просто: точки на начале навигации и начале поста.

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