Пример страницы 404: 80+ великолепных страниц ошибки 404

SeedProd и шаблоны 404 страниц упрощают создание страниц 404, которые увеличивают количество потенциальных клиентов и коэффициент конверсии.

Так чего же вы ждете?

И если вам понравилась эта статья, подпишитесь на нас в Twitter и Facebook, чтобы получить больше полезного контента, который поможет вам в развитии вашего бизнеса.

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

Страница 404 каждого веб-сайта — страница, над которой многие компании тратят много времени, надеясь, что ни один покупатель никогда ее не увидит.

Почему?

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

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

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

1.

Привет собакам! Amazon использует страницу 404, чтобы дать вам некоторое представление об их корпоративной культуре (включая обязательные фотографии милых щенков). Amazon также немедленно берет на себя ответственность за ошибку (даже если это не их вина) — с надписью «ИЗВИНЕНИЕ» большими заглавными буквами, уведомляющей пользователя о том, что это не та страница.

2.

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

3.

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

4.

В Google все просто. Просто изображение сломанного робота и простое почти техническое сообщение об ошибке. Вероятно, это свидетельство их инженерных корней и стремления каждый раз находить правильный ответ.

5.

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

6.

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

7.

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

8.

Behance, сайт, похожий на Dribbble, предлагающий дизайнерам визуальное вдохновение, по сравнению с ним немного более стерилен.Подобно поисковой системе 00, они показывают непослушным посетителям список всех проектов, категорий и демонстрируют некоторые популярные дизайнерские проекты, чтобы помочь им вернуться в нужное русло.

9.

Простота часто приходит сама по себе. Страница 404 Designer News передает сообщение — бонусные баллы за то, что на ее реализацию у разработчика не ушло и месяца времени.

10.

Простая страница с копирайтингом, которая граничит с обвинением пользователя в ошибке (в отличие от Adobe, которая немедленно берет на себя ответственность за ошибку и работает, чтобы помочь пользователю).Заголовок, который, если вы не читали глубже, можно интерпретировать как «эта страница существует, но вы не можете получить к ней доступ». Сегодняшний день посетителей стал немного менее счастливым, увидев это.

11.

Interaction Design Foundation дает посетителю возможность отправить электронное сообщение, в котором говорится, что они делали, когда они заблудились, и спрашивая, что они ожидали увидеть вместо этого. В этом подходе есть благородное, хотя и ошибочное намерение — что им на самом деле следует делать, если они достаточно заботятся о своих 404 посетителях, — это просматривать журналы ошибок своего веб-сайта (или использовать простые онлайн-инструменты для отслеживания веб-сайтов) и определять общие причины, по которым люди не могут добраться до их предполагаемые пункты назначения.

12.

Четко расскажите о том, что только что произошло, создайте симпатичную картинку обезьяны, позвольте пользователю вместо этого поискать другое видео. Хорошая, простая работа второй по величине поисковой системы в мире.

13.

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

14.

Копирайтеры Etihad 404 пропустили заметку о краткости, взяв 3 строчки, чтобы сообщить, чего обычно можно достичь с помощью одной строчки, одновременно давая пользователю несколько плохих советов ( Проверьте URL-адрес и попробуйте еще раз. Действительно? пользователи правильно понимают, как отформатирован URL-адрес? Кроме того, если вы находитесь на странице 404, повторная попытка не заставит ее волшебным образом внезапно сработать).

15.

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

16.

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

17.

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

18.

Небольшая эмоция может спасти плохую ситуацию — даже если это просто лицо виртуальной пластмассовой игрушки. Лего здесь отлично справляется.

19.

Простое монохромное предложение 404. Одна небольшая критика заключается в том, что главную кнопку действия («Вернуться домой») сложно сразу определить.

20.

UI Movement использует страницу с ошибкой, чтобы продвигать еженедельную подписку на информационный бюллетень, умно!

Биография автора:
Саадия Минхас — страстный поклонник UX-дизайна, обладающий обширным опытом руководства и разработки потрясающих пользовательских интерфейсов, предоставляя высококачественный дизайн для продуктов и проектов по всему миру.Чтобы прочитать больше ее статей, посетите Medium, UXDesignWorld

Читать дальше …

40 примеров 404 страниц

Эээ… 404, страница не найдена! Худшая ошибка, правда?

Неправильно! 404 — это отличная возможность проявить творческий подход к недооцененной странице вашего сайта. Проявив некоторую изобретательность, вы можете превратить эту досадную ошибку в забавную возможность привлечь внимание вашего трафика. В этом списке мы собрали 40 из 404 самых популярных страниц и дизайнов в Интернете на сегодняшний день.

Что такое ошибка 404?

Ошибка 404 Not Found — это код ответа HTTP, который указывает, что браузер смог связаться с сервером, чтобы попытаться получить страницу, но сервер не смог найти то, что было запрошено. Часто они возникают, когда человек ищет страницу, которой не существует, или когда он нажимает ссылку на страницу, которая больше не существует и не была перенаправлена ​​в другое место. Ссылки, которые никуда не ведут, известны как «мертвые ссылки» или «битые ссылки».

Ошибки 404 вредны для SEO?

ошибки 404 — это несуществующие страницы, поэтому Google не индексирует их.Таким образом, вы не будете наказаны за людей, пытающихся найти на вашем сайте несуществующие вещи. Однако если на вашем сайте есть страницы со ссылками на плохие страницы или ошибки 404, это более сильно повлияет на ваш рейтинг в SEO. Таким образом, сканеры Google читают плохие ссылки и определяют, что сайт не так очищен, как другие сайты. Вот почему так важно переадресовывать URL-адреса, которые вы не поддерживаете, а не удалять страницы сразу, потому что переадресация поможет восполнить пробел и предотвратить появление плохих ссылок на вашем веб-сайте.

