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

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

В каждой части мы пройдёмся по ключевым трендам десятилетия, разберём, какие из них выжили, а какие канули в Лету, и — главное — почему. Но для начала небольшая историческая справка.

Сначала было слово

На заре компьютерной эры вычислительные машины были большими и использовали разные устройства ввода и вывода информации: перфокарты, магнитные ленты, лампы и прочее. В начале двадцатого века появилось новое устройство наподобие автоматической пишущей машинки — телетайп. С его помощью диалог с компьютером выглядел как переписка на рулоне бумаги: пользователь набирал команду на клавиатуре, аналоге печатной машинки, и нажимал Ввод (Enter). Компьютер обрабатывал пользовательский ввод и выдавал своё сообщение, а потом приглашал пользователя ввести новые данные. С тех пор у нас остались такие термины как tty (телетайп), приглашение к вводу и command line interface (CLI). Позже CLI как вариант оформления границы между двумя функциональными объектами был перенесён на мониторы с электронно-лучевой трубкой.

RUN PROGRAM ← Пользователь вводит команду
[COMPUTER]: READY. ENTER DATA: ← Ответ компьютера
1,2,3 ← Пользователь вводит данные
[COMPUTER]: RESULT: 6 ← Результат

В конце шестидесятых компанией IBM была выпущена система DOS. Впоследствии была разработана и опубликована система MS DOS, которая использовалась на компьютерах, собранных по открытому стандарту IBM-совместимых PC.

1973 — Xerox выпускает компьютер Xerox Alto. Эти машины были представлены за десятилетие до появления массовых GUI-устройств. Xerox Alto с его монохромным текстовым экраном казался чудом техники, хотя сегодня мы назвали бы такой интерфейс аскетичным. Это была эпоха, когда каждый символ на экране имел значение, а понятие «дизайн интерфейса» сводилось к оптимальному расположению текста.

В 1983 году Apple Lisa, а затем Macintosh (1984) адаптировали наработки Xerox для массового рынка. Их интерфейс строился на парадигме WIMP:

• Windows (окна);

• Icons (иконки);

• Menus (меню);

• Pointing device (указательное устройство, мышь).

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

А уже в 1985 году — Microsoft выпустила Windows 1.0. Эта система была надстройкой над DOS, которая к тому моменту была самой популярной системой на персональных компьютерах, а также использовалась в бизнесе. Самыми востребованными приложениями считались Lotus (аналог экселя) и WordPerfect, и они продолжали работать под Windows. А компания Apple сосредоточила усилия на поддержку работы с дизайном и медиаданными. В итоге подход Microsoft — открытая платформа для любых IBM-совместимых ПК — стал более популярным и определил путь развития отрасли.

В 1995 году вышла Windows 95. Она стала первой в линейке Windows 9x и привнесла значительные улучшения по сравнению с предыдущими версиями, включая новый графический интерфейс и поддержку 32-битных приложений.

1990–2000: Рождение цифрового дизайна — от командной строки к первым графическим интерфейсам

Это десятилетие стало революционным переходом от текстовых интерфейсов к визуальному дизайну. Персональные компьютеры продолжали распространяться, интернет стал доступен массовому пользователю, хоть и был ограничен по скорости. Распространение ОС с графическим интерфейсом закрепило метафоры рабочего стола, иконок, окон и меню. Но в вебе технологии для создания сайтов ещё не были стандартизованы, это была эпоха дизайнерского хаоса. Главными направлениями в развитии интерфейсов этой эпохи были:

• Кричащий дизайн (яркие цвета, стандартные шрифты);

• Текстово-гиперссылочный дизайн;

• Табличная вёрстка;

• Flash-анимации;

• Чистый HTML.

Рассмотрим подробнее.

Кричащий дизайн

Эта декада резких перемен, и быстрой эволюции. Сначала большинство мониторов имели ограниченную цветовую палитру, поэтому в интерфейсах часто использовались яркие «чистые» оттенки: они выглядели на экранах достаточно контрастно и точно отображались на всех устройствах. Ведь нет смысла использовать на странице цвет, который компьютер не покажет, а пользователь не увидит. Шрифты тоже использовались те, что предусмотрены в ОС и браузерах. В те годы ещё не поддерживалась загрузка кастомных шрифтов, а шрифты с тонкими линиями на экранах с низким разрешением выглядели крайне плохо. Поэтому все использовали доступные: классические для Windows Arial, Times New Roman и Verdana, а из декоративных — Impact и Comic Sans. При этом часто использовалась хаотичное расположение элементов. На одной странице встречались тексты разных размеров, цветов и шрифтов, без логической иерархии, а элементы располагались «где придётся».

