Принцип золотого сечения

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

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

Золотое сечение — это постоянная величина, которая представляет соотношение 1:1,618033987.

Эта пропорция применяется для оценки гармонии в композиции. Обозначается золотое сечение символом φ «фи» и связано с числами Фибоначчи.

Числа Фибоначчи — это ряд чисел, каждое из которых представляет сумму двух предшествующих чисел. Например: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610 и далее. Золотое сечение отражает соотношение двух последовательных чисел Фибоначчи, рассчитанных по мере продвижения последовательности к бесконечности. По мере продвижения соотношение между двумя числами приближается к константе золотого сечения:

Это соотношение чисел создает гармонию в дизайне, который будет восприниматься человеком как эстетически приятный. В статье «The Golden Beauty: Brain Response to Classical and Renaissance Sculptures» Чинция Ди Дио, Эмилиано Макалузо, Джакомо Риццолатти описали результаты исследования:

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

Оригинальное изображение, построенное по золотому сечению, сильно активировало наборы клеток мозга. Искаженные варианты эти клетки не активировали, что говорит о том, что красота отчасти является врожденным качеством и считывается нами подсознательно.

Золотое сечение часто можно встретить в окружающем мире: закругление ракушки наутилуса. Творцы разных эпох обращались к золотому сечению в поисках гармонии. Например, полотна Леонардо да Винчи «Мона Лиза» и «Иоанн Креститель». Парфенон — пример использования пропорции Золотого сечения в архитектуре. Дизайнеры тоже могут обращаться к золотому сечению.

Визуальная иерархия

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

Баланс и равновесие

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

Привычный образ

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

Эстетика

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

Адаптивный дизайн

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

Шаг 1. Линия

Для того чтобы разделить линию согласно золотому сечению, нужно воспользоваться следующей формулой:

Разделите линию на две части, где длинная часть (а), разделенная на меньшую часть (б), будет равна сумме (а) + (б), деленной на (а). Оба отношения будут равны 1,618.

Шаг 2. Золотой прямоугольник

После создания двух линий, построенных по золотому сечению, достройте их до золотого прямоугольника (1). Золотой прямоугольник — это фигура, у которой стороны соотносятся с пропорциями золотого сечения.

Если вы разделите этот прямоугольник (1) на квадрат и еще один прямоугольник (2), то он тоже будет построен по золотому сечению. Далее прямоугольник (2) делится по такому же принципу для получения прямоугольника (3). Эту манипуляцию можно повторять до бесконечности благодаря построению геометрических фигур по золотому сечению. При этом пропорции прямоугольников связаны с числами Фибоначчи, о которых мы говорили выше.

Шаг 3. Золотая спираль

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

Шаг 4. Золотые круги

Вместо золотой спирали можно построить золотые круги: для этого впишите в каждый квадрат окружность. Последовательность кругов, вписанных в прямоугольники с отношением золотого сечения, называется золотые круги.

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

В дизайне золотое сечение можно применить не только в построении геометрических фигур. Соотношение 1:1,618 поможет вам в разных ситуациях:

Макет страницы

Наиболее распространенное использование золотого сечения — дизайн макета страницы. Разделите экран на золотые прямоугольники, в соответствии с которыми будут располагаться блоки контента.

Например, если ширину экрана 1080 пикселей разделить на число φ (1,618), получается 667,4 (примерно 668) — ширина большего прямоугольника.

1080 - 668 = 412 — ширина меньшего прямоугольника.

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

412:1,618 = 255 и 412-255 = 157 — ширина боковых частей экрана — сайдбаров.

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

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

Полезный инструмент — плагин в Figma позволяет легко использовать золотое сечение. Плагин автоматически рассчитывает размеры и положение выбранных вами элементов.

Пустое пространство

Золотое сечение можно использовать при определении белого пространства вокруг элемента. Когда вы размещаете изображение, фигуру, кнопку или любой другой объект, нужно грамотно рассчитать пространство вокруг него. Например, если размер элемента 6 пикселей, то 6 умножаем на 1,618 = 9,7 (примерно 10) — белое пространство равно 10 пикселям. В данном случае золотое сечение помогает определить точные значения, чтобы между объектами на экране было достаточно воздуха.

Также можно разделить экран на золотые прямоугольники. В квадратах расположите элементы: они могут размещаться в центре фигуры, по углам или краям квадратов. Это создаст достаточно пустого пространства вокруг элементов и придаст дизайну чувство равновесия.

Кадрирование

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

Типографика

В типографике золотое сечение способствует установлению гармоничного соотношения размеров заголовков, подзаголовков и основного текста. Например, если размер основного текста равен 12 pt (пунктам), то для заголовка умножим их на 1,618 = 19.4 (примерно 20). Следовательно, размер заголовка равен 20 pt.

Формула работает и в обратную сторону. В этот раз попробуем рассчитать и размер подзаголовка: размер заголовка 42:1,618 = 25,9 (примерно 26) — размер подзаголовка. Чтобы в данном случае понять размер основного текста, мы 26 тоже делим на 1,618 = 16 pt для основного текста.

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

Помните про читабельность: чем длиннее строка, тем больше должен быть размер шрифта.

Инструмент, который поможет вам подобрать верные размеры по золотому сечению — Golden Ratio Typography (GRT) Calculator.

Управление взглядом пользователя

• Расположение элементов по сторонам или углам квадратов золотого сечения,
• размещение блоков контента в соответствии с золотым прямоугольником,
• расстановка акцентов с ориентацией на золотую спираль помогают дизайнерам выделять ключевые моменты и привлекать внимание пользователя к конкретным точкам на экране.

При этом не бойтесь экспериментировать: можно располагать объекты в разных комбинациях для достижения максимального эффекта и гармонии конкретно под ваш дизайн.

Логотип

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

1. Помните про контекст

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

2. Частое заблуждение про золотое сечение — что оно представляет собой только спираль

Многие не до конца изучают этот вопрос и упускают важную вещь: золотое сечение — это пропорция. Это соотношение значений, которое можно применить и в макете, и в логотипе, и в типографике. Оно не ограничивается только золотой спиралью.

3. Не стоит строго придерживаться золотого сечения

Экспериментируйте с расположением элементов, пробуйте необычные комбинации, которые выделят вас на фоне конкурентов.

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