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

Название Frutiger Aero объединяет два независимых источника, определивших один и тот же момент: гарнитуру Frutiger, округлый гуманистический шрифт, использовавшийся на вывесках и в софте той эпохи, и интерфейс Windows Vista и 7 «Aero Glass» с его полупрозрачным глянцевым оформлением окон. Примерно с 2004 по 2012 год маркетинг потребительских технологий - операционные системы, реклама бутилированной воды и телефонов, интерфейсы ранних смартфонов - сходился к одному и тому же визуальному обещанию: технологии как что-то чистое, оптимистичное и находящееся в гармонии с природой, а не противопоставленное ей.

Внешний вид строится на глянцевых, выпуклых на вид поверхностях с ярким бликом-хайлайтом у верхнего левого угла - как будто освещённых, словно капля воды или отполированная стеклянная бусина. Кнопки и панели - не плоские заливки, а маленькие источники света: хромированные края, внутреннее свечение, мягкая цветная тень снизу. Этот глянец сочетается с небесно-голубыми и водно-зелёными градиентами, кругами боке и стилизованными природными мотивами (листья, волны, блики солнца), заменяющими собой hero-фотографию.

Сегодня стиль возвращается в основном как ностальгия и как осознанная контр-реакция: после примерно пятнадцати лет плоского, минималистичного, малонасыщенного SaaS-дизайна насыщенный оптимизм Frutiger Aero читается как сознательный уход от нормы, а не как дефолт. В отличие от неонового настроения Y2K или киберпанка, Frutiger Aero остаётся светлым, воздушным и «дневным» - он естественнее подходит продуктам о погоде, здоровье, экологии и «чистых технологиях», чем чему-то, что должно выглядеть дерзко.

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

• Глянцевые «мокрые» поверхности с ярким бликом-хайлайтом у верхнего левого угла кнопок, панелей и orb-виджетов - будто освещённые как стекло или вода
• Сферические orb- и droplet-виджеты вместо плоской карточки в роли hero-изображения или основного статус-индикатора
• Мягкие плавающие круги боке, медленно дрейфующие по фону, имитирующие свет сквозь стекло или воду
• Небесно-голубые и водно-зелёные градиенты в качестве фона страницы вместо плоской однотонной заливки
• Хромированные кнопки-пилюли и навигация с внутренним свечением и цветной тенью снизу
• Природные мотивы - листья, капли, волны, блики солнца - как чистые стилизованные векторные формы, а не фотографии

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

• Бледная, почти белая небесно-голубая база вместо чистого белого или тёмного фона
• Аквамариновый или циановый основной цвет в паре с листовым зелёным акцентом - буквальный, легко читаемый дуэт «вода и природа»
• Глубокий бирюзово-тёмный цвет для текста вместо чистого чёрного, который читается слишком тяжело на фоне воздушного, дневного настроения

Типографика

• Округлые гуманистические заголовочные шрифты - отсылка к гарнитуре Frutiger, в честь которой назван стиль
• Дружелюбный текст среднего начертания вместо технического или узкого дисплейного шрифта
• Минимальный трекинг и отсутствие разрядки прописными в подписях - в отличие от «системного» ощущения Y2K или киберпанка

UI-паттерны

• Двухколоночный hero: текст и призывы к действию с одной стороны, глянцевый orb- или droplet-виджет с другой, вместо плоской фотографии
• Горизонтальная лента маленьких стеклянных капсул (дни, теги, быстрые фильтры), слегка заходящих друг на друга, а не выстроенных вровень в сетку
• Одна крупная стеклянная hero-панель в паре с компактным списком вторичных показателей вместо однородной сетки одинаковых карточек
• Подвал и навигация, оформленные как полупрозрачная стеклянная полоса, а не сплошной цветной блок