Золотое сечение для объектов и веб-разметки

Золотое сечение в интерфейсах
Теперь при проектировании кнопок и панелек можно положиться на математику: сетка из золотых прямоугольников, построенная по спирали Фибоначчи, поможет создать эстетически прекрасную кнопку. Anthony с UXMovement опять написал очень полезный пост, который научит вас строить «золотую сетку».

Оригинал: Applying the Golden Ratio to Web Layouts and Objects by anthony

Вкратце о золотом сечении

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

    Золотое сечение дарит нам божественную возможность чувствовать прекрасное и его можно использовать в веб-дизайне. С помощью сечения сайты можно делать более визуально привлекательными. Самый распространённый способ применения сечения — в разметке (layout). Можно создать «золотую разметку» из двух колонок, применив золотое деление к горизонтали.


Высекаем разметку

    Возьмем обычную ширину разметки в 960 пикселов и поделим 960 на 1.618. Получим что-то около 594, что и будет являться шириной колонки с основным содержанием. Чтобы получить ширину второй колонки, вычитаем 594 из 960 и получаем 366. Собираем всё это вместе и получаем две колонки, построенные с применением золотого сечения.

Вертикальные золотые колонки

    Золотое сечение применимо и к делению вертикали, если ширина сайта фиксирована. Берем высоту в 760 пикселов и делим на 1.618; получаем около 470 — высота колонки с содержанием сайта. Далее вычитаем 470 из 760 и результат в 290 пикселов и будет «подвалом» разметки.

Горизонтальные золотые колонки


Сечение для интерфейсов

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

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

    Чтобы создать золотой прямоугольник, мы будем пользоваться спиралью Фибоначчи. Начнём с квадрата со стороной в 1 пиксел. Сделайте еще один и поставьте справа от первого. Далее сделайте квадрат со стороной 2 пиксела и расположите под предыдущими двумя. Следующий квадрат будет со стороной 3 пиксела и его расположим слева от конструкции. Наконец-то делаем квадрат со стороной 5 пикселов и размещаем сверху. Вы только что создали золотой прямоугольник по спирали из 5 витков. Золотой прямоугольник может быть и больше, но для наших целей мы ограничимся числом 5.

Схема построения золотого прямоугольника из 5 витков спирали Фибоначчи
Схема построения золотого прямоугольника из 5 витков спирали Фибоначчи

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

Сетка из золотых прямоугольников для создания вертикальных прямоугольников
Сетка из золотых прямоугольников для создания вертикальных прямоугольников
Сетка из золотых прямоугольников для создания горизонтальных прямоугольников
Сетка из золотых прямоугольников для создания горизонтальных прямоугольников

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

Примеры объектов, размер которых пропорционален золотому сечению
Примеры объектов, размер которых пропорционален золотому сечению

перевод: Рехимкулов Ринат

Реклама

Золотое сечение для объектов и веб-разметки: 5 комментариев

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

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s