Применение Золотого сечения в Web

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

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

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

    На тему эффективного дизайна можно привести несколько ссылок:

    10 принципов эффективного веб-дизайна
    Пять дизайнерских правил применяемых в Web

    Это из того что вспомнилось. Рекомендуется почитать блог Дизайн пользовательских интерфейсов и юзабилити.

    Это, скажем так преамбула, которую можно отнести к любому направлению дизайна. В этой статье мы поговорим о Web-дизайне и о применении Золотого Сечения и Правила Третей.

    Одной из главных задач эффективного дизайна в Web – это ясность и интуитивность. А также концентрация внимания пользователя на нужных местах страницы. Как этого добиваются?

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

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


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


    Прежде всего, что такое Золотое сечение?

    По материалам Википедии:
    Золото́е сече́ние (золотая пропорция, деление в крайнем и среднем отношении, гармоническое деление, число Фидия, φ) — деление отрезка на части в таком соотношении, при котором большая часть относится к меньшей, как сумма к большей. Например, деление отрезка АС на две части таким образом, что большая его часть АВ относится к меньшей ВС так, как весь отрезок АС относится к АВ (т. е. |АВ| / |ВС| = |АС| / |АВ|).

    Эту пропорцию принято обозначать греческой буквой φ (встречается также обозначение τ) и она равна 1.618… (число бесконечное)

    В дошедшей до нас античной литературе золотое сечение впервые встречается в «Началах» Евклида (3 в. до н.э.). Термин «золотое сечение» был введён гораздо позднее Леонардо да Винчи, который использовал золотое сечение как пропорции «идеального человеческого тела». Золотое сечение имеет множество замечательных свойств, но ещё больше свойств вымышленных, следуя Леонардо да Винчи, многие люди «стремятся найти» золотое сечение во всём что между полутора и двумя.

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

    Самый простой вариант — запрос по слову «Золотое сечение» в Google

    Но, могу выделить наиболее интересные ссылки:

    Божественные пропорции золотого сечения
    Золотое сечение
    Музей гармонии и Золотого сечения

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


    Золотое сечение
    Рис. 1: Золотое сечение на практике в Web

    На Рис. 1 демонстрируется принцип Золотого сечения. Допустим, Ваш макет фиксированной ширины – 960px и содержит два основных блока, контент и сайдбар. Как бы вы вычислили ширину колнок, не зная волшебной цифры 1.618?

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

    Для примера, рассмотрим дизайн блога The 404 Blog.

    The 404 Blog
    Рис. 2: The 404 Blog

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

    Но дизайн блога не придерживается принципов Золотого сечения. И что интересно, чаще всего пользователи этого просто не чувствуют, так они интуитивно разделают макет на два отдельных блока (шириной 583px (630px - 31px - 31px) и 299px (330px - 31px)).

    The 404 Blog

    Дело в том, что свободное пространство на блоге является пассивным. Отношение между двумя основными блоками – 630px : 330px ≈ 1.91 ≠ 1.62.

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

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

    1. Phiculator – маленькое и удобное приложение, которое из любого введенного числа, автоматически вычислит, соответствующее Золотому сечению, значение.

    2. Golden Section Ratio Design Tool – мощный инструмент, который поможет избежать рутинных операций при работе с компоновкой объектов и форм. Результат Вы можете видеть на лету.

    Правило Третей


    Это принцип построения композиции, основанный на упрощенном правиле золотого сечения. Правило третей в основном используется фотографами.

    При определении зрительных центров кадр, как правило, делится линиями, параллельными его сторонам, в пропорциях 3:5, 2:3 или 1:2 (берутся последовательно идущие числа Фибоначчи). Последний вариант дает деление кадра на три равные части (трети) вдоль каждой из сторон.

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

    Правило Третей
    Рис. 4: Фотография демонстрирует использование Правила Третей

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

    Левый верхний угол обычно самый «сильный», так как пользователи просматривают сайт по принципу формы буквы «F».

    Рассмотрим Правило Третей на примере. Допустим, у нас есть макет ширина которого 960px. Высота варьируется между 750 и 950px.

    Как разделить макет на 9 равных частей? Несколько несложных шагов:

    1. Разделите ширину вашего макета на 3. 960px / 3 = 320px.
    2. Разделите высоту вашего макета на 3. ((750px + 950px) / 2) / 3 ≈ 285px.
    3. Размер прямоугольника должен быть примерно 320pх на 285px.
    4. Постройте сетку прямоугольников, рисуя линии, проходящие через концы прямоугольников.
    5. Разместите самые важные элементы на точках пересечения горизонтальных и вертикальных линий.

    В качестве примера из жизни, можно привести проект demandware.com.

    Хоть цветовая гамма сайта и является яркой и красочной, тем не менее, на нем все кажется предельно простым и понятным.

    Demandware
    Рис. 5: Demandware

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

    Demandware

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

    Также замечательно расположен навигационный блок, на втором пересечении линий. Это является действительно действенным (или эффективным) дизайном.

    Заключение


    В некоторых случаях, применение Золотого сечения и Правила Третей может значительно улучшить взаимосвязь вашего проекта с посетителями.

    При пропорции 1:1.62, ваш сайт становится более удобным и более структурированным для просмотра.

    И это работает не только в Web-дизайне.

    Оригинал статьи: www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design
    Поделиться публикацией
    Комментарии 57
      0
      Плюс, очень интересно
        –3
        поставьте автору плюс, очень интересная подача распространенной информации. (У меня кармы не хватает)
          +5
          А эта статья как-то связана вот с этой: http://www.smashingmagazine.com/2008/05/… ?

          Это перевод или автор перед нами?
            0
            да. забыл дописать снизу. но, это не просто перевод... там куча чего перепрошита
              0
              Забыли указать автора? С кем не бывает! Ведь это же не главное, верно?
                0
                вообще-то это неправильно. Автор http://www.smashingmagazine.com/2008/05/…
                  +2
                  Нельзя сказать, что статья полностью переведена и указывать оригинал статьи ссылкой на англоязычный ресурс считаю неверным. Можно было лишь указать, что она статья была подготовлена на основе данного ресурса.
                  Я вижу, что здесь проведено много работы помимо перевода и адаптации текста под читателя (среднестатистического дизайнера, заинтересованного в познавании дизайна как науки). Тут подобрана хорошая подборка ссылок по теме, все написано доступным языком... таким образом, могу сделать предположение/утверждение, что если ты - дизайнер, то легче и доступнее будет тебе читать данную статью, чем так называемый оригинал, из которого по сути взяты картинки и сама идея подачи материала.
                  Имхо.
                    0
                    Stacy все верно :)
                  0
                  А на сайте, который вы пиарите, тоже забываете?
                    0
                    нет, не забываю. там есть договоренность с сайтом smashingmagazine.com
                      0
                      А с кем именно вы договаривались? Я иногда общаюсь с авторами SmashingMagazine и знаю, что они очень очень негативно относятся к использованию контента с их сайта, особенно без указания источника.
                        0
                        На основе нижеследующего:

                        http://www.smashingmagazine.com/2007/07/…
                        Пункт №8: You have to ask author’s permission to translate his/her article.

                        и

                        * You should ask author’s permission to translate his/her article. According to the Berne Convention, “Authors of literary and artistic works protected by this Convention shall enjoy the exclusive right of making and of authorizing the translation of their works throughout the term of protection of their rights in the original works.” Therefore you need a permission to translate an article into another language. [What is Copyright?]

                        Разрешение на перевод было дано. Правда не на Хабре... Нужно уточнить с автором, но если администрация Хабрахабра посчитает это незаконным, то без проблем... Пусть банят топик (хотя было бы жаль, многим бы эта статья пригодилась) :)

                        Если честно, то на самом деле, как сказала, выше Stacy - это адаптация под ту статью. По большей части были использованы лишь картинки.

                        P.S. Ох сколько топиков тогда можно будет забанить :)
                          0
                          эге... начинается накал страстей :)
                          Copyright
                        0
                        И где же об этом написано?
                  0
                  гормонии?
                    0
                    "выделяется самая важная информация, имена та, на которой"
                      0
                      выделяется самая важная информация, имена та, на которой компания хочет сделать акцент?
                        0
                        спасибо... поправил
                        • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            Настоящим прошу исправить допущенную в тексте ссылки опечатку. правильное написание: "Музей гармонии". Заранее благодарен.
                              0
                              :) спасибо, поправил, но это не моя ошибка :)
                              а ошибка автора статьи, которую я нашел в Google :)
                        0
                        Хабракат
                          0
                          В статье на английском интересные комменты.
                            0
                            Очень кстати, подумаю над применением на моем грядущем сайте.
                              0
                              "Причина, из-за которой макет выглядит почти идеально сбалансированным, хоть и не придерживается Золотого сечения, в том, что отношения между блоками равны. "

                              поясните, пожалуйста эту фразу
                                0
                                Видимо имеется ввиду соблюдение пропорции, т.е. отношения ширин колонок.
                                  0
                                  хм, а к чему тогда строчка 630px : 330px
                                +1
                                "1.618… (число бесконечное)"
                                может всё же оно иррациональное???
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    да. каюсь. не заметил. видимо после "числа бесконечного" мозг уже не воспринимал ничего всерьёз )))
                                      0
                                      Ну если уж на то пошло, то 1.618 это число, а не цифра ;)
                                      –2
                                      Если придераться, то тогда уж это алгебраическое число:)
                                      0
                                      Полная херня. А на втором скриншоте, вообще, ну нефига не похоже на ту модель которую вы описали в "правиле третей". Ненавижу подобные рассуждения, злотое сечение пля... ппц. У меня такое чувство что именно этим лечат заказчиков дизайнеры, которые делают фиговые работы... Дизайн надо делать так чтобы удобно было, а на все эти правила попросту забить. А чтобы знать, удобно ли это, надо взять и попробывать использовать, то что вы сверстали. Я думаю это даже не дизайнер(а я не дизайнер) должен понимать.
                                      Имхо.
                                        0
                                        На мой вгляд подобные рассуждение как раз мешают стать хорошим дизайнером и вводят в заблуждение. Расположение содержимого на страницы не зависит не от чего, кроме того какие функции возложены на страницу. Если суть "дизайна" дать пользователю прочесть текст, мы берем и заполнем всю страницу текстом. Если нужно организовать навигацию мы берем и выносим навигацию в отдельный блок(тем самым акцентируя на нем внимание). Вы говорите о функциональном дизайне и в тоже время скатываетесь в дешевый мистицизм.
                                        зы
                                        спасибо за минус в профиль... так хотелось че нить уже написать в своем блоге, помогли. Если моя и ваша точка зрения не совпадают, это еще не повод думать что моя точка зрения не верна.
                                        0
                                        я почти год назад писал о золотом сечении.
                                        У числа 1,6180339887 есть много интересных особенностей, например sin 666° = — 1,6180339887 / 2 !
                                          0
                                          А кто-то везде ищет число 23, как показали в одном фильме. Нумерология - вещь хорошая, но она далеко не всегда играет такую важную роль, какую многие пытаются ей приписать. У уж тем более не надо ударятся в "магию и мистику чисел"
                                          +1
                                          а я считаю это надуманным. Формализм.
                                          То есть пропорции - это, конечно, здорово. Но они не являются самостоятельной ценностью. В идеале форма должна вытекать из содержания, а так вот взять, и распихать все в 9 блоков на странице - чисто буржуинско-полиграфический подход к веб-д. Так же и ширина блока. Ширина зависит от того, что в этом блоке есть, а не от положения пупка на теле человека.

                                          Вывод: я не призываю отказаться от всех теоретических наработок, но использовать их надо при необходимости, а не только за то, что они есть.
                                            0
                                            а я и не заметила, что автор призывает в статье в обязательном порядке пользоваться данными правилами.
                                            Зато статейка навевает мысль: "Хм.. а почему бы не обучиться дизайну?" Очень приятное и доступное изложение.
                                            0
                                            ну так как затронули фотографию то всеж отмечусь, так как близок к ней, был во всяком случае.

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

                                            А многие услышав про них — задрачиваются на этом золотом сечении и считают что они ппц какие крутые
                                              0
                                              ага. а то бывает смотришь на фотографию, или на сайт - и думаешь: "а чо хотел сказать-то" :)
                                              1. Идея, где идея?
                                              2. Думать, как лучше донести идею

                                              Если п.1 пропущен - то п.2 пофигу.
                                                0
                                                Очень любо смотреть на артлебедев.ру в данном случае - там Артемий хорошо в бизнес-линче распекает таких вот говнографов
                                              0
                                              В векторном редакторе Incscape (Linux) если держать Ctrl - то легко создать прямоугольник с золотым соотношением сторон (или иным "стандартным" - 1:1 1:2 и т.д.). Может кому пригодится ...
                                                –5
                                                Имхо золотое сечение баян, и не только в веб дизайне.
                                                  0
                                                  Ерунду Вы, товарищ, говорите. Золотое сечение — основа основ. И не только в ВЕБ дизайне. В теле человека, например, почти все по золотому сечению.
                                                    0
                                                    Мля, за слово "боян" буду ставить минусы. Задолбали.

                                                    Если торчишь с утра до вечера в И-нете так для тебя все бояном будет, а я статьи между задачами читаю - для меня это очень интересная и познавательная статья. И Хабр для меня - новостной портал по моей области. А из-за таких вот ниипаццо "боянистов" народ постить перестанет.

                                                    Так, что заполучи, сцуко, по заслугам!
                                                      –3
                                                      Ну ппц вы судите товарищ! Срать я хотел на эту карму если честно, я высказываю свое мнение и раз слышал это же мнение от хороших дизайнеров!
                                                        +2
                                                        Какое мнение?! То, что "Золотое Сечение" боян на Хабре?!
                                                        Пипец...
                                                          –1
                                                          Не на хабре боян, а вообще.
                                                            0
                                                            ля! Какой «вообще», если я только здесь узнал, что это можно с пользой применять в вебе? Т.е. я конечно слышал выражение «золотое сечение», но значения этому не придавал. Оказалась полезная штука.

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

                                                            Так что боянистов — фтопку! И минусы от меня они себе обеспечили.
                                                    0
                                                    всё очень-очень правильно!
                                                    Изучение красоты и гармонии в самом общем смысле этого слова - поле ещё ой какое непаханное. Золотое сечение, думаю, всем известно, появляется везде, это поднимает большой пласт философских вопросов, да и просто безумно интересно.
                                                    В общем считаю что дизайнерам такие знания просто грех не использовать, к тому же многие в силу разных причин делают это интуитивно.
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                          +1
                                                          Я вот считаю что красоту нельзя измерить формулами и описать в правилах, хороший дизайнер должен чувствовать её и уметь передавать. Все эти "фичи" для гранд мастеров и тех кто хочет понтонуться перед другими дизайнерами. Вся красота вокруг нас и её надо видеть и понимать, а не мерять и высчитывать.(ИМХО)
                                                            0
                                                            Всё бы хорошо, если бы статья соответствовала... Лично меня следующие строки поставили в контексте Demandware в тупик:
                                                            Обратите внимание, на двух из четырех пересечениях, выделяется самая важная информация, именно та, на которой компания хочет сделать акцент (отмечено розовыми квадратами).

                                                            Также замечательно расположен навигационный блок, на втором пересечении линий. Это является действительно действенным (или эффективным) дизайном.

                                                            1) На одном пересечении! Не на двух. На правом нижнем пересечении контент НЕ расположен по правилу третей. На фотографию достаточно обратить внимание - там явно снято с учётом этого правила. Так фокусный объект там располагается _по центру_ пересечения, а не зацепляя его верхним краешком.
                                                            2) Пле, посмотрите, где находится навигационное меню. Даже новостной блок не попал ни в одно пересечение.
                                                            В общем, пока не дошел до правила третей, было интересно читать. А дальше - пошёл слив. Минусовать, конечно не буду, автор старался, но в целом надо подходить серьёзнее к примерам.
                                                              0
                                                              Проблема с продажами ну никак не связаны с золотым сечением.

                                                              Вы учите оформительству, а не дизайну.
                                                              Дизайн призван (в вашем случае) продать. Ну а оформление, это дело украсить.

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

                                                              Золотое сечение — это не панацея.
                                                                +1
                                                                Перезалейте пожалуйста картинки на habrastorage.org
                                                                  0
                                                                  Ссылки на картинки поломались. Поправьте, пожалуйста.

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

                                                                  Самое читаемое