Визуальное направление

Ар-деко

Art Deco

Роскошь 1920–30-х: строгая симметрия, веерные лучи, ступенчатые формы и тонкие золотые линии на изумрудном, чёрном или слоновой кости.

Демонстрации стиля

Учебная демонстрация

Суть

Ар-деко — стиль эпохи джаза, океанских лайнеров и небоскрёбов 1920–30-х годов. В интерфейсе он узнаётся по строгой зеркальной симметрии, геометрическому орнаменту (веера, солнечные лучи, шевроны, ступенчатые зиккураты) и тонким золотым линиям на глубоком тёмном или кремовом фоне.

Подробнее

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

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

Признаки

  • Строгая зеркальная симметрия: главные блоки, заголовки и действия выстроены по центральной оси.
  • Геометрический орнамент: веера, солнечные лучи из одной точки, шевроны, ромбы и ступенчатые зиккураты.
  • Тонкие золотые или латунные линии 1 px, двойные рамки и рамки с внутренним отступом.
  • Тёмная глубокая основа (изумруд, чёрный лак, тёмно-синий) или тёплая слоновая кость.
  • Высокие геометричные шрифты прописными с широкой разрядкой и классическая антиква для чисел и подзаголовков.
  • Формы со ступенчатыми, срезанными или восьмиугольными углами вместо скруглений.
  • Ритм и повтор: одинаковые колонны, пилястры, полосы и лучи задают торжественный темп.

Композиция

Композиция

  • Композиция строится от центральной оси: логотип по центру шапки, меню симметрично по сторонам, заголовок и кнопки по центру.
  • Главный экран обрамляется — двойной рамкой, пилястрами по бокам или веером лучей за заголовком.
  • Группы карточек нечётные (3 или 5) с выделенным центральным элементом: он выше, светлее или богаче отделан.
Ещё 2
  • Секции разделяются орнаментальными линейками — двойная линия с ромбом или шевронами в центре.
  • Плотные рабочие экраны сохраняют симметрию в заголовках и обрамлении, а данные выстраиваются по строгой сетке.

Визуальная иерархия

  • Первый уровень — крупный декоративный геометричный заголовок прописными с разрядкой 0.15–0.25 em.
  • Второй уровень — антиква для подзаголовков, цен и ключевых цифр.
  • Третий уровень — короткие метки прописными 11–13 px с разрядкой 0.25–0.35 em цветом золота.
Ещё 2
  • Главное действие выделяется сплошной золотой заливкой; вторичное — контуром с двойной линией.
  • Орнамент подводит взгляд к главному: лучи, рамки и ромбы сходятся к заголовку или центральной карточке.

Цвета

Примеры палитр · нажмите на цвет, чтобы скопировать

Изумруд и золото

Чёрный лак

Слоновая кость

Принципы работы с цветом
  • Основа — один глубокий тон (изумруд, чёрный, тёмно-синий) или слоновая кость; яркие чистые цвета не используются.
  • Металл — золото, латунь или бронза — отвечает за линии, орнамент, метки и главную кнопку.
  • Второй акцент допустим только благородный и приглушённый: лаковый красный, нефрит, пыльная бирюза.
  • На светлом фоне вместо светлого золота используйте тёмную бронзу, иначе текст и линии теряют контраст.

Шрифты

С поддержкой кириллицы

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Poiret One
    Текст
    Jost
  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Forum
    Текст
    Jost
  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Oswald
    Текст
    Forum
Принципы типографики
  • Заголовки — высокий геометричный шрифт с контрастом «тонкий штрих — круглые формы», прописными и с разрядкой 0.15–0.25 em.
  • Для цифр, цен и подзаголовков — классическая антиква с римскими пропорциями.
  • Основной текст — геометрический гротеск 15–17 px, строчными, без разрядки, межстрочный интервал 1.45–1.6.
  • Метки и навигация — прописные 11–13 px весом 500–600 с разрядкой 0.24–0.35 em.

Компоненты

Кнопки

Главная кнопка — сплошное золото с тёмным текстом прописными, с разрядкой и срезанными или шевронными торцами. Вторичная — прозрачная с двойной золотой рамкой.

Поля ввода

Поля с тонкой золотой или бронзовой рамкой и прямыми углами, подпись прописными с разрядкой над полем; фокус — двойная рамка.

Карточки

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

Навигация

Симметричная шапка: логотип с веерной эмблемой по центру, пункты меню прописными по обе стороны; активный пункт — золотой цвет и линия.

Применение

Где подходит

  • Отели, рестораны, бары, круизы и туристические сервисы с ощущением события.
  • Театры, концертные залы, джаз-клубы, афиши и билетные сервисы.
  • Ювелирные, парфюмерные и подарочные бренды, винные и чайные дома.
Ещё 1
  • Свадебные, юбилейные и корпоративные приглашения, лендинги мероприятий.

Как применять

  • Соберите библиотеку из 4–6 орнаментальных элементов (веер, лучи, ромб, шеврон, ступени) и повторяйте только их.
  • Начинайте экран с центральной оси: сначала поставьте заголовок и главное действие, потом обрамление.
  • Держите орнамент тонким (1–1.5 px) и полупрозрачным за текстом, плотным — только в рамках и разделителях.
Ещё 1
  • Для рабочих экранов используйте светлую версию на слоновой кости: таблицы читаются лучше, а стиль сохраняется.

Ограничения

Ограничения

  • Строгая симметрия плохо уживается с асимметричными сложными формами и длинными многоколоночными сценариями.
  • Декоративные шрифты прописными тяжело читаются в длинных текстах и мелких размерах.
  • Орнамент и рамки отнимают место, поэтому плотные интерфейсы требуют упрощённой версии стиля.
Ещё 1
  • Ассоциации с роскошью и ретро не подходят массовым дешёвым и молодёжным продуктам.

Ошибки

  • Золотой градиент с бликами «под металл» на всём подряд — получается дешёвая имитация вместо графичного золота.
  • Скругления 12–24 px и мягкие тени — они разрушают геометрию эпохи.
  • Декоративный шрифт в основном тексте и мелких подписях.
Ещё 3
  • Асимметричная вёрстка без оси: стиль превращается в просто тёмную тему с золотом.
  • Слишком много разных орнаментов на одном экране, спорящих друг с другом.
  • Светлое золото на слоновой кости с контрастом ниже 3:1.

Сочетания

Подходы разного уровня — их можно сочетать.

  • Премиальное оформление

    Общая палитра роскоши: премиальная сдержанность и воздух плюс орнамент и симметрия ар-деко для витрин и брендов.

    Направление
  • Редакционный стиль

    Журнальная вёрстка с колонками и буквицей в обрамлении ар-деко — для меню, программок и лонгридов.

    Направление
  • Ретро

    Ретро добавляет фактуру печати и плакатность; ар-деко задаёт строгую геометрию, вместе — афиши и мероприятия.

    Направление
  • Bento-компоновка

    Модульная плитка с золотыми рамками и восьмиугольными углами — удобная компоновка для обзоров и кабинетов.

    Компоновка

Применить стиль

Промпт для ИИ под ваш тип продукта.

Использовать
Отзыв