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

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

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

Золотой Что?

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

Выражается в виде уравнения, когда больше чем б, (а + б) деленное на равно деленное на б (просто посмотрите на изображение ниже), что равно примерно 1,618033987. Это число, часто представляемое греческим символом "фи", является Золотое сечение.

(Источник изображения: mathsisfun.com)

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

(Источник изображения: creativeautomaton.com)

Чтобы построить золотой прямоугольник, выберите число, которое будет длиной его короткой стороны. Ради аргумента, скажем, 500 пикселей. Умножьте это на 1.618. Результат, 809 пикселей, это длина длинной стороны вашего прямоугольника. Поэтому прямоугольник размером 500 на 809 пикселей является золотым прямоугольником. Подчиняется золотому сечению.

Естественная красота

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

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

(Источник изображения: in2visualdesign)

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

Божественная Композиция

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

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

Для сеток / блоков

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

• В этом примере мы скажем, что ваш прямоугольник 525 пикселей по 850 пикселей.
• 525 и 850 (а + б), а также б будет ширина вашей боковой панели.
• Найти б, мы просто вычитаем из (а + б), который 325.
• Поэтому ширина вашей боковой панели составляет 325.

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

Для текста

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

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

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

Сетка Работа: Правило третей

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

(Источник изображения: digital-photography-school.com)

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

(Источник изображения: net.tutsplus.com)

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

Столбцы и размеры шрифта: последовательности Фибоначчи

Еще один простой инструмент для веб-дизайна, связанный с золотым сечением, Числа Фибоначчи. Последовательность Фибоначчи начинается с 0 и 1. Два предыдущих числа складываются вместе для получения следующего числа в последовательности: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34… и так далее.

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

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

(Источник изображения: Wikipedia.org)

Золотые спирали и кластеризация контента

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

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

(Источник изображения: fabiovisentin.com)

Спирали могут служить ориентиром для плотности контента и кластеризации. Они могут служить основой для соотношения изображений заголовков вашего сайта, панелей поиска и панелей инструментов..

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

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

Больше чтения:

• Применение золотого сечения к веб-макетам и объектам

Примечание редактора: Этот пост написан Крис Пентаго для Hongkiat.com. Крис - опытный веб-разработчик, дизайнер и специалист по интернет-маркетингу, который интересуется ключевыми технологиями для обеспечения эффективности вашего онлайн-бизнеса. Вы можете найти его в Twitter.