Создание страницы 404

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

Лучшие методы проектирования страницы 404

1. Объясните, что такое 404. Страница с надписью «Ой, 404! Вернись!» не помогает большинству людей.Объяснение того, что страница, которую они ищут, либо перемещена, либо больше не существует, и предложение альтернатив, таких как панель поиска, меню или другая навигация, является ключом к обеспечению хорошего взаимодействия с пользователем на странице 404.

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

3. Брендинг! Очевидно, ваш бренд должен просачиваться сквозь все, к чему он прикасается, и страница 404 не исключение. Используйте свое творчество, чтобы создать страницу, посвященную бренду и соответствующую творческим принципам вашего сайта.

40 примеров 404 страниц

1. Ялантис

Yalantis привлекает внимание.Что еще интереснее, эта страница 404 на самом деле интерактивна! При перемещении курсора по точкам волна перемещается в разные стороны. Кто знал, что 404-й может быть забавным?

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

2. IMDB

IMDB воплощает в себе цель своего сайта — быть базой данных фильмов, просто изменяя цитаты из фильмов, чтобы применить их к отсутствующей странице, которая наверняка заставит вас хихикать.Обновите страницу несколько раз, и вы обнаружите, что каждая загрузка представляет собой отдельную цитату, например, из «Криминального чтива», «Принцесса-невеста», «Искупление Шоушенка» и других.

3. Битли

Еще один интерактивный 404, Bitly’s включает забавную анимацию и милую иллюстрацию рыбы-иглобрюха, которая заблудилась. Каждый раз, когда вы наводите курсор на воду, вы вызываете рябь в волне. Bitly также включает ссылки на домашнюю страницу и блог со страницы 404.

4. Здание Discovery

Модель 404 для Discovery Building чрезвычайно элегантна.Этот дизайн включает красивые изображения пути и дерзкое сообщение «Мы свернули не туда». Страница также включает в себя полную навигацию, которая чрезвычайно полезна для возврата туда, куда вы хотели пойти.

5. Forsanetti

404-я страница известного художника Пьеро Форсанетти — прекрасный сюрприз. На вопрос «Не все ошибки — плохие» вы попадаете в увлекательную интерактивную игру. Проверьте это и посмотрите, какой балл вы получите!

6. Строения Солт-Сити

Salt City Builds специализируется на обслуживании и ремонте мотоциклов японских моделей, выпущенных до 1979 года.Страница 404 этого бренда элегантна и посвящена бренду, на ней написано: «Заблудиться — не так уж и плохо». Он хорошо обращается к их целевому рынку, а также имеет удобную навигацию вверху, которая поможет им вернуться на правильный путь, когда они будут готовы!

7. Pixar

Анимационная студия Pixar на странице 404 изображает персонажа из одного из их фильмов «Наизнанку», известного своим плачем, с дерзким сообщением «Ой… не плачь». Четкий дизайн и фирменный контент делают эту страницу 404 победителем.

8. Orangecoat

Orangecoat — дизайнерская фирма, базирующаяся в Гринвилле, Южная Каролина, специализирующаяся на веб-дизайне и маркетинге, которая помогает предпринимателям создавать компании и руководить веб-стратегиями существующих компаний. На их потрясающе оформленной странице 404 есть диаграмма, которая направляет действия пользователя.

9. Dogstudio

Design компании Dogstudio находится на высоте их 404-й страницы. Их страница включает в себя случайный GIF-файл с изображением собаки, зацикленной на заднем плане страницы.Обновите страницу, и вы получите еще один GIF с изображением собаки!

10. Чудо

Marvel эпична. Каждая страница включает в себя замысловатый дизайн, который либо интерактивен, либо имеет какую-либо анимацию. И, как и несколько других представленных страниц 404, есть несколько различных вариантов, которые случайным образом появляются при обновлении. Посмотрите, какой из них вы получите!

11. Точка доступа

Эта очаровательная страница 404 дает вам ощущение, даже если она предназначена для веб-сайта, продающего платформу CRM! На этой странице 404 представлены симпатичные изображения, приятные сообщения и несколько полезных советов, которые даже привлекают трафик к подписке на бесплатную демонстрацию платформы.Эта страница превращает удовольствие в функционал.

12. Cirque du Soleil

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

13. Дисней

На этой забавной странице 404 изображен один из современных персонажей Диснея, Ральф, который, похоже, пробивает дыру в странице, потому что заблудился. Интересно объединить их персонажей в соответствии с сюжетной линией фильма — это интересный способ создать страницу 404!

14. Метель

Blizzard Games есть спасательный мерлок, который поможет вам вернуться в безопасное место. Эта страница 404 с графикой, гармонирующей с игровой компанией, является брендом.Конечно, нам нравится видеть навигацию вверху, чтобы облегчить работу этого мерлока. Мммrrgmgrrrgmml!

15. Уловки CSS

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

16. Слабина

Slack имеет интерактивный фон, который делает работу с 404 безмятежной.Это также связано с брендом, потому что, если Slack когда-либо обнаруживает ошибку в приложении, экран, который появляется, будет таким же. Убедитесь сами!

17. GoDaddy

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

18. Purée Maison

Purée Maison — французское креативное агентство, специализирующееся на коммуникационной стратегии.На всем сайте вы увидите анимацию маленьких персонажей, и страница 404 не исключение. На этой сюрреалистической странице 404 запечатлен маленький персонаж, который врезался в стену (как будто вы попали в 404). Чистый дизайн включает в себя мобильную навигацию с правой стороны, которая помогает вернуться домой.