Текстово-гиперссылочный дизайн

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

Табличная вёрстка

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

Между тем интерфейсы десктопных приложений к тому времени выглядели похожими по структуре на современные, хотя визуально были очень далеки: грубые пиксельные шрифты, и вообще информация выглядит «втиснутой» в маленькое окошко. Например, вот скриншот энциклопедии Encarta (1995). Как говорится, найдите десять отличий от современного приложения! 

Flash-анимации

Эпоха Flash пришлась на стык десятилетий, особенно активно он использовался с 1997 по 2004. Полная анимация интерфейсов, нестандартное меню навигации с вращающимися кнопками, игровые элементы, такие как курсоры-персонажи, кликабельные секреты — всё это было увлекательным и для пользователей, и для разработчиков. Сайты оживали. Воплощение смелых дизайнерских идей приводило в восторг. А сколько игр и мультиков было создано с помощью этой технологии! Но серьёзным недостатком Flash была его закрытость, поддержка в браузерах обеспечивалась только установкой плагинов от Adobe. Кроме того, из-за закрытости он был несовместим с роботами поисковых систем и не позволял индексировать данные. Apple отказалась от поддержки плагинов в браузере на iOS, поэтому для создателей сайтов Flash означал некорректное отображение на современных устройствах. Закрытость повлекла и медленное исправление дыр в безопасности при использовании Flash-контента, что привело к его постепенной изоляции, а впоследствии и к закрытию проекта в 2020. Но эти же проблемы привели к распространению такого подхода, как Sandboxing процессов.

Чистый HTML

В конце этой декады появился первый стандарт CSS, и многие разработчики отказались от табличной вёрстки, используя каскадные таблицы стилей и семантическую вёрстку на <div>, <span>. Проводились первые эксперименты с «резиновой» вёрсткой (адаптация под ширину экрана), которую позже Артемий Лебедев назвал «дышащие сайты». Наиболее долговечен такой подход при создании минималистичных интерфейсов, таких как Google, Craigslist, Mail.ru. Но сама идея чистого HTML продолжает влиять на развитие технологий и современную разработку веб-приложений.

Итоги девяностых

Удачные решения этого периода сочетали:

• Высокую производительность и доступность (минимализм, гипертекст);

• Открытость технологии и стандартов (CSS пережил Flash, потому что был открытым);

• Соответствие ментальным моделям пользователей (узнаваемость метафор, стандартизация элементов).

В эту декаду стали популярными основы современных цифровых интерфейсов. Многие решения 1990-х (например, навигационное меню в сайдбаре) остаются актуальными и сегодня, доказав свою устойчивость и соответствие принципам юзабилити. Но хотя какие-то вещи и выглядят похожими, теперь они реализуются иначе. Например, современные CSS-анимации — это «наследники» Flash, но без его недостатков: они лёгкие, адаптивные и поддерживаются везде.

2000–2010: Эпоха Web 2.0 и скевоморфизма

В начале 2000-х веб перестал быть просто «библиотекой документов» и превратился в интерактивную среду. Были сделаны сервисы, позволяющие пользователям не только потреблять контент, но и создавать собственный. Это время появления социальных сетей, блогов и совместных медиаплатформ. В это десятилетие стали популярными такие гиганты, как Facebook, ВКонтакте, LiveJournal, Wikipedia, YouTube, Flickr.

Основное влияние на дизайн в этом десятилетии оказали:

• скевоморфизм;

• web 2.0;

• jQuery;

• Flash-навигация;

• Зарождение мобильных интерфейсов;

• CSS 2.0.

Скевоморфизм

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

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

Эпоха зарождения веб-дизайна: Web 2.0, анимации и AJAX

Web 2.0 — это создание среды взаимодействия пользователей. В этом десятилетии появляются и широко распространяются механизмы авторизации пользователей, протоколы шифрованной передачи данных, развивается тема информационной безопасности в компьютерных сетях. Популярные сервисы, такие как Livejournal и Wikipedia, дублируются кастомными движками, которые используются на локальных и корпоративных порталах. Появляются CMS, например, Drupal в 2001 году и WordPress в 2003.

