Золотое Сечение в Дизайне (Правило + Принципы + Применение)

Содержание статьи

1. Правило золотого сечения
2. Спираль золотого сечения
3. Применение в дизайне

Понятие «золотое сечение», о котором многие слышат впервые, на самом деле известно с незапамятных времён. О нём упоминает ещё Евклид в своих «Началах», написанных примерно за 300 лет до н. э. Сегодня правило находит применение как в точных науках, так и в искусстве. Широко распространено золотое сечение в дизайне. Причём в различных его областях. Оформление интерьеров, ландшафтов садов и парков, а также интернет-сайтов и логотипов компаний выполняется в соответствии со строгими правилами.

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

Почему дизайнеры взяли на вооружение это правило? Чем ближе к идеалу пропорции каждого предмета и расположение предметов относительно друг друга, тем лучше воспринимает картину в целом – человеческий мозг. «Золотая пропорция» предполагает деление целого на 2 части, меньшую и большую. Меньшая относится к большей, а большая – к целому, как 0,618 к 1. Если обратиться к математике, можно дать более точное определение.

Золотое сечение (пропорция) – это соотношение величин b и a, a > b, при этом a/b = (a+b)/a. Число, равное отношению a/b, обозначается греческой буквой Φ в честь древнегреческого скульптора и архитектора Фидия. На практике Ф=1,618. Если обратиться к процентам, золотое сечение – это деление величины на две, которые соотносятся как 62% и 38%.

Исчерпывающее описание этому принципу дал Леонардо да Винчи. Известно, что представители различных сфер искусства, например, художники и музыканты, не ставя целью подогнать свои произведения под «золотую пропорцию», всё же инстинктивно её придерживались. Ведь именно так достигается гармония. Такую пропорцию именовали даже «божественной». Меньшая часть – Бог-Сын, большая – Бог-Отец, а целое – Дух Святой. Ещё один пример золотой пропорции представляет собой правило третей. Оно связано с особенностями зрительного восприятия человека. Если зритель смотрит на рисунок, который поделён на 9 равных фрагментов, он в первую очередь выделяет 4 точки, образованные в местах, где вертикальные линии пересекаются с горизонтальными.

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

Говоря о «золотой пропорции», нельзя не упомянуть и ряд (спираль) Фибоначчи. Математик Леонардо Пизанский (Фибоначчи) жил в эпоху средневековья. Он составил последовательность чисел 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144 и т. д. Сумма каждых 2 чисел, которые следуют друг за другом, равна третьему числу, идущему за ними. В качестве примера можно рассмотреть фаланги человеческих пальцев. А именно – соотношение 1-й фаланги ко 2-й и 3-й. В природе много примеров, заставляющих нас вспомнить о спирали Фибоначчи. Это ананасы и шишки, рога животных, раковины моллюсков.

Применение в дизайне

Повсеместно используется правило золотого сечения в дизайне интерьеров. Лёгкая асимметрия неожиданно дарит нам ощущение гармонии и покоя. Какое помещение можно назвать идеальным по форме? То, в котором ширина и длина соотносятся как 5 к 8, или 1 к 1,62. В помощь архитекторам Ле Корбюзье ещё в начале прошлого века разработал систему антропометрических пропорций. В основе её – фигура человека с идеальными пропорциями, с поднятой рукой. Изначально этой системой (ещё одно её название «модулор») пользовались при создании проектов многоквартирных домов.

Когда ещё только рассчитывается планировка квартиры, работа ведётся по принципу золотого сечения в дизайне. Зонирование территории осуществляется в соответствии с точками пересечения горизонтальных и вертикальных линий. Здесь можно поставить перегородки и ширмы, мебель или крупную бытовую технику. Если же это не типовая квартира, а дом, который вы строите, свой рост можно использовать как модуль. И в буквальном смысле слова подогнать пространство под себя. Расставляя мебель, можно руководствоваться теми же принципами. Так, диван должен занимать на более 2/3 стены, вдоль которой его поставили. Если рядом вы поместите журнальный столик – его длина не должна превышать 2/3 длины дивана. Принцип можно отнести к кровати. Рядом с постелью мы часто видим тумбочки. Их высота не должна быть больше 2/3 стены.

