Контакт

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

Интерфейс 90-х на современном сайте, четыре ветви ретро, почему прошлое вернулось, приёмы Y2K, ретро как акцент и ретро-портфолио — с живыми примерами и промптами для картинок.

Дизайн-стили Обновлено

Коротко

Ретро в веб-дизайне заимствует облик прошлых десятилетий: округлые жирные шрифты 70-х, неон и сетки 80-х, объёмные окна, пиксельные значки и кнопки 88 × 31 из веба 90-х и эстетику Y2K на рубеже тысячелетий — хромированные буквы, глянцевый полупрозрачный пластик, текучие капли, искры и наклейки. Сегодня его используют как акцент на современной основе: хромированный заголовок, объёмная кнопка, рамка окна вокруг блока, пиксельный значок, — а основной текст остаётся простым и читаемым, и ничего не мигает. Стиль подходит музыке, моде, играм, творческим портфолио и брендам, которые хотят выглядеть игриво и с ностальгией. Устаревшим он становится, когда ретро — во всём сразу, эпохи смешаны, а удобством пожертвовали ради настроения.

Интерфейс 90-х на современном сайте

Объёмные рамки, полоса заголовка, меню с подчёркнутыми буквами и прогресс из квадратиков — в палитре этого сайта.

Портфолио.exe

Нажмите на кнопки: объём меняется местами — светлая грань уходит вниз, тёмная наверх, и кнопка «вдавливается».

Четыре ветви ретро

Каждое десятилетие узнаётся по нескольким приёмам. Одна эпоха на проект — смесь эпох выглядит как костюмированная вечеринка.

ЭпохаУзнаётся поКак взять сегодня
70-е округлые жирные шрифты, тёплые полосы и волны шрифт заголовка и мягкая полоса
80-е неон, сетка-горизонт, хром один яркий акцент на тёмном фоне
Веб 90-х окна ОС, объёмные кнопки, пиксели, кнопки 88 × 31 объёмные кнопки и рамки окон вокруг блоков
Y2K хром, глянцевый пластик, капли, искры, наклейки хромированный заголовок, искры и наклейка

Почему прошлое вернулось

Промпт для этой картинки 
Y2K style landing page for a music streaming app, desktop screenshot, chrome metallic 3D headline lettering, glossy translucent plastic buttons, four-pointed sparkle stars, liquid blob shapes, a round sticker badge, dark graphite background with acid-lime and silver-sage accents, early-2000s futuristic web aesthetic on a clean modern layout, readable body text, crisp, aspect ratio 16:9

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

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

Приёмы Y2K

Шесть узнаваемых приёмов, каждый — несколько строк CSS. Для страницы хватает одного-двух.

Ретро как акцент

Одна и та же студия. Слева ретро везде, включая текст; справа — в заголовке, наклейке и кнопке, а остальное современное.

Ретро во всём

пиксельный шрифт в тексте, бегущая строка, слабый контраст

Ретро как акцент

хром в заголовке, наклейка и объёмная кнопка — текст при этом обычный и читаемый

Бегущие и мигающие элементы — самая ностальгическая часть старого веба и самая вредная: всё, что движется дольше пяти секунд, должно останавливаться по желанию человека, а для тех, кто чувствителен к движению, лучше не двигаться вовсе.

Ретро-портфолио

Промпт для этой картинки 
Designer portfolio website styled as a 1990s desktop operating system, desktop screenshot, grey-sage bevelled windows with title bars, pixel-art folder and document icons on a pale sage desktop, a window titled "Portfolio.exe" showing project thumbnails, a taskbar at the bottom with a start button and a clock, one acid-lime accent, crisp pixel details, readable modern body text, aspect ratio 16:9

Для творческого портфолио хорошо работает метафора старого рабочего стола: проекты — «папки», рассказ о себе — «текстовый файл», контакты — «почта». Метафора сразу даёт и структуру, и характер — если навигация остаётся понятной, а сайт работает на телефоне, где рабочего стола нет.

Ретро в коде: 2 примера

Объёмная кнопка и окно 90-х, хромированные буквы Y2K и пиксельные картинки.

Кнопка и окно 90-х

Объём — это две внутренние тени; при нажатии они меняются местами.

