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

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

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

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

Коротко об идеальности

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

Если сложно и в нескольких словах описывать, то обратимся к материалу Interaction Design Foundation (IDF), в котором:

Каждое число в последовательности Фибоначчи это сумма двух чисел перед ним. Она (последовательность) начинается с 1, 1 (т. е. 1 + невидимый 0 = 1), и первые 10 чисел последовательности  выглядят так: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55. Она продолжается бесконечно.

Математически рассчитать соотношение можно по формуле: a/b = (a+b)/a =  phi = 1.618033987

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

Когда речь идет о применении концепции на практике, то она часто изображается с помощью спирали, кругов или треугольников. И это не «просто дизайнерская штучка». Золотое сечение есть в природе (раковины моллюсков Nautilus, окаменелых аммонитов), искусстве (Мона Лиза), архитектуре (Эйфелева башня, Торговый дом Эсдерс, Парфенон), а также дизайне интерьеров, предметов.

Веб-дизайн и золотое сечение

Когда дело доходит до применения золотых пропорций при работе над сайтами, существуют различные мнения:

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

Лучшее решение, как обычно, где-то там..., посередине. По всей вероятности ваш глазомер уже способен создавать конструкции и видеть те, что включают в себя  данную теорию. И это никак не может навредить в вашей работе, если вы сразу применяете правило. Иными словами, дизайнер заранее представляет себе, как на странице будут расположены элементы, колонки, надписи и прочее. Всё уже в мыслях выстраивается в идеальном порядке и виде (или приближенном к идеальному).

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

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

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

Шаблоны и инструменты

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

Phiculator – вводите любое число и получаете необходимый коэффициент золотого сечения.

Шаблоны золотого сечения – три изображения в формате AI (Adobe Illustrator) в виде сочетания прямоугольников, спиралей, кривых. Загружаются по клику на изображении в виде одного файла.

 

Golden Ratio Calculator – позволяет узнать идеальные пропорции трех величин.

Калькулятор золотого прямоугольника – вычисляет размеры прямоугольников по длине одной стороны. Золотой прямоугольник с большей стороной a и еще один со стороной b, образуют новый большой прямоугольник со стороной a+b. Это удобно для работы по сеткам.

Рекомендации

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

Используйте золотое сечение при создании базовой сетки веб-сайта для основной области контента и боковой панели. По данным W3Schools, самое распространенное разрешение браузеров на начало 2018 года (они фиксируют данные только в январе каждого года) составляет 1366 х 768 пикселей. Вот и применяйте золотое соотношение для областей контента шириной 846 пикселей и с боковой панелью шириной 520 пикселей. При этом высота (длина блока) неважна.

Кроме того:

  • при ширине в 1024 px, части будут иметь значения 633 px (контент) и 391 px (боковая колонка);
  • при ширине в 1000 px – 618 и 382 пикселей;
  • при ширине 960 px  – 593 px и 367 px.

Таким образом, логика проста и наглядна: правило золотого сечения это создание пропорций вида 3/2, 5/3, 3/8 и так далее. В частности, в веб-дизайне разделение на две неравные по ширине колонки в идеальном соотношении и должно быть высчитано по золотой формуле. Если же обратиться к процентам, то выглядеть это будет как 62/38%.

Используйте золотой прямоугольник, чтобы создать направляющую для интервалов в дизайне. У Prototypr.io есть такой совет: «используйте большие квадраты  8 и 13 для создания разметки. Используйте меньшие квадраты 1, 2 или 3, чтобы определить отступы и расстояние между контентом» на основе золотых прямоугольников.

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

Почему золотое сечение имеет значение

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

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

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

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

Завершение

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

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

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