Стиль Frutiger Aero в интерфейсах 2003–2014 годов
Рубрикатор
1. Концепция исследования 2. Отличительные черты Frutiger Aero 3. Операционные системы 4. Компьютерные программы 5. Игры и приставки 6. Вывод
Ассоциативный коллаж для стиля Frutiger Aero
Концепция исследования
Период с 2003 по 2014 год вызывает у современной молодёжи ностальгию, поскольку на него выпало их детство и юношество. Но дело не только в эмоциональной привязанности к воспоминаниям, а в том, что окружало нас тогда повсеместно. Живя в современном мире, мы не замечаем, как происходящее вокруг становится частью истории и культуры.
Так, в это время мы, сами того не понимая, стали свидетелями не только технологического прогресса, но и расцвета эстетики Frutiger Aero.
В этом визуальном исследовании я хочу проследить отражение эстетики Frutiger Aero в интерфейсах компьютерных программ, операционных систем, портативных устройств и даже игр в период с 2003 по 2014 год. Это время было пиком популярности для данного стиля, поэтому его влияние можно увидеть практически в каждом медиуме.
Изображения рабочих столов по умолчанию в Windows Vista и Windows 7
Для исследования я подбирала интерфейсы, имеющие в себе отличительные черты Frutiger Aero. Говоря «интерфейс», я подразумеваю графический интерфейс исследуемого приложения или программы, то есть их внешний вид. В исследовании я обращаю внимание не только на популярные и часто используемые интерфейсы, но и на то, как они изменялись со временем, как менялся стиль и как его превосходство в дизайне повлияло на разработку интерфейсов в целом.
Интерфейс Windows 7 (2009)
Отличительные черты Frutiger Aero
Для Frutiger Aero характерно использование скевоморфизма — элементов интерфейса с имитацией объёма реальных предметов. Так, приложения для чтения книг будет выглядеть как полка с настоящими книгами, с анимацией перелистывания страниц, а калькулятор — виртуальной имитацией настоящего калькулятора с объемными кнопками.
Скевоморфмизм в iOS
Во Frutiger Aero эффекта достоверности изображаемого предмета добиваются с помощью градиентов и бликов, придающих элементам интерфейса объём. Для сравнения, сейчас реалистичное изображение устарело, и ему на смену пришёл стиль «flat» и неоморфизм.
Скевоморфизм во Frutiger Aero на примере Windows Vista и стиль «flat» — на Windows 10.
Вслед за реалистичным объёмом Frutiger Aero сочетает в себе боке, глянцевые и полупрозрачные текстуры стекла и воды. Также используются пузыри, полярные сияния, яркие цвета и природные мотивы: трава, небо, рыбки.
Операционные системы
Начать стоит с того, чем мы пользовались и пользуемся до сих пор каждый день. В нашем сознании стиль Frutiger Aero закрепило повседневное использование компьютеров и мобильных телефонов, а точнее — их операционных систем.
На смену Windows XP Microsoft выпустил Windows Vista, которую пользователи встретили с критикой. Одной из проблем стали высокие системные требования, поскольку один из оригинальных стилей оформления Windows Aero использовал полупрозрачные окна и их наложение друг на друга. Такой интерфейс поддерживали только устройства с видеоадаптером «Vista Ready».
Тем не менее, вид Windows Vista послужил основой для последующей ОС — Windows 7, уже имевшей успех среди пользователей. В обеих системах мы видим использование полупрозрачности, ощущение «стеклянности» и скевоморфизм в виджетах. Несмотря на то, что Vista «не оправдала ожиданий», она имела основные черты набирающего популярность стиля.
Windows Vista (2007)
Windows 7 (2009)
Поворотное событие не только в мире технологий, но и в сфере дизайна — появление на рынке техники Apple. Первая версия Mac OS X 10.0 Cheetah имела некоторые черты Frutiger Aero. Например, кнопки «закрыть» или «свернуть окно» изображены в виде «стеклянных» разноцветных шариков. Эта деталь до сих пор остается отличительной чертой Mac OS. Также можно отметить градиенты, придающие плашкам и иконкам объем, и просвечивание сквозь выпадающие списки.
Mac OS X 10.0 Cheetah (2001)
Однако в полной мере Frutiger Aero раскрывается уже в 2007 году, наравне с операционными системами Windows.
Mac OS X 10.5 Leopard имеет полупрозрачную стеклянную подложку под иконки. Складывается ощущение, что приложения как будто «стоят на полке», и сами они изображены в полном соответствии с принципами скевоморфизма.
В отличие от Windows, Mac OS придерживается большего минимализма в дизайне открытых окон: не каждый элемент интерфейса выглядит как стеклянная полупрозрачная фигурка. Однако можно заметить сильное влияние моды на подобный стиль интерфейсов, которое продолжалось вплоть до OS X Mountain Lion и OS X Yosemite.
Mac OS X 10.5 Leopard (2007) и OS X 10.8.5 Mountain Lion (2012)
Подражателем Mac OS X 10.5 стала операционная система из Северной Кореи — Red Star OS. Помимо того, что она копирует оригинал за исключением маленьких изменений, мы можем увидеть готовые фоны для рабочего стола. Блики, боке, свечения, градиенты, природные мотивы — всё, что имеет отношение к Frutiger Aero
Red Star OS (2008)
Появление iPhone ознаменовало начало новой эпохи. Смартфон вышел в 2007 году, поэтому первые версии iOS уже были подвержены влиянию Frutiger Aero.
Начиная с iOS 3 визуальные решения не меняются, иконки остаются теми же, а дизайн придерживается принципов скевоморфизма.
iOS 3 (2009), iOS 4 (2010), iOS 6 (2012)
Компьютерные программы
Сейчас интерфейс любой устанавливаемой программы отличается от системного в угоду эстетичности и поддержания фирменного стиля. Встроенные же копируют интерфейс операционной системы, на которой они установлены.
Интерфейс браузера Internet Explorer содержит всё те же особенности Frutiger Aero, что и Windows 7. Однако, ему не хватает «прозрачности» — она присутствует только во внешнем окне и баре загрузки.
Internet Explorer 8 (2009), Internet Explorer 9 (2011)
Незамеченной в России осталась электронная энциклопедия Encarta, так как не имела русского языка. На ее примере видно, как подобные программы могут не вторить интерфейсу системы, а иметь свой дизайн. Последние версии интерфейса энциклопедии имели природные мотивы, «выпуклые» кнопки и прочие элементы стиля Frutiger Aero.
Encarta (2009)
До появления Skype пользователи обменивались сообщениями через Windows Live Messenger. В России данная программа тоже не приобрела всеобщую популярность, но стоит отметить её дизайн. Всё, что находится внутри программ, повторяет черты операционной системы, при этом не копируя ее полностью. В этой версии мы видим стеклянные выпуклые рамки вокруг аватаров пользователей, «лучи света» и блики в интерфейсах, а также градиенты, подчеркивающие верхние и нижние границы окна.
Windows Live Messenger (2012)
Windows Media Center, программа для управления домашним медиацентром, копировала ведущие приемы в дизайне своей операционной системы. Стоит отметить отражения букв, имитирующие стеклянную поверхность, свечения на заднем плане и «выпуклость» разделов. Можно предположить, что вдохновение данная программа взяла из дизайна игровых консолей.
Windows Media Center (2009)
Игры и приставки
В отличие от медиацентров, в настоящее время игровые консоли пользуются большей популярностью.
Зарождение и развитие Frutiger Aero можно проследить в игровых консолях PlayStation. Портативная версия 2004 года пусть и имела скромную графику, однако обладала некоторыми чертами этого стиля в своем интерфейсе.
PlayStation Portable (2004)
Взяв за основу иконки предыдущих версий, PlayStation 3 добавляет в свой интерфейс больше объема, чтобы следовать набирающему в то время популярность стилю.
Задний фон, помимо плавно перетекающих друг в друга цветов, отличался анимацией, похожей на движение прозрачной ткани. Также выбранные разделы подсвечивались, рядом с ними появлялась рамка, похожая на мыльный пузырь своим видом. Эти элементы как раз присущи Frutiger Aero.
PlayStation 3 (2007)
Полно Frutiger Aero раскрывается в дизайне интерфейса домашней игровой консоли Nintendo Wii U. Объемные рамки с яркими бликами и отражениями вокруг иконок и полупрозрачные окошки с текстом придают стеклянности, присущей этому стилю. Также незаметный для глаза легкий градиент создает ощущение объемного заднего плана.
Wii U (2007)
Игровая консоль Xbox 360 обновила интерфейс главного меню в 2010 году вслед за модой на Frutiger Aero. На заднем плане переливаются боке и цветные градиенты, а иконки приложений имеют «стеклянные» изображения. Также зелёная цветовая гамма отсылает к связи стиля с природными мотивами.
Xbox 360 (2010)
Так, встроенная в Windows 7 игра Purble Place подражает операционной системе, использует те же окна и шрифты и вызывает ощущение прозрачности всего на экране. Визуальный стиль этой игры может показаться «перегруженным», ведь каждый её элемент — не только кнопки и всплывающие окна, но и персонажи с окружением — оснащён приёмами стиля Frutiger Aero. Не хватает только скевоморфизма.
Purble Place (2007)
Многие игры, выходившие в период с 2007 по 2014 год, попали под влияние Frutiger Aero. Неосознанно дизайнеры следовали его принципам, несмотря на жанр, сюжет или бюджет игры.
Так, культовая Spore имеет объёмные кнопки, как будто сделанные из мутного цветного стекла. На горизонтальных плашках — объемный градиент, отсылающий к операционным системам того времени.
Spore (2008)
То же самое можно сказать и про серию игр The Sims 3, выходившую с 2009 по 2013 год. Мы видим блики, объёмные формы и градиенты, прозрачные прогресс-бары и другие элементы интерфейса.
Даже если интерфейсы этих игр не похожи полностью на Frutiger Aero, нельзя не заметить, что разрабатывались они в эпоху расцвета этого стиля.
The Sims 3 (2009-2013)
Вывод
Эпоха Frutiger Aero непременно оставила культурный след в истории дизайна. Этот стиль диктовал тренды на внешний вид сайтов, приложений, программ и операционных систем. Повсеместно можно увидеть его влияние, свойственные ему черты даже там, где этого не ожидаешь. Все потому что повседневное использование вещей, созданных в этой эстетике, задавало дизайнерам понимание того, каким среднестатистический пользователь ожидает увидеть интерфейс любого цифрового устройства.
Так, чтобы ожидания оправдывались, мода на «стеклянный объем», блики и свечения продолжалась вплоть до 2014–2015 года, когда экстремально минималистичный дизайн Windows 8 затмил лаконичный «flat»-дизайн Windows 10. А до того времени любое дизайнерское решение подразумевало использование принципов, заложенных в стиле Frutiger Aero.
Источники
Что такое скевоморфизм // Skillbox Media [Электронный ресурс]. URL: https://skillbox.ru/media/design/chto_takoe_skevomorfizm/ (дата обращения 5.04.2023)
Tridimensionality: skeuomorphism, flat design, and neumorphism // uxdesign.cc [Электронный ресурс]. URL: https://uxdesign.cc/tridimensionality-of-skeuomorphism-flat-design-and-neumorphism-bc9d705a5cc7 (дата обращения 5.04.2023)
What is frutiger aero, the aesthetic taking over from Y2K? // dazeddigital.com [Электронный ресурс]. URL: https://www.dazeddigital.com/life-culture/article/58103/1/what-is-frutiger-aero-aesthetic-tiktok-msn-messenger-windows-vista-noughties (дата обращения 5.04.2023)
Windows Vista // wallpaperhub.app [Электронный ресурс]. URL: https://wallpaperhub.app/wallpapers/6853 (дата обращения 11.05.2023)
Frutiger Aero // aesthetics.fandom.com [Электронный ресурс]. URL: https://aesthetics.fandom.com/wiki/Frutiger_Aero?file=220742.jpg (дата обращения 11.05.2023)
Почему скевоморфизм должен вернуться в iOS // mews.biggeek.ru [Электронный ресурс]. URL: https://mews.biggeek.ru/pochemu_dolzhen_vernutsa_skeuomorphism/ (дата обращения 11.05.2023)
What is Frutiger Aero? Uncovering the nostalgic 2000’s aesthetic // usmobile.com [Электронный ресурс]. URL: https://www.usmobile.com/blog/frutiger-aero/ (дата обращения 11.05.2023)
Windows 10 // answers.microsoft.com [Электронный ресурс]. URL: https://answers.microsoft.com/ru-ru/windows/forum/all/windows-10-%D0%BF%D0%BB%D0
%B8%D1%82%D0%BA%D0%B0/9a29bb1a-9e9d-43b3-9571-e1257b4d0b82 (дата обращения 11.04.2023)
Windows Vista Aero // winzoro.net [Электронный ресурс]. URL: https://winzoro.net/2016/05/15/windows-vista-aero-for-windows-7.html (дата обращения 05.05.2023)
Windows Vista // en.wikipedia.org [Электронный ресурс]. URL: https://en.wikipedia.org/wiki/Windows_Vista (дата обращения 05.05.2023)
Microsoft Windows 7 // de.wikipedia.org [Электронный ресурс]. URL: https://de.wikipedia.org/wiki/Microsoft_Windows_7 (дата обращения 11.04.2023)
Классический вход в систему Windows 7 // social.technet.microsoft.com [Электронный ресурс]. URL: https://social.technet.microsoft.com/Forums/ru-RU/71aded2a-eca9-447f-8516-db35fe72b5d4/105010831072108910891080109510771089108210801081?forum=windows7ru (дата обращения 11.04.2023)
Mac OS X 10.0 // ru.wikipedia.org [Электронный ресурс]. URL: https://ru.wikipedia.org/wiki/Mac_OS_X_10.0 (дата обращения 11.05.2023)
Aqua (интерфейс) // ru.wikipedia.org [Электронный ресурс]. URL: https://ru.wikipedia.org/wiki/Aqua_(%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81) (дата обращения 11.04.2023)
Encarta // katiecadettech.files.wordpress.com [Электронный ресурс]. URL: https://katiecadettech.files.wordpress.com/2020/12/encarta09win10-17.png (дата обращения 11.04.2023)
Операционная система из Северной Кореи // pikabu.ru [Электронный ресурс]. URL: https://pikabu.ru/story/operatsionnaya_sistema_iz_severnoy_korei_4994288 (дата обращения 11.04.2023)
Add-in Express 2010 for Internet Explorer Professional // softpedia.com [Электронный ресурс]. URL: https://www.softpedia.com/get/Programming/Other-Programming-Files/Add-in-Express-for-Internet-Explorer-Professional.shtml (дата обращения 05.05.2023)
Internet Explorer // classicshell.net [Электронный ресурс]. URL: http://www.classicshell.net/gallery/Classic-IE9/custom_ie (дата обращения 05.05.2023)
Как превратить компьютер в центр развлечений с помощью Windows Media Center // windows-school.ru [Электронный ресурс]. URL: https://windows-school.ru/publ/winfaq/ptdz/nachalo_raboty_s_windows_media_center_kak_prevratit_kompjuter_v_centr_domashnij_razvlechenij/10-1-0-203 (дата обращения 05.05.2023)
How to install 6.61 Infinity + Custom Firmware // hackinformer.com [Электронный ресурс]. URL: https://hackinformer.com/PlayStationGuide/PSP/tutorials/how_to_install_661_infinity.html (дата обращения 05.05.2023)
XMB Item Hider PSP // gamebrew.org [Электронный ресурс]. URL: https://www.gamebrew.org/wiki/XMB_Item_Hider_PSP (дата обращения 05.05.2023)
r/gaming // reddit.com [Электронный ресурс]. URL: https://www.reddit.com/r/gaming/comments/g46ujl/not_gonna_lie_to_this_day_the_ps3_still_has_one/ (дата обращения 05.05.2023)
My Wii U Menu // youtube.com [Видео]. URL: https://youtu.be/sO2YDbxfc3A (дата обращения 05.05.2023)
Wii U Menu // wiki.cemu.info [Электронный ресурс]. URL: https://wiki.cemu.info/wiki/Wii_U_Menu (дата обращения 05.05.2023)
Как сменить дашборд xbox 360 с последнего на дашборд 2010 года? // pikabu.ru [Электронный ресурс]. URL: https://pikabu.ru/story/kak_smenit_dashbord_xbox_360_s_poslednego_na_dashbord_2010_goda_7587689 (дата обращения 05.05.2023)
Purble Place // purble-place.ru.malavida.com [Электронный ресурс]. URL: https://purble-place.ru.malavida.com/windows/ (дата обращения 11.04.2023)
Spore Screenshots // steamcommunity.com [Электронный ресурс]. URL: https://steamcommunity.com/app/17390/screenshots/ (дата обращения 05.05.2023)
The Sims 3 Screenshots // steamcommunity.com [Электронный ресурс]. URL: https://steamcommunity.com/sharedfiles/filedetails/?id=1111405450 (дата обращения 11.04.2023)
Поддержка Windows Vista прекратиться 11 апреля 2017 года // msoffice-prowork.com [Электронный ресурс]. URL: https://msoffice-prowork.com/windows-vista-support-ends-11-april-2017/ (дата обращения 11.04.2023)
