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

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

Используйте навигацию, если не хотите читать текст целиком:
→ 1990-е: первые окна, пиксели и «реализм»
→ 2000–2010-е: скевоморфизм и отказ от него
→ 2010–2015-й: flat-дизайн и мобильные интерфейсы
→ 2016–2020-й: нейтральный минимализм и микроанимации
→ 2020–2024-й: голос, нейросети и адаптивные интерфейсы

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

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

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

Сайт Lego в 1990-х. Источник.

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

Если в странице поиска Google сейчас ввести Comic Sans, весь интерфейс перестроится на этот шрифт =)

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

Сайт Sony Electronics в 1998 году. Источник.

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

Для таких анимаций использовали картинки в формате GIF.

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

Так выглядел сайт Apple в 1998 году. Источник.

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


Отечественные сайты в конце 1990-х годов. Источник.

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

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


Скевоморфизм позволяет воспроизвести на экране реальные объекты, текстуры и даже звуки. Источник.

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

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


Примеры скевоморфизма в iPhone. Источник.

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

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

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

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

Flat-дизайн используется активно и сейчас — сайт Selectel выполнен в этом стиле.

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


Как изменился визуальный стиль Windows. Слева: Windows 7. Справа: Windows 8.

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


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

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


Как изменился визуал иконок iPhone с переходом к «плоскому» дизайну. Источник.

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

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

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


Пример минималистичного сайта второй половины 2010-х. Источник.

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


Пример анимации всей страницы при скролле и кнопки меню. Источники.

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


На #madeontilda собраны лучшие проекты пользователей площадки. Источник.

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

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

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


Пример использования AI в конструкторе сайтов. Источник.

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


Пример адаптивности дизайна.

Как вы считаете, какой тренд в UI-дизайне будет следующим? Поделитесь в комментариях!