Математический подход к созданию сайтов

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

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



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

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

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




Мы уже опубликовали очень подробную статью «Применение золотого сечения в web-дизайне», которая объясняет, как использовать золотое сечение в веб-дизайне. В сегодняшней статье мы рассмотрим, как использовать золотые прямоугольники в веб-дизайне. Золотой прямоугольник является таковым, если его стороны соответствуют пропорции 1: (один-к-Phi), то есть 1:1.618.

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



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



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



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



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

PSD-макет



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

Дизайн Фибоначчи



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

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

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

Jürgen Schmidhuber, в своем блоге, рассматривает методологию чисел Фибоначчи в основе дизайна. Однако, если вы изучите тот дизайн, который он создал, вы, вероятно, найдете его жестким и немного трудным для понимания и навигации. Действительно, Вам стоит применить творческий подход к математике, а не слепо следовать правилам — математика дает нам возможности, которое мы можем применить.



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

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

В целом, макет довольно легко построить с использованием последовательности Фибоначчи. Вы выбираете определенную ширину базе первого блока — например, 90px. Затем, при определении размера контейнера, нужно умножить базовую ширину на  номер блока из ряда Фибоначчи (1,2,3,5,8…). В зависимости от расчетов вы получаете значения которые являются ширинами блоков, для вашего макета. Давайте посмотрим на примере. Ниже минималистичный макет, созданный на основе веб-дизайна по Фибоначчи.



Вы видите, что страница разделена на три колонки. Каждый столбец соответствует числу Фибоначчи. Для этого дизайна, мы использовали базу шириной 90 пикселов. Эта база шириной затем умножается на число Фибоначчи, чтобы получить общую ширину столбца. Например, первая колонка имеет ширину 180 пикселей (90 х 2), вторая колонка имеет ширину 270 пикселей (90 х 3) и третья колонка имеет ширину 720 пикселей (90 х 8). Размер шрифта также соответствует числу Фибоначчи. Заголовок страницы имеет размер 55px; заголовок статьи 34px; а основной текст 21px.



Однако, достаточно трудно адаптировать шаблон, с фиксированной шириной, для использования последовательности Фибоначчи. Но это только в случае выбора ширины, например, 1000px. В этой ситуации проще использовать отношение золотого сечения. Просто умножить вашу ширину 1000px на 0,618 и получить 618px что было бы идеальной шириной для блоков контента. Однако, если вы пытаетесь достичь того же результата с последовательностью Фибоначчи, необходимо сначала выяснить ближайшее к 1000 число.

В соответствии с калькулятором последовательности Фибоначчи,  последовательность будет ...,610, 987, 1597... И, 987 является хорошим числом, которое наиболее близко к выбранному числу 1000 и вы можете определить ширину для других блоков, используя предыдущие номера в последовательности. Но если ваш макет фиксированной ширины меньше или больше по ширине, то вам потребуется использовать примерные значения. Проблема может возникнуть в резиновом шаблоне но не в фиксированном, но при использовании % у вас гораздо больше свободы.

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



Дизайн по Фибоначчи лучше всего подходит для блогов и журнальных макетов. Вы можете расположить макет по-разному в соответствии с числами Фибоначчи. В статье Nombre d'or, suite de Fibonacci et autres grilles de mise en page pour le design web (на французском языке) объясняется более глубокое применение чисел Фибоначчи в веб-дизайне. Опять же, стоит отметить, что вам следует опираться на творческий подход при использовании последовательности Фибоначчи в вашей работе, иначе ваши макеты будут казаться слишком жестким и, следовательно, сложны в использовании и навигации.

PSD-макета



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

Пять элементов, или Kundli дизайн



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




Дизайн представленный ниже, разработан на основе геометрического макета Kundli. Стоит отметить, что чакры  также имеют математические свойства (я не нашел доказательств прим. пер.).



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



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



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



Эта конструкция является оптимальной для отображения информации о продукте или для показа профилей. Вы можете украсить шаблон JavaScript анимацией. Например, вы можете обратиться к возможности преобразования цвета, изменяя цвет чакр, используя библиотеку Рафаэля, или вы можете добавить любую другую анимацию, например используя библиотеку jsAnim. Можно показать ростка дерева, когда пользователь нажимает на элементе «Земля», или можно показать морских обитателей, при клике на «Воде». Нет пределов, когда дело доходит до анимации с использованием этих библиотек JavaScript (но не стоит борщить прим. пер.).

PSD-макет



Мы подготовили архив с PSD макетами, в который включен шаблон разработанный в соответствии с дизайном Kundli.

Синусоидальный дизайн



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



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



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



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



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

PSD-макет



Мы подготовили архив с PSD макетами, в который включен шаблон разработанный в соответствии с дизайном по синусоиде.

Другие методы



Правило третей

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

Музыкальная логика

Ритмическая или тематическая структура музыкальной композиции может применяться для определения расстояний между элементами в макете, как ABA, ABAC и т.д. Узнайте больше о музыке и математике в этой статье Википедии.

