Золотое сечение в дизайне

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

Золотое сечение – это то, о чем должен знать каждый дизайнер. Мы объясним, что это такое, и как вы можете его использовать. 

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

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

Обратите внимание

Тесно связанная с Последовательностью Фибоначи (Fibonacci Sequence), которую вы, возможно, помните из уроков математики или романа Дэна Брауна “Код Да Винчи”, Золотое Сечение описывает идеально симметричное взаимоотношение между двумя пропорциями.

Приблизительно равное соотношению 1 : 1.61, Золотое Сечение может быть иллюститровано как Золотой Прямоугольник: большой прямоугольник, включающий квадрат (в котором стороны равны длине самой короткой стороны прямоугольника) и прямоугольник поменьше. 

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

Золотое Сечение в действии

Считается, что Золотое Сечение используется уже около 4000 лет в искусстве и дизайне. Однако, многие люди соглашаются, что при строительстве Египетских Пирамид также использовался этот принцип.

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

Греческая архитектура

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

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

Тайная вечеря

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

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

Золотое сечение в природе

Существует множество примеров Золотого Сечения в природе – их вы можете обнаружить вокруг себя. Цветы, морские раковины, ананасы и даже пчелиные соты демонстрируют одинаковое соотношение.

Как рассчитать Золотое Сечение

Рассчет Золотого Сечения достаточно прост, и начинается с простого квадрата:

01. Нарисуйте квадрат

Он образует длину короткой стороны прямоугольника.

02. Разделите квадрат

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

03. Проведите диагональ

В одном из прямоугольников проведиде линию из одного угла в противоположный.

04. Поверните

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

05. Создайте новый прямоугольник

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

Как использовать Золотое Сечение

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

Быстрый способ

Если вы когда-нибудь сталкивались с “Правилом третей”, то вам будет знакома идея разделения пространства на равные трети по вертикали и горизонтали, при этом места пересечения линий создают естественные точки для объектов.

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

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

Полная реализация

Если вы хотите реализовать Золотое Сечение в вашем дизайне в полной мере, то просто расположите основной контент и сайдбар (в веб дизайне) в соотношении равном 1 : 1.61.

Можно округлить значения в меньшую или большую стороны: если контент-зона равна 640px, а сайдбар 400px, то эта разметка вполне подойдет под Золотое Сечение.

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

Полезные инструменты

Вот несколько инструментов, которые помогут вам в использовании Золотого Сечения в дизайне и создании пропорциональных проектов.

01. goldenRATIO

GoldenRATIO – это приложение для создания дизайна веб сайтов, интерфейсов и шаблонов, подходящих под Золотое Сечение. Доступно в Mac App Store за 2,99$. Включает визуальный калькулятор Золотого Сечения.

Так же в приложении есть функция “Избранное”, которое сохраняет настройки для повторяющихся задач и “Click-thru” мод, позволяющий сворачивать приложение в Photoshop.

02. Golden Ratio Typography Calculator

Этот калькулятор Золотого Сечения от Pearsonified  помогает в создании идеальной типографики для вашего сайта. Введите размер шрифта, ширину контейнера в поле, и нажмите кнопку Set my type! Если вам нужно оптимизировать количество букв в строчке, вы можете дополнительно ввести значение CPL.

03. Phicalculator

Это простое, полезное и бесплатное приложение доступно для Mac и PC. Введите любое число, и приложение вычислит вторую цифру в соответствии с приципом Золотого Сечения.

04. Atrise Golden Section

Это приложение  позволяет проектировать с золотыми пропорциями, экономя кучу времени на вычислениях.

Вы можете менять формы и размеры, фокусируясь на работе над своим проектом. Постоянная лицензия стоит 49$, но вы можете скачать бесплатную версию на месяц.

Обучение Золтому Сечению

Вот несколько полезных туториалов по Золотому Сечению (английский язык):

01. Graphic design, illustration and art

