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

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

Что делают пользователи, когда видят на сайте ошибку 404? Недоумевают и покидают ресурс. Но этого можно избежать, сгладив негатив. Как сделать страницу ошибки 404? Нужно лишь добавить изюминку, сделав её красивой и интересной. Показываем, как. 

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

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

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

Бренды идут дальше, и подстраивают дизайн страницы 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 404‑я страница выдаёт кое-что поинтересней.

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

Bang Bang Education

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

Slack

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

Mailchimp

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

2 758