Золотое Сечение в Дизайне

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

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

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

Тесно связанная с Последовательностью Фибоначи (Fibonacci Sequence), которую вы, возможно, помните из уроков математики или романа Дэна Брауна «Код Да Винчи», Золотое Сечение описывает идеально симметричное взаимоотношение между двумя пропорциями.

Приблизительно равное соотношению 1 : 1.61, Золотое Сечение может быть иллюститровано как Золотой Прямоугольник: большой прямоугольник, включающий квадрат (в котором стороны равны длине самой короткой стороны прямоугольника) и прямоугольник поменьше. 

Золотое Сечение

Если убрать квадрат из прямоугольника, останется другой, маленький Золотой Прямоугольник. Этот процесс может продолжаться до бесконечности, как и цифры Фибоначи, которые работают в обратном порядке. (Добавление квадрата со сторонами, равными длине самой длинной стороны прямоугольника, приближает вас к Золотому Прямоугольнику и Золотому Сечению.)

Золотое Сечение в дизайне

Золотое Сечение в дизайне

Золотое Сечение в действии

Считается, что Золотое Сечение используется уже около 4000 лет в искусстве и дизайне. Однако, многие люди соглашаются, что при строительстве Египетских Пирамид также использовался этот принцип.

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

Греческая архитектура

Золотое Сечение в архитектуре

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

В результате получается идеально пропорциональное строение. Движение неоклассической архитектуры также использовало эти принципы.

Тайная вечеря

Золотое Сечение в дизайне

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

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

Золотое сечение в природе

Существует множество примеров Золотого Сечения в природе – их вы можете обнаружить вокруг себя. Цветы, морские раковины, ананасы и даже пчелиные соты демонстрируют одинаковое соотношение.

Как рассчитать Золотое Сечение

Рассчет Золотого Сечения достаточно прост, и начинается с простого квадрата:

01. Нарисуйте квадрат

Рассчет золотого сечения

Он образует длину короткой стороны прямоугольника.

02. Разделите квадрат

Рассчет золотого сечения

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

03. Проведите диагональ

Рассчет золотого сечения

В одном из прямоугольников проведиде линию из одного угла в противоположный.

04. Поверните

Рассчет золотого сечения

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

05. Создайте новый прямоугольник

Рассчет золотого сечения

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

Как использовать Золотое Сечение

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

Быстрый способ

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

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

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

Полная реализация

Если вы хотите реализовать Золотое Сечение в вашем дизайне в полной мере, то просто расположите основной контент и сайдбар (в веб дизайне) в соотношении равном 1 : 1.61.

Можно округлить значения в меньшую или большую стороны: если контент-зона равна 640px, а сайдбар 400px, то эта разметка вполне подойдет под Золотое Сечение.

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

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

Полезные инструменты

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

01. goldenRATIO

Калькулятор золотого сечения

GoldenRATIO – это приложение для создания дизайна веб сайтов, интерфейсов и шаблонов, подходящих под Золотое Сечение. Доступно в Mac App Store за 2,99$. Включает визуальный калькулятор Золотого Сечения.

Так же в приложении есть функция «Избранное», которое сохраняет настройки для повторяющихся задач и «Click-thru» мод, позволяющий сворачивать приложение в Photoshop.

02. Golden Ratio Typography Calculator

Этот калькулятор Золотого Сечения от Pearsonified  помогает в создании идеальной типрографики для вашего сайта. Введите размер шрифта, ширину контейнера в поле, и нажмите кнопку Set my type! Если вам нужно оптимизировать количество букв в строчке, вы можете дополнительно ввести значение CPL.

03. Phicalculator

Калькулятор золотого сечения

Это простое, полезное и бесплатное приложение доступно для Mac и PC. Введите любое число, и приложение вычислит вторую цифру в соответствии с приципом Золотого Сечения.

04. Atrise Golden Section

Калькулятор золотого сечения

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

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

Обучение Золтому Сечению

Вот несколько полезных туториалов по Золотому Сечению (английский язык):

01. Graphic design, illustration and art

В этом туториале для Digital Arts Роберто Маррас (Roberto Marras) показывает, как использовать Золотое Сечение в художественной работе.

02. Web design

Туториал от Tuts+, рассказывающий, как использовать золотые принципы в веб дизайн проектах.

03. More web design

Туториал от Smashing Magazine, рассказывающий о пропорциях и правиле третей.


Перевод статьи The designer’s guide to the Golden Ratio

Автор оригинального текста