19. LEGO

Lego, конечно же, изображен персонаж LEGO из фильма LEGO. Он включает в себя симпатичную графику и краткую аннотацию (и строку из фильма), убеждая пользователя, что все по-прежнему великолепно!

20.20 век Фокс

Мы сочли правильным поставить 20th Century Fox на 20-е место в этом списке. Эта страница 404 меняется с каждым обновлением и включает забавное сообщение, которое направляет вас к одной из самых известных картин, таких как «Офисное пространство», «Эдвард руки-ножницы», «Молодой Франкенштейн» и другие!

21. Фигма

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

22. Mailchimp

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

23. Чудо

На этот раз не о Marvel, о котором вы, возможно, думаете — Marvel App — это приложение для создания прототипов.Эта милая анимация представляет собой игру на невезении, которая быстро сообщает пользователю, что он попал на страницу, которой не существует. Это также дает пользователям возможность сообщить им по электронной почте или в твиттере, что они искали, чего сейчас не хватает, и это отличная идея.

24. ИКЕА

Ой! Что-то пошло не так. Несмотря на то, что мебель, которую вы искали, могла быть похищена, Ikea предоставляет панель поиска на своей странице 404, а также 3 меню, которые помогут вам вернуться к тому, что вы искали.Мы считаем, что эта страница 404 очаровательна и чрезвычайно удобна для пользователей.

25. Американский домашний щит

American Home Shield известна своими гарантиями на бытовую технику, поэтому она идеально подходит для того, чтобы показать что-то, что сломано по неработающей ссылке. Нам также нравится, что AHS пользуется этой возможностью, чтобы превратить потерянный трафик в преобразованного пользователя, предлагая пользователю ознакомиться с доступными планами. Может быть, эта страница все-таки не так уж «сломана»!

26. Sony Alpha Вселенная

Эта страница 404 очень проста и понятна.На веб-сайте Sony Alpha Universe представлены мастера, использующие камеры Alpha, и искусство, которое они создают. Нам нравится, что эта страница 404 буквально говорит сама за себя в достижении «конца вселенной!» с быстрой ссылкой на домашнюю страницу, сохраняя при этом навигацию по сайту на странице.

27. Живая нация

Live Nation entertainment — это пустая площадка для шоу, что очень модно. Нам нравится простой дизайн этой страницы. Оно краткое и по существу, чтобы вы знали, что наткнулись на несуществующую страницу, со ссылкой на главную.Единственное, что могла бы использовать эта страница 404, — это, возможно, больше вариантов навигации, чем просто возвращение домой, или панель поиска, позволяющая пользователю искать то, что они искали в первую очередь.

28. Каждый доллар

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

29. Github

Github полностью посвящена бренду. Нам нравится отсылка к «Звездным войнам» и мудрый персонаж Github, объявляющий пользователю, что веб-страница, которую они искали, не существует. На иллюстрации героя достаточно, чтобы сообщить об ошибке 404 без ущерба для удобства навигации по меню и поиску ниже.

30. 9GAG

9gag — это приложение, в котором вы можете найти любой контент, гифки и многое другое.Страница 404 компании 9gag имеет одну цель: заставить вас загрузить их приложение, которое нам очень нравится. Он показывает причудливую гифку, играющую в фоновом режиме, но единственный призыв к действию — загрузить приложение, которое привлекает трафик для конвертации. Блестяще.

31. Фортнит

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

32. Southwest Airlines

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

33. Reddit

Reddit просто сообщает вам, что того, что вы искали, не существует. Самое интересное в этом 404 — это то, что логотип Reddit меняется с каждым обновлением.На некоторых изображены нарвал, затерянный в пустыне, радуга и многое другое. На какой вы приземлитесь?

34. ebay

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

35.Buzzfeed

Можете представить, чтобы найти то, чего не было на Buzzfeed? На содержательном сайте, который, кажется, охватывает все, они по-прежнему разработали минималистичную страницу 404 на тот случай, если то, что вы ищете, не существует или было удалено. Этот анимированный гиф и простой обмен сообщениями заставляют нас падать в обморок от страницы 404.

36. TED

TED.com имеет библиотеку мыслителей-новаторов, которые делятся тезисами, историями и многим другим на своем сайте. Нам нравится яркость включения вашего логотипа на страницу 404 с отсутствующей частью, как это сделал Тед на своей странице 404.На этой странице также есть заметная панель поиска, чтобы пользователи могли легко найти свою следующую любимую инновационную лекцию на сайте!

37. Giphy

Конечно, страница 404 Giphy включает в себя множество гифок! Этот 404 замечательный, потому что изображения позволяют вам знать, что вы достигли 404 без навязчивого сообщения. Кроме того, на странице представлены самые популярные гифки дня, которые постоянно меняются. Кроме того, фон тако потрясающий.

38. Trivago

Вы заблудились! Но тебя можно найти.Нам нравится эта четкая страница 404 с минималистичным дизайном и лабиринтом. Нам также нравится обмен сообщениями на этой странице … Возможно, вы не сможете найти нужную страницу, но Trivago поможет найти ваш идеальный отель по лучшей цене. Идеальные сообщения о бренде.

39. Товарищи по почте

Postmates есть отличная фирменная страница 404. Нам нравятся умные изображения пустой тарелки в 404 и то, как Postmates побуждает вас вернуться на главную страницу. Даже если ваша тарелка пуста, эта страница напоминает вам, что она может быть полной, когда вы заказываете доставку.

40. Lyft

