40 лучших примеров страницы 404 ошибки

Подборка красивых страниц ошибки 404.

Мы регулярно выпускаем такие полезные статьи. Подпишитесь на наш Телеграм-канал, чтобы получать оповещения о новых публикациях.

404-я ошибка возникает, когда пользователь перешёл по ссылке на вашем сайте, а страницы с таким адресом не существует. Поэтому сайт перекидывает пользователя на страница ошибки 404, откуда ему предлагается перейти по ссылке в другое место сайта. Это такая техническая страница на случай битых ссылок. Это ошибка на стороне клиента, означающая, что либо страница была удалена или перемещена, а URL-адрес не был изменен соответствующим образом, либо человек просто неправильно ввёл URL. Такое случается на сайтах компаний и в интернет-магазинах.

Засада в том, что вы можете вложить все ресурсы в производство сайта, а пользователи всё равно могут оказаться на этой странице. И реакция посетителей, когда они попадают на несуществующую страницу, может варьироваться от спокойной «такое случается» до агрессивной «дурацкий сайт».

Почему мы пишем об этом?

У нас можно заказать разработку сайта с красивыми страницами ошибки 404, напишите нам, пожалуйста, в WhatsApp:

НАПИСАТЬ В WHATSAPP

Page Not Found: Креативные 404 Error Pages — красивые примеры страниц ошибки

Дизайнеры нашли разные способы информировать посетителей об 404-й ошибке и вызволять их оттуда в нужное место. Вот несколько креативных страниц 404, некоторые из них весьма остроумны.

1. Pipcorn

Страница с ошибкой Pipcorn идеально сочетается с брендингом сайта. Красивый анимированный фон, понятный текст с подсказкой, поле поиска по сайту (в комплекте с каламбуром), и кусок попкорна, используемый как «0» в «404».

2. Spotify

Гигант музыкального стриминга Spotify разместил на странице 404 остроумный каламбур из альбома Канье Уэста «808s and Heartbreak» и анимацию записи. Сайт развлекает, а затем отправляет посетителей обратно на страницу, с которой они пришли.

3. Genially

Один простой способ ослабить напряжение на странице 404 — добавить «Ой!». Это поможет вашему сайту выглядеть более привлекательным, поскольку вы направите пользователей в нужное место. А ещё здесь есть иллюстрация.

4. Adobe

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

5. Clorox

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

6. Duma Collective

Порой вам может не нужна остроумная аннотация — просто скажите посетителям, что по указанному адресу нет страницы, и позвольте им двигаться дальше. Агентство развлекательного консалтинга Duma Collective так и делает, хотя для зрелищности дополнила 404 страницу фоновым изображением.

7. Chillhouse

Бренд Chillhouse приложил дополнительные усилия, чтобы стильно перенаправить своих посетителей. Страница 404 брединрована и отправляет посетителей в небольшое путешествие с помощью фотографий прежде чем они вернутся на главную страницу.

8. Bitly

Если вы введете неправильную ссылку Bitly, вы попадете на страницу Bitly 404. Мы предполагаем, что это происходит довольно часто, поэтому страница 404 сразу переходит к делу. Он объясняет, что могло пойти не так, и предлагает пользователям идти на главную страницу Bitly, если им это нужно.

9. Ikea

Страница 404 Ikea также минималистична, но умно офрмлена. Этот пример того, что ваши страницы с ошибками не должны быть сложными, и будет здорово, если они развлекают.

10. Moxie Design Co.

Конечно, фраза «взорвать интернет» может показаться немного преувеличенной, но она говорит посетителям, что Moxie Design Co. не относится к себе слишком серьезно с такими небольшими промахами, как этот. Кроме того, внизу удобно расположена панель поиска, чтобы вы могли выбраться.

11. McKissack & McKissack

Классический трюк: «мы потеряли страницу». Простой способ отработать 404-ю ошибку не отталкивая аудиторию.

12. CSS Tricks

