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

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

Фото Богомила Михайлова на Unsplash

Золотое сечение также имеет несколько других названий:

• Божественная пропорция
• Золотая середина
• Золотое сечение
• Фи (греческая буква)

Математика золотого сечения

Я собираюсь объяснить математику золотого сечения как можно проще, не вдаваясь в детали, которые вам на самом деле не нужны. Если ты успеваешь посчитать - отлично. Но если вы не можете, ничего страшного - вы все равно сможете использовать эту концепцию в своих проектах.

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

Золотой прямоугольник - это большой прямоугольник с квадратом внутри. Стороны квадрата равны кратчайшей длине прямоугольника:

Источник: Википедия.

Золотое сечение - это число, которое (вроде) равно 1,618, точно так же, как пи примерно равно 3,14, но не совсем.

Вы берете линию и делите ее на две части - длинную (а) и короткую (б). Полная длина (a + b), деленная на (a), равна (a) деленной на (b). И оба эти числа равны 1,618. Таким образом, (a + b), разделенное на (a), равно 1,618, и (a), разделенное на (b), также равно 1,618.

Вернемся к золотому прямоугольнику, потому что его намного легче понять

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

У красного квадрата четыре стороны равны по длине, и эта длина равна самой короткой длине прямоугольника. Разделив этот квадрат, вы автоматически создадите другой прямоугольник меньшего размера (обведен зеленым). Вместе они создают полную схему золотого сечения и основу для золотой спирали.

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

Традиционная диаграмма золотого сечения состоит из восьми золотых прямоугольников:

А вот и самый маленький золотой прямоугольник №8:

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

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

Последовательность Фибоначчи довольно проста для понимания: вы начинаете с нуля и 1, затем получаете следующее число, складывая два числа перед ним. 0 + 1 = 1, затем 1 + 1 = 2 и т. Д. Первые несколько чисел в последовательности: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

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

Источник: Математика - это весело

Золотые круги

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

Источник: Limelight Department

В логотипах Pepsi и Twitter используются золотые круги:

Источник: Hybrid Talks.

Вы видели это раньше, много

Природа полна золотого сечения. Это во флоре, ракушках, погоде ...

Источник: Фото Энни Спратт на Unsplash

Источник: Фото НАСА на Unsplash

И поскольку мы видим это так часто, наш мозг предпочитает это. Эта врожденная привлекательность - вот почему дизайнеры могут использовать такой мощный макет.

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

Иногда золотое сечение очень легко распознать:

Источник: staceysdetailinginc.com

Иногда ты думаешь: «Я понятия не имею, о чем ты говоришь… подожди. Теперь я это вижу. Думаю."

Источник: Marketing Insiders

В другой раз, глядя на него, можно было сойти с ума ...

Источник: Widewalls

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

Давайте посмотрим на часто упоминаемый пример: Парфенон.

Источник: Creative Bloq

Сначала вы можете увидеть это и сказать: «Мне это кажется симметричным. Как то, на что я смотрю, вписывается в эту золотую спираль прямоугольника? »

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

Вместо этого соотношение используется для создания гармонии и пропорции, и это можно интерпретировать по-разному.

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

Источник: Archinect

Источник: Эстер Сугихто на Medium

Источник: GoldenNumber.net

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

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

Золотое сечение и макет

Если вам нужен идеальный макет золотого сечения, установите размер 1: 1,618. Например, вы можете установить ширину 960 пикселей и высоту 594 пикселей. Золотой прямоугольник составляет 594 пикселя с каждой стороны, а прямоугольник занимает остальную часть макета (594 x 366).

В Calculator Soup есть полезный калькулятор золотого сечения, где вы можете установить любой термин (A, B или A + B), чтобы найти правильные значения золотого сечения.

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

Источник: National Geographic.

Я использую это на своем веб-сайте, потому что домашняя страница - это коллекция моих сообщений в блоге, и мне кажется, что это один из самых узнаваемых макетов для блогов:

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

Золотое сечение и интервал

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

Источник: Digiarts 2011

Вот как это выглядит, когда я применяю Золотую спираль в Photoshop:

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

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

Источник: Branding by Lemongraphic. Пример с Canva.

Золотое сечение и содержание

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

Давайте снова посмотрим на сайт National Geographic, на этот раз с наложением на него золотого сечения Canva:

Макет разделен так, что содержимое выстраивается вдоль центральной линии спирали. Слева находится большой блок контента. Справа контент становится плотнее, а отрицательного пространства намного больше. Ближе к центру завитка спирали вы увидите второй логотип National Geographic - нет лучшего способа продвинуть домашний брендинг, чем разместить его там, где естественный взгляд.

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

Источник: Дизайн Helms Workshop. Пример с Canva.

Почетное упоминание: золотое сечение и изображения

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

Источник: Canva

Затем вы используете пересечения, чтобы составить кадр. Цель состоит в том, чтобы поместить объект или основную часть объекта на одну из пересекающихся линий - объект не должен быть центрирован, а некоторые блоки следует оставить пустыми (по крайней мере, в большинстве случаев - макросъемка и портреты крупным планом. заполнит почти весь кадр). Таким образом вы создадите более интересный портрет, чем если бы объект был в центре.

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

Вот фотография сына моей двоюродной сестры, которую я сделал. Я наложил на него сетку «Правило третей», чтобы показать вам, где объект заполняет рамку, а где нет.

Также посмотрите, как Золотая спираль почти идеально обтекает объект:

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

Заключение

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

Готовы еще больше поиграть с макетом своего сайта? Ознакомьтесь с нашей статьей об использовании новых параметров высоты и ширины Divi для создания адаптивного дизайна.