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

Ретро

Retro

Эстетика середины XX века: тёплые выцветшие цвета, винтажные шрифты, бейджи-эмблемы, полосы и фактура старой бумаги.

Целостный характер интерфейса: настроение, типографика, цвет, формы и композиция вместе. Направления, приёмы оформления и способы компоновки — разные уровни решений, и их можно сочетать: например, Bento-компоновка в минималистичном стиле или стеклянные панели в технологичном интерфейсе.

Использовать Все направления
Сайт Приложение Веб-платформа
Учебная демонстрация
Демонстрация, а не реальный проект: сайт в стиле «Ретро». Тексты и данные вымышлены и показывают структуру, типографику и характер элементов.

О стиле

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

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

Важно не путать ретро с ретрофутуризмом: ретро смотрит на прошлое как на прошлое — уютное, тёплое, бумажное и светлое; ретрофутуризм же показывает будущее, каким его представляли в прошлом, — с неоном, хромом и тёмным космосом.

Основные признаки

  • Тёплая выцветшая палитра из 4–6 «типографских» красок: томатный, горчичный, бирюзовый, коричневый на кремовом фоне.
  • Винтажные шрифты: рукописный скрипт для логотипа, узкий плакатный гротеск для заголовков, антиква для текста.
  • Круглые эмблемы, бейджи-звёзды, ленты-растяжки с надписями и штампы.
  • Полосы: навесы, двойные линейки, полосатые рамки и разделители.
  • Фактура бумаги и печати, созданная мелким шумом, пятнами и лёгкими смещениями цвета.
  • Пунктирные линии отреза, билеты, купоны и меню с отточиями до цены.
  • Симметричные, часто центрированные композиции в духе плакатов и этикеток.

Композиция и визуальная иерархия

Композиция

  • Центрированная или зеркально-симметричная композиция, как у этикетки или афиши.
  • Содержимое обрамлено рамками: двойными линиями, полосатыми каймами, уголками-орнаментами.
  • Иллюстрация-эмблема в центре: круг с лучами, бутылка, автомобиль, силуэт товара.
  • Информационные блоки оформлены как предметы эпохи: билеты, купоны, ценники, карточки меню.
  • Горизонтальные ленты и линейки делят страницу на «ярусы».

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

  • Первый уровень — название или слоган рукописным скриптом либо узким плакатным шрифтом крупно.
  • Второй уровень — узкий гротеск прописными с разрядкой на ленте или плашке.
  • Третий уровень — текст антиквой, спокойный, тёмно-коричневый на кремовом.
  • Акцент — круглый бейдж или штамп с короткой фразой («с 1958», «Новинка»).

Цвета и примеры палитр

  • Фон — кремовый или бежевый «бумажный», никогда не чисто белый.
  • Вместо чёрного — тёмно-коричневый или тёмно-синий «печатный» цвет текста.
  • Краски приглушены и слегка выцвели: насыщенность ниже, чем у современных цифровых цветов.
  • Палитра ограничена 4–6 цветами, как при печати в несколько прогонов; их наложение даёт дополнительные оттенки.
  • Нет неона, холодных голубых свечений и тёмных космических фонов — это признаки ретрофутуризма.

Палитры — примеры, а не обязательный набор. Нажмите на цвет, чтобы скопировать HEX-код.

Лимонад 50-х

Классическая этикетка и вывеска кафе: томат, горчица, бирюза на креме.

Ламповый приёмник 70-х

Оливковые, оранжевые и коричневые тона для уютных и «домашних» продуктов.

Морской курорт

Морская открытка 60-х: синий, коралловый и песочный.

Типографика

  • 2–3 шрифта с разными ролями: скрипт или декоративный для логотипа и крупных слов, узкий гротеск для заголовков и меток, антиква для текста.
  • Рукописный скрипт — только для 1–3 слов, никогда для абзацев и интерфейсных подписей.
  • Узкий гротеск прописными с разрядкой +0.06…+0.15 em — для лент, меток, кнопок.
  • Основной текст антиквой 16–18 px, межстрочный 1.5–1.6, цвет тёмно-коричневый или тёмно-синий.

Все шрифты в примерах поддерживают кириллицу.

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

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

    Заголовки
    Lobster
    Текст
    Old Standard TT

    Lobster напоминает вывески и этикетки 50-х, Old Standard TT — книжную печать того же времени.

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

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

    Заголовки
    Oswald
    Текст
    PT Serif

    Узкий плакатный Oswald прописными работает в лентах и заголовках, PT Serif хорошо читается в тексте.

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

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

    Заголовки
    Yeseva One
    Текст
    Alice

    Контрастная Yeseva One и мягкая Alice дают атмосферу старого журнала и открытки.

Кнопки, поля, карточки и навигация

Кнопки

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

Поля ввода

Поле на светлой «бумажной» поверхности с линией снизу или тонкой коричневой рамкой, подпись узким гротеском прописными, как в бланке.

Карточки

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

Навигация

Меню узким гротеском прописными с разрядкой, разделённое звёздочками или ромбами; активный пункт подчёркнут двойной линией или стоит на ленте.

Рекомендации по применению

Где подходит

  • Кафе, пекарни, бары, крафтовые напитки и продукты, барбершопы.
  • Магазины винтажных вещей, музыки, книг, сувениров.
  • Туризм, локальные бренды, фестивали и ярмарки.
  • Продукты с историей бренда, которым важно ощущение традиции и уюта.

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

  • Выберите одно десятилетие и держитесь его: 50-е, 60-е и 70-е отличаются цветами и шрифтами.
  • Фактуру бумаги делайте едва заметной (прозрачность 3–8%), чтобы она не мешала тексту.
  • Собирайте декор из немногих повторяющихся элементов: одна эмблема, один тип ленты, один тип рамки.
  • Иконки и иллюстрации делайте плоскими двух-трёхцветными, как при трафаретной печати.

Ограничения и типичные ошибки

Ограничения

  • Плохо подходит для технологичных, финансовых и медицинских продуктов, где нужна современная точность.
  • Скрипты и декоративные шрифты снижают читаемость при мелком размере и в интерфейсных подписях.
  • Много декора усложняет плотные рабочие экраны и таблицы.
  • Легко скатиться в «театральный реквизит», если перегрузить эмблемами и орнаментом.

Типичные ошибки

  • Смешивать ретро с неоном, хромом и тёмным фоном — получается ретрофутуризм или китч.
  • Набирать рукописным шрифтом абзацы, кнопки и пункты меню.
  • Использовать чисто белый фон и чисто чёрный текст — пропадает «печатная» теплота.
  • Слишком сильная текстура бумаги, ухудшающая контраст текста.
  • Брать цвета и шрифты разных десятилетий одновременно.
  • Горчичный или мятный текст на кремовом фоне с недостаточным контрастом.

Сочетания с другими направлениями

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

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

    Журнальная вёрстка с колонками и антиквой естественно продолжает ретро-рекламу и старые журналы.

    Направление

  • Скевоморфизм

    Фактура бумаги, картона и эмали поддерживает ощущение настоящих винтажных предметов.

    Направление

  • Органический дизайн

    Тёплые природные оттенки и мягкие формы подходят ретро-брендам еды и ремесла.

    Направление

  • Необрутализм

    Толстые обводки и жёсткие тени поверх ретро-цветов дают современную «журнальную вырезку».

    Направление

Применить стиль «Ретро»

Получите промпт для ИИ-разработчика: выберите тип продукта — и инструкция будет собрана с учётом стиля и особенностей сайта, приложения или веб-платформы.

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