К интернету подключается всё больше пользователей, компьютеры становятся доступнее, и приложения стремятся выглядеть привычно и привлекательно. В этом им помогает не только реалистичность дизайна, но и анимация, основанная на javascript и jQuery. Сайты оживали: выпадающие меню плавно разворачивались, фотографии галерей «выплывали» на экран, а кнопки реагировали на нажатие физическими эффектами. Дополнительно навигация могла анимироваться с помощью Flash. jQuery была результатом и одновременно причиной усиления тренда анимированных интерфейсов, так как использование этой библиотеки существенно упрощало разработку. Сейчас многие популярные анимации имеют поддержку в CSS.

Ещё одна технология той декады — AJAX (Asynchronous JavaScript and XML), это технология, позволяющая веб-страницам обмениваться данными с сервером в фоновом режиме, без необходимости полной перезагрузки страницы. Это делает веб-приложения интерактивными и более отзывчивыми, поскольку обновление данных происходит асинхронно. Распространение и развитие этой технологии привело в будущем к появлению SPA (подробнее в следующем десятилетии).

Появление Mobile first дизайна

Тогда же появляются доступные смартфоны. Первые попытки адаптации сайтов под iPhone выглядели как уменьшенные копии десктопных страниц, на которых приходилось масштабировать контент пальцами. Но это было неудобно для пользователей, и приоритет получали сайты, находившие более подходящие решения: крупные сенсорные элементы, упрощённая навигация, вертикальное прокручивание страниц. В этот период становится популярным UX дизайн для веба, появляется идея о Mobile first (дизайн страниц для смартфона в первую очередь, приоритет контента над декоративными элементами). С развитием технологией и появлением экранов ретина мир пришёл к адаптивному дизайну, а из этого десятилетия с нами остались Media queries — но перешли в CSS.

На стыке 1998-2001 был проект WML (Wireless Markup Language) – «мобильный HTML», который почти никто не помнит. Его стандартом занялись только тогда, когда телефонные браузеры уже начали справляться с полноценными HTML-страницами.

Главный тренд: CSS

CSS 2.0 хоть и был принят в 1998, стал разворачивающимся трендом именно в этом десятилетии. Благодаря браузерной поддержке новых возможностей, изменилась верстка и дизайн сайтов. Рассмотрим подробнее новшества и их влияние на дизайн:

Позиционирование элементов

• Свойства position: absolute/relative/fixed и z-index.

• Влияние: Дизайнеры получили точный контроль над расположением элементов. Появились:

  • Наложения элементов (например, выпадающие меню).

  • Фиксированные шапки сайтов.

Сложная вёрстка

• Поддержка float для многоколоночных макетов.

• Влияние: Отказ от табличной вёрстки в пользу семантических HTML-структур. Пример — форумы и блоги с сайдбарами.

Стилизация текста

• Свойства: text-shadow, white-space, letter-spacing.

• Влияние: Появился «дизайнерский» текст без изображений. Например, «глянцевые» заголовки с тенями в стиле Web 2.0. 

Курсоры и интерфейсы

• Кастомные курсоры (cursor: pointer/wait).

• Влияние: Улучшение обратной связи. Например, изменение курсора при наведении на кнопку.

Генерация контента

• content: "" для псевдоэлементов (::before, ::after).

• Влияние: Декоративные элементы без лишнего HTML (например, иконки-стрелки).

Главной проблемой веб-разработчиков долгое время оставался Internet Explorer 6. Он ломал вёрстку, не поддерживал PNG-прозрачность и заставлял писать хаки вроде:  

/* Хаки для IE6 */
* html .element {  
  width: 200px; /* Да, так действительно работало */  
}  

В среде разработчиков были популярны выражения вроде «IE6 Must Die for the Web to Move On» («IE6 должен умереть, чтобы веб, наконец, смог развиваться дальше»). В конце концов, Microsoft отказалась от поддержки IE6. А веб стал развиваться согласно стандартам W3C.

Итоги 2000-х

Удачные решения этого периода сочетали:

• визуальную привлекательность (градиенты);

• функциональность (крупные сенсорные элементы);

• технологическую реализуемость (Flash, jQuery).

Современные интерфейсы унаследовали баланс этих принципов, отказавшись от избыточной декоративности в пользу удобства.

2010–2020: расцвет смартфонов

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

Плоский дизайн (Flat Design) и Material Design

