Золотое сечение в веб дизайне применяется на графических макетах любых типов, главным образом чтобы сбалансировать контент с большим текстом. Оно помогает дизайнерам выстраивать иерархию и привлекать зрение пользователя к нужным областям экрана. Ознакомьтесь со следующими примерами сайтов и посмотрите, как дизайнеры пользуются им!
Что такое золотое сечение?
Золотое сечение – это математическая пропорция. Часто встречается в природе и применяется по классической теории дизайна для создания сбалансированной композиции. Она приблизительно равна 1,6180, ещё известна как «золотая середина» или «гармоническое деление». Обычно обозначается греческой буквой Фи «ϕ».
А «золотой прямоугольник» – прямоугольник, длина которого пропорциональна ширине в соотношении 1,6180. Например, блок <div> с шириной 300рх и длиной, равной 300 * 1,6180 ≈ 485px, можно назвать золотым прямоугольником.
Если вы отрежете от золотого прямоугольника идеальный квадрат, останется ещё один золотой прямоугольник.
То же самое можно сделать с меньшим прямоугольником, и опять по новой до бесконечности, пока вы не получите знакомое изображение:
Последовательность Фибоначчи
Последовательность Фибоначчи похожа на золотое сечение, но не совсем полностью. Это ряд цифр, в котором каждая следующая цифра является суммой двух предыдущих. Например: 0, 1, 1, 2, 3, 4, 7
Если к идеальному квадрату добавить такой же, то получается прямоугольник.
Продолжайте добавлять квадраты к длине получающихся прямоугольников.
Затем мы добавляем другой квадрат со стороной, равной длине прямоугольника из двух маленьких квадратов:
И потом опять и опять:
Это может продолжаться бесконечно, получается эффект как и у золотого прямоугольника, но на этот раз мы выстраиваем его, а не режем. Пропорции золотого сечения и последовательности Фибоначчи получаются одинаково привлекательными.
Теперь давайте проанализируем несколько сайтов, где применяются эти пропорции.
Пример 1: YStudio
О чём этот сайт?
«Your Local Studio» – студия дизайна и разработки в Копенгагене. Они занимаются визуальными идеями в дизайне сайтов для создания общего впечатления, улучшающего восприятие.
Как здесь применяется золотое сечение
На сайте есть «золотая середина» на двух страницах из трёх. Главная страница – концептуальный обзор их ключевых работ. Однако, страница «studio» сочетает в себе традиционный макет, после которого идут формы золотого прямоугольника.
Почему это эффективно
Хотите выделиться из толпы? Yourlocalstudio (YLS) сделали это, вкрапляв золотое сечение в дизайн их сайта. Дизайн выглядит прогрессивно и при этом имеет чёткую сетку. Вы могли бы поспорить, что в настоящее время всё выглядит как bootstrap. Присмотритесь, всё больше и больше сайтов стараются привлекать к себе внимание более структурными и динамичными макетами.
Пример 2: Mashable
О чём этот сайт?
Сайт Mashable – новый. Это источник информации, знаний и материалов для современных людей.
Как здесь применяется золотое сечение
Я использовал тест золотого сечения с сайта UX Triggers, чтобы показать вам, как Mashable применяет последовательность Фибоначчи в своём макете. Расположение контента гибкое, у которого заголовки стоят слева, а ссылки на остальные новости справа. И они отделены друг от друга сетками.
Почему это эффективно
Применение золотого сечения в данном случае эффективно, поскольку оно позволяет дышать типографике контентного сайта. Многие сайты похожи на этот, но у них больше плотно сжатого контента в традиционных сеточных макетах. Сайт Mashable является примером того, как золотое сечение может быть эффективным даже при всей своей незаметности.
Пример 3: Jackson & Kent
О чём этот сайт?
Jackson & Kent – это агентство по веб-продакшн из Франции. Они специализируются на цифровых сервисах типа HTML5, CSS3, Drupal, WordPress, PHP/MySQL, Flash и так далее.
Как здесь применяется золотое сечение
На скриншоте сверху показано, как на макете сосредоточены в основном предыдущие работы агентства. Страница также содержит блок контента об агентстве и панель навигации в центре экрана. Как показано ниже, раздел «Контакты» тоже преподносится с помощью сетки золотого сечения, что организовывает макет очень необычно.
Почему это эффективно
Данный пример подвигает вас просматривать сайт и контент горизонтально. Сетка из блоков разного размера делает контент визуально интереснее. Поскольку пользователи предпочитают смотреть контент на десктопах (и на планшетах тоже, кстати), на горизонтальной панели навигации есть пагинатор из цифр. Это новаторский подход к подаче контента, также как и UI в целом.
Заключение
Золотое сечение ведёт взгляд пользователя к конкретным точкам в интерфейсе. Как концепт, оно может помочь вам задуматься о расположении контента и эффективном использовании иерархии. Комбинация макета, типографики, цвета и других ключевых принципов дизайна поможет поднять ваши дизайны на новый уровень.
Оригинал статьи: webdesign.tutsplus.com
Источник: webdesign.tutsplus.com
Перевод: Artur Safonov
