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

Плоский дизайн

Flat design

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

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

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

О стиле

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

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

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

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

  • Однотонные заливки без теней, градиентов, бликов и текстур.
  • Насыщенная палитра из 3–5 ярких цветов, которыми заливают крупные блоки и целые секции.
  • Простые геометрические иллюстрации: круги, прямоугольники, треугольники, сплошные силуэты.
  • Одноцветные иконки-силуэты одной толщины и одного радиуса скругления.
  • Чёткий гротеск, часто полужирный, с крупными заголовками.
  • Кнопки и карточки — цветные плоскости с небольшим скруглением, без обводок-рамок и подъёма.
  • Разделение областей цветом фона, а не линиями и тенями.

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

Композиция

  • Экран делится на крупные цветные плоскости: полосы-секции, половины экрана, плитки одного размера.
  • Иллюстрация — равноправная часть композиции, часто занимает половину первого экрана.
  • Сетка простая и регулярная: 2, 3 или 4 равные колонки с одинаковыми промежутками.
  • Соседние блоки контрастируют по цвету, чтобы граница читалась без линий.
  • Повторяющиеся элементы (функции, шаги, тарифы) оформляются одинаковыми плитками с иконкой, числом и подписью.

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

  • Первый уровень — крупный полужирный заголовок (в 3–4 раза больше основного текста) на цветной плоскости.
  • Второй уровень — крупные числа и подзаголовки весом 600–700 внутри цветных плиток.
  • Главное действие — самый контрастный цвет на экране (например, жёлтая кнопка на синем фоне).
  • Второстепенное — белые или светло-серые поверхности и приглушённый текст.
  • Цвет в плоском дизайне кодирует смысл: один цвет — одна роль во всём интерфейсе.

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

  • Палитра из 1–2 нейтралей и 3–5 насыщенных цветов одинаковой яркости, чтобы ни один не «проваливался».
  • Каждому цвету назначается роль: основное действие, навигация, успех, предупреждение, ошибка, категория.
  • Текст на цветных плоскостях — белый или очень тёмный; выбирайте тот, который даёт контраст не ниже 4.5:1.
  • Оттенки одного цвета (светлее/темнее на 10–15%) заменяют тени для состояний и вложенных поверхностей.
  • Чистые #FF0000, #00FF00 и #0000FF не используются: насыщенные, но слегка смягчённые тона смотрятся современнее.

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

Яркий базовый

Классический плоский набор для массовых сервисов и обучения.

Тёплый поп

Дружелюбная палитра для детских, образовательных и лайфстайл-продуктов.

Тёмный плоский

Для медиа, игр и ночных сценариев: яркие плоскости на глубоком фоне.

Типографика

  • Чёткий геометрический или нео-гротеск без засечек; 2–3 начертания (400, 500/600, 700/800).
  • Заголовки полужирные (700–800), короткие, с межстрочным интервалом 1.05–1.15.
  • Основной текст 16–18 px, вес 400, межстрочный интервал 1.5.
  • Числа в плитках и инфографике крупные и жирные — это часть визуального языка стиля.

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

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

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

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

    Слегка скруглённый гротеск с плотными жирными начертаниями, отлично звучит на цветных плашках.

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

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

    Заголовки
    Montserrat
    Текст
    Open Sans

    Геометричные заголовки и нейтральный, очень читаемый основной текст.

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

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

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

    Мягкие скруглённые формы для дружелюбных и детских продуктов.

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

Кнопки

Сплошная заливка насыщенным цветом, скругление 4–8 px, без тени и обводки; текст полужирный, белый или тёмный по контрасту. Вторичная кнопка — светлая плоскость того же цвета или обводка 2 px.

Поля ввода

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

Карточки

Однотонная плоскость (белая на сером фоне или цветная на белом) без теней; внутри — крупная иконка или иллюстрация, заголовок и короткий текст.

Навигация

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

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

Где подходит

  • Массовые сервисы и приложения: доставка, транспорт, банкинг для широкой аудитории.
  • Образование, детские продукты, инфографика и объясняющие лендинги.
  • Дашборды и панели, где цвет кодирует категории и статусы.
  • Иконки, иллюстрации и маркетинговые материалы, которые должны одинаково выглядеть в любом размере.

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

  • Сначала составьте карту ролей цвета (действие, навигация, статусы, категории), потом заливайте блоки.
  • Рисуйте иллюстрации и иконки на одной сетке (например, 24 px) с одинаковыми радиусами скругления.
  • Проверяйте, что кнопку можно узнать без цвета: форма, подпись и расположение должны говорить сами.
  • Для состояний используйте оттенки того же цвета (темнее на 10–15%) вместо теней.
  • Ограничьте число ярких плоскостей на экране 3–4, иначе интерфейс превращается в лоскутное одеяло.

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

Ограничения

  • Без теней и объёма хуже читается, что кликабельно, особенно у пользователей, не привыкших к цифровым интерфейсам.
  • Плохо передаёт премиальность и материальность — для люкса и ремесла стиль выглядит слишком простым.
  • Яркие цветные плоскости утомляют в рабочих интерфейсах с долгими сессиями, если не уравновесить их нейтральными зонами.
  • Сложные слоистые интерфейсы (модальные окна поверх панелей) без теней требуют аккуратной работы с цветом фона.

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

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

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

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

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

    Bento — способ компоновки: плоские цветные плитки разных размеров дают яркую и понятную обзорную сетку.

    Компоновка

  • Минимализм

    Минимализм сдерживает палитру: один-два плоских цвета на нейтральном фоне и много воздуха.

    Направление

  • Игривый дизайн

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

    Направление

  • Швейцарский стиль

    Модульная сетка и крупная гротесковая типографика делают плоские цветные блоки строже и информативнее.

    Направление

Применить стиль «Плоский дизайн»

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

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