Чтобы в помещении вы испытывали чувство покоя, тёмные вещи лучше разместить внизу, ближе к полу, в светлые – на самом верху стены. Учитывайте размеры и цвет  картин и фотографий, которые вешаете на стену. Композиционно их следует размещать правильно – как в отношении стены, так и соотносительно друг к другу. Правило золотого сечения работает и тогда, когда речь идёт о выборе цветов. Лучше всего, если в помещении около 68% площади окрашено в один цвет, а оставшиеся 38% – в другой, второстепенный. Это касается выбора обоев и краски. Цветовым акцентам можно уделить не более 10%. Научившись применять на практике «золотую пропорцию», вы сможете стать настоящим профессионалом в области дизайна.

*Фотографии, используемые в статье, взяты из свободного доступа в интернете и используются на сайте в учебно-образовательных целях.

Как использовать золотое сечение в дизайне интерьера: 20 примеров с фото

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

Золотое сечение ассоциируется с античной архитектурой, полотнами Леонардо да Винчи, работами Ле Корбюзье. Однако оно широко применяется и в современном дизайне. Даже размер прямоугольника банковской карточки подчиняется золотой пропорции. Возможно, именно поэтому ее так приятно держать в руках! Используется золотое сечение в дизайне интерьера квартиры, дома или коммерческого объекта. Работа требует точных расчетов, но зато результат превосходит все ожидания. При сохранении золотых пропорций даже недорогая мебель и декор смотрятся очень элегантно.

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

Золотое сечение: основные понятия

Золотое сечение – это математическое понятие, введенное еще в античные времена. Согласно определению Евклида, золотая пропорция – это соотношение величин. При котором большее число относится к меньшему так же, как сумма этих чисел к большему из них. Проще говоря, если большую величину разделить на меньшее, то получится число Φ, примерно равное 1,6180.

Чаще всего золотое сечение используется в архитектуре. Классическими примерами считаются античный Парфенон (Афины), средневековый университет Саламанки (Испания). Современная архитектура – музей Соломона Гуггенхайма, спроектированный архитектором Фрэнком Ллойдом Райтом в виде опрокинутой спирали, а также многочисленные работы Ле Корбюзье (интерьер его виллы Ля Рош – на фото). Последний использовал золотое сечение в дизайне мебели – например, своего знаменитого шезлонга. Интересно, что форма и размер смартфонов – тоже результат расчета божественной пропорции.

Формула золотого сечения в дизайне интерьера неразрывно связана с именем математика Леонардо Пизанского, жившего в Италии на рубеже XII-XIII веков. Он стал известен под именем Фибоначчи. Одним из его важнейших научных достижений стала выведенная им последовательность, в которой каждое последующие число равно сумме двух своих предшественников: 1, 1=1+0, 2= 1+1, 3=2+1, 5, 8 и т.д. В этой последовательности наблюдается еще одна закономерность. Здесь каждое последующее число больше предыдущего примерно в 1,62 раз. Это можно увидеть на примере: 13:8=1,625. Или 21:13=1,615. Таким образом, полученное значение очень близко к числу Φ, обозначающему золотое сечение.

Эту зависимость можно описать и иначе: каждое число меньше последующего в 0,62 раз. Например, 8:13= 0,616, 13:21= 0,619. Оба этих варианта используются для расчета.

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

 Приведем в пример 4 лайфхака, которые помогут прийти к золотой пропорции в нестандартном помещении:

• Если дверной проем (дверь) находятся в неподходящем месте и нарушает целостность интерьера, то ее можно замаскировать! Например дверь-невидимка отлично справится с этой задачей! Ее можно покрасить в цвет стен, оклеить обоями или холдингом – продолжающим вашу основную композицию. Таким образом мы визуально выровним помещение или «сделаем» необходимую геометрию стены. 
• Высокие потолки можно «опустить» с помощью натяжных или покрасив в цвет более темный чем стены. А если эти варианты не подходят и высоту хочется оставить, но все же уйти от ощущения «колодца», то необходимо определить для себя идеальную высоту потолка, очертить линию и до нее сделать отделку стен. Все что выше этой линии – будет в цвет потолка. Очень хорошо это раскрывается в классических интерьерах, где стильно обыгрывается холдингами и карнизами. 
• Низкие потолки можно визуально увеличить покрасив их в цвет стен или с помощью натяжного глянцевого потолка. 
• Если пространство узкое его можно уравновесить или «расширить», сделав на противоположной длинной стене зеркальное панно или фотообои с перспективой.

