Золотое сечение в графическом дизайне: как применять в макетах

Золотое сечение — пропорция 1.618, которая встречается в природе, искусстве и архитектуре. Дизайнеры используют её для создания гармоничных макетов. Разбираю, что это, как считать и где применять.

Золотое сечение (φ, фи) — математическая пропорция ≈ 1.618. Если разделить отрезок на две части так, что отношение большей части к меньшей равно отношению всего отрезка к большей части, получается золотое сечение.

Визуально это выглядит «правильно»: глаз воспринимает такие пропорции как гармоничные и естественные. Примеры в природе: спираль раковины наутилуса, расположение семян подсолнуха, пропорции человеческого тела.

Формула простая:

Большая часть = Меньшая часть × 1.618

Весь отрезок = Большая часть × 1.618

Пример для ширины блока 1000 пикселей:

Весь блок: 1000 пикселей

Большая часть: 1000 ÷ 1.618 ≈ 618 пикселей

Меньшая часть: 1000 − 618 = 382 пикселя

Или наоборот:

Меньшая часть: 400 пикселей

Большая часть: 400 × 1.618 ≈ 647 пикселей

Пропорции макета. Главный контент vs сайдбар:

Контент: 800 пикселей

Сайдбар: 800 ÷ 1.618 ≈ 494 пикселя

Итого: 1294 пикселя

Или для ширины 1200 пикселей:

Контент: 1200 ÷ 1.618 ≈ 742 пикселя

Сайдбар: 1200 − 742 = 458 пикселей

Hero-секция. Высота hero-блока к ширине экрана:

Ширина: 1920 пикселей

Высота: 1920 ÷ 1.618 ≈ 1187 пикселей

Или для высоты 800 пикселей:

Ширина контента внутри: 800 × 1.618 ≈ 1294 пикселя

Типографика. Размер заголовка к размеру текста:

Текст: 16 пикселей

Заголовок: 16 × 1.618 ≈ 26 пикселей (округляем до 28 или 24)

Размер подзаголовка:

Заголовок: 32 пикселя

Подзаголовок: 32 ÷ 1.618 ≈ 20 пикселей

Отступы. Отступ между блоками к отступу внутри блока:

Внутри блока: 32 пикселя

Между блоками: 32 × 1.618 ≈ 52 пикселя (округляем до 48 или 56)

Золотая спираль — визуализация золотого сечения. Строится из квадратов, стороны которых образуют последовательность Фибоначчи (1, 1, 2, 3, 5, 8, 13, 21...).

В дизайне спираль используется для:

Расположения ключевых элементов (логотип, заголовок, кнопка)

Направления взгляда пользователя

Композиции фотографий и иллюстраций

Как наложить спираль в Figma:

Импортировать SVG золотой спирали

Повернуть под нужный угол

Разместить ключевые элементы вдоль спирали

Правило третей — упрощённая версия золотого сечения (пропорция 1:2 вместо 1:1.618). Проще применять, результат похожий.

Когда использовать правило третей: быстрый макет, мобильный дизайн, нет времени на точные расчёты.

Когда использовать золотое сечение: премиум-проекты, полиграфия, логотипы, где важна математическая точность.

Калькуляторы золотого сечения:

Golden Ratio Calculator (онлайн)

Phiculator (приложение для macOS)

Плагины для Figma:

Golden Ratio Grid — генерирует сетку по золотому сечению

Spiral — рисует золотую спираль

Золотое сечение — не магия, а инструмент. Не нужно применять его везде, но для ключевых пропорций (макет, типографика, отступы) оно даёт математически гармоничный результат. Глаз видит «правильность», даже если не понимает почему.

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

Полный курс: "веб дизайн для новичков" всего за 390 ₽