Что такое Футуризм веб-дизайн?

Футуризм начался в 1909 году с манифеста Филиппо Томмазо Маринетти, прославлявшего скорость, машины и динамизм - художники и дизайнеры хотели запечатлеть само движение, а не статичную сцену, будучи одержимы двигателями, пропеллерами и ощущением ускорения. Столетие спустя та же одержимость скоростью и точной механикой возвращается в научно-фантастическом продуктовом дизайне: презентации концепт-машин, аэрокосмические приборные панели и лендинги хардвер-стартапов, где машину предлагается читать как приборную панель, а не разглядывать как фотографию.

В вебе это проявляется как светящееся реакторное или моторное ядро вместо фото в hero, окружённое концентрическими HUD-кольцами, разверткой сканирующей линии и пунктирной орбитальной траекторией с движущимися по ней спутниками-метками. Мелкие плавающие панели спецификаций - координаты, масса, процент захвата цели, температура ядра - разбросаны по макету, а не сгруппированы в одном сайдбаре, рядом с круговым индикатором скорости, угловыми скобками-рамками и хазард-лентой, идущей вдоль подвала страницы. Свет ведёт себя как приборное освещение - светящийся рим-лайт и развёртка сканирования, - а не как плоская заливка или мягкая тень.

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

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

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

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

• Графитово-чёрная, почти чёрная основа - близкая к почти-чёрному киберпанка, но чуть теплее
• Тёплый реакторно-оранжевый основной цвет, зарезервированный под свечение, рим-лайт и ключевой призыв к действию
• Холодный электро-циановый дополнительный цвет для HUD-линий, сканлайнов и телеметрических показаний - осознанный тёпло-холодный дуотон вместо конкурирующих неонов
• Небольшое количество кислотно-зелёного, зарезервированное под индикаторы статуса и захвата цели, только в мелких деталях, не в крупных полях
• Свет через свечение - box-shadow и text-shadow, читающиеся как подсвеченная приборная панель, - вместо плоской заливки или мягких пастельных градиентов

Типографика

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

UI-паттерны

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