Золотое сечение: математика, которая изменит ваш дизайн

золотое сечение баннер

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

Что общего у пирамиды в Гизе и Мона Лизы с логотипом Пепси? И то, и другое создано с помощью золотого сечения. В этой статье мы разберем, что это такое и как его использовать в создании дизайна. 

Правило золотого сечения

Золотое сечение — пропорция, которую заметили еще древние египтяне. Чтобы её получить, нужно разделить линию на две части так, чтобы длинная часть соотносилась с короткой в такой же пропорции, как вся линия соотносится с длинной. Оказывается, эта пропорция всегда равняется 1,618. Это число еще называют числом «фи».

1-0814

Формула золотого сечения

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

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

Давайте разберемся, как применять золотое сечение как пропорцию в дизайне. Для начала примерим ее на разные фигуры. Вот, например, квадрат и прямоугольник. Одна сторона у них одинаковая, а другая у прямоугольника больше в соотношении 1 к 1.618:

2-0814

троим прямоугольник с помощью золотого сечения

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

3-0814

«Золотой прямоугольник»

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

4-0814

Заметили цифры в квадратах? Это математическая последовательность, которая раскрывает математическое совершенство золотого сечения, — последовательность Фибоначчи (поэтому божественную пропорцияю часто называют «золотое сечение Фибоначчи»). Она составляется по простейшему правилу: каждое следующее число — это сумма двух предыдущих: 

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…

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

5-0814

Спираль с пропорциями золотого сечения

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

Следущий шаг — впишем в квадраты круги. Они тоже соотносятся друг с другом в пропорции 1:1.618 и соответствуют правилу золотого сечения.

7-0814

Золотое сечение на примере кругов

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

Как использовать золотое сечение в дизайне

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

1. Принцип золотого сечения в макетах 

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

Например, если применить правило золотого сечения к макету шириной 960 пикселей и разделить ширину на 1,618, то его высота составит 594 пикселя. Разобьем получившийся прямоугольник на две части с соотношением сторон 1 к 1,168. Осталось только заполнить две части запоминающимися снимками — и макет готов.

8-0814

Макет из двух колонок, построенный на основе «золотого прямоугольника»

Такое деление на колонки подойдет для веб-дизайна. Вот более сложный пример — сайт National Geographic. На что вы посмотрели в первую очередь на этой странице? Наверняка на заголовок и крупный снимок, после — на снимки поменьше и колонку слева. Золотое сечение помогает создать четкую иерархию элементов и управлять вниманием пользователя.

9-0814

Золотое сечение помогает выделить главное на сайте National Geographic

Попробуйте определить, как работает золотое сечение в шаблонах «Обложка фотокниги» и «Обложка книги по урбанистике».

2. «Воздух» между элементами

«Воздух» — это свободное пространство вокруг элементов дизайна. Он структурирует макет и выделяет важные детали. Чтобы грамотно распределить интервалы между объектами, наложите на свой макет «золотой прямоугольник» (несколько, если нужно).

12-0814

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

Дизайн-студия Moodley разработала айдентику для фестиваля искусств Bregenzer Festspiele. В корпоративный стиль вошли логоиип, подпись и шаблоны для программ, афиш и наружной рекламы. При этом на афишах вокруг коллажей из картин и фотографий много свободного пространства.  Золотое сечение помогает распределить его так, чтобы оно подчеркивало основные элементы дизайна, обращало на них внимание смотрящего. Используйте это при создании вашей айдентики.

13-0814

Фирменный стиль фестиваля Bregenzer Festspiele от дизайн-студия Moody

А вот визитные карточки, которые разработало сингапурское дизайн-агентство Lemon Graphic для  Terkaya Wealth Management. Всего три элемента — два логотипа и подпись — выстроены в красивую композицию с помощью свободного пространства. Понадобилось два «золотых прямоугольника», чтобы создать этот дизайн

14-0814

Золотое сечение в дизайне визитки для компании Terkaya от агентства Lemon Graphic

Оформите свои визитки с помощью шаблонов «Визитка директора музыкальной группы» и «Визитка свадебного ассистента».

3. Содержание — в сердце «золотой спирали»

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

17-0814

Это сайт графического дизайнера Тима Роузиля отличается плотной версткой и интересным расположением элементов, основанным на золотом сечении. Обратите внимание, как автор привязал крупные элементы сайта (Текст Bonjour My Name is Tim) к более широкой части спирали, а мелкие (осаисание своей работы и логотип) организовал в ее центре. Именно в таком порядке глаз читающего и познакомиться с материалом на странице. Так золотое сечение помогает управлять порядком чтения.

18-0814

Сайт графического дизайнера Тима Роузиля

На экспериментальном плакате Saastamoisen säätiö элементы становятся меньше и плотнее по мере того, как золотая спираль заворачивается к своему центру. С каждым шагом уменьшается и размер букв, и расстояние между ними.

19-0814

Айдентика Saastamoisen säätiö

Дизайнеры из Helms Workshop использовали золотую спираль в логотипе пивоварни Fullsteam Brewery. Они «разложили» по квадратам элементы дизайна: сначала глаз цепляется за потрет, после взгляд останавлвается на штампе в правом углу и переходит к мелкой подписи ABV и месту производства. Так на одной картинке разместился целый рассказ о бренде: его владелец (к слову, вымышленный), традиции, истоки.

20-0814

Айдентика Fullsteam Brewery от Helms Workshop

Попробуйте организовать свой дизайн с помощью золотой спирали с нашими шаблонами «Бюро путешествий «Дороги» и «Медцентр университета».

4. Золотое сечение в фотографии и архитектуре 

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

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

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

23

Золотое сечение: пример использрования в фотографии

Другой (слегка упрощенный) способ организовать снимок с помощью золотого сечения — это так называемое «правило третей». Снимок точно так же делят вертикальными и горизонтальными линиями, но на равные прямоугольники — в соотношении 1 к 1 к 1. Важные элементы помещают вокруг центрального прямоугольника, в его четырех углах.

Вот, например, обложка Complex magazine, в проектировании которой использовали принцип золотого сечения. Центральный квадрат наполнен деталями, в его углах — глаза и нос модели, а по краям композиции размещены квадраты с «воздухом». 

24-0814

Обложка Complex Magazin

А эту обложку Pilot magazine создали по упрощенному правилу третей. Снова глаза — самая выразительная часть лица — на пересечении двух линий. 

25-0814

Обложка Pilot Magazine, Jason Mildren

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

26-0814

Обложка Feld Magazine

В этой обложке хочется обратить внимание не только на снимок, но и на шапку журнала. Начертите золотую спираль — и вы сразу заметите, что именно на ней построена иерархия элементов обложки. 

27-0814

Золотая спираль в обложке Feld Magazine

Используйте правило третей в фотографии и правило золотого сечения в дизайне. Начните с наших шаблонов «Цитата дня» и «Коту нужно внимание».

5. Формы: как круги помогают создавать логотипы

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

30-0814

Живая обложка группы Cropp Russia

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

Логотип Пепси построен на двух окружностях, созданных по принципу золотого сечения. При этом внутренний круг почти не заметен: его можно выделить, если внимательно посмотреть на белый «блик» на  логотипе. Заметили?

31-0814

Логотип Пепси и золотое сечение

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

32-0814

Логотип Твитера и золотое сечение

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

Ваше секретное средство для потрясающих дизайнов