Как поменялись UI-элементы за 35 лет: от GIF и Comic Sans к нейросетям и адаптивам

Сегодня мы привыкли к чистым и удобным интерфейсам, но так было не всегда. За последние 35 лет UI прошел путь от хаотичных сайтов с мигающими кнопками и пестрыми шрифтами до минималистичных и адаптивных экранов, созданных с участием ИИ. Вспоминаем, с чего все начиналось и как мы пришли к Figma, нейросетям и «воздушному» минимализму.

До 1980-х годов компьютеры были доступны единицам и управлялись с помощью набора текстовых команд. В 1980-х появились первые графические пользовательские интерфейсы и HTML — язык, который дал возможность упорядочить и структурировать текстовые блоки на сайте. А в 1990-х вместе с распространением персональных компьютеров и появлением интернета в мире дизайна началась новая эпоха, когда разработчики пытались имитировать физический мир на экране, а сайты стали отдаленно напоминать те, которые мы видим сейчас. 

1990-е: первые окна, пиксели и «реализм»

Тогда веб-дизайн находился в зачаточном состоянии, а сайты создавали в основном разработчики-энтузиасты. Выглядели они примерно так:

• Яркие цвета. На тот момент мониторы поддерживали ограниченное количество цветов — например, 256 или 16-битную палитру. Именно поэтому чаще использовались яркие оттенки: они выглядели на экранах контрастнее и «живее», чем приглушенные. 

• Шрифты: те, что предусмотрены в ОС и браузерах. Браузеры не поддерживали кастомные шрифты, а шрифты с тонкими линиями на экранах с низким разрешением выглядели крайне плохо. Именно поэтому использовали те, которые уже установлены на компьютере: классические для Windows Arial, Times New Roman и Verdana, а из декоративных — Impact и Comic Sans. 

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

• Множество анимированных элементов. Танцующие человечки, вращающиеся кнопки, переливающиеся надписи, бегущая строка — все, чтобы сделать страницу в интернете более «живой». Хороший пример — сайт Cameron’s World.

• Гиперссылки. Чтобы наглядно показать, что с частью текста можно взаимодействовать, создавали гиперссылки. Иногда их было так много, что почти весь текст на сайте становился цветным и кликабельным. 

Во второй половине 1990-х появился CSS — язык, который задает стили и оформление веб-страницы. Благодаря ему у сайтов появились «шапки», «подвалы», навигационное меню и понятное расположение блоков текста внутри страницы. 

2000–2010-е: скевоморфизм и отказ от него

По мере появления новых языков программирования и Web 2.0 в дизайне появился новый тренд — скевоморфизм. Для него характерны тени, текстуры и объемные элементы, которые имитируют физический мир вокруг. Например, Facebook выглядел как записная книжка с контактами людей, приклеенной на скотч фотографией и скрепленными нитками страницами. 

Толчком в развитии скевоморфизма стал выпуск Apple первого iPhone — телефона с сенсорным интерфейсом. Чтобы помочь пользователям перейти с физических предметов на виртуальные без изменения привычных паттернов, дизайнеры создавали максимально реалистичные иконки и механики взаимодействия: перелистывание страниц при чтении книг, нажатие кнопок в калькуляторе.

Apple стремилась очень точно передать текстуры, поэтому специалисты компании фотографировали реальные кнопки с разных ракурсов и воспроизводили объем элемента и освещение на экране. В результате у элемента кнопки могло получаться до шести слоев градиентов.

К концу десятилетия люди начали уставать от переизбытка графики — на смену скевоморфизму пришел flat-дизайн.

2010–2015-й: flat-дизайн и мобильные интерфейсы

Flat-дизайн, или «плоский» дизайн, — противоположность скевоморфизма. Кроме 2D-элементов, у него есть еще несколько характерных черт. 

• Отсутствие лишних эффектов: текстур, объемов, даже теней. 
• Понятные визуализации элементов. Задача «плоского» дизайна — максимально просто, но понятно отобразить иконку или кнопку, поэтому визуализации упрощаются, используются привычные очертания и акцентные цвета.
• Фокус на типографику. В отсутствии сложных иллюстраций больше внимания уделяется текстовым блокам: композиции, отступам, шрифтам, кеглю.

Считается, что основоположником flat design стала Microsoft, выпустившая в 2012 году Windows 8 и Windows Phone, в котором все элементы и иконки резко стали плоскими. Так компания стремилась не только упростить взаимодействие с устройствами, но и противостоять дизайн-политике Apple, сфокусированной на скевоморфизме. 

Чтобы наглядно увидеть разницу между скевоморфизмом и «плоским» дизайном, стоит посмотреть на редизайн Google в 2013 году — тогда компания отказалась от эффектов объема и перешла на flat-дизайн.

Кроме «плоского» дизайна, в первой половине 2010-х активно развивались мобильные интерфейсы. Возникла необходимость адаптировать веб-сайты под размер современных телефонов и планшетов, а также создавать приложения под конкретные размеры устройств.

«Плоский» дизайн помог и здесь: на маленьких экранах текстурные и детализированные иконки, характерные для скевоморфизма, воспринимались тяжело, и мобильные интерфейсы стали  минималистичными. 

2016–2020-й: нейтральный минимализм и микроанимации

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

Это прослеживалось не только в дизайне. Компании в целом стали больше фокусироваться на пользовательском опыте: выстраивать маркетинговые воронки,

Наряду с минимализмом дизайнеры стали активно обращаться к анимациям — технические возможности это уже позволяли. Анимации использовались как для экранов в целом (например, при скролле), так и для отдельных блоков или кнопок. На фоне 2D-иллюстраций они выглядели более эффектно и привлекали внимание пользователей. 

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

2020–2024-й: голос, нейросети и адаптивные интерфейсы

За последние пять лет фундамент UI-дизайна остался тем же: плоские элементы, четкая типографика, чистая структура страниц, анимации. При этом инструментов для реализации стало намного больше: кроме Sketch и Photoshop, появилась Figma, которая упростила процесс подготовки макетов и к 2021 году насчитывала уже миллионы пользователей. 

Теперь создавать сайты можно и с помощью нейросетей. Например, в ChatGPT можно написать код или текст для сайта и перенести его на страницу всего за пару минут. ИИ-инструменты активно внедряются в уже существующие сервисы вроде Figma и Tilda и в новые продукты. 

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