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

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

Skeuomorphism

Интерфейс как реальные вещи: дерево, кожа, металл и бумага, ручки, тумблеры и приборы с объёмом, бликами и тенями.

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

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

О стиле

Скевоморфизм переносит в интерфейс облик физических предметов и материалов. Регулятор громкости выглядит как металлическая ручка с насечкой, переключатель — как тумблер, заметки — как лист бумаги, а журнал — как настоящая тетрадь в кожаном переплёте. Пользователь сразу понимает, что можно нажать, повернуть или перелистнуть.

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

Современный скевоморфизм выразителен, но дисциплинирован: материалов на экране 2–3, текст лежит на спокойных поверхностях (бумага, матовое стекло, светлый металл), а детализация сосредоточена в элементах управления. Стиль уместен там, где важны тактильность, ремесло, ностальгия или прямое сходство с реальным устройством.

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

  • Имитация реальных материалов: дерево, кожа, металл, бумага, стекло, ткань.
  • Объём через градиенты, внешние и внутренние тени и блики с единым источником света сверху.
  • Элементы управления как физические устройства: ручки, тумблеры, клавиши, шкалы со стрелками, индикаторные лампы.
  • Мелкие правдоподобные детали: строчка на коже, шурупы, гравировка, линовка, загнутые углы, скотч.
  • Нажатые элементы «утапливаются» внутрь, отжатые — выступают над поверхностью.
  • Типографика как на реальных предметах: гравировка на металле, печать на бумаге, рукописные пометки.
  • Тёплая, предметная цветовая гамма, заданная самими материалами.

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

Композиция

  • Экран строится как физическая сцена: стол, панель прибора, тетрадь, полка — с понятным «основанием» и предметами на нём.
  • Предметы лежат слоями: фон-материал, на нём панели и листы, на них элементы управления; каждый слой отбрасывает тень на предыдущий.
  • Элементы управления группируются как на реальных приборах: шкала сверху, ручки и тумблеры в ряд, подписи гравировкой рядом.
  • Текст и данные помещаются на спокойные светлые поверхности (бумага, светлый металл, экран-дисплей), а не прямо на фактуру.
  • Небольшие намеренные неровности — повёрнутая на 1–2° карточка, наклеенная полоска скотча — добавляют жизни, но не ломают сетку.

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

  • Первый уровень — самый объёмный и детализированный предмет экрана (прибор, обложка, главный регулятор).
  • Второй уровень — заголовки, напечатанные или выгравированные на материале, с тиснением через тень текста.
  • Главное действие — самая «нажимаемая» кнопка: выпуклая, с бликом и сильной тенью, контрастного материала (латунь, красная клавиша).
  • Третий уровень — подписи, гравировка и рукописные пометки меньшего размера.
  • Фон-материал (дерево, кожа) затемнён и спокоен, чтобы предметы на нём выступали вперёд.

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

  • Цвет задают материалы: ореховое дерево, коричневая кожа, латунь, алюминий, кремовая бумага, тёмное стекло.
  • Каждый материал — диапазон из 3–4 оттенков: блик, основной тон, полутень, тень.
  • Акценты — как на реальных приборах: красная или зелёная индикаторная лампа, янтарная подсветка шкалы, синие чернила.
  • Текст — тёмно-коричневый или графитовый на бумаге и светлом металле, кремовый на тёмном дереве и коже, с контрастом не ниже 4.5:1.
  • На экране не больше 2–3 материалов, иначе сцена превращается в коллаж.

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

Дерево и латунь

Тёплая мастерская: ореховый корпус, латунная фурнитура, кремовая бумага.

Алюминий и стекло

Приборная панель: матовый металл, тёмное стекло шкал и янтарная подсветка.

Кожа и бумага

Записная книжка: кожаный переплёт, плотная бумага, чернила и закладка.

Типографика

  • Шрифт подбирается под материал: антиква — для печати на бумаге, строгий гротеск — для гравировки на металле, рукописный — для пометок.
  • Тиснение и гравировка — через тень текста в 1 px: светлую снизу для вдавленных букв на светлом, тёмную сверху для выпуклых.
  • Основной текст 16–18 px, вес 400, межстрочный интервал 1.5; длинные тексты — только на бумаге или светлой панели.
  • Подписи на приборах — прописные с разрядкой +0.08…+0.12 em, как гравировка на панели.

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

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

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

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

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

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

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

    Заголовки
    Lora
    Текст
    PT Sans

    Мягкая книжная антиква придаёт записным книжкам и журналам тёплый тон.

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

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

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

    Узкие прописные хорошо имитируют маркировку на металлических приборных панелях.

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

Кнопки

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

Поля ввода

Углублённые «прорези» в материале: внутренняя тень сверху, светлая кромка снизу; на бумаге — строка с линией, на металле — вставка из тёмного стекла.

Карточки

Листы бумаги, металлические таблички с шурупами или кожаные вставки со строчкой; каждая карточка отбрасывает мягкую тень на фон.

Навигация

Кожаная или деревянная панель с тиснёными пунктами; активный пункт — латунная пластина или утопленная клавиша, переключатели разделов — как физические вкладки.

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

Где подходит

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

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

  • Выберите один источник света (обычно сверху) и стройте все тени и блики от него.
  • Ограничьтесь 2–3 материалами на экране; самые детализированные — у элементов управления.
  • Кладите текст на спокойные светлые поверхности; фактура под текстом должна быть едва заметной.
  • Проверяйте экран в малом масштабе: реалистичные детали не должны превращаться в шум.
  • Делайте фактуры процедурно (градиенты, повторяющиеся полосы), а не тяжёлыми растровыми изображениями.

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

Ограничения

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

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

  • Тени, падающие в разные стороны от разных элементов.
  • Текст прямо на контрастной фактуре дерева или кожи с плохой читаемостью.
  • Пять и больше материалов на одном экране без логики «предмета».
  • Декоративные ручки и тумблеры, которые на самом деле ничего не делают.
  • Нечитаемые мелкие гравированные подписи с контрастом ниже 4.5:1.
  • Нажатое состояние, не отличающееся от отжатого — пропадает главная ценность стиля.

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

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

  • Ретро

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

    Направление

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

    Благородные материалы (кожа, латунь, шпон) в сдержанной подаче создают дорогой тактильный интерфейс.

    Направление

  • Неоморфизм

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

    Приём

  • Bento-компоновка

    Bento — способ компоновки: отдельные «предметы» (прибор, лист, табличка) раскладываются по плиткам как по ячейкам ящика.

    Компоновка

Применить стиль «Скевоморфизм»

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

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