В этом туториале для Digital Arts Роберто Маррас (Roberto Marras) показывает, как использовать Золотое Сечение в художественной работе.

02. Web design

Туториал от Tuts+, рассказывающий, как использовать золотые принципы в веб дизайн проектах.

03. More web design

Туториал от Smashing Magazine, рассказывающий о пропорциях и правиле третей.

Перевод статьи The designer’s guide to the Golden Ratio

Автор оригинального текста Creative Bloq Staff

Источник: http://wordyblend.com/zolotoe-sechenie-v-dizaine/

Золотое сечение: Самый раздутый миф в дизайне

В мире искусства, архитектуры и дизайна золотое сечение завоевало потрясающую репутацию. Великие гении, включая Корбюзье и Сальвадора Дали, использовали эту пропорцию в своих работах. Парфенон, Пирамиды в Гизе, полотна Микелянджело, Мона Лиза и даже логотип 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

На самом деле, вы не очень-то и предпочитаете золотое сечение

В реальном мире людям не особо необходимо золотое сечение.

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

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

Обратите внимание

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

Читайте также:  Воплощаем поп-арт в дизайне квартир +50 фото в интерьере

Эксперименты Девлина не единственные в исследовании золотого сечение. Исследование, проведенное специалистами Школы бизнеса имени Уолтера Хааса в Беркли, показало, что в среднем потребители предпочитают прямоугольники, пропорция которых между 1.414 и 1.732. Золотое сечение входит в этот диапазон, но не является явным “любимчиком” публики.

Многие современные дизайнеры не считают его полезным

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

Ричард Мейер, легендарный архитектор, автор Центра Гетти и Музея современного искусства в Барселоне, отмечает, что в начале своей карьеры у него был архитекторский треугольник, который соответствовал золотому сечению, но он никогда не создавал свои здания по золотому сечению. “В мире такое множество других чисел и формул, которые важнее при проектировании зданий”, – говорит Мейер, ссылаясь на формулы по расчету максимальных допустимых размеров пространств зданий, или на формулы расчета структурной нагрузки.

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

Я могу представить, что эту пропорцию можно встроить в разные системы в качестве ‘изюминки’, но мне сложно вообразить, чтобы весь дизайн был построен именно на золотом сечении, как это случалось в истории… это слишком уж упрощенно”.

Джорджия Лупи из Accurat, итальянской дизайн-фирмы, говорит, что в лучшем случае золотое сечение так же важно для дизайнеров, как и любое другое композиционное правило, например, правило третей: отличное распространенное правило, которое хорошие дизайнеры могут с таким же успехом проигнорировать. “Я не знаю, сколько дизайнеров на практике специально внедряют золотое сечение в свои работы. Лично я никогда не работала с этой пропорцией в своих проектах”.

Из всех опрошенных дизайнеров, индустриальный дизайнер Ив Бехар из Fuseproject теплее всех относится к золотому сечению: “Иногда я действительно вижу золотое сечение в пропорциях продуктов и графики, которую мы создаем, но это скорее просто случайность, чем догма. Это важный инструмент, но не правило”.

Даже дизайнеры, которые по совместительству являются математиками, скептически относятся к использованию золотой пропорции в дизайне. Эдмуд Харрис – клинический доцент кафедры математики в Университете Арканзаса, который использует множество формул для создания новых произведений искусства.

Но и Харрис говорит, что золотое сечение, в лучшем случае, всего лишь один из множества инструментов в руках дизайнеров, склонных к математике: “Во многих смыслах это просто число, и оно, как и другие числа, часто встречается в разных местах… [Но] это точно не универсальная формула эстетической красоты”.

Тайная вечеря, 1955, Сальвадор Дали

Почему этот миф так популярен?

Если ценность золотого сечения так незначительна, почему же этот миф процветает?

