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

Золотое сечение — пропорция 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 ₽