Золотое сечение – принципы формы в дизайне 2020


30.11.2019 Время чтения - 7 минут 1821

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

История золотого сечения – это целая легенда. Она берёт своё начало вместе с историей числа Пи (еще одна великая математическая константа, необходимая для понимания свойств кругов), ученые, в том числе Пифагор и Евклид, назвали ее многими именами, в том числе золотой серединой и божественным сечением.

Какова привлекательность этого соотношения? Веками считалось, что искусство, архитектура и природа более привлекательны для глаз, когда пропорции конструкций основаны на золотом сечении. Примеры золотого сечения можно найти в архитектурных начинаниях ещё Древней Греции. Статуи Парфенона, кажется, олицетворяют золотое сечение в своих формах, а некоторые из пяти многогранников Платона также связаны с ним. Золотое сечение было популяризировано в эпоху Ренессанса, и художники того периода стремились к тому, чтобы оно приносило эстетическое удовольствие. Сегодня мы используем золотое сечение в наших веб-проектах и ​​приложениях для улучшения макета и привлечения внимания, полностью доверяя этому проверенному временем факту.

 

 

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

Каждое число в последовательности Фибоначчи – сумма двух чисел перед ним. Она начинается с 1, 1 (т.е. 1 + 0 = 1), исходя из этого первые 10 членов последовательности это: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55. Продолжаться она может бесконечно. Мы можем рассчитать коэффициент, используя формулу выше (используя греческую букву Phi (Фи) для представления результата). Сечение составляет примерно 1,618, хотя, как и Pi, оно имеет длинную строку чисел после десятичной точки. Однако для наших целей нам достаточно 1.618.

Как сечение используется в дизайне? Представьте себе прямоугольник с короткой стороной, длина которой = 1. Чтобы рассчитать наиболее эстетически приятный прямоугольник, вы просто умножаете длину короткой стороны на значение золотого сечения – 1,618. Таким образом, длинная сторона в этом случае будет иметь длину 1,618.

Если у вас есть карандаш, бумага и линейка, попробуйте нарисовать прямоугольник с такими параметрами. То, что вы увидите перед собой, будет не просто прямоугольником, а идеальным прямоугольником!

Золотое сечение можно найти во всем мире дизайна. Архитекторы использовали его для фундамента и колон Акрополя в Греции. Оно используется для определения формата подавляющего большинства книг на вашей книжной полке. Оно буквально везде, куда бы вы ни посмотрели. Возможно, из-за того, что мы окружены фигурами и формами, созданными с помощью золотого сечения, мы особенно привыкли к нему. Как дизайнеры, мы должны помнить эту концепцию комфорта и осведомлённости для наших пользователей. Мир смотрит на это соотношение благоприятно. На самом деле: журнал National Geographic использует желтый прямоугольник, построенный в соответствии с соотношением золотого сечения.

Тем не менее, золотое сечение помогает нам создавать не только красивые прямоугольники. Вы также можете сформировать спираль, используя длины сторон, основываясь на порядке убывания последовательности Фибоначчи. Итак, если мы возьмем длину 55 в качестве отправной точки, мы можем сделать спираль, потянув ее внутрь так, чтобы, в момент прохождения этой исходной точки, новая длина становилась равной 34. По такому алгоритму мы продолжим закручивать спираль с длинами 21, 13, 8, 5 и т.д., пока не доберёмся до середины (длина = 1). Эта спираль основана на золотом сечении и может быть интересней, для человеческого глаза, чем простая сбалансированная спираль. Она присутствует в природе, от растений до раков и моллюсков. Говорят, что даже конкретные пропорции многих крупных животных (включая людей!) соответствуют золотому сечению. В этом смысле можно сказать, что оно – часть нас. Таким образом, вы, как дизайнер, можете использовать этот вид спирали, чтобы привлечь внимание пользователей с любого уголка мира и сфокусировать их внимание на определенной точке вашего дизайна. Исследования показали, что человеческий глаз распознает (а мозг интерпретирует и обрабатывает) изображения на основе золотого сечения быстрее, чем изображения, без него.

Мы также можем использовать золотое сечение, чтобы сбалансировать элементы внутри других элементов. Логотипы Toyota и Pepsi активно это используют. Тойота – чтобы уравновесить овалы в пределах логотипа, а Пепси – чтобы уравновесить круги. Можете ли вы вспомнить другие бренды, которые используют это «волшебное» соотношение? Возможно, именно это сделает ваши логотипы по-настоящему знаковыми!

 

 

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

Давайте сейчас кратко перейдем к математике. Как и в случае с изображением в верхней части этого урока, уравнение для вычисления отношения является довольно простым. Это отношение между двумя сторонами дизайна (обычно горизонтальной и вертикальной). Неважно, какую сторону мы выберем как самую длинную (A), а какую — как самую короткую (B). (Хотя, если вы пытаетесь увидеть, использовалось ли золотое сечение в другом произведении, вам нужно их измерить.)

А вот и формула:

A/B = (A+B)/A = 1.618033987 = Φ

Φ – греческая буква Phi и есть определение золотого сечения. Почему A/B = (A+B)/A? Да потому что мы следуем последовательности Фибоначчи, а A и B (если они выражены целыми числами) – это просто два последовательных числа в ней. К счастью, итоговое число можно округлить к 1,6 или 1,61 или 1,618 в дизайне, не в ущерб эстетической привлекательности золотого сечения. Такое незначительное отклонение будет незаметно глазу.

Как использовать золотое сечение в ваших проектах

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

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

GoldenRATIO

Phicalculator

Atrise Golden Section

 

Основная суть

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

Поскольку эти формы настолько распространены, наши глаза быстро их идентифицируют, и мы склонны воспринимать их как знакомые и приятные. Хотя золотое сечение веками было предметом изучения и было известно древним грекам, средневековый итальянский математик Фибоначчи определил его знаменитую последовательность. Её использование и является ключом к пониманию золотого сечения (которое мы обозначаем греческой буквой Phi).

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

На рисунке, приведенном выше, соотношение между областью содержимого и боковой панелью равно Phi (1,618). Вы можете проверить это с помощью измерений ниже:

  • Общая ширина фиксированного макета = 960 пикселей. Вы делите это на область контента и боковую панель. Область содержимого длиннее двух областей.
  • Если вы разделите общую ширину 960 пикселей на 1,618, вы получите 593 пикселя. Это длина области содержимого.
  • Оставшиеся 367 пикселей = боковой панели.

 

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

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

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

Оригинал статьи.

Читайте так же: Проектирование взаимодействий. UX-декодинг