Девлин поясняет это просто: “Мы создания, генетически запрограммированные видеть паттерны и искать смысл. В нашей ДНК не зашифрована способность мириться с условными вещами вроде эстетики, поэтому мы пытаемся доказать их с помощью нашего часто ограниченного математического видения.

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

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

Источник: https://ux.pub/zolotoe-sechenie-samyj-razdutyj-mif-v-dizajne/

Золотое сечение для веб-дизайна и типографики – особенности использования и некоторые советы

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

Это может кому-то показаться уроком математики, но… удержитесь от такого сравнения, поскольку все гораздо интереснее. Золотое сечение сочетает в себе немного математики, немного естествознания и много практики для дизайнеров.

Давайте посмотрим, что значит золотое сечение (идеальное, гармоничное) для веб-дизайна и как его  можно использовать в дизайн-проектах.

Важно

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

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

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

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

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

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

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

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

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

Совет

Математически рассчитать соотношение можно по формуле: 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 включает в себя шаблоны, которые можно загрузить и попробовать или кликнуть по скриншотам и увидеть их в большом размере.

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

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

Эта теория существует вне зависимости от того, используется принцип идеальности или нет.

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

Важно

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

Читайте также:  Красивые цветы из фоамирана своими руками

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

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

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

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

Завершение

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

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

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

Совет

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

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

Источник: https://wayup.in/blog/golden-ration-in-web-design-and-typography-usage-features-and-tips

Как с помощью золотого сечения сделать свой дизайн идеальным

Правило Золотого сечения – это необъяснимая математическая функция, которой можно описать все созданное в этой Вселенной. Золотое сечение – это соотношение сторон прямоугольника a/b=a+b/a=1,618033987, где a больше, чем b. В графическом выражении это правило выглядит вот так:

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

Как использовать это правило в создании логотипов?

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

У Toyоta прямоугольники со сторонами a и b формируют сетку, где расположены три овала. Также стоит отметить, что на пересечении линий прямоугольников расположено и пересечение этих овалов. Эти пересечения формируют зрительные центры, то есть, куда человек в первую очередь будет смотреть.

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

Для лого Pepsi также использовали круги Фибоначчи.

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

Как применять в тексте?

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

Например, если основной шрифт вы использовали размера 12, то чтобы получить размер шрифта подзаголовка, вы должны это число умножить на 1,6 (12*1,6=19) размер подзаголовка получается 19.

По тому же правилу получаем размер заголовка – 30.

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

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

Начинать нужно так:

А так выглядит сетка сайта:

Казалось-бы все просто? А вот как ее строили:

Если вы не верите в это правило, то вот пример твиттера:

Превью: Depositphotos

Источник: https://say-hi.me/design/kak-s-pomoshhyu-zolotogo-secheniya-sdelat-svoj-dizajn-idealnym.html

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

3

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

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

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

Обратите внимание

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

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

1

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

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

В качестве примера использования «золотого сечения» в интерьере, можно взять пространство гостиной с размерами, равными 5х3 м.

Для того, чтобы зонирование пространства произошло успешно, а обстановка воспринималась легкой и гармоничной, следует длину комнаты (5 м) умножить на золотое значение 0,618. В сумме вы получаете 3,09 м, которые представляют большую часть помещения.

Следующим этапом должно стать вычитание данного числа (3,09) и 5 для того, чтобы определить значение меньшей части. Итак, у вас должно получиться 3,09м и 1, 91м соответственно.

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

5

Важно

Часто возникает такая ситуация, при которой новый диван, установленный в пространстве конкретной комнаты «на глаз», выглядит не уместно (слишком мелким, или крупным, не гармоничным). Этого можно избежать, если заблаговременно применить то же правило «золотого сечения» при формировании вертикального пространства комнаты.

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

3

Принцип «золотого сечения» применим в любой сфере проектирования, в том числе, оформлении интерьера с помощью цвета. Так, наличие тех или иных оттенков, их количество и интенсивность могут быть выверены, согласно золотому правилу.