В дизайне интерфейсов произошёл отказ от текстур, градиентов и теней в пользу чистых цветов и простых форм. Этому способствовал выход Windows Phone в 2010 году и Windows 8 Metro в 2012. Сначала казалось, что Windows «хочет отличаться», но Apple iOS 7 в 2013 году вышла с таким же «плоским» обновлением. Даже кнопки перестали иметь фон и контур. На самом деле это было связано с постепенной адаптацией дизайна к экранам смартфонов, где слишком мало места для объёмной графики, и распространением мобильного интернета, медленного GPRS, при котором загрузка полноценных графических страниц была ужасно медленной. После публикации Interface Layout Guidelines от производителей мобильных операционных систем, дизайн приложений стал довольно единообразным в эту декаду. Гайдлайны требовали определиться с основным action-цветом, давали рекомендации по использованию шрифтов, разметке страницы, предлагали думать о контенте в первую очередь (это добавляло популярности принципу mobile-first). Постепенно это влияние вышло за пределы нативных приложений и распространилось на веб-приложения и сайты.

Material Design — стандарт для операционной системы Android — принёс свои дополнительные требования: «думай о странице/экране не как о статичной, вырванной из контекста», «моделируй процесс работы (workflow) пользователя», «делай главное действие более доступным». Визуально дизайн тоже немного отличался: в нём более мягкие тени, много внимания уделялось адекватным анимациям перехода между экранами. От гайдлайнов андроида нам достались понятия: плавающая кнопка действия – Floating Action Button (FAB), карточки, внимание к типографии.

Плоский дизайн доминировал до середины 2010-х, затем эволюционировал в «полуплоский» (Semi-Flat) с мягкими тенями, в частности, под влиянием Material Design.

Карточный дизайн (Card UI)

Подход, известный всем по сайту Pinterest, основанный на модульной структуре. Хорош гибкостью вёрстки, напоминает плитки Windows Metro. Тенденция сеточного размещения объектов на странице была активно поддержана разработчиками библиотеки Bootstrap, которая, благодаря своей открытости и публичной доступности, быстро набрала популярность. Высокая скорость разработки привела к появлению однообразных «карточных» дизайнов, а идея стандартизации элементов интерфейса, позднее реализованная виде различных UI Kit, развилась в создание дизайн-систем.

Кастомные шрифты

Стало использоваться больше шрифтов, появилось даже понятие «фирменный шрифт». В отсутствии сложных иллюстраций больше внимания уделялось отображению текста: его размещению, отступам, межстрочным интервалам и выравниванию базовых линий. Это произошло благодаря добавлению поддержки @font-face сразу в нескольких браузерах. Стало можно указать собственный источник файла шрифта, например, так:

@font-face {
  font-family: 'MyFont';
  src: url('font.ttf') format('truetype');
}
body {
  font-family: 'MyFont', sans-serif;
}

В эту декаду шло активное развитие формата файла шрифта, появился сначала Web Open Font Format (WOFF), а следом WOFF2, и были запущены сервисы для использования на вебе: Google Fonts, Adobe Fonts. В дальнейшем развитие этого направления продолжилось, и сейчас многие компании используют для своих сайтов специально разработанные шрифты.

Отзывчивый веб-дизайн (Responsive Web Design, RWD)

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

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

Микровзаимодействие и анимации

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

Итоги десятилетия 2010-х

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

2020–2025: Эпоха персонализации, неоморфизма и нейросетей

Этот период характеризуется отказом от жёстких стандартов в пользу адаптивных, эмоционально-ориентированных интерфейсов. Частично драйвером изменений стала пандемия с её локдаунами и изоляцией, но в основном, как и раньше — развитие технологий, которое позволило реализовать ранее невозможные решения. Взрыв AI (чат-боты, генеративные дизайны), AR/VR, рост запросов на персонализацию и доступность: пользователи ожидают UI, который понимает их и адаптируется под контекст. Популяризация тёмной темы, микроанимаций, 3D‑элементов и акцент на сторителлинг в дизайне. Основные направления, проявившиеся в этот период, были следующие:

• неоморфизм и глассморфизм;

• тёмный режим;

• 3D-элементы и иммерсивные интерфейсы;

• микроанимации и Lottie.

Рассмотрим подробнее.

Неоморфизм и глассморфизм (Glassmorphism)

Неоморфизм (neumorphism) стал переосмыслением скевоморфизма: дизайн не копирует реальные объекты, но делает акцент на цветовых градиентах, тенях и объёмах, создавая визуально насыщенные, «вытесненные» элементы. При этом объекты в неоморфизме кажутся лежащими на поверхности, или слегка вдавленными, не имеют чётких контуров и плохо подходят для обеспечения accessibility (интерфейсы для людей с повышенными потребностями). Стеклянный дизайн добавляет элементам полупрозрачность, блики и градиенты.

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

Тёмный режим

Тёмный режим (Dark Mode) появился как средство для снижения нагрузки на глаза сразу после того, как экраны объявили главной причиной проблем с режимом сна. В операционных системах на смартфонах появилась поддержка изменения яркости, смены режима, и снова появились стандарты для поддержки такого функционала. Этим путём пошли и веб-приложения, добавляя поддержку различных тем в свои интерфейсы. Сейчас поддержка тёмного режима является уже стандартом. Дальнейшее развитие этого подхода привело к появлению подхода Material You на андроиде и широкому распространению идеи динамической персонализации. Сейчас многие приложения и сайты подстраиваются под конкретного пользователя, настраивая цветовую гамму и некоторые другие свойства интерфейса.

Минимализм 2.0 (Brutalism)

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

Анимации

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

3D-элементы и иммерсивные интерфейсы

Иммерсивный дизайн тесно связан с технологиями виртуальной и дополненной реальности, которые создают ощущение присутствия и вовлечённости в цифровой или дополненный реальный мир. AR (дополненная реальность) накладывает цифровые элементы на реальное изображение, а VR (виртуальная реальность) полностью погружает пользователя в искусственно созданный мир. Иммерсивный опыт, будь то в спорте, образовании или других сферах, достигается с использованием этих технологий, делая взаимодействие с контентом более интерактивным и запоминающимся. Всем знаком 3D-режим просмотра фильмов, дополнительные эффекты в 10D-кинотеатрах. Развитие мощностей персональных компьютеров и смартфонов привело к использованию интерактивной 3D-графики в вебе. Компания Nike сделала конструктор кроссовок, Google обещает очки с дополненной реальностью. Можно предположить, что дальнейшее развитие приведёт к генерации виртуальной реальности «на лету» с помощью нейросетей, но пока используются заготовленные программы.

ИИ и голосовые интерфейсы

Во многих сайтах и приложениях теперь используются диалоговые UI (чат-боты), реализуются голосовые помощники. В мобильных приложениях стало важно поддерживать голосовые запросы и создавать AI-ассистента. Отдельное направление в развитии интерфейсов – это «невидимые» голосовые приложения для умных колонок.

Кроме того, современные инструменты предлагают генерацию макетов сайтов и приложений по текстовому описанию. Есть и платформы для автоматизированной генерации веб-сайтов с использованием искусственного интеллекта. Например, Dora AI позволяет создавать веб-сайты, лендинги и другие контентные ресурсы без необходимости в написании кода, на основе текстовых запросов. Есть тренд на распространение зерокодинга и вайбкодинга, но как это выглядит внешне? С одной стороны, такие автоматы по созданию сайтов ограничены шаблонами, как и конструкторы. С другой стороны, они позволяют создавать фоны и медиа-контент по запросу, и изменять положение элементов на странице, что возвращает нас к истокам веба до стандартизации. Чем больше людей без опыта и образования в сфере создания сайтов обращаются к подобным инструментам, тем неожиданнее оказывается результат. Вполне возможно, что вскоре появятся инструменты, которые будут работать с уже созданным сайтом, предоставляя функцию «сделай красиво», чтобы исправить недостатки. Зато опытным специалистам использование подобных инструментов позволяет сократить время на разработку.

Промежуточные итоги

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

Что дальше?

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

Скорее всего, у этого этапа будет свой конец, и через десять лет мы будем с ностальгической улыбкой вспоминать liquid glass-объекты и Lottie-анимации. Но голосовой ввод, общение с компьютером на естественном языке, а не на заданном наборе команд — это возможности, от которых пользователь уже не откажется. Поэтому в этом направлении будет идти развитие: «умный наушник» вместо колонки, VR-очки или вовсе линзы.

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

История цифровых интерфейсов показывает: модные тренды приходят и уходят, а принципы удобства, ясности и адаптивности остаются актуальными десятилетиями. Самые востребованные фичи реализуются в различных библиотеках, а после заносятся в стандарты HTML или CSS. Разделы CSS Level 4 описывают функционал, необходимый для персонализации интерфейсов и создания отзывчивых сайтов, что позволяет опираться на эти подходы при работе над долгосрочными проектами.

Как думаете, какие ещё тренды продлятся в дизайне будущего?