Определение золотого сечения

Законы гармонии в интерьере

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

Для начала нужно выбрать условную единицу, к которой привязывают все остальные показатели. Ее называют модулем. В качестве модуля рекомендуется использовать собственный рост или приближенное к нему число. Более простой вариант – отталкиваться от размеров конкретной комнаты.

Например, ширина помещения составляет 3 м. Следует воспользоваться числами Фибоначчи и рассчитать последовательность. Ширина комнаты в сантиметрах составляет 300 единиц. Если умножить это число на 0,618, то получится 185,4 см. Это число снова умножают на 0,618 – получают 114,57 см и т.д. Это – так называемые золотые отрезки, которые применяются для разных целей.

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

Самое простое использование золотого сечения в дизайне – это расстановка мебели с учетом полученных выше отрезков

Зонирование и композиция

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

Точные расчеты достаточно сложны. Для зонирования и расстановки мебели можно использовать приближенную пропорцию 2:3. Пространство делят на две части. Площадь большей занимает 2/3 комнаты. Это основная функциональная зона, в которой расставляют мебель. Оставшаяся 1/3 часть площади служит для декоративных или вторичных функций.

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

Золотая пропорция учитывается и при выборе мебели – считается соотношение между высотой разных предметов

Золотое сечение и цветовое оформление

Использование золотого сечения в дизайне комнаты не ограничивается расстановкой мебели. Также пропорция 2:3 используется при выборе цветов. Так, на долю доминирующего оттенка должно приходиться не менее 60% в палитре. Сопровождающий оттенок – это чуть более 30%. Остальное – это аккомпанирующий цвет. При этом соотношение распространяется как на контрастные тона, так и на близкие друг к другу оттенки. Делать более мягкий переход или использовать четкие границы – это уже выбор владельца квартиры.

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

Золотая пропорция

Золотая пропорция: советы и рекомендации

Если владельца жилья интересует золотое сечение в дизайне, примеры часто можно найти в журналах, посвященных дому и интерьеру.

Некоторые дизайнеры советуют использовать его для отделки стен. Если владелец хочет использовать два вида материала (например, штукатурку и декоративный кирпич или обои, и деревянные панели), то 2/3 должно приходиться на основной материал и 1/3 – на дополнительный.

Использование золотой пропорции ни в коем случае не означает идеальной симметрии. Наоборот, благодаря соотношению 2:3 симметрия часто будет нарушаться. Как на этом фото – в левой части комнаты находится большая часть предметов, люстра висит не по центру помещения, а также с некоторым сдвигом в сторону 2/3 частей.

При этом большая часть комнаты должна быть хорошо освещенной. Поэтому в тех самых 2/3 частях пространства должна быть сосредоточена большая часть светильников. Это и торшеры, и настольные лампы, и бра.

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

Золотая пропорция учитывается и при выборе мебели – считается соотношение между высотой разных предметов. Производители гарнитуров обычно его учитывают в дизайне своей продукции. Определяют пропорции, ориентируясь на размеры самых крупных предметов – дивана, шкафа-купе, мебельной стенки. Расположенные рядом два элемента обстановки должны соответствовать друг другу как числа из последовательности Фибоначчи: если высота комода для обуви в прихожей составляет 80-90 см, то высота расположения вешалки – 1,5 м. 

Но этот прием должен учитывать и предметы декора. Например, для того, чтобы комод в спальне не казался слишком громоздким, его высота не должна превышать 1/3 от стандартной высоты потолка в 2,6 м, то есть примерно 90 см. Если потолки в комнате выше – на комод нужно ставить светильники или вазу, чтобы сгладить диспропорции по высоте.