Например, в оформлении стен следует использовать один оттенок на 2/3 всей их площади (бежевый, голубой); 1/3 можно отдать белому или серому. Таким образом, благодаря «золотому сечению» вы сформируете основную (базовую) гамму интерьера.

Еще одним, не менее эффективным способом соотношения количества цветов в пространстве является использование процентного соотношения 60/30/10. Где 60% — основной цвет, 30% — дополнительный, 10% — акцентный.

1

Стены комнаты производят благоприятное впечатление, если при оформлении также был применен закон «золотого сечении».

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

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

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

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

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

«Правильный угловой диван должен образовывать прямой угол, где короткая посадочная часть занимает 1/3 от длинной посадочной части. В то же время, журнальный столик следует подобрать так, чтобы его длина не превышала меньшее значение большей части дивана»

3

Совет

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

Источник: http://homester.com.ua/experts/soveti/osnovy-dizayna-pravila-zolotogo-secheniya/

Использование «Золотого сечения» и «Правила трех» в веб-дизайне

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

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

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

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

Что такое «Золотое сечение» и как оно появилось?

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

Однако известно, что технология используется уже на протяжении 2400 лет. Стоит также отметить, что золотое сечение применяется в различных отраслях науки: в астрономии, математике, архитектуре, музыке, живописи и многих других.

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

Обратите внимание

Как вы можете видеть, это является уникальным уравнением, которое разделяет отношения между двумя размерами и пропорциями линий. В десятичном исчислении b деленное на a ​​равно 1.618033 … в случае если а>b. В приведенном ниже примере допустим, что b равен 5. Тогда уравнение будет выглядеть следующим образом:

Читайте также:  Фиолетовая кухня: особенности дизайна

Возможно, ранее вы уже слышали о последовательности Фибоначчи. Как же на самом деле это работает? Например, имеется ряд чисел, в котором любое заданное число создается посредством сложения двух предыдущих. Начиная с 0, то последовательность такая 0, 1, 1, 2, 3, 5, 8, 13, 21, 34… итд:

1 + 2 = 3

3 + 2 = 5

3 + 5 = 8

5 + 8 = 13…

Письменное выражение представлено в виде формулы: xn = xn-1 + xn-2 .

Последовательность тесно связана с золотой пропорцией, потому что если вы берете какие-либо две последовательные цифры и делите на предыдущую, дробь окажется очень близкой к золотой пропорции . По мере увеличения значения числа, дробь становится еще ближе к золотой пропорции. Например, 8/5 1,6 , 34/21 это 1,619 и так далее.

«Золотая спираль». Прямоугольник

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

Она на самом деле довольно проста и является наиболее оптимальной для многих геометрических фигур.

Спираль создается при помощи четверти кругов, которые нарисованы внутри массива квадратов на основе последовательности Фибоначчи.

На диаграмме ниже представлен образец:

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

«Правило трех»

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

Чтобы применить «Правило трех», необходимо разделить изображение на 9 равных частей. Провести 2 горизонтальных линии и 2 вертикальных. Немаловажно расположить их ровно. Смысл заключается в том, чтобы выровнять фокус с крайним левым вертикальным разделителем.

Горизонт или «точка схода» должны быть на уровне с горизонтальным разделителем.

Применение «Золотой спирали»

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

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

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

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

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

Возьмем прототип сайта и рассмотрим применение золотого сечения на нем.

Выглядит довольно просто, не так ли? Да, на самом деле так и есть. Дизайн основан на 960-пиксельной сетке. Оформление представлено с помощью золотой пропорции. Если использовать 1 золотую спираль которая охватывает 960px видно как располагался заголовок , логотип итд.

Двигаем нашу спираль ниже и опираемся на ее размеры

Важно

Получается некий каскад спиралей в котором основные элементы дизайна вписаны в прямоугольники с золотой пропорцией

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

скачать