И последнее, но не менее важное: нам нравится 404-я страница Lyft! Если вы заблудились, как этот водитель, вокруг дерева, не волнуйтесь. Lyft имеет понятное меню вверху для водителей и гонщиков, а также включает быструю легкую ссылку, чтобы вернуться туда, где вы были до того, как заблудились.

БОНУС 404 ДИЗАЙНА СТРАНИЦ

Но подождите, это еще не все! Мы продолжим добавлять в эту статью, поскольку найдем больше интересных примеров.

41. Акодез

Acodez — веб-агентство, расположенное в Индии.Это агентство демонстрирует свою индивидуальность на своей странице 404, на которой изображен талисман их компании, Acodie!

42. CarWow

CarWow поможет вам найти следующую любимую машину. Этот веб-сайт является одним из наиболее широко используемых сайтов сравнения покупок автомобилей в Интернете. Но пытались ли вы найти машину, которая, возможно, была продана или больше не указана? Не грустите слишком долго … вы можете сыграть в эту супер веселую интерактивную гоночную игру, которую они разместили на своей странице 404! Это определенно обеспечивает отличный пользовательский опыт.Щелкните ссылку выше и убедитесь в этом сами.

50 самых креативных страниц 404 в Интернете

В какой-то момент в нашей жизни в Интернете мы наткнулись на страницу 404.

Если вы новичок в Интернете или опытный ветеран, они могут сбивать с толку и расстраивать.

Так почему они вообще существуют?

404 страницы служат для предупреждения посетителя о том, что страница, которую он пытался найти, больше не существует, и для (надеюсь) перенаправления его в другую часть вашего сайта.Довольно часто страницы 404 можно упустить из виду и отнестись к ним второстепенно. На ваш веб-сайт и составляющие его информационные страницы тратятся бесчисленные часы, но когда настает очередь страницы 404, легко использовать общий код ошибки, чтобы сэкономить время (но не следует этого делать).

Наличие настраиваемой (и креативной) страницы 404 — это открытие для посетителей само по себе. Это упрощает неудачную ситуацию и может указать пользователям место, где они могут получить некоторую помощь.

Вот как вы можете создать отличную страницу 404 для своего сайта:

01.Развлекайтесь

Не бойтесь развлечься со своей страницей 404. Он может быть творческим и диковинным, пока общается.

Behance / Thapwaris Chinsirirathkul

На этой забавной странице 404 вы перенесетесь в космос. Код ошибки 404 передается интересным и уникальным способом. Если вы просматриваете изображение на Behance, оно даже перемещается, добавляя еще один слой интереса и развлечения.

02. Блок в форме

Формы могут быть вашим лучшим другом в дизайне.Вы можете использовать фигуры в качестве узоров и текстур или использовать их вместе для создания новой формы.

Behance / Manoj Bhadana

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

03. Используйте движение

Вы можете создать движение визуально с помощью различных техник, но сейчас 21 век.Если вы хотите, чтобы что-то казалось движущимся, заставьте его действительно двигаться.

Behance / PBB | PITBLACKBEARD Движение этой страницы 404 игриво и мило. Даже если вы не умеете читать на том языке, на котором написана страница, вы все равно цените и наслаждаетесь визуальным оформлением. То, что кисточки раскачиваются, а не остаются неподвижными, придает простой графике дополнительную привлекательность.

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

04. Сохраняйте краткость

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

Behance / Керен Риженски

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

05. Используйте эмоции

Рисуйте эмоции людей.Вы можете заставить их смеяться, плакать, размышлять и многое другое. Люди эмоциональны по своей природе, они понимают то, что вы говорите.

Behance / Керен Риженски

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

06. Будь иллюстративным

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

Behance / kobieta

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

07. Не переусердствуйте

То, что вам нужна уникальная страница с кодом 404, не означает, что вам нужно делать все возможное и создавать что-то совершенно инновационное.Узнайте о текущих тенденциях и о том, что популярно, и примените их на своей странице.

Behance / Аарон Снайдер

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

08.Будьте буквально

Вам не нужно обходить тему на странице 404. Все знают, почему он оказался там, поэтому абсолютно нормально показать это буквально.

Элекс

Вот робот (представляющий веб-сайт или Интернет в целом), который начинает ломаться на петлях. Он не работает, что визуально показывает, что ссылка, которую вы пытались найти, на самом деле не работает.

09. Стилизация

Если вы делаете что-то иллюстративное, это не обязательно должно быть настолько сложным, чтобы оно выглядело реальным.Возьмите на себя смелость и стилизуйте, где можете. Иллюстрации становятся более мультяшными и доступными.

Behance / Diogo Marquetti

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

10.Используйте перекрытие

Перекрытие форм, букв или цветов для создания интересных эффектов на страницах 404.

Behance / Evtimov

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

11. Используйте релевантные изображения

Хотя использование изображений, которые не имеют особого смысла на вашей странице, может быть забавным, может быть полезно использовать изображения, которые имеют смысл.Он собирает воедино сообщение и имеет больше смысла, а не просто подшучивает над изображением и шутливым построчным.

Behance / Colin Tossijn

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

12.Ограничить цвет

Выберите несколько цветов (те, которые работают вместе) или вариации в пределах одного цвета и придерживайтесь его. Он создает тему и может упростить процесс проектирования, ограничив использование слишком большого количества цветов.

Behance / Alessandro Ceporina

На этой странице используются различные оттенки и оттенки (более темные и светлые тона) синего. Он работает хорошо, потому что тона достаточно разные, чтобы не казаться слишком «синим», но есть четкая тема, и все хорошо соотносится друг с другом.

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

13. Embrace exture

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

Behance / Damien Pereira

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

14. Предоставьте варианты

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

Behance / Harry Tran

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

15. Будьте нестандартными

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

Behance / Родриго Коста

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

