От автора: Золотое Сечение повсеместно используется вразличного рода графике, особенно, чтобы сбалансировать контент с большими объемами текста. Оно помогает дизайнерам создать структуру и направить глаза пользователей в необходимые места. Ниже будет представлен список веб-сайтов с примерами Золотого Сечения, вы сможете наглядно оценить, как дизайнеры используют данный прием!
Что такое Золотое Сечение?
Золотое Сечение представляет собой математическое соотношение, найденное в природе, которое используется в классической теории дизайна для балансировки композиции. Приблизительно соотношение равняется 1.6180, также известно под названиями «Золотая Середина», «Божественная Пропорция», а также обозначается греческой буквой Фи «ϕ».
«Золотой прямоугольник» это фигура с длинной стороной, равной короткой умноженной на 1.6180. К примеру, у нас есть div со стороной в 300px, значит, другая сторона будет равняться 300*1.6180≈ 485px. О таком блоке можно сказать, что это золотой прямоугольник.
Если с одной стороны от фигуры отсечь идеальный квадрат, то с другой будет еще один золотой прямоугольник.
Вы можете создавать все меньшие и меньшие прямоугольники, еще и еще раз, как на изображении ниже:
Числа Фибоначчи
Числа Фибоначчи представляют собой похожую закономерность, но не совсем такую же. Числа Фибоначчи образуются путем сложения двух предыдущих. Например: 0, 1, 1, 2, 3, 5, 8
Если взять идеальный квадрат и прибавить к нему такой же, то мы получим прямоугольник:
Продолжайте добавлять квадраты со стороной, равной большей стороне прямоугольника
Затем мы добавим еще один квадрат, но уже со стороной, равной длине большей стороны прямоугольника:
Затем еще раз и еще раз:
Так может продолжаться бесконечно с тем же эффектом, как с Золотым Прямоугольником. Но в этот раз фигура увеличивается, а не уменьшается. Оба метода, числа Фибоначчи и Золотое Сечение, дают одинаковые привлекательные пропорции.
А теперь давайте проанализируем пару веб-сайтов на предмет этих пропорций.
Пример #1: YStudio
«YourLocalStudio» это студия дизайна и разработки, расположенная в Копенгагене, Дания. Они занимаются визуальными концепциями любой формы, улучшая общее ощущение от дизайна.
Как они используют золотое сечение
На веб-сайте студии золотое сечение используется на двух из трех страницах. Домашняя страница представляет собой концептуальный обзор основных составляющих работы. Тем не менее, при прокрутке страницы вы можете заметить в дизайне сайта смесь обычных шаблонов с прямоугольными формами.
Почему это так эффективно
Хотите выделиться из толпы? Yourlocalstudio (YLS) именно так и сделали, применив золотое сечение в дизайне своего сайта. Дизайн смотрится достаточно прогрессивно, а также содержит определенную систему grid’ов. Можно спорить и говорить, что сейчас все сайты похожи на bootstrap… но стоит подождать совсем чуть-чуть, как появляются все новые и новые сайты, привлекающие внимание к себе все большей динамикой макетов.
Пример #2: Mashable
О чем сайт?
Mashable – новостной портал, источник информации, знаний и ресурсов для «онлайн поколения».
Как он использует золотое сечение
Для демонстрации того, как Mashable использует в своих целях золотое сечение я воспользовался тестом UX Triggers. Макет сайта гибкий, заголовки новостей расположены слева, а ссылки на подробное описание справа, все это разделено на ячейки сетки.
Почему это так эффективно?
Золотое сечение на этом сайте эффективно, так как сайт крайне загружен информацией, а золотое сечение добавляет легкости. Схожие сайты могут выглядеть намного более плотно загруженными контентом при использовании обычных grid’ов в шаблоне. Однако Mashable доказывает, что Золотое Сечение может быть крайне эффективно, даже если оно не заметно.
Пример #3: Jackson&Kent
О чем веб-сайт?
Jackson&Kent – французское агентство веб-продукции. Они специализируются на таких услугах, как HTML5, CSS3, Drupal, WordPress, PHP/MySQL, Flash и т.д.
Как они используют золотое сечение
На скриншоте выше видно, как щедро агентство показывает предыдущие свои работы. Также на макете можно заметить блок «О компании» и меню в центре экрана. Кнопка связи ниже также использует золотое сечение в общей системе grid’ов.
Почему это так эффективно
Данный пример призывает вас пройтись по сайту в горизонтальной плоскости. Представление контента в виде блоков различных размеров делает его намного привлекательнее. На горизонтальной оси представлена лента с навигацией по страницам для удобства просмотра сайта, как на настольных компьютерах, так и на планшетах. Это не только инновационный способ отображения контента, а также совершенно новый пример представления пользовательского интерфейса.
Заключение
Золотое Сечение естественным образом направляет взор читателя в определенные точки экрана. Данная концепция поможет вам в расположении контента и более эффективном использовании иерархии. Сочетание макетов, шрифтов, цветов и общих принципов построения золотого сечения поможет поднять ваши проекты на следующий уровень.
Автор: Joel Diaz
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.