11
Сен

Эффективные сайты с золотым сечением

источникwebdesign.tutsplus.com
авторJoel Diaz

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

Что такое золотое сечение?

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

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

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

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

Последовательность Фибоначчи

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

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

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

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

И потом повторяем это снова и снова:

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

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

Пример #1: YStudio

yourlocalstudio.dk

О чём этот сайт?

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

Как здесь применяется золотое сечение

На сайте «золотая середина» применяется на двух страницах из трёх. Главная страница — это концептуальный обзор ключевых работ. Страница «studio» совмещает более традиционный подход к верстке с формами золотого прямоугольника.

Почему это эффективно

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

Пример #2: Mashable

mashable.com

О чём этот сайт?

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

Как здесь применяется золотое сечение

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

Почему это эффективно

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

Пример #3: Jackson & Kent

www.jandk.fr

О чём этот сайт?

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

Как здесь применяется золотое сечение

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

Почему это эффективно

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

Заключение

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

комментариикомментарии по теме