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

Дизайн сайтов: используем золотое сечение

 

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

 

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

 

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

Дизайн сайтов золотое сечение
Одним из первых эту пропорцию стал применять архитектор из Древней Греции, Фидий. Позже Евклид дает формуле математическое описание. А затем и Леонардо да Винчи применяет золотое сечение в своих произведениях. Знаменитый Витрувианский человек был сотворен по «золотой» формуле и является эталоном пропорциональности и гармонии в строении человеческого тела и Вселенной в принципе.

 

Где воплощается эта удивительная пропорция? Например, в цветах, которые распустились, в иллюстрациях Млечного пути, в искусстве.

 

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

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

 


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


Покажем вам примеры использования.

1. Расположение блоков

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

 

К примеру, ваш блок в ширину 600 пикселей. Значит:
• Высота равна: 600/1,618 = 370,8 px
• Ширина бОльшей части блока (левой картинки) будет равна: 370,8 px
• Ширина меньшей части равна 600-370,8 = 229,2.

 

То же самое и с макетами сайтов. Например, бОльшая часть блока под контент, остальная под другие элементы.
Золотое сечение выражается в пропорциях 3/2, 5/3, 3/8 и т.д.

Принцип используется и в самом тексте с заголовками. Если целое разделить на две части, то для золотого сечения процентное соотношение частей будет равно 62/38%.
Например, размер вашего заголовка равен 22 pt, значит размер основного текста будет равен 22/1.618 = 13,59 – округляем до 14 pt.

Дизайн сайтов золотое сечение пример

2. Числа Фибоначчи

Числа основывают технику золотого сечения в цифрах. Есть ряд последовательных чисел, каждое равняется сумме двух предыдущих
1,2, третье число 1+2=3, четвертое число 2+3 = 5, пятое число 3+5=8 и т.д. Эти числовые ряды используются в построении макетов.

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

 

3. Золотая спираль

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

Дизайн сайтов золотое сечение фото

В заключение

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

 

Comments

comments

Text_2Модульная сетка в веб-дизайне. Современный дизайн сайта
Text_2Создание веб-дизайна. Принцип гештальта
Text_2Как работает веб-студия?
Text_2Редизайн сайта. Пора ли прокачаться?