Для потолочных светильников тоже важно определить высоту в соответствии с золотой пропорцией. Их нижние точки не должны опускаться ниже 5/8 высоты комнаты. То есть в помещении со стандартной высотой потолков – не ниже 1,63 м.

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

 Находите еще больше полезных статей в нашем блоге.

Золотое сечение — что это такое и как его использовать в дизайне

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

В этом красота дизайна, верно? Каждый может интерпретировать его по-разному.

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

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

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

Что такое золотое сечение?

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

Последовательность Фибоначчи — это сумма двух чисел, стоящих перед ней. Он идет: 0, 1, 1, 2, 3, 5, 8, 13, 21 и так далее до бесконечности. На основе этого шаблона греки разработали золотое сечение, чтобы лучше выразить разницу между любыми двумя числами в последовательности.

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

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

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

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

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

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

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

Вот четыре способа использования золотого сечения в дизайне:

1. Типография и определение иерархии

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

Допустим, ваш основной текст имеет размер 12 пикселей. Если умножить 12 на 1,618, получится 19. .416, что означает, что размер текста заголовка 19px или 20px будет соответствовать золотому сечению и уравновешивать размер основного шрифта 12px.

Если вы хотите выяснить, насколько большим должен быть размер вашего основного текста, вы можете сделать наоборот. Если ваш текст заголовка имеет размер 25 пикселей, вы можете разделить его на 1,618, чтобы найти основной текст (15 или 16 пикселей).

2. Обрезка и изменение размера изображений

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

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

3. Макет

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

4. Разработка логотипа

Если вы разрабатываете новый логотип и чувствуете, что застряли, обратитесь к золотому сечению, чтобы помочь вам набросать пропорции и формы. Многие популярные логотипы следуют золотому сечению, например, Twitter, Apple и Pepsi.

Фото: Мостафа Амин и Студия брендологии

Дизайнер Кази Мохаммед Эрфан даже поставил перед собой задачу создать 25 новых логотипов, полностью основанных на золотом сечении. Результат? Простые, сбалансированные и красивые иконки.

Фото: Кази Мохаммед Эрфан

Инструменты, которые помогут вам использовать золотое сечение

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

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

• Калькулятор золотого сечения: Вычислите более короткую сторону, более длинную сторону и общую длину двух сторон, чтобы вычислить золотое сечение.
• GoldenRATIO: Созданное для дизайнеров и разработчиков, это приложение позволяет легко создавать веб-сайты, интерфейсы, макеты и многое другое в соответствии с золотым сечением. Он включает в себя встроенный калькулятор с визуальной обратной связью и функции для сохранения положения экрана и настроек, поэтому вам не нужно менять золотое сечение для каждой задачи.
• Калькулятор типографики золотого сечения: Найдите идеальную типографику для своего веб-сайта, указав размер и ширину шрифта. Вы можете оптимизировать на основе размера шрифта, высоты строки, ширины и количества символов в строке.
• PhiMatrix : Это программное обеспечение для проектирования и анализа Золотого сечения поставляется с настраиваемыми сетками и шаблонами, которые можно накладывать на любое изображение. Его можно использовать для дизайна и композиции, дизайна продукта, разработки логотипа и многого другого.
• Ресурс эскиза золотого сечения : Загрузите бесплатный файл эскиза золотой спирали, чтобы помочь с композицией изображения и макета.

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

Как только вы узнаете, что искать, вы начнете замечать золотое сечение повсюду. (Не верите? Посмотрите на свои руки. Даже ваши пальцы следуют золотому сечению.) Человеческий глаз привык видеть это магическое число, и мы подсознательно реагируем на него положительно.

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

Смотрите прямо сейчас.

Эмили Эспозито

Эмили писала для некоторых ведущих технологических компаний, охватывая все, от творческого копирайтинга до UX-дизайна. Когда она не пишет, она путешествует по миру (следующая остановка: Япония!), варит чайный гриб и катается на велосипеде по северо-западу Тихого океана.

Золотое сечение: как и зачем его использовать в дизайне | Мэтт Рэй | Thinking Design

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

