Тренд в дизайне: эстетика старого интерфейса

Первые графические пользовательские интерфейсы появились на экранах компьютеров ещё в начале 1970-х годов. Влияние, которое они оказали на индустрию дизайна в целом и моушн-дизайн в частности, видно и сегодня. Этот стиль играет на ностальгии и отсылает к эстетике ретро.

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

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

В этой статье мы исследуем тренд на ретро-компьютерные интерфейсы, вспомним историю стиля и посмотрим на примеры роликов, выполненных в этой стилистике.

Для простоты мы сосредоточимся на более знакомых системах Microsoft и Apple. Почитать о полной хронологи графических пользовательских интерфейсов вы можете здесь.

Ни Apple, ни Microsoft не изобрели идею графического пользовательского интерфейса. Но они, безусловно, были двумя крупнейшими игроками, когда дело дошло до разработки операционных систем. Тренды в моушн-дизайне часто черпают вдохновение из прошлого, и вполне естественно, что элементы из ранних компьютерных систем начинают появляться и в современном моушн-дизайне.

Давайте посмотрим на первые версии графических интерфейсов Apple и Microsoft, поскольку именно они оказали сильное влияние на сегодняшний моушн-дизайн.

24 января 1984 года Apple представила System 1 (также известную как System 0.97) в качестве первой операционной системы Mac, которая была выпущена одновременно с запуском Macintosh 128K. Первое, что бросается в глаза — низкое разрешение и отсутствие цветов в интерфейсе. Но структура этой ОС уже выглядит знакомой, и мы все могли бы легко ориентироваться в ней.

Если присмотреться к деталям, можно заметить знакомые функции: строчку меню со значком Apple в верхнем левом углу, всплывающие окна, раскрывающиеся меню и перетаскиваемые значки рабочего стола. Невероятно, сколько из них так или иначе сохранилось в современных версиях macOS.

Простота визуальных эффектов со смелыми контурами, пиксельной графикой и коротким текстом делает его приятным для глаза даже сегодня. И, хотя внешнему виду действительно не хватает контраста, всё же определенно есть чем восхищаться во внешнем виде этой ранней ОС. Этот же стиль в значительной степени сохранялся в ранних операционных системах Apple, пока они не представили цветной интерфейс в 1991 году в System 7.

System 7.0 — первая цветная операционная система. Она выпущена для Apple Macintosh в 1991 году. Это было отмечено красочным значком меню Apple в левом верхнем углу. Некоторое время этот выпуск был одной из самых долго работающих операционных систем Apple, пока не появилась OSX. И снова основные визуальные элементы на дисплее похожи на то, что мы видели в версии 1. С небольшим оттенком цвета, но в ней была всё та же узнаваемая структура и рабочий процесс.

Windows 1.0 — первый графический пользовательский интерфейс Microsoft, построенный на основе MSDOS. По общему мнению, это была не самая удачная попытка Microsoft. Чрезмерная зависимость от взаимодействия с помощью мыши и проблемы с производительностью помешали ему стать супер популярным, но эта первая попытка дала Microsoft платформу для развития.

Интересно, что эта версия ОС не позволяла пользователям перекрывать окна друг другом. Это приводило к большому количеству параллельно открытых окон и программ, работающих в полноэкранном режиме, вместо плавающих окон, которые мы видели выше в Apple System 1.0. Навигация по файловой системе также была основана на списках вместо интерактивных значков.

Структура системы всё ещё кажется знакомой современному пользователю: меню, кнопки и элементы интерфейса в некоторой степени похожи на то, что мы видим и в ранней системе Apple. Единственное, что действительно бросается в глаза в Windows 1.0, — интенсивное использование ярких цветов в интерфейсе. Аналогичный визуальный стиль сохранился и в Windows 2.0.

Windows 3.0 была выпущена в 1990 году и превратила Microsoft в систему, основанную на значках и кликах, вместо навигации на основе списка, используемой в версии 1.0. По общему мнению, это был первый коммерческий успех Windows. За два года со старта запуска было продано 10 миллионов копий. Визуально эта версия представляла приближенный к 3D стиль кнопок в попытке добавить глубину и контраст, а также возможность настраивать цветовые темы. Цвета темы и установка красочного фона сильно выделяли ранние версии Windows на фоне Apple.

Более поздние операционные системы Windows и Apple постепенно начали отходить от эстетики периода 80-х — начала 90-х годов, но именно на дизайне в этот период мы остановимся подробнее, потому что он в большей степени оказал влияние на современный моушн-дизайн, создав тренд эстетики старого компьютера.

Если проанализировать, из чего строится стиль, можно найти несколько общих паттернов и явлений.

Полужирные рамки и сетки

Одна из отличительных черт тенденции — использование смелых, минималистичных сеток и рамок, напоминающих ранние интерфейсы Apple Mac System 1 и Windows 1.0. Зачастую в других стилях используются тонкие, мягкие и почти незаметные рамки. И любопытно, как тренд эстетики старого компьютерного софта идёт вразрез этой закономерности.

Геометрические формы

Во многих роликах можно увидеть смелые геометрические формы. Иногда — формы, вдохновлённые 3D, иногда — смелые абстрактные очертания. Эти формы могут проявляться как основные изображения, но их также можно использовать более тонкими способами в качестве фоновых узоров или деталей.

Сочетания ретро-стилей

В эстетике старого компьютерного софта присутствует влияние и других популярных стилей, которые также помогают вызвать ностальгию по эпохе. Это, например, брутализм, футуризм, пароволн и стиль Мемфис. Почти любая графика, вдохновлённая 70-ми, 80-ми, 90-ми годами, также отлично подходит для эстетики старых компьютерных софтов.

Пиксельные шрифты и графика.

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

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

Спасибо за прочтение!