Что такое Biomorphism веб-дизайн?

Биоморфизм как дизайнерская идея восходит к органическому модернизму середины XX века - столам в форме почки от Исаму Ногучи, свободным формам вазы и стекла Алвара Аалто - мебели и предметам, чьи контуры взяты у природной асимметрии, а не у циркуля или линейки. В основе лежит убеждение, что форма, встреченная в листе, гальке или луже, ощущается человечнее и приветливее, чем идеальный круг или квадрат, потому что в природе на самом деле ничего не бывает настолько правильным.

В вебе это проявляется как формы-«блобы», построенные из неравномерных значений border-radius вместо фото и контейнеров иконок, разделители, нарисованные мягкой волной вместо прямой линии, и тёплая, приглушённая, землистая палитра - глина, шалфей, кремовый - вместо чистого чёрного, белого или насыщенного брендового цвета. Типографика тяготеет к скруглённым гуманистическим гротескам, а вёрстка допускает щедрые, неровные пробелы вместо жёсткой привязки всего к базовой сетке.

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

Ключевые визуальные характеристики

• Формы-«блобы» с неравномерными асимметричными значениями border-radius вместо кругов и квадратов
• Волнистые, «рукописные» разделители между секциями вместо прямых горизонтальных линий
• Крупные мягкие цветовые пятна, дрейфующие фоном по макету, вместо плоского однотонного фона
• Кнопки-таблетки и скруглённые углы карточек повсюду, без единого острого прямого угла
• Пунктирные или точечные круговые кольца в роли свободных декоративных акцентов вместо точных подчёркиваний

Цветовые характеристики

• Тёплая, приглушённая, землистая базовая палитра - кремовый, глина, шалфей - вместо чистого белого, чёрного или насыщенного брендового цвета
• Один тёплый акцент (терракота, охра), используемый скупо на блобах, кнопках и мелких деталях
• Низкоконтрастные, слегка приглушённые сочетания цветов, читающиеся как природные пигменты, а не экранный цвет
• Мягкие цветные фоновые формы, наложенные с низкой непрозрачностью вместо обычного фона

Типографика

• Скруглённые гуманистические гротески как для заголовков, так и для основного текста
• Курсивное или иначе начертанное акцентное слово внутри в остальном простого заголовка
• Щедрый, неровный межстрочный интервал и выключка по левому краю вместо строгой сетки по центру или по ширине

UI-паттерны

• Верхняя панель с простым брендмарком, волнистым пунктирным подчёркиванием активного пункта навигации и заполненной кнопкой-таблеткой
• Двухколоночный hero, сочетающий текст по левому краю с небольшой кластерной композицией из наложенных органических блобов вместо фото продукта
• Волнистый SVG-разделитель, отмечающий шов между hero и следующей секцией
• Ряд карточек-фич с одним скруглённым и одним прямым углом у каждой и маленькой иконкой-блобом вместо линейной иконки