Вы когда-нибудь срывали обертку веб-сайта, чтобы посмотреть, что под ней? Это концепция, которую CSS Tricks использовали на своей странице с ошибкой 404. Это и остроумно, и напоминает о том, как устроен сайт.

13. Good Old Games

Эта страница — умная отсылка к GOG Galaxy, родному клиенту видеоигр Good Old Games. Здесь есть маленький персонаж видеоигры, чтобы дать посетителям возможность сообщить об ошибке, если они захотят.

14. Canva

Взгляните на страницу 404 у Canva. Она сообщает об ошибке и предлагает головоломку, в которую посетители могут поиграть, чтобы немного развлечься. Нет ничего плохого в том, чтобы позволить вашим посетителям расслабиться на пару минут, верно?

15. Innotech

Подобно подходу Canva, Innotech разметила игру в стиле Pong на своей странице 404, чтобы немного развлечься. Скорее всего, вы запомните такой веб-сайт. А ещё у них впечатляющий веб-сайт — серьезно, когда вы закончите играть, перейдите на домашнюю страницу и изучите всё.

16. Myriad

Видеоагентство Myriad выбрало причудливый фирменный дизайн страницы 404, имитирующий классические цветные полосы SMPTE, которые появляются на старых пленках и телевизорах. Это забавный отсыл к старым технологиям.

17. KonMari

Известная своими популярными методами уборки, организации и своим брендом, Мари Кондо привнесла похожие ощущения на страницу 404 своего веб-сайта. Текст вкратце и с юмором возвращает нас к ее философии наведения порядка — небольшой, но хорошо продуманной детали, которую узнают фанаты.

18. BrandCrowd

На этой странице с ошибкой не только подробная и интересная иллюстрация, но и забавный текст. Нам нравится ссылка на песню Semisonic «Closing Time»: «Вы можете щелкнуть где угодно, но не можете щелкнуть здесь».

19. Hot Dot Productions

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

20. OrangeCoat

Если вы сообщаете об ошибке, почему бы не развлечь пользователя на несколько секунд, пока вы ему помогаете? После дружеского приветствия OrangeCoat предлагает блок-схему, которая фактически помогает пользователям понять, почему они вообще попали на страницу с ошибкой.

21. Ervin & Smith

Эта страница 404 не просто перенаправляет пользователей обратно на активные страницы. Вместо этого страница 404 Ervin & Smith предлагает вам прокрутить вниз и узнать, зачем вам нужно агентство цифрового маркетинга и почему стоит выбрать именно Ervin & Smith, отправив контактную форму. Верное своей миссии, это агентство показывает, что любая страница может работать на конверсию.

22. DayCloud Studios

Ваша страница 404 может быть местом, где можно потратить минутку, как как это происходит на сайте DayCloud Studios. При перемещении курсора по экрану появляется сообщение 404, освещенное лазерами, стреляющими из кошачьих глаз. Почему бы и нет?

23. Headspace

Пример с инструкциями на 404 странице. Headspace успокаивает пользователей, побуждая сделать глубокий вдох, а затем вернуться на главную страницу.

24. Wildwood Bakery

Нет ничего плохого в лаконичном толчке в правильном направлении. Изысканный сайт пекарни Wildwood делает это очень мило (в буквальном смысле).

25. Astuteo

Страница 404 дизайн-агентства Astuteo — это идеальный баланс элегантной графики, юмора и пользы. Здесь есть необходимая информация и забавная визуальная метафора — тонущий грузовой корабль с убегающей фигуркой человека.

26. LEGO

На странице ошибки 404 LEGO нужно несколько слов — выражение персонажа все проясняет. Кроме того, поклонникам фильмов LEGO понравится забавная ссылка в тексте.

27. Magnt

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

28. IconFinder

Страница ошибок IconFinder проста, но восхитительна. Талисман компании, одетый в мантию и выглядящий утомленным, — знаковый кивок потерявшимся посетителям. Не беспокойтесь, здесь есть и ссылки, которые перейти в нужный раздел.

29. Sweet Dreams

