Повышаем эффективность веб-дизайна с помощью Золотого Сечения

Повышаем эффективность веб-дизайна с помощью Золотого Сечения

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

Что такое Золотое Сечение?

Золотое Сечение представляет собой математическое соотношение, найденное в природе, которое используется в классической теории дизайна для балансировки композиции. Приблизительно соотношение равняется 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

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

Редакция: Команда webformyself.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree