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

Хорошо

Золотое сечение: волшебная пропорция или кошмар дизайнера

Есть такая категория популярных теорий, которая находит применение во всех областях и может объяснить что угодно. Это могут быть относительно новые гипотезы или уже состоявшиеся — как золотое сечение. Последние существуют довольно давно и периодически всплывают, чтобы найти себе новую нишу. В нашем случае — UI-дизайн.

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

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

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

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

Золотым сечением называют соотношение разных по размеру элементов, считающееся наиболее эстетически привлекательным. Математически оно равняется 1,618, обозначается греческой буквой φ, а рассчитывается так.

Его часто показывают в форме спирали, которая получается при построении золотого прямоугольника — смотрите на рисунке ниже. Считается, что эта форма присутствует чуть ли не во всем, что есть на Земле. И именно за счет натуральности и естественности она так приятна нашему глазу.

Если покрутить спираль золотого сечения, то ее действительно можно найти много где. Копируйте и поворачивайте ее на 40°, и вы увидите это.

А если повернуть ее под углом 20° и отразить по горизонтали, это.

В искусстве

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

Мы не можем знать, специально ли применяли пропорцию древние греки и египтяне, но вот начиная с Леонардо да Винчи люди точно использовали золотое сечение осознанно. Именно «Витрувианскому человеку» да Винчи приписывают чудесные пропорции, хотя сам гений строил так чуть ли не все свои картины.

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

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

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

В UI-дизайне

Согласно статье UX Planet, дизайнеры часто используют золотое сечение, так как их преподаватели искусства в свое время объясняли на его примере, как работать с пропорциями. Ну а дальше все пошло по накатанной: композиция, иконки, логотипы. Вот что нам предлагают использовать в UI.

Контент и баланс. Если страница предполагает много разного контента, золотое сечение подойдет для объединения разных частей в композицию. Помните редизайн твиттера в 2010?

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

Типографика. Рассчитывать размеры подзаголовков и подписей тоже можно с помощью соотношения φ. Например, разделите на 1,681 размер заголовка — и получите размер подзаголовка.

Подход достаточно популярен среди дизайнеров — например, сервис Modular Scale позволяет выбрать шаг для шрифта по золотому сечению (нужно в Ratio выбрать пункт Golden Section).

Негативное пространство. Пропорция золотого сечения подойдет и для того, чтобы определить, сколько оставлять свободного пространства.

Другое мнение

Математики из Стэнфордского университета во главе с Китом Девлином доказывают, что золотое сечение — просто псевдонаучная теория. На самом деле, люди даже не замечают его.

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

Таким образом, идеальная пропорция не то чтобы нравится всем. И далеко не все дизайнеры применяют золотое сечение на практике.

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

— Алексей, арт-директор

И как быть?

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

Ладно, у наследия прошлых веков есть фора в виде безусловного уважения к старине. Как быть с UI-дизайном?

Помнится, в современной истории уже были примеры, когда математики пытались «упорядочить» работу творческих специалистов. Google одно время проповедовал принципы DDD (Data Driven Design), компания хотела сделать все дизайнерские решения лишенными субъективизма. Только данные, только тесты и обоснованные решения. Дизайнер Дуглас Боумен написал историю о том, чем это обернулось: его, например, заставляли доказывать, почему он выбрал толщину линии в один пиксель, а не в два или три. В результате Google добился поголовной демотивации дизайн-отдела, парализовал в них желание предлагать смелые интерфейсные решения. Апофеозом всей истории стало то, что компания с серьезной миной тестировала, какой же оттенок синего (из 41!) лучше решает бизнес-задачи.

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

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

Будьте здоровы.