Поделиться , , Google+, Pinterest,

Опубликовано в:

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

Жоэль Диас написал статью о том, как повысить эффективность сайта применяя правило золотого сечения.

Улучшаем эффективность ваших дизайнов с помощью золотого сечения

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

Золотое сечение – это математическая пропорция. Часто встречается в природе и применяется по классической теории дизайна для создания сбалансированной композиции.  Она приблизительно равна 1,6180, ещё известна как «золотая середина» или «гармоническое деление». Обычно обозначается греческой буквой Фи «ϕ».

А «золотой прямоугольник» – прямоугольник, длина которого пропорциональна ширине в соотношении 1,6180. Например,  блок <div> с шириной 300рх и длиной, равной 300 * 1,6180 ≈ 485px, можно назвать золотым прямоугольником.
perfect

Если вы отрежете от золотого прямоугольника идеальный квадрат, останется ещё один золотой прямоугольник.
1square

То же самое можно сделать с меньшим прямоугольником, и опять по новой до бесконечности, пока вы не получите знакомое изображение:
squares

Последовательность Фибоначчи похожа на золотое сечение, но не совсем полностью. Это ряд цифр, в котором каждая следующая цифра является суммой двух предыдущих. Например: 0, 1, 1, 2, 3, 4, 7

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

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

И потом опять и опять:
f1

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

Теперь давайте проанализируем несколько сайтов, где применяются эти пропорции.

your-local-studio
yourlocalstudio.dk

«Your Local Studio» – студия дизайна и разработки в Копенгагене.  Они занимаются визуальными идеями в дизайне сайтов для создания общего впечатления, улучшающего восприятие.

На сайте есть «золотая середина» на двух страницах из трёх. Главная страница – концептуальный обзор их ключевых работ. Однако, страница «studio» сочетает в себе традиционный макет, после которого идут формы золотого прямоугольника.
y-studio

Хотите выделиться из толпы? Yourlocalstudio (YLS) сделали это, вкрапляв золотое сечение в дизайн их сайта. Дизайн выглядит прогрессивно и при этом имеет чёткую сетку. Вы могли бы поспорить, что в настоящее время всё выглядит как bootstrap. Присмотритесь, всё больше и больше сайтов стараются привлекать к себе внимание более структурными и динамичными макетами.

mashable
mashable.com

Сайт Mashable – новый. Это источник информации, знаний и материалов для современных людей.

Я использовал тест золотого сечения с сайта UX Triggers, чтобы показать вам, как Mashable применяет последовательность Фибоначчи в своём макете. Расположение контента гибкое, у которого заголовки стоят слева, а ссылки на остальные новости справа. И они отделены друг от друга сетками.

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

cow
www.jandk.fr

Jackson & Kent – это агентство по веб-продакшн из Франции. Они специализируются на цифровых сервисах типа  HTML5, CSS3, Drupal, WordPress, PHP/MySQL, Flash и так далее.

На скриншоте сверху показано, как на макете сосредоточены в основном предыдущие работы агентства. Страница также содержит блок контента об агентстве и панель навигации в центре экрана. Как показано ниже, раздел «Контакты» тоже преподносится с помощью сетки золотого сечения, что организовывает макет очень необычно.
golden-mean2

Данный пример подвигает вас просматривать сайт и контент горизонтально. Сетка из блоков разного размера делает контент визаульно интереснее. Поскольку пользователи предпочитают смотреть контент на десктопах (и на планшетах тоже, кстати), на горизонтальной панели навигации есть пагинатор из цифр. Это новаторский подход к подаче контента, также как и UI в целом.

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

Оригинал статьи: webdesign.tutsplus.com

Источник: webdesign.tutsplus.com

Перевод: Artur Safonov

comments powered by HyperComments