16. Используйте отрицательное пространство

Нет необходимости забивать каждый дюйм вашей страницы 404 чем-то. Пусть все дышит, так будет больше эффекта.

Behance / Jacopo Caracci

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

17. Сделайте это каламбуром

Страницы 404 посвящены тому, что чего-то не удается найти, так почему бы не сыграть на этом факте? Придумайте общие выражения и образы, которые относятся к чему-то потерянному, и подготовьте почву с ними.

Behance / Zach Daley

Эта страница использует одну из этих вещей и иллюстрирует ее: оказаться на безлюдном острове в надежде быть найденным (точно так же, как искал посетитель).

18. Будьте дерзкими

Если у вас есть забавное сообщение, которое вы хотите передать вместе с кодом 404, сделайте так, чтобы ваше изображение соответствовало ему.

Behance / Zach Daley

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

19. Создайте измерение

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

Behance / Dariusz S

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

20. Распространяйте формы по всему пространству

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

Behance / Cristina Maria

Вот более мягкий подход. Округлость облаков передана гарнитуре. Если бы они использовали более острый шрифт, он бы отключился, создавая слишком большое напряжение на странице.

21. Будьте сложными

Если вам больше нравится невероятная декоративность, дерзайте. Если все сделано правильно, продуманный и украшенный вид может сделать вашу страницу более высококлассной.

Behance / Ruth Lin

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

22. Используйте аспекты вашего бренда

Чем занимается ваш бренд? Можно ли его творчески показать визуально? Если это возможно, подумайте о том, чтобы сделать это на своей странице 404.

Behance / Андрей Молдован

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

23. Будьте информативными

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

Behance / Maurília de Nóbrega

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

24. Используйте разные носители

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

Behance / Todd Goldstein

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

25. Выйдите за пределы компьютера

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

Behance / Ольга Шипило

На этой странице используются глиняные фигурки ручной работы, а не плоские иллюстрации.Он выделяется среди других страниц 404 из-за ручной работы. У него есть характер, и персонаж внутри него относителен (досадно добраться до страницы 404).

26. Разбивка текста на части

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

Dribbble / Оля Гожа

Эта страница переносит космическую тему в свой текст, заменяя ноль галактическим водоворотом. Он хорошо вписывается в композицию и относится к круглым формам, повторяющимся на всей странице (планеты, звезды и излучающие синие круги).

27. Создайте эмоциональную связь

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

Salt City Builds

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

28. Используйте фотографию

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

Dribbble / Евгений Долгов

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

29. Используйте движение

Движение можно создать без фактического перемещения объектов на странице. Если все сделано правильно, это может иметь действительно интересный эффект.

Dribbble / Justas Galaburda

Движение в тексте на этой странице очень эффективное. Он не преувеличен и передает ровно достаточно движений.Это связано с обменом сообщениями и еще больше оттачивает движение домой.

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

30. Внедрите поп-культуру

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

СТГ.

Эта страница 404 определенно насмешка. Классическая фотография Лайонела Ричи в сочетании с одной из его известных песен делает эту страницу очень успешной.Это достаточно мейнстрим, чтобы младшая аудитория поймет, а старшая не останется в пыли.

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

31. Будьте символичны

Использование символики на вашей странице может создать взаимосвязь между изображениями и сообщениями. Символ может быть буквальным или переносным, если он имеет смысл.

Dribbble / Рон Евгений

На этой странице сломанный карандаш используется в качестве символа неработающей ссылки, которая изначально привела вас туда.В этом есть ясный смысл, и вы сможете понять суть, даже если не читали код ошибки.

32. Создайте контраст

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

Dribbble / Meng To

Эта страница создает контраст с цветом. Темно-синий фон выделяет яркие кнопки. К ним привлекается ваше внимание, и вы с большей вероятностью с ними взаимодействуете.

33. Используйте значки

Использование значков на вашей странице может помочь упростить работу. Используйте значок вместо текста, и он станет более читабельным.

Underbelly

На этой странице используется компас, чтобы вы знали, что что-то не так. Это главный фокус, и все вокруг него упрощено. Он соответствует бренду (логотип — кит) и соответствует голубой цветовой гамме. Простота значка хорошо сочетается, и если бы он был более подробным, он был бы не таким эффективным.

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

34. Создайте тему

Выберите тему и используйте ее. Единая тема сделает вашу страницу более связной и будет работать вместе.

Dribbble / Garrett Godsey

Цвет логотипа взят из этой темы. Бирюзовый цвет проходит через логотип, иллюстрацию, часть текста и до нижнего колонтитула. Если бы в каждой области использовались разные цвета, она была бы слишком занята и отключена.

35. Сделайте его узнаваемым

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

Hugo Franca

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

36. Учитывайте пространство

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

Dribbble / Jenny Leonard

На этой странице используется иллюстрация, и хотя она выровнена по центру, она выглядит более естественной. Неидеальные полосы синего цвета создают ощущение, будто они нарисованы на заднем плане, а не просто помещены на него.

37. Не бойтесь толпиться

Не бойтесь больших открытых пространств на своей странице. Если у вас есть несколько вещей, которые вам нужны, поэкспериментируйте, сложив их вместе.

Dribbble / Ben Jordan

Эта страница 404 оставляет большую область черного цвета внизу. Вместо того, чтобы разделять астронавта и текст, они решили сложить их все вместе. Если бы они их разложили, эффект космического пространства был бы утерян (звезды растворяются в темноте).

38. Используйте вырезы

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

Dribbble / Fabricio Rosa Marques

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

39. Сделайте понятным

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

Dribbble / Kevin Cdnc

