Всё бы замечательно, использовать бы нам этот метод везде, где только можно и бед не знать, да только мы имеем дело, не с ограниченным пространством, таким как фотография или картина, где содержимое статично и каждый элемент знает своё место. Веб-сайт — это прежде всего информация. А его дизайн — это оформление его информации. Ну а информация имеет свойство изменяться, добавляться и стираться. Самое большие сложности с динамичными информационными сайтами, но и здесь всё можно привести к оптимальным гармоничным пропорциям. Проще со статичными имиджевыми скриншотами.
Давно уже писали об этом в разных источниках, и множество авторов рекомендуют при ширине станицы 960px использовать разметку колонок с отношением 593px/367px или при ширине 100% — 61.8%/38.2%, если не отвлекаться на отступы.
Что в этом хорошего? А то, что ширина боковой панели не слишком узкая, чтобы содержимое с трудом умещалось и не слишком широкое, чтобы сойти за доминанту.
Можно пойти более извращенным путем и разделить большую часть и получить узкую колонку 23.6%, соединить остаток большей части с меньшей и опять разделить по золотому сечению и получить среднюю часть 47.2% и боковую колонку 29.2%. Но эти методы для тех, кто ищет истину, где её нет (например, для таких как я).
А почему ширина боковой панели должна быть 38.2%? Почему не 36.7% или 31.2%? Да не почему! Пользователь не будет считать ваши пиксели и высчитывать соотношение содержимого и боковой панели. Важно то, что он поймет что правая колонка предназначена для различного рода дополнительной информации к текущему содержимому страницы или всего сайта (в зависимости от оформления). И ширина этой колонки может зависеть только от её содержимого.
А теперь самое важное
Смею заявить, что точность разметки колонок по золотому сечению — это подножка самому себе. Объясняю почему.
Зачем используется золотое сечение в живописи или фотографии? Чтобы определить зрительные центры. Они определяются следующим образом:
Рабочая площадь условно разделяется на две части в соответствии с золотой пропорцией, причем как по вертикали, так и по горизонтали. На пересечении условных прямых находится точка, которая называется «зрительным центром».
Можно также разделить рабочую площади и с обратной пропорцией, получится четыре точки, в каждой из которых могут быть расположены ключевые элементы композиции.
Иногда проводят диагональные линии которые служат направляющими для расположения динамичных элементов композиции.
А что же предлагают авторы «золотых колонок»? Чтобы в местах зрительных центров была пустота или раздельная линия различных по смыслу элементов? Золотая пропорция, это очень хорошо, но применять её следует более осмысленно.
Это значит, что ключевые элементы, а главное доминанта, должны находиться в районе зрительных центров общей композиции сайта. А те элементы композиции, которые не являются ключевыми, или являются составными частями других элементов, могут иметь соотношения размеров и расположения в соответствии с золотой пропорцией.
Привожу примеры пар элементов, размеры которых могут соотноситься с упомянутым соответствием:
- расстояние от абзаца до заголовка/расстояние от заголовка до абзаца;
- расстояние от заголовка до абзаца/расстояние между абзацами;
- расстояние между абзацами/высота строки;
- высота строки/размер шрифта;
- ширина и высота абзаца (высота — меньший размер);
- ширина и высота иллюстрации (высота — меньший размер);
- ширина иллюстрации/ширина абзаца.
Конечно, некоторые пункты трудно выполнимые, а возможно вообще не выполнимые, особенно в условиях «резиновой» вёрстки и конечно же в зависимости от содержимого сайта количество этих пунктов увеличится в разы.
Примеры общей композиции с учетом золотого сечения найти сложно. Вот некоторые из них (правда золотая пропорция в них чувствуется с натяжкой):
А, что же касается динамичных информационных сайтов, таких как блоги, новостные порталы и другие ресурсы, то тут могут быть варианты, но придумать их для такого сайта сложнее, чем для статичного скриншота.
Привожу примеры дизайнов блогов с разметкой зрительных центров.
Здесь идет акцент, на телевизоре, кнопка воспроизведения которого расположена в центре внимания, хорошо выделена диагональ образованная от изображения мальчика, через угол контентной части, заголовка блока в боковой панели и можно завершить движение взгляда на иконке RSS.
Чувствуется диагональ от правого верхнего угла, через «резные наклейки» к посту и фотографии, но не слишком выражено. Один центр внимания расположен в конце навигации, а второй — на рекламном блоке, которого сейчас нет.
Здесь всё очень просто: точки на начале навигации и начале поста.