Данная статья является переводом

Источник: http://pixelgene.ru/articles/golden-ratio.html

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

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

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

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

Их объединяет одно — они верят, что существует какой-то Тайный Победный Алгоритм, который лежит в основе любого процесса. Если действовать по нему — всё будет круто. Если сойти с этой дороги — всё пропадет.

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

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

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

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

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

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

В искусстве

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

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

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

Совет

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

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

В ui-дизайне

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

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

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

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

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

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

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

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

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

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

И как быть?

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

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

Источник: https://blog.adn.agency/zolotoe-sechenie-volshebnaia-proportsiia-ili-koshmar-dizainera/

Золотое сечение в дизайне интерфейсов

«Золотое сечение» очень важно в дизайне архитектуры, техники, логотипов и фотографий. Я не хочу слишком много об этом писать, вы можете изучить подробности в Википедии.

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

В двух словах: это инструмент для достижения баланса в дизайне.

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

Геометрия

Золотое сечение — это соотношение частей друг к другу 1: 1.618. Это несложно:

  1. Нарисуйте квадрат
  2. Из середины квадрата (А) нарисуйте диагональ к противоположному углу (В).
  3. Полученная диагональ — это радиус дуги. Мы рисуем окружность, чтобы получить прямоугольник. Полученная фигура квадрат + прямоугольник — это и есть «золотой прямоугольник».
  4. Если мы нарисуем диагонали в большом и маленьком прямоугольнике, в точке их пересечения получим «точку фокуса». Около этой точки лучше всего размещать самые важные объекты интерфейса, чтобы привлекать внимание пользователей.
  5. Уникальным свойством этой фигуры является то, что при ее делении мы получаем меньшие прямоугольники, которые состоят из квадрата и прямоугольника, пропорциональных большой фигуре.
  6. И что самое интересное: если в каждом из квадратов провести дугу радиусом, равным стороне квадрата, мы получим «золотую спираль».
  7. Прямоугольник нужно повернуть и настроить согласно нужному размеру холста и интерфейса.

А теперь треугольник

  1. Нарисуйте треугольник, одна сторона которого вдвое больше второй.
  2. Нарисуйте дугу от центра в точке (В) с радиусом АВ. Дуга пересекает гипотенузу в точке (D).
  3. Теперь нарисуйте дугу из центральной точки (С) с радиусом CD, и мы получим точку (E).

  4. Из точки (E) нарисуйте ровную линию к гипотенузе.

В результате мы разделили треугольник на меньшие треугольники, пропорциональные друг другу. Между прочим, это четко проявляющееся «золотое сечение» двух элементов — та же пропорция в 1: 1,618. Один элемент равен 1.

618 второго.

Красота природ

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

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ..

(каждое следующее число — сумма двух предыдущих)

Если вы возьмете «Золотую спираль» и повернете ее на угол 40° или 60° градусов, получите вот такую красоту:

Это пример с меньшим углом вращения 20°, и отражением фигуры по горизонтали:

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

Если вы нарисуете «Золотой прямоугольник», становится ясно, как размещать элементы.

Дизайн мобильных интерфейсов

Я сделал пару примеров, чтобы показать «Золотое сечение» в деле. Первый — карточка продукта в магазине ASOS.

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

Это неудобно, потому что вам нужно свайпить страничку, чтобы найти данные о размере, цветах, ткани, либо для добавления в корзину. В результате «быстрый» просмотр продукта слишком сложен.

Обратите внимание

Если вы нарисуете «Золотой прямоугольник», становится очевидно, как лучше всего расположить элементы. Эта структура позволяет показать самые нужные пользователю данные на первом экране.

Как мы можем видеть, в «точке фокуса» есть действие «Сохранить в избранное», одно из ключевых действий в приложении.

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

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

Источник: https://infogra.ru/ui/zolotoe-sechenie-v-dizajne-interfejsov

Ссылка на основную публикацию