Золотое сечение в дизайне
Говорят, что “божественная пропорция” заложена в природе, и во многих вещах вокруг нас. Вы можете найти ее в цветах, ульях, морских раковинах, и даже нашем теле.
Эта божественная пропорция, также известная как золотое сечение, божественное сечение, или золотая пропорция может быть применена к различным видам искусства и обучения. Ученые утверждают, что чем ближе объект к золотому сечению, тем лучше человеческий мозг воспринимает его.
С тех пор как это соотношение было открыто, многие художники и архитекторы применяли его в своих работах. Вы можете найти золотое сечение в нескольких шедеврах эпохи Возрождения, архитектуре, живописи, и многом другом. В результате – красивый и эстетически приятный шедевр.
Немногие знают, в чем заключается тайна золотого сечения, что так радует наши глаза. Многие полагают, что то, что она появляется везде и является “универсальной” пропорцией, заставляет нас принять ее как что-то логическое, гармоничное и органичное.
Другими словами, оно просто “чувствует” то, что нам нужно.
Итак, что такое золотое сечение?
Золотое сечение, также известное как “фи” по-гречески, это математическая константа. Оно может быть выражено уравнением a/b=a+b/a=1,618033987, где a больше, чем b. Это также можно объяснить последовательностью Фибоначчи, другой божественной пропорцией. Последовательность Фибоначчи начинается с 1 (некоторые говорят с 0) и добавляет к нему предыдущее число, чтобы получить последующее (т.е. 1, 1, 2, 3, 5, 8, 13, 21 …)
Если вы попытаетесь найти частное от деления двух последующих чисел Фибоначчи (т.е. 8/5 или 5/3), результат очень близок к золотому сечению 1,6 или φ (фи).
Золотая спираль создается с помощью золотого прямоугольника. Если у вас есть прямоугольник из квадратов 1, 1, 2, 3, 5 и 8 соответственно, как показано на рисунке выше, вы можете приступить к строительству золотого прямоугольника. Используя сторону квадрата, как радиус, вы создаете дугу, которая касается точек квадрата по диагонали. Повторите эту процедуру с каждым квадратом в золотом треугольнике, и в конечном итоге вы получите золотую спираль.
Где мы можем увидеть его в природе
Золотое сечение и последовательность Фибоначчи можно найти в лепестках цветов. У большинства цветков количество лепестков сводится к двум, трем, пяти или больше, что походит на золотое сечение. Например, у лилий 3 лепестка, у лютиков 5, у цветков цикория 21, а у ромашек 34. Вероятно, семена цветков также следуют золотому сечению. Например, семена подсолнечника прорастают из центра и растут к внешней стороне, заполняя головку семени. Обычно они спиралевидные и имеют сходство с золотой спиралью. Более того, количество семян, как правило, сводится к числам Фибоначчи.
Руки и пальцы также являются примером золотого сечения. Посмотрите ближе! Основание ладони и кончик пальца разделен частями (костьми). Соотношение одной части в сравнении к другой всегда 1,618! Даже предплечья с руками находятся в таком же соотношении. И пальцы, и лицо, и можно продолжать список…
Применение в искусстве и архитектуре
Парфенон в Греции, как утверждается, был построен с использованием золотых пропорций. Считается, что размерные соотношения высоты, ширины, колонн, расстояния между столбами, и даже размер портика близки к золотому сечению. Это возможно потому, что здание выглядит пропорционально идеально, и оно было таким с древних времен.
Леонардо Да Винчи был также поклонником золотого сечения (и многих других любопытных предметов, собственно говоря!). Дивная красота Мона Лизы может быть связана с тем, что ее лицо и тело представляют собой золотое сечение, как и реальные человеческие лица в жизни. Кроме того, цифры в картине “Тайная вечеря” Леонардо Да Винчи расположены в порядке, который используется в золотом сечении. Если начертить золотые прямоугольники на холсте, Иисус окажется как раз в центральной доле.
Применение в дизайне логотипов
Неудивительно, что вы также можете найти использование золотого сечения во многих современных проектах, в частности, дизайне. Сейчас давайте сосредоточимся на том, как это может быть использовано в дизайне логотипа. Во-первых, рассмотрим некоторые из самых известных в мире брендов, которые использовали золотое сечение для совершенствования своих логотипов.
Видимо, Apple использовал круги из чисел Фибоначчи, соединив и обрезав формы для получения логотипа Apple. Неизвестно, было ли это сделано намеренно или нет. Тем не менее, в результате получился идеальный и визуально эстетичный дизайн логотипа.
Логотип Toyota использует соотношение a и b, формируя сетку, в которой образуются три кольца. Обратите внимание, как этот логотип использует прямоугольники вместо кругов для создания золотого сечения.
Логотип Pepsi создан двумя пересекающимися кругами, один больше другого. Как показано на рисунке выше, больший круг пропорционален в соотношении к меньшему – вы уже догадались! Их последний нерельефный логотип – простой, эффектный и красивый!
Кроме Toyota и Apple, логотипы некоторых других компаний, таких как, BP, iCloud, Twitter, и Grupo Boticario, как полагают, также использовали золотое сечение. И мы все знаем, насколько известны эти логотипы – все потому, что изображение сразу всплывает в памяти!
- Как создать логотип в Photoshop: пошаговая инструкция
Как вы можете применить его в своих проектах?
Создайте эскиз золотого прямоугольника, как показано выше желтым цветом. Этого можно достичь путем построения квадратов с высотой и шириной из чисел, принадлежащих золотому сечению. Начните с одного блока и поместите другой рядом с ним. А другой квадрат, чья площадь равна тем двум, поместите над ними. Вы автоматически получите сторону из 3 блоков. После построения этой конструкции из трех блоков, в конечном итоге у вас будет сторона из 5 четырехугольников, из которой можно сделать другую (площадью в 5 блоков) коробку. Это может продолжаться сколько угодно, пока вы не найдете тот размер, который вам нужен!
Прямоугольник может перемещаться в любом направлении. Выделите мелкие прямоугольники и используйте каждый из них, чтобы собрать макет, который будет служить в качестве сетки дизайна логотипа.
Если логотип более округлый, то вам потребуется круговая версия золотого прямоугольника. Вы можете добиться этого начертанием кругов, пропорциональных числам Фибоначчи. Создайте золотой прямоугольник, используя только круги (это означает, что самый большой круг будет иметь диаметр 8, а у круга поменьше будет диаметр 5, и так далее). Теперь разделите эти круги и разместите их так, чтобы вы могли сформировать основную схему для вашего логотипа. Вот пример логотипа Twitter:
Примечание: Вам не обязательно чертить все круги или прямоугольники золотого сечения. Вы также можете использовать один размер неоднократно.
Как применять его в дизайне текста
Это проще, чем проектирование логотипа. Простое правило для применения золотого сечения в тексте заключается в том, что последующий больший или меньший текст должен соответствовать Фи. Давайте разберем этот пример:
Если размер моего шрифта – 11, то подзаголовок должен быть написан в более крупном шрифте. Умножаю шрифт текста на число золотого сечения, чтобы получить большее число (11*1,6=17). Значит подзаголовок должен быть написан в 17 размере шрифта. А теперь заголовок или название. Умножу подзаголовок на пропорцию и получу 27 (1*1,6=27). Вот так! Ваш текст теперь пропорционален золотому сечению.
Как применить его в веб-дизайне
А здесь немного сложнее. Вы можете оставаться верными золотому сечению даже в веб-дизайне. Если вы опытный веб-дизайнер, вы уже догадались, где и как ее можно применить. Да, мы можем эффективно использовать золотое сечение и применить его к сеткам наших веб-страниц и макетам пользовательского интерфейса.
Возьмите общее число сетки пикселей за ширину или высоту и используйте его для построения золотого прямоугольника. Разделите наибольшую ширину или длину для получения меньших чисел. Это может быть шириной или высотой вашего основного контента. То, что осталось, может быть боковой панелью (или нижней панелью, если вы применили его к высоте). Теперь продолжайте использовать золотой прямоугольник для дальнейшего применения его к окнам, кнопкам, панелям, изображениям и тексту. Вы также можете построить полную сетку, основанную на маленьких версиях золотого прямоугольника расположенных как горизонтально, так и вертикально для создания более маленьких объектов интерфейса, которые пропорциональны золотому прямоугольнику. Для получения пропорций вы можете использовать этот калькулятор.
Спираль
Вы также можете использовать золотую спираль, чтобы определить, где разместить контент на вашем сайте. Если ваша домашняя страница загружается с графическим контентом, как, например, на веб-сайте онлайн магазина или блога фотографий, вы можете воспользоваться золотым методом спирали, который используют многие художники в своих работах. Задумка в том, чтобы поместить наиболее ценный контент в центре спирали.
Контент со сгруппированным материалом тоже может быть размещен при помощи золотого прямоугольника. Это означает, что чем ближе спираль движется к центральным квадратам (к одному квадратному блоку), тем “плотнее” там содержимое.
Вы можете использовать эту технику, чтобы обозначить расположение вашего заголовка, изображений, меню, панели инструментов, окна поиска и других элементов. Twitter славится не только использованием золотого прямоугольника в дизайн логотипа, но и задействовал его в веб-дизайне. Как? Благодаря использованию золотого прямоугольника, или, другими словами концепцией золотой спирали, в странице профиля пользователей.
Но нелегко будет проделать такое на платформах CMS, где автор материала определяет расположение вместо веб-дизайнера. Золотое сечение подходит WordPress и другим дизайнам блога. Это, вероятно, потому, что боковая панель почти всегда присутствует в дизайне блога, который хорошо вписывается в золотой прямоугольник.
Правило третей
Для тех, кто не очень понимает язык математики, есть более простой способ. Он известен как правило третей. Оно не включает в себя точные математические вычисления, но помогает достигнуть правильных пропорций.
Все, что требуется – это разделить первоначальный эскиз на девять равных частей:
Точки, где встречаются линии в сетке, будут основными точками вашего дизайна, от которых вы будете в дальнейшем отталкиваться. Вы можете поместить ключевую тему или основные элементы на одну или все точки пересечения. Фотографы также используют эту концепцию.
Если Вы разделите каждую колонку в сетке так, чтобы получились две равные половины, то Вы получите сетку для работы с дизайном сайта. Например, Вы можете разместить эмблему или логотип в верхнем правом квадрате в левой части. Менее важная информация, которая будет располагаться вертикально сверху вниз, может брать свое начало верхнем правом квадрате.
Чем ближе прямоугольники к соотношению 1:1,6, тем приятнее воспринимается картина человеческим мозгом (так как это ближе к золотому сечению). Если вы не любите математику и не хотите считать, то достаточно использовать отношение 3:5 при расчете золотого отношения. Результат будет не таким точным, но он будет близок к пропорциям, которые применяются в работе с дизайном.
Пример того, как можно использовать сечение в веб-дизайне, описан ниже.
Золотое сечение на примере
Ширина вашего макета может быть фиксированная или гибкая, но прежде чем применить золотое отношение, вам нужно определить число, чтобы начать с ним работать. Для веб-дизайна это число будет равно числу пикселей в ширине лэйаута.
Если вы, например, работаете на лэйауте в 1200 пикселей, то нужно разделить это число на Phi. Для упрощения задачи, число Phi можно сократить до 1.62. При делении 1200 на 1.62, Вы получаете ширину основной колонны, что в нашем случае составит 740 пикселей.
Чтобы определить ширину второй колонки, просто вычтите ширину главной колонки от общей ширины. В этом примере получается 460 пикселей.
Теперь у вас есть две колонки в 740 пикселей и 460. При помощи этого простого вычисления, вы всегда сможете определить идеальные пропорции для колонок вашего сайта.
Для гибкого лэйаута нужно брать расчеты в процентах. Делим 100% на 1.62 и получаем основную колонку, которая займет 62%, а вторая – 38% соответственно. Далее вы сможете работать исходя из этого соотношения.
Золотое отношение может эффективно использоваться, при создании маленьких прямоугольников в пределах общего дизайна. Это пространство может быть использовано для кнопок навигации, заголовков изображений, пространства для объявлений или для текста, который располагается вокруг изображения. Как бы их не использовали, эти мини золотые прямоугольники будут пропорциональны и законченный вид дизайна, будет приятным завершением работы.
- 15 золотых принципов визуальной иерархии на лендинге
Золотое сечение – не панацея
Использование золотого сечения в дизайне не гарантирует успех вашего лендинга.
В то же время изображения, блоки текста и врезок могут быть хорошо представлены в маленьких золотых прямоугольниках, которые формируют красивый, сбалансированный вид, но число прямоугольников на каждой странице должно быть ограниченным. Ничто в веб-дизайне не должно быть в слишком большом количестве.
Также важно помнить о том, что есть много других факторов, которые нужно учитывать при создании дизайна, и которые будут соответствовать общей цели проекта.
Инструменты для дизайнеров
Калькулятор Phi
Когда вы вводите число в этот веб-инструмент, он рассчитывает результат, необходимый для золотого сечения. Этот сервис бесплатный и очень простой в использовании.
Типографический калькулятор Pearsonified
Это онлайн инструмент с кнопкой ‘Set My Type’. Вы просто нажимаете на нее после того, как введете ширину контента и/или размер шрифта, и сервис сам подберет лучшее типографическое решение. У Вас также есть возможность ввести значение CPL. Он оптимизирует размер знаков по линиям.
Сервис золотого отношения UX Triggers
Вы можете проверить любой сайт с помощью этого бесплатного сервиса и быстро определить использована ли последовательность Фибоначчи в дизайне.
- Все, что вам нужно знать о визуальном восприятии и дизайне сайтов
Заключительные мысли
Веб-страницы выглядят более гармонично, когда они сделаны с использованием принципов золотого сечения. Это единственное соотношение, которое использовалось еще две тысячи лет назад, для тех же целей, что и сегодня. Посетителя интуитивно будут чувствовать комфорт гармоничного интерфейса, потому что им уже знакомы классические пропорции архитектурных строений и других произведений искусства.
Использование золотых прямоугольников дает чувство упорядоченности вашему лендингу. Но вы должны быть аккуратны, и избегать злоупотребления ими. Слишком большое их количество произведет обратный эффект и сделает дизайн приторным и менее привлекательным.
Сочетание математических вычислений и органической структуры в веб-дизайне может дать отличный результат. Необязательно, чтобы весь дизайн опирался на все упомянутые принципы, иногда достаточно правила третей, которое поможет вам правильно соблюсти пропорции и расположить элементы на свои места.
Готовы проверить полученные знания на лендинге? Вы можете выбрать подходящий шаблон и настроить его под себя в конструкторе LPgenerator, или, если у вас нет времени разбираться в тонкостях лендостроения, но при этом вам нужна уникальная страница с гарантированно высокой конверсией, подать заявку на индивидуальный дизайн.
Он будет выполнен с учетом всех ваших пожеланий, подчеркнет особенности оффера и позиционирование бренда, а еще — легко масштабируется по мере необходимости.
Высоких конверсий!
12-03-2016
Золотое сечение: Самый раздутый миф в дизайне
Золотое сечение — это полный нонсенс в дизайне. И вот почему.
В мире искусства, архитектуры и дизайна золотое сечение завоевало потрясающую репутацию. Великие гении, включая Корбюзье и Сальвадора Дали, использовали эту пропорцию в своих работах. Парфенон, Пирамиды в Гизе, полотна Микелянджело, Мона Лиза и даже логотип Apple якобы построены на его основе. Это бред. Эстетика золотого сечения — это просто современная байка, миф. Многие дизайнеры им пренебрегают, а если и используют, то не стесняются преуменьшать его значение. Кроме того, у этой пропорции нет никакой научной подоплеки. Те, кто верят, что за красотой золотого сечения кроется математика, попались на крючок 150-летней давности. Пользователь FlickrSébastien Bertrand
Что такое золотое сечение?
Изначально описанный в Элементах Эвклида 2300 лет назад, этот термин гласит: два объекта находятся в золотой пропорции, если соотношение между ними идентично отношению их суммы к большему из двух элементов. Обычно эта пропорция составляет 1.6180. Самое известное применение золотого сечения — так называемый золотой прямоугольник, который может быть разделен на идеальный квадрат и меньший прямоугольник тех же пропорций, что и “родительский” прямоугольник. Вы можете применить эту теорию к большему разнообразию объектов, также разделяя их на компоненты.
Золотое сечение всегда немного неточное.
Простым языком: если у вас есть два объекта (или один объект, который можно разделить на два, по аналогии с золотым прямоугольником), и если после вышеописанной математики, вы получите число 1.6180, обычно считается, что два объекта демонстрируют золотое сечение. Но есть одна проблема. Когда вы все-таки посчитаете, то сама пропорция не равна 1.6180. Она равна 1.6180339887… И десятичная часть уходит в бесконечность. “Собственно говоря, невозможно подобрать примеры золотого сечения в реальном мире, потому что это иррациональное число”, — заявляет Кит Девлин, профессор математики Стэнфордского университета. Вы можете только приблизиться к более стандартным пропорциям. Стороны экрана iPad соотносятся как 3:2, пропорция HDTV составляет 16:9, и все это “вокруг да около”, по словам Девлина. Но само золотое сечение — это как число “пи”. Как нельзя найти идеальный круг в реальном мире, так и нельзя применить точное золотое сечение к любому объекту в реальном мире. Оно всегда будет немного смещаться.
Золотое сечение — это как эффект Моцарта
Конечно, это педантизм. Неужели 1.6180 — недостаточно точно? Возможно, и достаточно, если бы было какое-то научное обоснование того, что именно золотое сечение позволяет нам считать объекты вроде Парфенона или Моны Лизы эстетически приятными. Но это не так. Девлин считает, что сама идея, будто золотое сечение имеет какое-то отношение к эстетике, исходит от двух людей, один из которых был неправильно истолкован, а второй это толкование и обнародовал. Первый человек — Лука Пачоли, францисканский монах, который написал книгу под названием De Divina Proportione в далком 1509 году, и она была названа в честь золотого сечения. Примечательно то, что в своей книге Пачоли не отстаивал теорию эстетики этого сечения в отношении к искусству, архитектуре и дизайну: вместо этого он поддерживал Витрувианскую систему рациональных пропорций, основанную римским архитектором первого века, Витрувием. Золотое сечение ошибочно было приписано Пачоли в 1799 году, согласно Марио Ливио, который буквально написал книгу по золотому сечению. Но Пачоли был близким другом Леонардо да Винчи, чьи работы получили огромное признание и популярность в 19 веке. Так как Да Винчи проиллюстрировал De Divina Proportione, вскоре начали говорить, что и сам Да Винчи применил золотое сечение как секретную математику в своих восхитительно красивых творениях. Адольф Цейзинг был тем, кто в это поверил. “Это человек, который хотел сжечь себя на костре во имя репутации золотого сечения” — шутит Девлин. Цейзинг был немецким психологом, который отстаивал идею, что золотое сечение является универсальным законом, описывающим “красоту и завершенность в природе и в искусстве… оно проходит красной нитью как первостепенный духовный идеал во всех структурах, формах и пропорциях, космических и индивидуальных, органических и неорганических, акустических или оптических”. Он был очень многословным. Единственной проблемой Цейзинга было то, что он видел закономерности там, где их не было. Например, Цейзинг доказывал, что золотое сечение можно применить к человеческому телу, взяв рост человека от пупка до пальцев ног, поделив его на полный рост. По словам Девлина, это всего лишь произвольные части тела, слепленные в формулу. Он говорит: “При замерах чего-то столь сложного, как человеческое тело, очень легко найти примеры разных пропорций, близких к 1.6”.
В моей собственной работе я даже не найду примера использования золотого сечения.
Но это не имеет никакого значения. Теории Цейзинга стали невероятно популярны, и Девлин называет их “эквивалентом эффекта Моцарта 19-го века”. Эффект Моцарта гласит, что прослушивание классической музыки повышает интеллект. В 20 веке известный швейцарско-французский архитектор Ле Корбузье положил золотое сечение в основу своей системы антропометрических пропорций “Модулора”. Дали нарисовал свой шедевр “Тайная вечеря” на холсте в форме золотого прямоугольника. Тем временем историки искусства начали просматривать и другие шедевры, пытаясь отыскать золотое сечение в Стоунхендже, полотнах Рембранта, Шартрском соборе и работах Сёра. Связь между золотым сечением и красотой превратилась в самую раздутую утку в мире искусства, архитектуры и дизайна. Ian Yen на Yanko Design
На самом деле, вы не очень-то и предпочитаете золотое сечение
В реальном мире людям не особо необходимо золотое сечение. Девлин совместно с кафедрой психологии Стенфордского университета в течение многих лет опрашивал сотни студентов, какой прямоугольник их любимый. Он показывал разные прямоугольники студентам, а затем просил их выбрать наиболее понравившийся. Если бы оды золотому сечению были оправданы, студенты бы выбирали прямоугольники, близкие к золотому. Но это было не так. Они выбирают их произвольно. И если вы попросите их повторить свой выбор, они выберут другие прямоугольники. “Это очень полезный пример для демонстрации сложности человеческого восприятия”. Кроме того, это отличная демонстрация того, что золотое сечение не является более приятным для людей с эстетической точки зрения. Эксперименты Девлина не единственные в исследовании золотого сечение. Исследование, проведенное специалистами Школы бизнеса имени Уолтера Хааса в Беркли, показало, что в среднем потребители предпочитают прямоугольники, пропорция которых между 1.414 и 1.732. Золотое сечение входит в этот диапазон, но не является явным “любимчиком” публики.
Многие современные дизайнеры не считают его полезным
Дизайнеры, с которыми мы обсуждали золотое сечение, не видят в нем особой пользы. Ричард Мейер, легендарный архитектор, автор Центра Гетти и Музея современного искусства в Барселоне, отмечает, что в начале своей карьеры у него был архитекторский треугольник, который соответствовал золотому сечению, но он никогда не создавал свои здания по золотому сечению. “В мире такое множество других чисел и формул, которые важнее при проектировании зданий”, — говорит Мейер, ссылаясь на формулы по расчету максимальных допустимых размеров пространств зданий, или на формулы расчета структурной нагрузки. Алиса Андрасек, дизайнер из Biothing, онлайн-репозитория машинного проектирования, соглашается с этим: “В своей работе я даже не найду примера использования золотого сечения. Я могу представить, что эту пропорцию можно встроить в разные системы в качестве ‘изюминки’, но мне сложно вообразить, чтобы весь дизайн был построен именно на золотом сечении, как это случалось в истории… это слишком уж упрощенно”. Джорджия Лупи из Accurat, итальянской дизайн-фирмы, говорит, что в лучшем случае золотое сечение так же важно для дизайнеров, как и любое другое композиционное правило, например, правило третей: отличное распространенное правило, которое хорошие дизайнеры могут с таким же успехом проигнорировать. “Я не знаю, сколько дизайнеров на практике специально внедряют золотое сечение в свои работы. Лично я никогда не работала с этой пропорцией в своих проектах”. Из всех опрошенных дизайнеров, индустриальный дизайнер Ив Бехар из Fuseproject теплее всех относится к золотому сечению: “Иногда я действительно вижу золотое сечение в пропорциях продуктов и графики, которую мы создаем, но это скорее просто случайность, чем догма. Это важный инструмент, но не правило”. Даже дизайнеры, которые по совместительству являются математиками, скептически относятся к использованию золотой пропорции в дизайне. Эдмуд Харрис — клинический доцент кафедры математики в Университете Арканзаса, который использует множество формул для создания новых произведений искусства. Но и Харрис говорит, что золотое сечение, в лучшем случае, всего лишь один из множества инструментов в руках дизайнеров, склонных к математике: “Во многих смыслах это просто число, и оно, как и другие числа, часто встречается в разных местах… [Но] это точно не универсальная формула эстетической красоты”. Тайная вечеря, 1955, Сальвадор Дали
Почему этот миф так популярен?
Если ценность золотого сечения так незначительна, почему же этот миф процветает? Девлин поясняет это просто: “Мы создания, генетически запрограммированные видеть паттерны и искать смысл. В нашей ДНК не зашифрована способность мириться с условными вещами вроде эстетики, поэтому мы пытаемся доказать их с помощью нашего часто ограниченного математического видения. Большая часть людей не понимает математику, и даже не может понять, как формула вроде золотого сечения применяется к сложной системе, так что и проверить себя они не могут. Люди думают, что повсюду видят золотое сечение, в природе и в любимых объектах, но они не могут это обосновать. Они — жертвы своего природного желания найти смысл в разных объектах вселенной, но из-за недостаточной математической грамотности они не могут понять, что обнаруживаемые закономерности иллюзорны”. http://ux.pub/zolotoe-sechenie-v-dizajne-interfejsov/
Перевод статьи JOHN BROWNLEE
Золотое сечение и как его использовать в графическом дизайне
Логотипы, веб-сайты и многое другое…
Логотипы, веб-сайты, обложки книг и многое другое…
Получить дизайн
Искусство и дизайн крайне субъективны. Мусор одного человека может стать шедевром для другого. Но, к счастью, существует старинное число, которое может помочь превратить ваши проекты в научно доказанную красоту: золотое сечение.
Золотое сечение Моны Лизы через Simply.Science
Задумывались ли вы когда-нибудь втайне: «Что такого замечательного в Моне Лизе?» Ответ — золотое сечение.
Золотое сечение, также известное как «золотое сечение», «золотая середина» или греческая буква «фи», — это очень удобное число, которое помогает создавать красивые, идеально сбалансированные конструкции, которые эстетически удовлетворяют на глубоком мозговом уровне. Круто, да?
Хотя искусство и дизайн часто руководствуются инстинктом и творчеством, золотое сечение использует математику, чтобы изменить процесс создания изображений, макета, типографики и многое другое. Итак, давайте углубимся в это.
Что такое золотое сечение?
—
Золотое сечение — это число, используемое, когда две величины делятся таким образом, что их отношение равно отношению их суммы к большей из двух величин. Это число 1,618, также называемое Фи.
Иллюстрация с использованием золотого сечения от Vladanland
Самый простой способ продемонстрировать это — использовать последовательность Фибоначчи. Не вдаваясь в подробности и , эта последовательность представляет собой сумму двух чисел, стоящих перед ней. Итак: 0,1,1,2,3,5,8,13,21…во веки веков (и присно). Когда-то греки использовали последовательность Фибоначчи, чтобы сформировать визуальный паттерн в помощь своим проектам. Когда вы превращаете последовательность в квадраты и кладете их бок о бок, чтобы получились прямоугольники, начинает формироваться спираль (называемая Золотой Спиралью).
Пусть вас не пугают несколько уравнений! Золотое сечение на самом деле намного проще, чем кажется. И встречается везде. Золотая спираль появляется в природе повсюду вокруг нас. От ураганов до цветов, от галактик до ракушек… и даже от тех странных мутировавших цветных капуст, которые иногда можно найти в продуктовом магазине.
Романеско Брокколи через The Curious MangoЗолотое сечение в природе Мате Маршалко через среду
Как использовать Золотое сечение в графическом дизайне иначе выразительный характер дизайна. Просто умножьте размер элемента на 1,618, чтобы определить размер другого элемента, или наложите золотую спираль, чтобы отрегулировать их расположение.
Вы можете использовать Золотое сечение, чтобы ориентироваться в своих макетах, типографике, изображениях и многом другом.
Мы собрали четыре совета и рекомендации о том, как использовать золотое сечение, чтобы максимизировать научную красоту ваших проектов в стиле да Винчи.
1. Иерархия типографики
При создании любого дизайна, в котором используется текст, всегда учитывайте иерархию сообщений в макете. Будь то постер, приглашение на свадьбу или макет веб-сайта, вы можете использовать золотое сечение, чтобы определить размер типографики.
Например, предположим, когда вы разрабатываете свою иерархию копирования для вашего действительно важного текста (A), своего рода важного текста (B) и вашего не очень важного текста (C). Если ваш наименьший размер шрифта для (C) составляет 10 пикселей, умножьте его на 1,618, чтобы получить приблизительное руководство для больших размеров.
Красивый постер летнего солнцестояния от green in bluegritty постеры для DJ Immaculate Styles от nevergohungryКрасочный постер для Амстердамского кинофестиваля под открытым небом от green in blue
2.
Композиция изображения
При рассмотрении гармонии ваших изображений всегда полезно остановиться и сделать шаг назад и вернуться со свежим взглядом. Но если у вас нет времени обдумывать свои произведения искусства, более быстрая альтернатива — Золотая спираль. Наложите спираль на свои изображения, чтобы увидеть, какие элементы расположены где и действительно ли они создают гармонию.
Используя Золотую Спираль, вы можете решить, где должны быть фокусы, как сделать заголовок центральным для максимального воздействия или какие элементы нужно сместить, чтобы придать дизайну больше энергии.
Beautiful Into the Wild иллюстрация Душана Клепика DK™ Иллюстрация ночного неба от AlerimИллюстрация волшебного кита от Marrieta
3. Дизайн логотипа
Хорошо продуманный логотип жизненно важен для вашего бренда, чтобы люди могли понять вашу основную идею практически с одного взгляда. Вот почему это отличная идея учитывать золотое сечение при разработке логотипа, чтобы мгновенно привлечь людей и помочь им установить связь. На самом деле, многие крупнейшие мировые бренды используют золотое сечение для создания своих логотипов: Pepsi, Apple и Twitter, и это лишь некоторые из них.
Например, логотип Green in Blue для хлебопекарного бизнеса «Голодный гном» — это идеально сбалансированный логотип в стиле современного китча, в котором используется золотое сечение для управления размещением изображения и размером текста.
В логотипе Rahajoe для Little Spoon используются круги в золотом сечении в качестве сетки, определяющей их дизайн.
Очаровательный логотип хлебопекарной компании, зеленый в синем цвете. Логотип золотого сечения от Rahajoe. Это основа многих логотипов, в том числе птицы Twitter.
Последовательность Фибоначчи, показанная через круги Мостафы Амина и Brandology Studio
4. Макеты
Когда вам приходится сталкиваться с кучей разных вещей в одном макете, всегда полезно использовать Золотую спираль для управления размещением каждого элемента. Нас естественным образом тянет к центру спирали, поэтому часто лучше всего поместить туда самое важное сообщение.
Красивый постер зеленого в синем, вдохновленный ретро. Девушка любит грацию. Постер независимого фильма от студии subsist.0002 Например, в плакате «Зеленое в синем» для вечеринки «Лето любви» спираль идеально облегает лицо и цветок, создавая хорошо сбалансированный и интригующий фокус.
Запомните этот номер: 1.618
—
Этот номер — ваш новый лучший друг. Умножьте размер шрифта или элемент дизайна на золотое сечение, и вы станете на один шаг ближе к тому, чтобы ваш макет начал складываться воедино. Или вы всегда можете наложить Золотую спираль в качестве удобного ориентира.
Из-за научной и даже универсальной природы золотого сечения дизайнеры часто используют его, знают они об этом или нет. Тем не менее, всегда полезно проверить, соответствуют ли ваши проекты магии 1.618, чтобы вы могли поднять их на новый уровень удивительности!
Ознакомьтесь с нашей статьей Design 101, если вы хотите узнать больше об основах графического дизайна.
Хотите получить красивый дизайн, вдохновленный золотым сечением?
Работайте с одним из наших талантливых дизайнеров, чтобы это произошло!
Давай сделаем это
Что такое золотое сечение?
Распаковка концепции последовательности Фибоначчи в дизайне.
Art by @tubik
Вдохновение окружает нас повсюду, и каждый в мире всегда черпает разные идеи из окружающего его искусства. Поэтому может показаться удивительным, что есть одно правило природы, которое так часто встречается вокруг нас, что оно было изображено в самых печально известных произведениях искусства.
Что общего у Моны Лизы, Великих пирамид Гизы, Парфенона и логотипа Apple? Все они либо демонстрируют золотое сечение, либо были разработаны с учетом золотого сечения.
Золотое сечение — это математическое отношение и отношение, открытое и часто встречающееся в природе, но наблюдаемое почти везде, например, в архитектуре, музыке, живописи, современном дизайне и т. д. При эффективном использовании он создает дизайн, который естественно и эстетически привлекателен для глаз благодаря своей художественной композиции.
Так в чем же секрет этого волшебного соотношения? Давайте еще немного разберемся в этом математическом чуде. И давайте посмотрим, как вы можете использовать его для улучшения своих проектов.
Ряд Фибоначчи
Итак, что такое золотое сечение?
Проще говоря, золотое сечение (также известное как отношение золотого сечения, божественная пропорция или золотая середина) — это математическое соотношение, которое дает число 1,618 . Представьте себе прямоугольник, в котором, если вы отрежете квадрат, оставшийся прямоугольник будет иметь те же пропорции, что и исходный прямоугольник. Продолжая этот шаблон, вы получите диаграмму золотого сечения.
Это число и само отношение получены из последовательности Фибоначчи, которая представляет собой последовательность чисел, которые естественным образом встречаются в нашей среде. Но это число также является решением квадратной формулы, в которую нам сейчас не нужно вдаваться. Но вы, возможно, помните числа Фибоначчи из средней школы. Или из блокбастера середины 2000-х, который свел всех с ума от святого Грааля, «Код да Винчи».
Помимо фантастики, золотое сечение можно найти и в природе. Вот почему ее также называют «божественной пропорцией». Из-за его частоты в естественном мире. Количество лепестков на цветке часто является числом Фибоначчи.
Семена сосновых шишек закручиваются в логарифмическую спираль чисел Фибоначчи. Даже количество сторон неочищенного банана обычно является числом Фибоначчи. Даже молекула ДНК внутри нашего тела является примером этой формы логарифмической спирали.
Теперь, когда мы освоились с этой концепцией, я уверен, что вы, ребята, не будете возражать против более подробной информации. Давайте спустимся в кроличью нору Фибоначчи.
Числа Фибоначчи представляют собой последовательность, начинающуюся с 0 и 1 и продолжающуюся добавлением двух предыдущих чисел до бесконечности. Следовательно, последовательность выглядит следующим образом: 0, 1, 1, 2, 3, 5, 8, 13, 21 и так далее.
Это потому, что 0 + 1 = 1, 1 + 1 = 2, 1 + 2 = 3, 2 + 3 = 5 и т. д. Отношения соседних чисел Фибоначчи (2/1, 3/2, 5/3 и т. д.) не совсем равны золотому сечению, но приближаются к нему. Это означает, что чем выше число Фибоначчи, тем ближе их отношение к 1,618. Дробь 5/3 уже довольно близка к 1,666666…
Поскольку все мы дизайнеры, вероятно, легче понять эту концепцию визуально. Золотое сечение можно объяснить с помощью так называемого золотого прямоугольника. Прямоугольник с соотношением сторон 1:618. Теперь представьте себе квадрат, высота и ширина которого равны размеру меньшей части золотого прямоугольника. Если вы удалите этот квадрат, результирующая фигура будет иметь те же пропорции, что и исходный прямоугольник.
Таким образом, у вас остался еще один золотой прямоугольник меньшего размера. Продолжая этот шаблон, вы получите диаграмму золотого сечения. Точно так же вы можете просто добавить квадрат рядом с золотым прямоугольником с длиной, равной высоте прямоугольника, и вы добьетесь того же эффекта.
Проведя дугу окружности в каждом квадрате, мы получим Золотую Спираль (также известную как Спираль Дюрера). Другое естественное явление вытекает из самого отношения.
Золотое сечение, как и правило третей, можно использовать для создания красивых форм и сильной композиции. Это правило действует в архитектуре, дизайне и искусстве. Астроном 17-го века Иоганн Кеплер назвал золотое сечение «драгоценным камнем». Мы думаем, что астроном XVII века был прав, это бесценный инструмент.
Греческое происхождение золотого сечения
Известный греческий математик, которого называют «основателем геометрии», Евклид впервые упоминает это конкретное соотношение в своей работе «Элементы». или делящее) свойство этого иррационального числа.
Источник: Unsplash Photo, обработано в Vectornator.
Но только 2000 лет спустя немецкий математик Мартин Ом присвоил ему «золотую» характеристику. И только в 20 веке греческая буква фи была фактически принята американским математиком Марком Барром в качестве символа золотого сечения.
Барр выбрал именно эту букву, чтобы почтить память греческого скульптора Фидия, который, по признанию ряда искусствоведов, использовал золотое сечение во многих своих работах. Альтернативное обозначение — «тау», аббревиатура греческого слова «том», что означает «резать». И это ссылка на «разделяющую» приличность, упомянутую выше.
Греки тоже заметили красоту этого соотношения. Они поняли, что «божественная пропорция» обеспечивает наиболее эстетически приятную композицию. Это понятие было дополнено в эпоху Возрождения работами известного итальянского математика Леонардо да Винчи.
Он проиллюстрировал известную книгу «De divina ratione» («Божественная пропорция»), написанную Лукой Пачоли, монахом-францисканцем. В этой книге Пачоли пишет о математической взаимосвязи и художественной пропорции Золотого сечения и знаменитого Витрувианского человека Леонардо да Винчи, чтобы проиллюстрировать, как даже человеческое тело соблюдает золотое сечение.
Но работа Леонардо да Винчи не единственный пример. Золотая пропорция встречается во многих других контекстах. Хотя он получил свою известность в 16 веке, он использовался (сознательно или нет) задолго до этого. Возьмем, к примеру, Великую пирамиду в Гизе.
Соотношение его длины и высоты соответствует золотому сечению. Его гармоничные пропорции также создают так называемый Золотой треугольник (также известный как равносторонний треугольник или равнобедренный треугольник). Хотя это не доказано, некоторые утверждают, что греческая архитектура была построена с использованием числа фи, включая Парфенон.
Фото Маркуса Списке на Unsplash.
Как вы используете золотое сечение в дизайне?
Это краткое пособие по математике, конечно, бесполезно, если вы не сможете успешно применять его в своей работе по графическому дизайну. Причина, по которой вы хотите применить это соотношение в своей работе, сводится к общей эстетике, которую вы хотите достичь.
Это соотношение позволяет создать ощущение естественной красоты, используя природную гармонию и пропорции окружающего мира. Даже наши лица следуют этому же соотношению. Нас настолько притягивает это соотношение, что благодаря нашей эволюции человеческое восприятие естественным образом склонно желать вещей, подсознательно демонстрирующих эту пропорцию Золотого сечения. Анализ некоторых из самых желанных людей в шоу-бизнесе показал, что пропорции лица, наиболее близкие к этому соотношению, оцениваются выше по внешнему виду среди зрителей!
Логотип Pepsi.
Когда дело доходит до драки, это соотношение дает базовые знания, которые вам необходимо знать при создании красивой композиции. Потому что это одна из ключевых целей дизайнера, верно? Для создания четких и понятных макетов, сбалансированных страниц и плавного дизайна иллюстраций.
Использование этих принципов естественным образом приведет к гораздо более целостному дизайну. Или, если вы думаете об этом с точки зрения UX, это приводит к лучшему опыту для ваших пользователей.
Золотую спираль можно использовать с помощью нескольких инструментов в вашем дизайне, таких как сетки, линейки интервалов, столбцы и желоба. Если вы иллюстрируете, попробуйте изучить фигуры известных природных элементов, которые представляют собой последовательность Фибоначчи, таких как волны, рога, сосновые шишки или даже форму нашей галактики.
Если вы научитесь ею пользоваться, Золотая спираль может выглядеть в вашей работе особенно изящно, элегантно и даже драматично; поскольку его путь переносит взгляд зрителя на важные части вашей графики.
В частности, вот несколько способов, которыми вы можете использовать пропорцию Золотого сечения и Золотую спираль в своих интересах.
1 — Типографика и общая иерархия дизайна
На первый взгляд может показаться, что типографика и математика никак не связаны друг с другом. Ведь типографика состоит из букв, а математика — из цифр. Несколько противоположны друг другу.
Но дело в том, что типографика — это сочетание художественных форм букв и рациональных пропорций. Красивое сочетание формы и функциональности. Когда пропорции вашей типографики сбалансированы, вы действительно можете заставить ее петь в гармонии с вашим дизайном.
Вам необходимо учитывать три параметра текста: размер шрифта, высоту строки и ширину строки. Вместе эти измерения, которые мы воспринимаем как по горизонтали, так и по вертикали, отвечают за то, как мы воспринимаем типографику. Между всеми тремя существуют особые отношения.
Точнее, если ваша строка текста увеличивается в ширину, высота между строками также должна увеличиваться, чтобы улучшить ее читаемость. И как называется эта связь? Соотношение.
Если вы используете любое соотношение, почему бы не сделать его золотым? Снова и снова было доказано, что он улучшает эстетику всего, к чему прикасается.
Это соотношение может помочь вам определить размеры заголовков, основного текста и вспомогательного текста в дизайне.
Например, если ваш основной текст имеет размер 14 пикселей. Умножьте это на 1,618, и вы получите 22,652. Это означает, что ваш текст заголовка должен быть примерно 22px/23px в соответствии с соотношением, чтобы естественным образом сбалансировать текст в теле ниже. Вы даже можете использовать противоположный метод, чтобы определить размер основного текста, если вы зафиксировали размер заголовка.
2 — Редактирование и изменение размера изображений
Хотя легко понять, от какого пробела нужно избавиться при кадрировании и изменении размера ваших изображений, не забывайте, что впоследствии это потребует балансировки.
Обрезка во многом зависит от композиции вашего изображения. Сначала вам нужно подумать о некоторых ключевых вещах. Что является предметом визуального? Какие еще элементы вы можете включить в сцену? Есть ли на изображении линии или кривые, которые естественным образом появляются на изображении? Каким должен быть окончательный размер вашего холста?
Как только вы узнаете все ответы, у вас появится еще один вопрос. Вы хотите использовать фи-сетку или золотую спираль?
Phi Grid — это способ рассмотрения размерных отношений между элементами фотографии. Это похоже на правило третей, но не так просто. Вы не делите кадр на 3 равных сегмента.
Вместо этого сетка имеет соотношение 1:0,618:1, так как центральные линии расположены ближе друг к другу. Линии фи-решетки создают визуально приятные пропорции, которые люди почти автоматически воспринимают как красивые. Если вы решите обрезать с помощью Phi Grid, ваш объект будет расположен близко к центру изображения.
Со спиралью Фибоначчи структура вашей композиции совершенно другая. Если вы представите наложение спирали поверх вашего изображения, область с наибольшим количеством деталей будет находиться в самом маленьком прямоугольнике катушки. Но это не обязательно должно быть в углу. Это может быть где угодно в вашей композиции. Некоторые говорят, что лицо Моны Лизы также находится в этой важной области.
3 — Макет в дизайне пользовательского интерфейса
Использование этого соотношения также может помочь в разработке естественно привлекательного и успокаивающего пользовательского интерфейса, правильно привлекая внимание к важным вещам.
Кроме того, использование золотого сечения в ваших дизайнерских работах проще, чем вы думаете. Поскольку дизайн пользовательского интерфейса основан на логической композиции, вы можете использовать формулу в качестве инструмента для создания столбцов и пропорциональных макетов.
Предположим, вы хотите создать макет с боковой панелью шириной 1080 пикселей. Чтобы рассчитать ширину основного столбца, просто разделите 1080 пикселей на 1,618. Это создаст основной столбец шириной 667 пикселей. Вы хотите повторить тот же процесс для основного столбца, чтобы получить ширину боковой панели. Разделите 667 на 1,618, чтобы получить 412,5 пикселей.
Golden Canon Grid — Adrián Somoza для Bont™ в халяве
Но, конечно, эти размеры не всегда должны использоваться. Формула Золотого сечения просто дает рекомендации по наиболее приятному балансу между областями вашего дизайна.
На самом деле, теперь, когда вы это понимаете, вы можете увидеть этот хак в действии на многих веб-сайтах.
4 — Дизайн логотипа
Twitter, Pepsi и Apple. Эти бренды и их логотипы в значительной степени вдохновлены золотым сечением, и некоторые использовали это соотношение во всем дизайне своего логотипа!
Любовь Apple к золотому сечению хорошо известна среди ее поклонников и в мире дизайна. Многие из их логотипов приложений вдохновлены этим соотношением, и логотип iCloud является ярким примером этого.
Отличным способом использования золотого сечения является определение высоты и ширины логотипа, а также пропорций внутренних элементов во всем дизайне.
Золотой прямоугольник также можно использовать для размещения объектов и определения наилучшей композиции, наиболее приятной для глаз. Используя его простую формулу, вы убедитесь, что все части вашего логотипа расположены гармонично.
Или разобрать Золотую Спираль на части! Вы можете использовать круги, которые определяют Золотую спираль, в качестве основы вашего логотипа.
Итак, в следующий раз, когда вы будете стремиться к прорыву в логотипе, почему бы не попробовать это удобное соотношение, встречающееся в природе? Это откроет двери для удивительных дизайнерских впечатлений и обострит вашу дизайнерскую чувствительность, чтобы применять простые дроби и пропорции в вашем творческом процессе.
5 — Архитектура
Золотое сечение применяется в архитектуре так же, как и в искусстве, и математическая связь между известными архитектурными проектами и золотым сечением неотразима.
Источник изображения: Кимон Мариц
Древнегреческая архитектура часто использовала золотое сечение для проектирования и определения формы великих архитектурных подвигов, которыми славятся греки. Это соотношение определяет решающую взаимосвязь между архитектурными проектами и математикой.
Используя пропорции золотого сечения, архитекторы могут найти соответствующие пропорции относительно высоты и ширины зданий. В результате получается здание, которое является архитектурно прочным и эстетичным.
Этот принцип можно также применить к домашнему декору и дизайну интерьера. Например, золотое сечение окраски комнаты требует, чтобы 60 процентов вашей комнаты были окрашены в один оттенок, 30 процентов — во второй оттенок и 10 процентов — в третий оттенок.
6 — Полиграфический дизайн
Золотое сечение также может улучшить художественную композицию полиграфического дизайна. Все, от дизайна журнала и книги до маркетинговых материалов, может использовать золотое соотношение сторон для создания сильной композиции.
Существует средний коэффициент, который используют большинство дизайнеров при создании своих проектов. Однако настоящие художники будут учитывать пропорции поля по отношению к золотому сечению. Дизайнеры журналов, например, должны идеально сочетать изображение центрального прямоугольника с краями обложки.
Источник изображения: Сара Дорвейлер
Независимо от того, разрабатываете ли вы искусство для своего университетского издательства или для следующего великого романиста 21-го века, вам необходимо учитывать это математическое соотношение. Важнейшие отношения между пространством и контентом трудно идеально сбалансировать.
Золотое сечение может использоваться дизайнерами для определения надлежащего размера и расположения каждого элемента для создания обложки с идеальными пропорциями. Выравнивание угловых прямоугольников с угловыми прямоугольниками других изображений и обеспечение надлежащего интервала — наиболее положительное решение этой задачи.
7 — Фотография
Художественная композиция имеет решающее значение для любого изображения, картины или иллюстрации. Независимо от формата, золотое сечение можно использовать для улучшения ваших пропорций и обеспечения того, чтобы ваше изображение и пропорции полей были приятны для глаз.
Используя это математическое соотношение, вы можете незаметно привлечь внимание зрителя к тому месту на фотографии, которое вам нужно. Для этого разделите изображение на три части и используйте эти линии для настройки фотографии. Звучит знакомо? Это потому, что это также известно как правило третей.
Источник изображения: Ameya Sawant
Золотое сечение фотографии равно 1:0,618:1. Это означает, что ширина первого столбца и третьего столбца будет равна 1, а ширина центрального столбца будет равна 0,618.