Теория золотого сечения исторически восходит к временам Пи. Соотношение использовалось на протяжении всей истории философами, архитекторами и дизайнерами для создания привлекательных, приятных дизайнов и конструкций. Некоторыми историческими примерами являются Парфенон в Греции и пирамиды в Египте, где архитекторы использовали это соотношение для создания баланса между структурными элементами. Причиной популярности золотого сечения является вера в то, что оно естественно и создает эстетически приятный баланс для зрителя.

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

Само соотношение определяется как 1:1,618033987 и обозначается греческим символом Phi . Это означает, что если длина A равна 100 пикселям, то длина B будет равна 161,80 пикселям. Это может относиться к фигурам или объектам, расположенным рядом друг с другом (сравнивая их ширину или длину), или к формированию одной фигуры, такой как прямоугольник (т.е. длина = 1,618 x ширина).

Формула для расчета отношения: A/B = (A+B)/A = 1,6180033987, хотя на практике это число часто округляется, чтобы с ним было легче работать. В этих случаях можно использовать 1:1,618 или 1:1,62.

Формула золотого сечения показывает, что длина A в 1,618 раз больше длины B. Вы можете проверить соответствие двух длин соотношению, разделив их длины.

Еще один термин, связанный с расчетом золотого сечения, который вы услышите, — это последовательность Фибоначчи, определенная математиком Фибоначчи. Эта последовательность утверждает, что каждое число в последовательности является суммой двух значений, которые были до него. Например, 1 + 1 = 2, поэтому первые три числа в последовательности — это 1, 1, 2, а следующие — 3 (1 + 2 = 3). Это продолжается, создавая первые 10 цифр 1,1,2,3,5,8,13,21,34,55.

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

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

Хотя вы можете подумать, что это просто причудливая формула, разработанная математиками, она часто встречается в природе, в первую очередь в спирали. Его можно увидеть в растениях, раковине Наутилуса и даже в облачных образованиях во время ураганов. Когда вы копаетесь в этом, золотое сечение окружает нас повсюду, как созданное руками человека, так и естественное. Взгляните на логотип National Geographic — это пропорциональный прямоугольник, соответствующий золотому сечению.

Использовать золотое сечение в своих дизайнерских работах проще, чем может показаться. Поскольку все дело в соотношении, вы можете использовать формулу для создания столбцов и пропорциональных макетов. Например, если вы хотите создать макет с боковой панелью и основной областью контента шириной 960 пикселей, вы должны рассчитать ширину основного столбца как 960 пикселей / 1,618. Это создаст ширину 593px. Вы должны сделать то же самое с шириной основного столбца, чтобы получить ширину боковой панели (593 пикселей / 1,618), чтобы получить 367 пикселей. Конечно, это не учитывает поля или отступы, и вы можете захотеть округлить эти измерения, чтобы они были четными, или соответствовать кратному числу в зависимости от вашей системы. Тем не менее, это дает представление о наиболее приятном балансе между этими столбцами.

Больше примеров золотого сечения в дизайне веб-сайтов. Хижина дизайна имиджевого кредита.

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

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

Отличный и простой способ начать работу — использовать шаблоны и примеры каркасов, в которых используется соотношение для создания макетов и размещения элементов. Это отличная отправная точка для начала проектирования, так как вы можете увидеть, как это работает на практике.
Существует также множество калькуляторов для ввода измерений и расчета соответствующих размеров на основе отношения. Если вы используете такие приложения, как Adobe XD, для своей дизайнерской работы, вы можете загрузить такие шаблоны, как Golden Grid от Джона Варгаса. Что бы вы ни создавали, надеюсь, это поможет вам создавать потрясающие сбалансированные макеты.

Посетите XD Ideas , чтобы узнать больше уникальных идей и подлинных точек зрения на практику, бизнес и влияние дизайна.

Примите участие в бесплатном Daily Creative Challenge , чтобы отточить свои навыки дизайна пользовательского интерфейса/UX

Узнайте о Adobe XD , мощной платформе для командного дизайна, мобильных приложений, совместной работы над созданием веб-сайтов и мобильных приложений. голосовые интерфейсы и многое другое.