Золотое сечение в html

Идея использовать методы золотого сечения в web далеко не нова и многие авторы советуют использовать это божественное соотношение при раскройке html страницы, однако если данный метод применять напрямую – то есть брать и резать в этой пропорции результат получается мягко говоря не очень.
Казалось бы чего проще разбил ширину страницы на две части по 38,2% слева на сайд бар и 61,8% справа для основного контента и полные карманы гармонии нам гарантированы. Посмотрите внимательно на пример ниже:

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

38.2%
меню 1

  • пункт1
  • пункт2
  • пункт3

меню 2

  • пункт1
  • пункт2
  • пункт3

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

Золотое сечение (золотая пропорция, деление в крайнем и среднем отношении) — деление непрерывной величины на две части в таком отношении, при котором меньшая часть так относится к большей, как большая ко всей величине. Далее идет формула расчета в результате которой мы получаем коэффициенты 1,6180339887 отношение большей части к меньшей и наоборот меньшая часть к большей относится как 0,6180339887 и еще интересное свойство золотой пропорции 1 – 0,6180339887 = 0,61803398872 = 0,3819660113 = 0,38196601118843172769
Отрезок AC = AB * 0,6180339887 в свою очередь сторона квадрата
DE = AC * 0,6180339887 = AB * 0,61803398872 = AB * 0.382
и далее последовательно рассчитаем все стороны квадратов:
EF = AC * 0,6180339887 = AB * 0,61803398873 = AB * 0.236
GH = DE * 0,6180339887 = AB * 0,61803398874 = AB * 0.146
GI = FG * 0,6180339887 = AB * 0,61803398875 = AB * 0.09
KL = IH * 0,6180339887 = AB * 0,61803398876 = AB * 0.056
MO = KG * 0,6180339887 = AB * 0,61803398877 = AB * 0.034
ON = ML * 0,6180339887 = AB * 0,61803398878 = AB * 0.021
Теперь не составит особого труда подсчитать расстояние вертикальных проекций от оси X.
На картинке показаны длины отрезков для раздела страницы в процентах, на мой взгляд для сайд бара подходит L1 = 23.6%
получаем садбар шириной 23,6% и основная часть 76,4%

76.4%

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

23.6%
меню 1

  • пункт1
  • пункт2
  • пункт3

меню 2

  • пункт1
  • пункт2
  • пункт3

Теперь можно добавить header и footer. Их мы разобьем на 3 части использую первоначальную пропорцию для зрительных центров.

38.2% 23.6% 38.2%

76.4%

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

23.6%
меню 1

  • пункт1
  • пункт2
  • пункт3

меню 2

  • пункт1
  • пункт2
  • пункт3
38.2% 23.6% 38.2%

Три колонки

Пока я крутил вертел спираль подыскивая нужные линии раздела неожиданно само собой нашлось решение для выкройки на три колонки. Примем ширину всей страницы за W, затем отрезаем больший кусок для основной части L1 = W * 0.618 и потом этот кусок просто располагаем по центру страницы таким образом по бокам остаются 2 колонки по 0,191. В процентах это будет 19.1% – 61.8% – 19.1%

19.1%
меню 1

  • пункт1
  • пункт2
  • пункт3

меню 2

  • пункт1
  • пункт2
  • пункт3

61.8%

Выкройка на 3 колонки

19.1%
меню 2

  • пункт1
  • пункт2
  • пункт3

меню 2

  • пункт1
  • пункт2
  • пункт3

Теперь перейдем к шрифтам.

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

Я предлагаю взять размеры заголовков из следующей последовательности

H1  = 161.8%
H2 = 138.2%
H3 = 123.6%
H4 = 114.6%

заголовок H1

заголовок H2

заголовок H3

заголовок H4

Выделеный текст 100% размер для сравнения
Очень даже неплохо получается!

И на последок квадратики :

φ

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url=""> [php]…[/php] [html]…[/html] [css]…[/css] [text]…[/text] [code]…[/code]

  • sdfsdfsdf
  • sdfsdfsdfsdf
  • sdfsdfsdfs
  • sdfsdfsdf
  • sdfsdfsdfsdfs
  • sdfsdfsdfs
  • sdfsdfsdf
  • sdfsdfsdfsdfs