Разработка дизайна страницы 404 (ошибки) сайта
Страница 404 — одна из немногих страниц, которую посещают пользователи, уже столкнувшиеся с проблемой. Цель здесь не продать и не информировать, а удержать: дать понять, что сайт работает, и помочь добраться до нужного места.
Что должна делать хорошая 404
Плохая 404 — это белый экран с текстом «Страница не найдена». Хорошая решает три задачи:
- Подтверждает, что пользователь на правильном сайте — логотип, цвета, навигация
- Объясняет, что произошло — коротко, без технического жаргона
- Предлагает выход — ссылка на главную, поиск, популярные разделы
Кнопка «Вернуться на главную» — обязательный минимум. Дополнительно: строка поиска (если она есть на сайте), 3–5 ссылок на ключевые разделы, иногда — ссылка в саппорт.
Визуальная составляющая
404 — одна из немногих страниц, где уместна иллюстрация или анимация. Это компенсирует разочарование пользователя и создаёт запоминающийся момент. Варианты:
- Статичная иллюстрация — кастомная графика, соответствующая стилю бренда
- Lottie-анимация — векторная анимация весом 20–100 KB, не нагружает страницу
- CSS-анимация — простые анимированные элементы без внешних зависимостей
- Интерактивный элемент — мини-игра (классика: Space Invaders у Google Chrome для офлайн-страницы)
Для корпоративных сайтов чаще выбирают сдержанную иллюстрацию с юмором — астронавт в открытом космосе, потерявшийся персонаж, сломанный робот. Важно: иллюстрация не должна отвлекать от CTA.
Структура макета
Страница обычно занимает viewport полностью (100vh). Центрированный блок:
- Число «404» или иллюстрация — верхняя часть, ~40% высоты
- Заголовок: короткий (2–6 слов), человеческий тон
- Подзаголовок: объяснение + предложение
- CTA-кнопка (основная) + текстовая ссылка (вторичная)
- Опционально: строка поиска или список разделов
Хедер и футер сохраняются, если это не fullscreen-режим. На мобиле контент выстраивается в колонку, CTA занимает полную ширину.
Практический пример
Для SaaS-платформы (B2B) разрабатывали 404 с Lottie-анимацией разряженного аккумулятора ноутбука — отсылка к «потере соединения». Текст: «Эта страница разрядилась». Ниже — кнопка «На главную», поиск по документации и три ссылки на популярные разделы хелпцентра. Bounce rate с этой страницы снизился с 78% до 41% по данным за 90 дней после запуска.
Сроки
Дизайн 404 с кастомной иллюстрацией — 2–4 дня: 1 день на концепцию и утверждение стиля, 1–2 дня на финальный макет и адаптив, 0.5 дня на подготовку ассетов. Если иллюстрация берётся из готовой библиотеки — 1–2 дня.