Композиция в веб дизайне или принцип Золотого сечения

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

Золотое сечение - деление непрерывной величины на две неравные части, при котором весь отрезок так относится к большей части, как сама большая часть относится к меньшей. Или меньший отрезок так относится к большему, как больший ко всему.

Золотое сечение в вебдизайне

Термин золотое сечение был введен Леонардо да Винчи, который использовал его, как пропорции «идеального человеческого тела».
Например, пропорции мужского тела колеблются в пределах отношения 13 : 8 = 1,625 и немного ближе подходят к золотому сечению, чем пропорции женского тела, выражающиеся в соотношении 8 : 5 = 1,6. Итак, самым гармоничным соотношением является значение 1.618

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

Например, в рельефе из храма фараона Сети в Абидосе и в рельефе, изображающем фараона Рамзеса, пропорции фигур соответствуют золотому сечению. В фасаде древнегреческого храма Парфенона также присутствуют золотые пропорции и т. д..

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

«Есть вещи, которые нельзя объяснить. Вот Вы подходите к пустой скамейке и садитесь на нее. Где Вы сядете – посередине? Или, может быть, с самого края? Нет, скорее всего, не то и не другое. Вы сядете так, что отношение одной части скамейки к другой, относительно Вашего тела, будет равно 1,62. Простая вещь, абсолютно инстинктивная… Садясь на скамейку, Вы произвели «золотое сечение». Анхель де Куатье

Давайте проведем эксперимент: какой прямоугольник из ниже расположенных, с вашей точки зрения, имеет идеальные пропорции?

Золотое сечение в вебдизайне

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

Золотое сечение в вебдизайне

Золотое сечение можно вычислить очень просто, без геометрии и алгебры, — для этого используют приближенные значения 0,62 и 0,38. Если целый отрезок принять за 100 частей, то большая часть отрезка равна 62, а меньшая — 38 частям.

Золотое сечение в вебдизайне

Или вспомнив ряд Фибоначчи - ряд чисел, в котором каждое последующее число равно сумме двух предыдущих: 1, 1, 2, 3, 5, 8, 1З, 21 и т. д.

Этот ряд был открыт итальянским математиком Фибоначчи и назван его именем. Он обладает тем свойством, что отношения между соседними числами по мере возрастания чисел ряда, все более приближаются к 1,618, то есть к отношению золотого сечения.

Числа ряда Фибоначчи часто используются в дизайне для вычисления пропорций, т.к. работать с ними легче, чем с числом 1,618.

Вот еще пара удобных приложений, которые помогут вычислить Золотое сечение.

Phiculator - http://www.thismanslife.co.uk/main.asp?contentid=phiculator – маленькая и удобная программка, которая из любого введенного числа, автоматически вычислит, соответствующее Золотому сечению, значение.

Golden Section Ratio Design Tool - http://www.atrise.com/golden-section – а это уже солидный инструмент, который поможет избежать рутинных операций при работе с компоновкой объектов и форм. Результат можно увидеть на лету.

Вы можете спросить, зачем дизайнеру эта математика и какой в ней практический смысл? А смысл есть. Например, отношение сторон у iPod Shuffle 1.59, iPod Classic 1.67, а у iPhone4 1.7 – объем продаж за первые 4 дня торговли превысил 1 миллион 700 тысяч штук.

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

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

Но, вернемся к дизайну…

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

Воспользуемся правилом третей, основанном на применении золотого сечения или цифр ряда Фибоначчи. Это правило позволит нам вычислить центры внимания на странице.

Для этого поделим страницу на три части по горизонтали и вертикали.

Золотое сечение в вебдизайне

На пересечении линий находятся 4 важные точки, которые можно использовать для выделения основных деталей макета сайта.

Как правило, не стоит использовать сразу все четыре точки, но, одну или две – обязательно.

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

Навигационное меню можем расположить на первой горизонтальной линии.

Еще один-два важных элемента располагаем на точках пересечения горизонтальных и вертикальных линий.

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

Что это дает нам, как владельцам сайта?

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

Или больше отзывов на посты, если в нужном месте указать какой нибудь стимул для комментирования, вроде блока "Топ комментаторов".

2/3 страницы займет центральная колонка и 1/3 отведем под сайдбар.

Золотое сечение в вебдизайне

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

Золотое сечение в вебдизайне

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

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

О подборе цвета для сайта читайте дальше - Как подобрать цвет для сайта: немного о теории цвета.

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

В статье использованы материалы сайтов: http://www.smashingmagazine.com, http://seleckis.lv/journal, http://designinfoline.ru

Хотите получать сообщения о скидочных акциях,
новых постах и темах для wordpress?
  1. ну этот метод немного устарел на мой взгляд/

    сейчас в обиход вошли сетки типа 960 grid system..

    • Зачем смешивать разные вещи?

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

      Чтобы потом в выбранных зонах расположить самые важные элементы сайта.

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

  2. У вас обе колонки сделаны почти по принципу золотого сечения, верно? ))

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

    • Geleosan, это же просто рекомендация, а не директива к обязательному использованию. Делайте так, как вам удобнее.

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

    Давно мечтал создать сайт с применением разных аспектов золотого сечения, но слишком много вопросов возникает. Надо экспериментировать и потестить на независимых зрителях. Ушел делать тему для WP, порадую заказчика.

  4. Блин прочитал, бегло не особо понял, но спасибо думаю очень полезно, буду теперь изучать подробней...

  5. Да, отличная статья! Я как то изучал литературу по поводу рекламы и маркетинга и хочу сказать что это для меня открытие! Спасибо автору за хороший совет! К стати это ж можно применить к дорвеям и сателлитам

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

    • Да, скрипт называется watermark.php.
      Его можно найти в интернете.

  7. Лишь остается дополнить, что на базе темы данного поста получили распространение такие паттерны, как F-паттерн и Z-паттерн(или перевернутый вариант N-паттерн).

    Также добавлю, что человеческое восприятие идеально для 3-6 объектов, как вывод - 4 объекта является идеальным вариантом. Осталось теперь прочитать статью про цвета и вперед к созданию макета )

    Спасибо за статью.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

Для того чтобы снять блок и увидеть скрытый контент или ссылку на закачку, подпишитесь на обновления блога.

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 195
Отзывов 4349