Эта страница 404 очень буквальная. Он показывает код 404, строку текста о том, что страница не может быть найдена, и изображение парня в бинокль, который что-то ищет. Это имеет смысл, и даже самые неопытные пользователи Интернета поймут это.

40. Показать сцену

Создайте сцену на странице 404. У вас есть целая страница, с которой вы можете делать все, что хотите, почему бы не рассказать историю?

Почтовый ящик

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

41. Экспериментируйте

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

Dribbble / Jazmine Kohl

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

42. Будьте яркими

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

Juicy Graphics

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

43. Не ограничивайте себя

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

Dribbble / Justin Belcher

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

44. Упакуйте его в

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

Handmade Studio

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

45. Будьте изобретательны

Не бойтесь превращать одно в другое. Вы можете создавать все, что хотите, это ваша страница 404!

Dribbble / Morgana D’Almeida

Это карандаш? Пчела? Оба? На этой странице 404 создатель взял оба и объединил их. Жужжащий след, который он оставил позади, выглядит так, как будто он был нанесен концом карандаша (или жала). Цвета связаны друг с другом, что дополнительно указывает на то, что это должна быть пчела.

46.Будьте дрянными

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

Dribbble / Mitchell Geere

Эта страница 404 для сайта знакомств — идеальное количество глупостей. Текст в сочетании с картинкой — это действительно печальная история, которая заставляет вас немного посмеяться.

47. Дайте ему преимущество

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

Dribbble / Мартин Бонов

Эта страница выбрала резкую из-за своего отношения (и внешнего вида). Скейтбординг популярен (среди молодого поколения) и несет в себе свой собственный подход. Сообщение «вы только что выручили» дает ему преимущество (особенно в сочетании с подтекстом). Изображение относится к тексту, а красный фильтр придает фотографии более насыщенный вид.

48. Расширьте границы

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

Ologie

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

49. Используйте выкройки

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

McCann

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

50. Имейте слои информации

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

Dribbble / Trina Parkin

Эта страница содержит массу информации и полезных источников, но она изложена четко и эффективно. Каждая часть имеет свой раздел, который четко отличается от остальных. Это значительно упрощает процесс принятия решений.

С уважением

Теперь, когда вы увидели массу замечательных примеров страниц с кодом 404, нет причин, по которым вам тоже не должно быть ни одной. Реализуйте некоторые из этих советов на своей собственной странице, и вы обязательно получите страницу 404, которой стоит поделиться (она может даже оказаться в списке, подобном этому).

44 невероятных страницы ошибок 404

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

Мы всегда хвалим за преимущества хороших стратегий по устранению простоев. Другой аспект заключается в том, чтобы позаботиться о посетителях, если они попадают на старую страницу или неработающую ссылку. Вот почему мы рекомендуем уделить немного больше внимания страницам с ошибками на 400 и 500 уровнях.

Умная или интересная страница с ошибкой усиливает сообщение о вашем бренде и увеличивает шансы посетителей остаться на вашем сайте, а не просто уйти.

Что такое страница с ошибкой 404?

Страница ошибки 404 — это веб-страница, предназначенная для отображения, когда запрос вызывает код ответа HTTP 404. Этот код означает, что клиент (или «посетитель») смог найти сервер, но не определенное место назначения. Другими словами, они нашли ваш сайт, но не конкретную страницу на вашем сайте.Таким образом, сервер отправляет вашему браузеру код ответа 404, сообщая им, что произошло. Если его назначил дизайнер сайта, загружается страница с ошибкой 404.

Вот пример:

Посетите страницу статуса, и ваш браузер загрузит нашу главную домашнюю страницу. Вы нашли наш сервер. Добавьте правильный пункт назначения в конец этого URL-адреса, например, / pricing или / login, и ваш браузер загрузит это конкретное место назначения. Но попробуйте несуществующий пункт назначения, например / gibberish, и вы получите страницу 404.В основном наш сервер говорит следующее: вы нашли меня, я вижу там мой URL, но конкретный пункт назначения, который вы ищете после косой черты, — это страница, для которой у меня нет соответствия. Итак, вот эта страница с ошибкой, чтобы вы знали, что я не вижу в моем каталоге страницы, которая соответствует вашему запросу.

Самое замечательное в странице с ошибкой 404 заключается в том, что одна и та же страница загружается независимо от того, какая ошибка приведет вас туда. Таким образом, любая из бесконечных комбинаций неправильных расширений URL будет генерировать эту страницу при условии, что домен верхнего уровня, часть site-dot-com, не поврежден.

Есть две распространенные причины, по которым посетитель может попасть на страницу с ошибкой:

1. Они нажимают ссылку, которая указывает на URL-адрес страницы, которая больше не существует.
2. Они нажимают или вводят ссылку с ошибкой.

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

Поскольку мы не можем контролировать, кто может отправлять посетителей на неработающие ссылки в нашем домене, следующее лучшее, что мы можем сделать, — это настроить отличную страницу с ошибкой 404. Несмотря на то, что отправка посетителей на страницу с ошибкой — не лучший вариант, вы все равно можете это сделать.

А как насчет других страниц с ошибками?

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

Любой трехзначный код ошибки, начинающийся с 4, например 404, называется ошибкой 400-го уровня и означает, что что-то пошло не так на стороне клиента. Клиент в этих отношениях — ваш посетитель. В частности, это их браузер. Поэтому логично, что неверный URL-адрес считается ошибкой клиента. Сервер (компьютер, на котором размещен сайт) работает нормально.

Другие распространенные ошибки 400-го уровня включают:

