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

Из названия понятно, что пойдет речь о дизайне, использующим последовательность чисел Фибоначчи. По определению, два первых числах Фибоначчи равны 0 и 1, а каждое следующее число равно сумме двух предыдущих.

Чем больше последовательность Фибоначчи , тем больше числа связаны друг с другом в соответствии с «золотым сечением».

И так, последовательность Фибоначчи выглядит следующим образом:

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

Аппроксимированные и «истинные (по золотому сечению)» спирали

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

В целом, раскладка такая, можно довольно просто «построить» дизайн с использованием последовательности Фибоначчи. Во первых, Вы выбираете определенную базовую ширину — например, 90px. Затем, при определении размера контейнера, вы умножаете базовую ширину на числа из ряда Фибоначчи. И в зависимости от расчетов, вы получите нужные размеры блоков вашей страницы. Давайте посмотрим на примере. Ниже представлен блог минималистский типографики на основе веб-дизайна Фибоначчи.

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

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

Обратная сторона разметки макета на основе последовательности Фибоначчи состоит в том, что ее сложно использовать, если макет имеет фиксированную ширину (например, 1000px).

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

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

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

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