Useful Links and Resources



Wikipedia articles


Articles


Books


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

Оригинал статьи на Английском
Поделиться публикацией
Комментарии 33
      +1
      Интересно, спасибо за ссылку.
        +1
        Вообще до смерти Стива это была самая оцененная статья на Хабре.
      +35
      К сожалению, многие подобные подходы оказываются «притянутыми за уши». Базовые идеи для сетки отсюда можно взять, но особо рассчитывать на то, что дизайн по числам Фибоначчи или синусоиде увеличит продажи в 10 раз не стоит.

      Кстати, синусоида — замечательный пример «пятой ноги у собаки». По мне, так это обычный шахматный порядок (хотя и в шахматах есть математика, но это другой вопрос — так-то математика практически везде), зачем-то совмещенный с синусоидой.
        +8
        это повышает продажи дизайнера как продукта -)
          0
          Согласен с высказыванием о базовых идеях и сетке. Мне самому особенно понравилось высказывание идеи о возможности использования определенных размеров для текста.
            +1
            Никто не отменяет плохой дизайн по хорошей схеме.
              –2
              То что увеличит не стоит… но то что выглядит красиво и приятно это факт). Мне нравиться примеры с картинками раковины наутилуса, галактикой и витками в семян в подсолнухе. Там задействован золотой угол. Скажем классное инженерное решение, которое можно юзать))
              +31
              Это не математика, поверьте выпускнику математико-механического факультета СПбГУ по специальности «чистая математика». А ещё это явно перевод, и вы это не указали.

              Когда я вижу рядом теги «математика» и «чакры», у меня сжимается сердце.
                –1
                Внизу поста есть ссылка. Вы не заметили. Или надо где-то дополнительно это описать?
                С тем, что это не математика, я спотрить не буду, т.к. это перевод.
                Однако хочу высказать исключительно свою точку зрения на вопрос, в поддержку автора оригинала: на мой взгляд все это выражение математических функций. Если я не прав, поправьте, у меня нет математического образования.
                В любом случае спасибо за Ваш комментарий. Буду изучать тему, т.к. есть интерес.
                  +6
                  При публикации материала доступен выбор его типа — «перевод» вместо «пост».

                  Что касается математических функций, то в нашем мире ими можно описать вообще почти всё (а в отношении информационных технологий так и подавно). Скажем, при отображении одной строчки текста применяется больше математики, чем во всех описанных в статье приемах вместе взятых.
                    +2
                    Не заметил, впредь буду внимательнее. Спасибо.
                      +2
                      Пост из песочницы, там нельзя отметит пост как перевод. Можно только отправить его в хаб «Переводы» и указать соответствующий тег )
                    0
                    Ну, математика — сильно широкое понятие, поэтому сложно тут придираться. Не написано ж «высшая математика».
                    0
                    В целом очень полезно, даже несмотря на то что всё что описано проходят в ВУЗе по специальности «Графический дизайн» (т.ч. профессиональные дизайнеры точно всё это знают).
                      0
                      Интересная статья, сам подымал данный вопрос для веб студии в концепте которой дизайн по числам фибоначчи
                        0
                        Я всегда считал, что «золотые прямоугольники» слишком вытянуты. И мой друзья (у кого спрашивал) — так считают. Мне такие вещи в дизайне неприятны. Вообще, использовать золотое сечение в дизайне — как указали выше, просто способ повысить значимость дизайна в глазах заказчика.
                          +5
                          Ах как же мне вот этот Кундли дизайн что-то напоминал. Я долго не мог врубиться что, но потом, после того, как я вспомнил пару фильмов буржуинских, я начал вспоминать. Благо Гугл всегда под рукой…

                          Это же не индийская техника, это же просто американские лейблы, которые они лепят на опасные для человека материалы…

                          image

                          А пока я гуглил нашёл ещё несколько ваших патернов:

                          image
                            +11
                            Псевдонаучный треп.

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

                            На деле их потуги смехотворны.
                              +13
                              Адвокат в каждом видит клиента,
                              Прокурор в каждом видит ЗеКа,
                              Электрик видит синюю ленту,
                              И только рыбак – рыбака.

                              Мне кажется, с таким же успехом можно создавать дизайн на основе астрономических созвездий или моделей сложных углеводородов.
                                +8
                                Когда заходил, думал, что будет про функциональное программирование, теорию категорий и статистический анализ, а оказалось золотое сечение… Тьфу!
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                      +1
                                      Статья никакая. Давайте белое называть белым, а черное — черным. Вы говорите о золотом сечении, и показываете «минималистичный сайт», однако у макета, который приводится в пример, пропорции сторон никак не коррелируются с разрешением экрана, который используется в большинстве случаев. Золотое сечение и математика подходят к полиграфии, но никак не к вебу. Я понимаю, что статья — перевод, но тем не менее, если вы решили перевести ее, вы должны были заметить это расхождение. Ничего удивительного, что полученные в результате математического оплодотворения макеты выглядят не просто уныло, а уродливо.
                                        +1
                                        Никто не призывает опираться на данные практики на 100%. Просто иногда стоит принимать во внимание. Например в отношении размеров шрифтов.
                                        –2
                                        Про шрифты в переводе ни слова, причем здесь шрифты? Речь о вебе. А что бы правильно выбирать шрифты, надо их долго рисовать ручками на бумаге, попробуйте.
                                          –1
                                          извините, не туда ответил
                                            0
                                            Я с вами согласен, но в статье все же упоминается размер шрифтов:
                                            Размер шрифта также соответствует числу Фибоначчи. Заголовок страницы имеет размер 55px; заголовок статьи 34px; а основной текст 21px.
                                            +1
                                            «… общепринятая истерика с золотым сечением, которое пытаются найти во всем. Спираль ракушки — золотое сечение! Парфенон в Афинах — золотое сечение! Грудь Моники Беллучи — золотое сечение! Если моему коту прижать хвост, вытянуть передние лапы и пригладить усы, то получится — о мой бог, золотое сечение!… »

                                            Я положительно отношусь к статье. Если вдохновенно смотреть на законы математики, то можно сотворить чудесные вещи. Но каждому свое:

                                            Двое из моих дизайнеров регулярно курят марихуанну — это мои любимые дизайнеры, но я ни от кого не буду требовать курить.

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

                                            Есть дизайнер-программист. Он очень интересно подходит к рисованию визуального дизайна. И часто мне нужен именно его стиль.

                                            Использовать математику, как вдохновение — тоже хорошо. Да.
                                              +3
                                              Театральным жестом он распахнул ставни, предложил нам выглянуть и указал невдалеке, на углу между улочкой и бульварами, деревянный цветочный киоск.
                                              — Господа, — сказал он. — Предлагаю вам самим отправиться и измерить эту будку. Вы увидите, что длина прилавка составляет 149 сантиметров, то есть одну стомиллиардную долю расстояния между Землей и Солнцем. Высота его задней стенки, разделенная на ширину окошка, дает нам 176/56, то есть 3,14. Высота фасада составляет девятнадцать дециметров, то есть равна количеству лет древнегреческого лунного цикла. Сумма высот двух передних ребер и двух задних ребер подсчитывается так: 190х2+176х2=732, это дата победы при Пуатье.[87] Толщина прилавка составляет 3,10 сантиметров, а ширина наличника окна — 8,8 сантиметров. Заменяя целые числа соответствующими литерами алфавита, мы получим C10H8, то есть формулу нафталина.
                                              — Фантастика, — сказал я. — Сами мерили?
                                              — Нет, — ответил Алье. — Но один подобный киоск был измерен неким Жан–Пьером Аданом. Воображаю, что все цветочные киоски должны строиться более или менее одинаково. С цифрами вообще можно делать что угодно. Если у меня имеется священное число 9, а я хотел бы получить 1314, то есть год сожжения Жака де Молэ — этот день дорог сердцу каждого, кто, подобно мне, составляет часть тамплиерской рыцарственной традиции, — что я делаю? Умножаю на 146 (это роковой год разрушения Карфагена). Как я пришел к этому результату? Я делил 1314 на два, на три и так далее, до тех пор покуда не отыскал подходящую дату. Я бы мог поделить 1314 и на 6,28, что составляет собой удвоение 3,14, и пришел бы к цифре 209. Ну что ж, в этот год примкнул к антимакедонской коалиции Аттал I, царь Пергама. Годится?
                                                0
                                                Математика сюда притянута за уши. Вспоминается анекдот:

                                                Встречает мастер своего преподавателя по вышке лет через восемь после
                                                окончания вуза, разговорились, вспомнили время былое. Профессор
                                                спрашивает:
                                                — Вот я вам читал три года высшую математику, скажи, в жизни тебе мои
                                                знания когда-нибудь пригодились?
                                                Студент, подумав:
                                                — А ведь был один случай.
                                                — Очень интересно, расскажите, я его буду на лекциях рассказывать, что
                                                высшая математика не такая абстрактная наука и в жизни бывает нужна.
                                                — Шел я как-то по улице, и мне шляпу ветром в лужу сдуло. Так я взял
                                                кусок проволоки, загнул его в форме интеграла и шляпу достал!
                                                  +1
                                                  Просто оставлю это здесь:

                                                  Название Ordering Disorder: Grid Principles for Web Design
                                                  Voices That Matter Series
                                                  Автор Khoi Vinh
                                                  Издатель New Riders, 2010
                                                  ISBN 0321703537, 9780321703538
                                                  Количество страниц Всего страниц: 183

                                                  www.peachpit.com/store/ordering-disorder-grid-principles-for-web-design-9780321703538
                                                    0
                                                    Спасибо, будем изучать. Возможно даже переведу.

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

                                                  Самое читаемое