Тридцать лет веб-дизайна: от серого фона до стекла

История веб-дизайна — смена манер от серых страниц и Flash до плоского дизайна, Material и стекла. Каждую приносили технология, новый экран или мода.

Зачем знать историю оформления

Страница выглядит «как из двухтысячных» не потому, что её сделали давно. Она выглядит так, потому что в ней осталось то, что когда-то диктовала технология или мода. Если вы понимаете причину приёма, вы можете решить: оставить его, заменить или обойти. Если не понимаете, вы копируете чужое, как копировали заставки на Flash и блики на кнопках.

Эта история короче, чем кажется: чуть больше тридцати лет. И почти каждая новая манера приходила по одной из трёх причин:

• технология: браузер научился делать то, чего не умел раньше (или перестал нуждаться в плагине);
• экран: появились устройства с другой шириной и плотностью, и прежнее оформление на них не работает;
• мода: людям надоел прошлый вид, и они захотели противоположного.

Проверьте себя: какие три причины меняют облик сайтов?

Технология, экран и мода. Устаревает прежде всего то, что держалось на технологии, которой больше нет.

Эпохи по порядку

Подвигайте ползунок. Карточка вашего проекта, с вашими словами, рисуется в манере каждого периода. Это не копии настоящих сайтов, а упрощённые «портреты» эпох, каждый на обычном CSS.

Эпоха: 199620002008201320182021с 20142025

Ваш проект

Для кого: Для кого он

• Первый пункт
• Второй пункт
• Третий пункт

Что делает посетитель

1996: Таблицы и серый фон. Технология: CSS ещё нет или он не работает одинаково, и раскладку делают таблицами, а промежутки прозрачными картинками-распорками.

Что осталось верным. Простота и скорость: страница лёгкая и открывается везде.

Что устарело. Раскладка зашита в разметку, мобильных экранов нет, смысла в таблице-каркасе тоже нет.

Теперь по порядку, с причинами.

Начало девяностых: текст на сером. Первые страницы не оформлены вообще. Серый фон, чёрный текст, синие подчёркнутые ссылки: так браузер показывает любую страницу без стилей. Дизайна нет, есть структура. В 1993 году браузер Mosaic научился показывать картинки внутри текста, и страницы стали «обложками».

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

Около 2000 года: заставки и Flash. Плагин Flash давал анимацию, звук и интерактив, каких HTML не умел. Многие сайты открывались «киношной» заставкой с кнопкой «пропустить». Оформление было эффектным, но страницу нельзя было ни прочитать диктором, ни найти поиском, ни открыть на телефоне. Поддержку Flash окончательно прекратили в конце 2020 года, и вместе с ним ушла целая манера.

Середина двухтысячных: CSS и «веб 2.0». Сайт CSS Zen Garden (2003) показал, что одну и ту же разметку можно одеть в сотни разных видов, и стили переехали в отдельные файлы. Следом пришли градиенты, скруглённые углы, отражения и яркие значки: так выглядел «веб 2.0», о котором вы читали в первой части.

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

2012–2014: плоский дизайн. Телефоны с экранами разной плотности, усталость от текстур и интерфейс Windows 8 и iOS 7 разом повернули моду к простым формам и сплошным цветам. Но у крайностей появилась цена: когда кнопка выглядит как надпись, человек не знает, что на неё можно нажать. Исследователи Nielsen Norman Group проверяли это и описали в статье, ссылка на которую есть в источниках.

С 2014 года: Material. Google в 2014 году описал в Material Design мир «листов бумаги» с высотой и тенью. Это был уже не стиль, а набор правил: сетка, шаг отступов, состояния, движение. Именно с этого началась эра дизайн-систем, которым посвящена вся вторая половина этой части.

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

Около 2020–2022: неоморфизм и стекло. Неоморфизм «выдавливает» элементы из фона, стекло размывает всё позади полупрозрачной панели. Оба требуют аккуратности: границы становятся едва заметными, а контраст текста падает. В 2025 году Apple обновила свои системы стеклянной манерой Liquid Glass, а Google выпустил Material 3 Expressive: мода продолжается и без нас.

Сегодня: сдержанность. Крупный читаемый текст, одно сильное действие на экран, много воздуха, токены, светлая и тёмная тема. Это не «конец истории». Через десять лет что-то из сегодняшнего тоже будет датировать страницу.

Проверьте себя: почему исчезли заставки на Flash?

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

Что берут из прошлого

Из каждой эпохи полезно взять не вид, а принцип:

• от девяностых простоту и скорость;
• от скевоморфизма ясность, что на кнопку можно нажать;
• от плоского дизайна дисциплину: меньше украшений;
• от Material тень как язык глубины, шаг отступов и состояния;
• от брутализма честность текста;
• от стекла слои, если они объясняют, что над чем.

Вы вернётесь к этому в следующем уроке, когда будем искать признаки устаревшей страницы.

Практика

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

В блоке «1996» положите название, пункты вашего содержимого и главное действие внутри table. В блоке «2005» таблиц нет: шапка header с цветным фоном, колонка пунктов .side, плавающая влево, и колонка .main с тем же действием. Правила для колонок пишите во вкладке styles.css: вот три строки, которых хватит.

#v2005 .side {
  float: left;
  width: 30%;
}

Правило float: left заставляет блок прижаться влево, а остальное содержимое обтекает его справа. Так раскладывали страницы с середины двухтысячных, пока не появились flexbox и grid. Эти два способа вы освоите в части про CSS.

Что было не так с 2005 годом

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