• 400 Неверный запрос: запрос, отправленный на сервер, был искажен или каким-то образом не соответствовал правилам синтаксиса.
• 404 Запрещено: звучит зловеще. Но на самом деле все это означает, что запрошенный URL действителен, но у клиента нет необходимых разрешений для доступа к сайту. Это может произойти, когда вы пытаетесь посетить URL-адрес сайта, для посещения которого необходимо войти в систему.

Другой распространенный набор кодов ошибок — это коды с 500 уровнями. Если коды с 400 уровнями указывают на проблему с чем-то, что делает клиент, коды с 500 уровнями указывают на что-то неожиданное, происходящее на стороне сервера.

Некоторые из распространенных кодов с 500 уровнями:

• 503 Служба недоступна: это стандартная ошибка «сервер недоступен».Обычно сервер не может ответить, потому что он перегружен или отключен для обслуживания.
• 504 Тайм-аут шлюза: сервер действовал как шлюз для вышестоящего сервера, но не получил вовремя ответ от вышестоящего сервера.

Совет для профессионалов: Даже если на сайте нет страницы с ошибкой, вы можете увидеть коды ошибок в своем браузере. Например, в Chrome щелкните страницу правой кнопкой мыши и выберите «Проверить». Вы увидите набор панелей инструментов разработчика.На вкладке «Консоль» вы увидите список любых кодов HTTP-ответа, которые могут быть сгенерированы, а также множество другой «скрытой» информации, которую сервер сообщает вашему браузеру.

Интересный факт: Существует и иногда используется малоизвестный код ошибки 451. Код предназначен для использования, когда доступ запрещен по юридическому запросу, и является отсылкой к роману-антиутопии «451 градус по Фаренгейту».

44 невероятных примера страниц с ошибкой 404

1.20 век Фокс

У такой компании, как 20th Century Fox, есть огромная библиотека памятных материалов, на которые можно черпать вдохновение. Они взяли несколько отрывков из любимых фильмов библиотеки, таких как «Офисное пространство», «Месть ботаников» и «Эдвард руки-ножницы». Нажмите на текст, и вы попадете на страницу, где можете купить свою копию.

2. Amazon

Amazon умеет делать сразу несколько вещей. Их страница ошибок ничем не отличается: отчасти устройство для привязки к бренду, отчасти инструмент для набора персонала, их страница с ошибкой загружает изображения и копирует их на множество разных собак, которые часто бывают в офисах компании.Оттуда вы можете щелкнуть биографии разных собак и перейти к реальным историям реальных сотрудников о работе в Amazon. Как будто они знали, что талантливые люди, которые строят в Интернете, будут искать забавные примеры страниц с ошибками.

3. Astuteo

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

4. Бэтмен 3-D

Сайт фан-арта Бэтмена немецкого художника Ахима Лубса — отличный пример использования дизайна и движения на странице с ошибкой. Наведите указатель мыши, чтобы направить фонарик Бэтмена и отобразить сообщение об ошибке.

5. Бенджамин Рид

Британская компания веб-дизайнера Бенджамина Рейда Nouveller создала невероятную страницу с ошибкой, вдохновившись фильмом «Парк Юрразика». На этой странице посетители могут попробовать свои силы во взломе компьютерной системы парка, основанной на сцене, где Сэмюэл Л.Персонаж Джексона пытается обойти настройку безопасности коварного программиста парка.

6. Кампания Берни Сандерса

Вскоре после объявления своей президентской заявки в 2016 году Берни Сандерс создал, вероятно, самую запоминающуюся страницу ошибок любого кандидата в президенты. На странице воспроизводится видео, в котором Сандерс объясняет, что пошло не так, и как вернуться на главную страницу. «Просто пролистайте вниз до конца страницы, и вы вернетесь домой, туда, где должны быть!»

7.Bitly

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

8. Blizzard Entertainment

Blizzard Entertainment использует изображение битого стекла на своей странице с ошибкой с дерзкой копией о том, что пользователь «ломает» страницу.Умная концепция, особенно для миллионов поклонников Blizzard, стреляющих цифровыми боеприпасами на своих экранах.

9. Bloomberg

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

10.Блюгг

Blugg’s была довольно известная страница с ошибкой 404. Долгое время на странице появлялось вирусное видео смеющегося козла. Звучит странно, но это соответствовало тону компании, это было забавно, людям это нравилось. Настолько, что, когда команда переработала страницу с ошибкой, им просто пришлось поговорить о козле. Они даже включили сводку статей, где упоминалась коза. Молодец, козел.

11. Codecademy

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

12. Даниэль Карчер

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

13. Дилберт

Комикс Дилберта — отличный пример использования собственного контента в качестве материала для вашей страницы 404.

14. Dogstudio

Dogstudio использует потрясающую библиотеку гифок с животными от Giphy, чтобы заполнить страницу с ошибкой изменяющимся набором гифок с собаками.

15. Восточный рынок

Людям нравятся такие игры, в которых вы нажимаете или щелкаете, чтобы летать по небу и избегать препятствий. На восточном рынке Детройта есть страница с ошибкой 404 с игрой под названием Flappy Spud. Может быть, это такая же окучница, которую можно купить на рынке. Также приятно, что картофель превращается в груду картофеля фри, когда ударяется о стену.

16. Emailcenter UK

Страницы ошибок — хорошее место, чтобы продемонстрировать творческий потенциал сотрудников вашей компании. Для Emailcenter UK это означало интерактивную шутку об увольнении члена их команды разработчиков. Это отличный способ развлечься как бренд и показать свою команду за кулисами, которая, как правило, не пользуется особой популярностью.

17. Google

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

