Работа над ошибками или красивые страницы 404

Пользователи часто видят ошибку 404, либо Error 404 Not Found [ошибка 404, не найдено, англ.]. Это происходит, если браузер не обнаружил на сервере указанный URL.

В целом, это классический код ответа по протоколу HTTP. Он означает, что связь с сервером установлена, но информации по заданному запросу нет.

Например, веб-страницу могли удалить или переименовать. Нередко случается и неправильный ввод адреса. Такое бывает часто и со всеми, но вряд ли кого-то обрадует безликое оформление 404‑й или простое сообщение об ошибке:

Бренды идут дальше, и подстраивают дизайн страницы 404 под оформление сайта. Они наполняют её полезной информацией, или, по крайней мере, пытаются повеселить заблудившегося пользователя, иногда удивляя своей креативностью.

И мы как раз собрали несколько интересных примеров.

Figma

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

Просто, если хочется навести суету.

Netflix

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

Marvel

Когда дизайнеры и разработчики каждую мелочь делают тематической и добавляют пасхалки — выходит круто. Здесь вам и упоминание Гидры, и страдающий Капитан Америка.

Ещё одна интересная фишка: страница ошибки меняется при каждом новом открытии:

Pixar

Оооуу! Очаровательный персонаж улыбает и на даёт расстроиться даже тем, кто не нашёл того, что искал.

20th Century Studios

Кинокомпания на даёт заскучать даже на странице ошибки: тематическое ч/б с упоминанием Франкенштейна только поднимает настроение. Суперлайк.

А если страничку прокрутить чуть ниже, можно сразу увидеть рекомендованные фильмы. И искать ничего не нужно:

LEGO

Ну что ж, мы и не переживаем 🙂 А отлично подобранная минифигурка добавляет странице антуража.

Krakatau

Интересный приём — закинуть на 404 страницу четыре новинки. Стильно, одобряем.

GYM BOX

404, на которую можно смотреть бесконечно.

S7

Авиакомпания использовала тему самолётов, что классно. И даже есть поиск и быстрые ссылки. Пользователю сразу понятно, что делать дальше.

Turkish Airlines

Ещё одна авиакомпания в нашем списке. На этот раз на странице ошибки мы видим стилизацию под карту сокровищ и тематический копирайтинг. Пора вылетать на поиски клада!

Tripadvisor

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

А вот на русском сайте почему-то потерялся не только URL, но и смысл… А жаль:

Skyscanner

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

Airbnb

Простая, но приятная анимация с удобной навигацией по сайту. Точно не заблудитесь!

McDonalds

На наш взгляд, как-то ну слишком просто. Хотя, английская версия сайта тоже не может похвастаться каким-то интересным креативом — может, у бренда такой стиль?

Burger King

А вот у ребят из Burger King страница ошибки выглядит симпатичнее: цифра 404, выложенная помидором и картошкой фри. Кнопка на меню прилагается.

SETTERS

Здесь всё довольно банально — симпатичное привидение и подсказка о том, что такой страницы не существует или пользователь ввёл неверный адрес.

А вот у Setters Education страница об ошибке выдаёт кое-что поинтересней:

Что-то на диджитально-хаосном.

Bang Bang Education

Онлайн-школа дизайна и иллюстрации не только говорит об ошибке, но и предлагает перейти на главную страницу сайта или написать в онлайн-чат. Пример полезной 404‑й, где пользователь не потеряется.

Slack

Когда попал не на ту страницу и не разочаровался. Симпатичный пейзаж, согласитесь.

Mailchimp

Мы всё потеряли. Конечно, есть вопросики: почему потерянную страничку ищет лошадь, а не маскот бренда — обезьяна в шляпе почтальона, но всё равно классно.

Mailfit Agency

У нас — тоже история со ссылкой на главную страницу сайта. Ведь нам важно, чтобы пользователи никуда не терялись 😉