Прикладная математика в веб-дизайне. Часть 1. Золотое сечение

«Математика прекрасна». Это утверждение может показаться абсурдным для тех, кто не занимается ей профессионально. Однако, очень много вещей в природе подчиняется математике. От самой маленькой ракушки до галактики во вселенной, все подчиняется ее величеству. Аристотель так и говорил: «Математическим наукам присущи порядок, симметрия и определенность, они и являются формами прекрасного».

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

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

Золотое сечение и золотой прямоугольник

Золотое сечение, также известное как, божественное число, является иррациональной математической константой со значением, примерно 1.618033987. Т.е. это такое деление непрерывной величины на две части в таком отношении, при котором меньшая часть так относится к большей, как большая ко всей величине.

Smashing Magazine уже публиковали подробную статью «Применение Божественной пропорции к веб-дизайне», в которой объясняется, как использовать золотое сечение. А в сегодняшней статье мы рассмотрим, как использовать золотые прямоугольники в веб-дизайне. Золотой прямоугольник, это такой прямоугольник, в котором соотношение длин прилегающих сторон является золотой пропорцией, то есть 1:1.618.

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

В качестве примера, рассмотрим один из минималистских дизайнов. Он состоит из шести золотых прямоугольников, с тремя прямоугольниками в каждой строке. Прямоугольники имеют размеры 299 х 185 пикселей. Таким образом, длины сторон этих прямоугольников находятся в золотом сечении, то есть 299/185 = 1,616.

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

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

Возможное применение

Дизайн золотыми прямоугольниками хорошо подходит для фото-галерей, сайтов-портфелей и продукт-ориентированных веб-сайтов. В частности, вы можете использовать их в блоках, которые показывают изображения или объявления в боковой панели. Вы также должны помнить о сетках, выравнивании и об ограниченности интерфейса для достижения главной цели вашего дизайна. Например, интересным дизайнерским решением будет использование CSS / Jquery, однако мы не будем рассматривать эту технику в данной статье.