Страница с ошибкой — это довольно простая иллюстрация сломанного робота и его копии. Но пасхальное яйцо находится в заголовке страницы, той, которую вы видите на вкладке своего браузера. Сначала это выглядит как опечатка, но «!! 1» — это отсылка к сетевой шутке о том, как быстро энтузиазм (!!!) может стать небрежным (!! 1).Обратите внимание на эту клавишу переключения передач, дети.

18. HeyZap

Люди любят винтажные видеоигры. Команда HeyZap уловила часть этой любви, закодировав версию классической аркады «Astroids» на своей странице с ошибкой. Выстрелите несколькими лазерами по летающим космическим камням, и вскоре вы простите того, кто отправил вас на мертвую связь.

19. Производство горячих точек

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

20 Уго Боначчи

Хьюго Боначчи выглядит как стандартная страница с ошибкой 404, когда вы впервые попадаете на нее. Затем вращающаяся фиолетовая черная дыра начинает всасывать все элементы страницы.

21. IGN

IGN позаимствовал некоторую ностальгию у любителей видеоигр по их странице ошибок, вдохновленной Марио. Копия ссылается на моменты из игр «Принцесса в другом замке».

22. IMDb

Страницы с ошибками не должны загружать одно и то же содержание при каждом посещении.Их можно настроить так, чтобы они сменяли друг друга в библиотеке копий или произведений искусства, чтобы каждый визит казался новым. Именно это сделали IMDb со своей страницей ошибок, на которой представлены немного измененные цитаты из фильмов. Идите вперед и нажмите «Обновить» несколько раз, чтобы увидеть, какие еще цитаты появятся.

23. Iconfinder

Эффект полета в космосе «Звездных войн» завораживает публику с 1970-х годов. Это полностью действует на странице ошибки 404 в Iconfinder. Еще один отличный пример тонкой анимации, производящей большое впечатление.

24. Имгур

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

25. Зайчик в дизайне

Jackrabbit Design вводит посетителей в эту богатую анимацию, создавая слои, которые перемещаются и сдвигаются в зависимости от курсора пользователя. Это отличный способ побудить людей уделять вашим работам немного больше времени.

26.Куало

Space Invaders — еще одна классическая аркада. Британская команда, стоящая за Kualo, повеселилась, написав название своей компании с помощью Invaders. Захватчики, вам понравится стрелять из космического лазера.

27. Лего

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

28.Одинокая планета

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

29. Пышная

Эта страница с ошибкой от косметического бренда Lush — отличный пример привязки вашей страницы к продвижению. На Пасху 2014 года бренд объявил о «Охоте за пасхальными яйцами». Найдите пасхальное яйцо на их сайте и выиграйте бесплатный приз.Оказалось, что пасхальное яйцо было спрятано на странице с ошибкой 404, а призом была специальная версия их популярной бомбы для ванн с названием «Ошибка 404».

30. Magnt

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

31. MailChimp

Mailchimp, демонстрирует способность бренда рассказывать истории и привлекать внимание, используя небольшие творческие элементы.Это приятный эффект, которого вы почти не замечаете, если не обращаете внимания.

32. NPR

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

33. Национальный музей истории похорон

Похороны — это повод для смеха? Если кто-то знает, это Национальный музей истории похорон. На их странице с ошибкой каламбур «серьезная ошибка» упоминается, что страница «исчезла в загробной жизни».”

34. Житель Нью-Йорка

Житель Нью-Йорка известен своими прекрасными мультфильмами. Так что, конечно, у них есть тот, который идеально подходит для страницы с ошибкой.

35. Правительство Новой Зеландии

У людей есть дурная привычка оставлять Новую Зеландию за пределами карты. Правительство страны немного повеселилось над этим на своем собственном веб-сайте с пометкой «чего-то не хватает» и картой мира, на которой не было видно Новой Зеландии.

36. Нуванго

Ошибок нет, просто счастливые случайности.Если цель страницы с ошибкой — превратить разочарование в другую эмоцию, например, спокойствие, нет человека, который справился бы с этой работой, как Боб Росс.

37. Оранжевое пальто

Interactive не обязательно означает игры и виджеты Javascript. Страница ошибок Orange Coat предоставляет посетителям блок-схему выбора стиля приключения для работы.

38. Ромен Бразье

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

39. Spotify

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

40. Стив Ламберт

Страница художника Стива Ламберта, названная «Самая неловкая страница ошибок в Интернете», заслуживает внимания.Попробуй дойти до конца. Как пишет Стив на странице: «Такая идея приходит к вам только в 12:30. И тогда ты должен это сделать, иначе ты никогда этого не сделаешь ».

41. Sygic Travel

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

42. Австралийский

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

43. Музей Сотворения мира

Музей Сотворения мира — это место с большой миссией. Многие люди расходятся во мнениях относительно этой миссии, но в любом случае это большая задача: убедить мир, что эволюции не было. На своей странице ошибок они шутливо пытаются понять эволюцию.

44. Айриш Таймс

Вот еще один пример новостной организации, которая забавляется со своей страницей с ошибкой.На странице Irish Times 404 показан код, пробивающийся сквозь газетную бумагу.

Бонусный совет:

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

Statuspage — это инструмент, который помогает вам легко сообщать подробности об инцидентах и ​​периодах обслуживания вашим клиентам.

Вот почему важно иметь страницу состояния в дополнение к странице ошибки:

1. Уменьшение количества обращений в службу поддержки: Когда пользователи знают, когда ожидать решения, им не нужно открывать заявку, чтобы запросить дополнительную информацию или, что еще хуже, жаловаться в социальных сетях.
2. Уведомлять пользователей автоматически: Когда ваши пользователи подписываются на вашу страницу статуса, они автоматически получают уведомление по электронной почте, SMS или Slack, когда в вашем приложении возникает ошибка или период обслуживания.