retro-90s.css 
.retro-button {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 0;
  background: #C9CDC3;
  font: 0.875rem/1 ui-monospace, monospace;
  box-shadow:
    inset -2px -2px 0 #434541,   /* тёмная грань снизу и справа */
    inset 2px 2px 0 #FFFFFF,     /* светлая грань сверху и слева */
    inset -3px -3px 0 #A8ABA3;
}

.retro-button:active {
  box-shadow: inset 2px 2px 0 #434541, inset -2px -2px 0 #FFFFFF;
}

.retro-button:focus-visible { outline: 1px dotted; outline-offset: -6px; }

/* Рамка окна вокруг любого блока */
.retro-window {
  padding: 3px;
  background: #C9CDC3;
  box-shadow: inset -2px -2px 0 #434541, inset 2px 2px 0 #FFFFFF;
}

.retro-window__title {
  padding: 0.25rem 0.5rem;
  background: linear-gradient(90deg, #323231, #7D8278);
  color: #FFFFFF;
  font-weight: 700;
}

Хром и пиксели

Металлический градиент, обрезанный по буквам, и увеличенная пиксельная картинка без размытия.

y2k.css 
/* Хромированные буквы: полоса посередине — «горизонт» в металле */
.chrome {
  font: 900 clamp(3rem, 10vw, 7rem)/1 var(--font-display);
  color: transparent;
  background: linear-gradient(180deg,
    #FFFFFF 0%, #B2B6B1 44%, #323231 50%, #E1E3DF 56%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px #A8ABA3;
}

/* Значок 16 × 16, показанный размером 64 × 64, остаётся чётким */
.pixel-icon {
  width: 4rem;
  height: 4rem;
  image-rendering: pixelated;
}

/* Искры медленно вращаются — и замирают для тех, кто просил меньше движения */
.sparkle { animation: spin 6s linear infinite; }

@keyframes spin { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; }
}

7 правил ретро, которое не выглядит устаревшим

  1. 01

    Акцент на современной основе

    Заголовок, кнопка, рамка — а не вся страница.

  2. 02

    Одна эпоха на проект

    90-е — с 90-ми, Y2K — с Y2K.

  3. 03

    Читаемый текст

    Пиксельные и декоративные шрифты — только для коротких слов.

  4. 04

    Ничего не мигает

    Движение медленное, останавливается и уважает просьбу о меньшем движении.

  5. 05

    Своя палитра

    Ретро-приёмы в цветах бренда выглядят свежо, а не заимствованно.

  6. 06

    Легко и быстро

    CSS вместо тяжёлых GIF и картинок.

  7. 07

    Современное поведение

    Вид старый, а фокус, размеры нажатия и мобильная версия — как сегодня.

Частые ошибки в ретро и Y2K

  1. Ретро во всём

    Включая формы и цены — и сайт выглядит просто старым.

  2. Пиксельный шрифт в абзацах

    Ностальгично для слова, утомительно для страницы.

  3. Мигание и бегущие строки

    Отвлекают, не останавливаются и тяжелы для тех, кто чувствителен к движению.

  4. Смесь эпох

    Шрифт 70-х, неон 80-х и хром Y2K на одном экране.

  5. Низкое разрешение как стиль

    Мутные фото выглядят как ошибка, а не как ностальгия.

  6. Только для компьютера

    Метафора рабочего стола, которая ломается на телефоне.

Вопросы о ретро и Y2K

Что такое стиль Y2K?

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

Что такое ретро в веб-дизайне?

Заимствование узнаваемых приёмов прошлых десятилетий — от шрифтов 70-х до окон ОС 90-х — для сегодняшних сайтов.

Кому подходит ретро?

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

Как не превратить ретро в устаревший сайт?

Использовать его как акцент на современной основе, в своих цветах, с читаемым текстом и современным поведением.

Какие шрифты подходят Y2K?

Широкие футуристичные гротески и округлые акцидентные шрифты для заголовков, с хромом или обводкой; для текста — простой гротеск.

Пройдёт ли эта мода?

Нынешняя волна пройдёт, но ретро возвращается каждые двадцать лет — остаётся приём: использовать прошлое как акцент.

Форма

Ностальгия,
которая работает

Проектирую игривые сайты с ретро- и Y2K-акцентами на современной, быстрой и читаемой основе. Расскажите о проекте — отвечу в течение рабочего дня.

Или пишите на [email protected]