Математика и веб-дизайн: близкие отношения

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

Математика везде

Уолт Дисней однажды снял фильм о Дональд Дак в Mathmagicland. В этом видео, доступном на YouTube, они вводят детей в математику и для чего они используются. Это показывает, что математическое соотношение используется для определения заметок на наших инструментах и ​​что математический прямоугольник можно найти как в древней, так и в современной архитектуре. Кроме того, мы можем найти этот тот же самый прямоугольник в каком-то искусстве Возрождения, например, знаменитым Леонардо да Винчи.

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

Маленькая история

В Древней Греции существовала элитная группа математиков, которые называли себя пифагорейцами. У пифагорейцев в качестве эмблемы была пентаграмма. Они выбрали эту форму из-за ее математического совершенства: линейная форма пентаграммы уже содержит золотое соотношение три раза! Кроме того, есть тонны золотых прямоугольников, скрытых внутри формы, это те же золотые прямоугольники, которые присутствуют в Mona Lisa.

Разведение кроликов

Спустя некоторое время, в XII и XIII веках, жил талантливый итальянский математик. Его звали Леонардо Пизано Биголло, хотя вы могли бы узнать его лучше, чем Фибоначчи. Для его книги Liber Aci он наблюдал за естественным размножением кроликов. В этом идеальном мире, где ни один кролик никогда не умрет, и каждый отдельный кролик начнет воспроизводить как можно скорее, он обнаружил, что этот цикл содержит специальную последовательность чисел. Эта последовательность позже стала известна как Числа Фибоначчи.

Вещь, столь особенная в этой последовательности, состоит в том, что если вы разделите выбранный номер с номером предшествующего в последовательности, вы будете (примерно) получать одинаковый номер каждый раз. Это число составляет приблизительно 1,618, более известный как Phi. Чем дальше вы входите в последовательность, тем ближе результат разделения приходит к Phi. Фибоначчи также выяснил, что эта последовательность встречается не только при разведении кроликов, но и в других вещах в природе, таких как расположение семян в подсолнечном.

Золотой коэффициент

Как вы уже знаете, Phi также является очень заметной константой в дизайне; Это связано с тем, что отношение от 1 до 1,618 лучше известно как Золотое соотношение - часто называемое Золотым сечением, Золотым средним или Божественным соотношением. Если вы создадите прямоугольник в соответствии с этим соотношением, вы получите форму, известную как Золотой прямоугольник.

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

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

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

Примеры золотого коэффициента в веб-дизайне

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

Одним из хороших примеров является этот веб-сайт, так как его дизайн содержит несколько случаев отношения. На изображении ниже вы можете увидеть скриншот этого веб-сайта. Как вы можете видеть, я использовал два цвета для обозначения разных столбцов. Ширина главного столбца с сообщениями в блоге в нем примерно в 1,618 раз больше, чем боковая панель с объявлениями. Быстрый расчет внизу доказывает это.

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

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

Другим хорошим примером является знаменитый блог Smashing Magazine. Его главный столбец имеет общую ширину чуть более 700 пикселей. Когда вы разделите это число на 1,618, результатом будет 435: Точная ширина боковой панели.

Как применить этот коэффициент к вашему следующему дизайну

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

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

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

Если у вас возникли проблемы с запоминанием Phi, или когда вы просто ленитесь, чтобы заполнить некоторые цифры на калькуляторе, я предлагаю использовать Phiculator. Это небольшое приложение требует, чтобы вы заполнили значение (ширину содержащего элемента, которое есть), и оно автоматически вычисляет соответствующую ширину. Вы даже можете попросить его рассчитать с целыми числами, так что вам не придется беспокоиться о десятичных числах.

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

Еще одно известное математическое разделение - это правило третей. Это правило может помочь вам создать сбалансированную композицию, разделив ваш холст на девять равных частей. Правило немного похоже на Золотое Соотношение, так как деление на 0,62 близко к 0,67, что равно двум третям.

Фотография

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

Как это работает?

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

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

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

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

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

Фотографии flickr найдены здесь

Мы видели правило третей, применяемое к фотографии, но как насчет применения его к дизайну веб-сайта, можем ли мы найти примеры этого?

Правило третей в веб-дизайне

Хорошим примером правила, применяемого к веб-дизайну, является, опять же, этот веб-сайт. Я подготовил изображение, которое вы можете увидеть ниже. Это показывает, что справа боковая панель выровнена очень близко к вертикальной линии справа. On the left, you can see that the articles are positioned on the intersecting points.

Два выравнивания, которые вы видите выше, создают ощущение гармонии в макете этого сайта.

Применение правила третей к вашему следующему дизайну

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

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

Тем не менее, вторая часть подразделения может дать вам некоторые проблемы. Высота нашего «холста» также варьируется, поэтому разделение этой переменной на три даст нам некоторые проблемы. Способ, которым я использую это, заключается в том, чтобы вычислить «высоту» деления с соотношением 16: 9 (широкоэкранный) или просто использовать высоту содержащего элемента. Разделите ширину содержащего элемента на 16 и умножьте это число на 9, и у вас есть высота. Теперь вы можете снова делить это число на 3 и нарисовать линии / направляющие.

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

Грид-системы

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

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

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

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

Как создать хорошую сетку

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

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

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

Мы определим размер нашего желоба, я думаю, 20 пикселей будут достаточными. Водосточный желоб должен быть добавлен к обеим сторонам колонны, поэтому мы должны разделить его на два. Если мы этого не сделаем, наш желоб будет шириной 40 пикселей. Как вы можете видеть на изображении ниже, мы добавили 10-пиксельный желоб с каждой стороны.

Теперь мы можем дублировать это изображение, пока мы не достигнем общей суммы 960 пикселей, и мы создали себе (базовую) сетку.

Мне лень!

Не волнуйся; даже если вы ленитесь, вам не придется жить без сеток. В интернете есть множество хороших и бесплатных систем с сеткой. Мой любимый, и я уверен, что вы слышали об этом раньше, это знаменитая сетка 960.gs, в которой есть CSS-фреймворк и PSD-файл со всеми установленными направляющими.

Вывод 

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

Спасибо за прочтение!