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

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

Organic Design

Природные цвета, мягкие неровные формы, плавные кривые и тёплые текстуры — интерфейс, который ощущается живым и спокойным.

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

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

О стиле

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

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

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

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

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

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

Композиция

  • Под живыми формами — обычная сетка 12 колонок; асимметрия создаётся смещением блоков на 1–2 колонки и наложением, а не хаосом.
  • Крупные органические формы работают как фон и рамка для изображений, текст лежит на спокойной ровной площадке.
  • Секции разделяются волнистыми кривыми и сменой природного фона (лён → шалфей → глина).
  • Карточки можно ставить «лесенкой» с вертикальным смещением 16–40 px, чтобы ряд выглядел естественно.
  • Декоративные листья и камни выходят за края блоков, но не перекрывают текст и действия.

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

  • Первый уровень — крупный заголовок антиквой 48–72 px, одно слово можно выделить курсивом или цветом мха.
  • Второй уровень — подзаголовки гротеском 500–700 и короткие ярлыки на мягких «гальках».
  • Самый насыщенный цвет (мох, терракота) — только у главного действия и ключевой цифры.
  • Декоративные формы светлее и менее контрастны, чем контент: фон не спорит с текстом.
  • Подписи и метаданные — приглушённым тёплым серо-зелёным, но с контрастом не ниже 4.5:1.

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

  • Основа — тёплые светлые нейтрали: лён, песок, кремовая бумага; без чистого белого #FFFFFF.
  • Текст — глубокий тёмно-зелёный или коричневый вместо чёрного.
  • 1–2 природных акцента (мох, терракота, охра) занимают 10–15% площади; остальное — приглушённые оттенки той же гаммы.
  • Цвета смешиваются как в природе: соседние оттенки близки по насыщенности, без неоновых и чистых спектральных тонов.
  • Для фона секций используйте 2–3 близких по светлоте оттенка, чтобы смена фона читалась мягко.

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

Луг и глина

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

Морской берег

Прохладная гамма для велнеса, путешествий и медицины.

Лесная ночь

Тёмная тема для вечерних сценариев, медитаций и сна.

Типографика

  • Заголовки — гуманистическая антиква с живым рисунком (Alegreya, Lora, Literata), вес 400–500, допустим курсив для выделения слова.
  • Основной текст — мягкий гуманистический гротеск 16–18 px, межстрочный интервал 1.55–1.7.
  • Избегайте узких, геометрически жёстких и моноширинных шрифтов — они ломают ощущение натуральности.
  • Шкала размеров с коэффициентом 1.25–1.333; заголовки без отрицательного трекинга или с очень лёгким (−0.01 em).

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

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

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

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

    Каллиграфическая антиква и родственный гротеск дают тёплый рукотворный характер.

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

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

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

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

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

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

    Заголовки
    Literata
    Текст
    Source Sans 3

    Более строгая пара для сервисов, где органика проявляется в формах и цвете, а не в шрифте.

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

Кнопки

Кнопки-«гальки» с крупным асимметричным скруглением, заливкой цвета мха или терракоты и мягкой тёплой тенью. Вторичные — с обводкой 1.5 px тёмно-зелёным или текстовые со стрелкой-веточкой.

Поля ввода

Поля на светлой льняной заливке с мягким скруглением 14–20 px и обводкой 1 px тёплого серо-зелёного; при фокусе обводка становится цветом мха и появляется мягкое кольцо.

Карточки

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

Навигация

Спокойное текстовое меню, активный пункт отмечен мягкой подложкой-«галькой» или волнистой линией снизу. На мобильных — плавающая нижняя панель с крупным скруглением.

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

Где подходит

  • Эко-товары, фермерские продукты, кафе, пекарни и косметика на натуральных ингредиентах.
  • Велнес, йога, медитация, психологическая поддержка и сон.
  • Туризм, загородный отдых, садоводство и ландшафтный дизайн.
  • Ремесленные мастерские, керамика, текстиль, детские товары из натуральных материалов.

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

  • Подготовьте набор из 4–6 повторяемых органических форм (SVG) и используйте их во всём продукте, а не рисуйте каждую заново.
  • Сначала постройте обычную сетку, затем «размягчайте» её формами — так макет останется упорядоченным.
  • Проверяйте текст на текстурном фоне: зерно и узоры должны быть еле заметны (прозрачность 3–8%).
  • Используйте реальные фото природных материалов или иллюстрации растений вместо абстрактных градиентов.

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

Ограничения

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

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

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

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

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

  • Минимализм

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

    Направление

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

    Журнальная вёрстка с колонками и антиквой хорошо ложится на природную палитру для брендов с историями о происхождении продукта.

    Направление

  • Глассморфизм

    Приём стекла поверх мягких цветных блобов даёт эффект воды и утреннего тумана; держите стекло тёплым и полупрозрачным.

    Приём

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

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

    Компоновка

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

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

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