Судя по 404-й странице их сайта, команда компании по производству снотворных Sweet Dreams приняла слишком много её продуктов. Эта страница не только юмористическая — она также хорошо сочетается с остальной эстетикой внешнего вида сайта и сообщениями, создавая ощущение сплоченности.

30. GitHub

Строка «Это не те дроиды, которых вы ищете» относится к уловке Джедая Оби-Вана Кеноби над штурмовиками в эпизоде IV «Звездных войн», и эта фраза настолько избита, что каждый понимает что он зашёл не туда. GitHub использует эту знаменитую строчку в своем сообщении об ошибке 404.

31. Patagonia

Пользовательская страница 404 компании Patagonia идеально передает атмосферу бренда. Она украшена прикольным роликом, веселым каламбуром, сочетающим «404» и «алоха», и ссылками на страницы продуктов. Это дружелюбный и забавный способ поприветствовать посетителей, которые оказались не в том месте.

32. Cloud Sigma

Cloud Sigma позволяет нам заглянуть за кулисы. Их страница с ошибкой 404 притворяется «домашней страницей младшего разработчика» — этот младший разработчик является, ну, в общем, котом.

33. AMC Theatres

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

34. Bruno

Неслучайно креативные агентства отлично умеют придумывать классные страницы 404. Вот еще один от креативщиков Bruno, который разыгрывает культовую комедию 2000 года « Чувак, где моя машина?». Нет, это не имеет ничего общего с компанией или веб-сайтом, но обязательно вызовет смех.

35. NPR

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

36. Medium

Medium использует тот же подход, что и 404-я страница NPR, рекомендуя статьи о потерянных людях и потерянных вещах. Если у вас есть время, ознакомьтесь с этими статьями — они интересные.

37. HomeStarRunner

На сайте HomeStarRunner.com, где размещается мультипликационный сериал, посвященный Flash, за последние годы появилось несколько забавных страниц с ошибками 404. В самых последних персонажах мультсериала изображена сцена, которая могла бы появиться прямо из одного из их эпизодов. Если вы включите звук при загрузке страницы, вы услышите, как их персонаж Strong Bad, известный тем, что выкрикивает фразы вслух, говорит: "404'd!"

38. Blizzard Entertainment

Вот простая идея, которая в конечном итоге выглядит привлекательно: страница 404 Blizzard Entertainment содержит анимированного персонажа, потерянного в настоящей метели, и немного юмора, которые оценят поклонники World of Warcraft.

39. Hello Big Idea

Пример от экспертов по маркетингу и социальным сетям. Сайт Hello Big Idea расскажет вам, что вам нужно знать о его смелом и прямолинейном стиле текста. И, конечно же, его страница с ошибкой 404 — не исключение.

40. HubSpot

Сообщение посетителям сайта, что на сайте есть некоторые проблемы. Цель в том, чтобы не отпугнуть клиентов HubSpot, оставаясь максимально милыми, отзывчивыми и услужливыми.

Превратите страницу с ошибкой 404 в радость

Никто не хочет попадать на страницу 404 — они раздражают. Тем не менее, вы не можете избежать их, поэтому всегда полезно иметь необычную страницу 404.

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

Графический редактор Vista Create

Бесплатный сервис для обработки и создания яркого, запоминающихся контента Vista Create — это не просто графический редактор, но и источник вдохновения для любых задач.

Создавайте впечатляющий контент онлайн. Выбирайте среди тысяч профессиональных шаблонов или создавайте свой дизайн с нуля.

Узнайте, как реализовать свои дизайн-идеи с помощью инструментов таких как:

• Редактировать фото
• Дизайн-объекты
• Анимация
• Аудио

Добавляются новые возможности и контент регулярно — так что вы будете влюбляться в VistaCreate каждый раз снова и снова! Огромная медиабиблиотека, интуитивный интерфейс и необходимые инструменты — все в одном месте, чтобы каждый раз создавать что-то особенное.

Мы профессионально разрабатываем интернет-магазины и запоминающиеся сайты компаний. Напишите нам в WhatsApp, когда вам это понадобится:

НАПИСАТЬ В WHATSAPP