404 страницы примеры: 27 примеров проработанной страницы 404 — Дизайн на vc.ru

Лучшие примеры 404 страницы

Блуждая по Сети, вы иногда натыкаетесь на сообщения об ошибке «page not found». Часто эти «не найденные» 404 страницы ошибок не представляют никакого интереса. Неудовлетворенный таким результатом, посетитель может покинуть сайт. Поскольку ошибки в написании адреса допускаются довольно часто, а сайты не идеальны (например ошибка из-за битой ссылки)  – очевиден факт того, что они теряют своих посетителей. Лучшие примеры страниц 404 наводят на мысль о создании эффективной Error Page, которая должна быть спроектирована и настроена индивидуально под сайт.

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

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

Screaming Frog ( screamingfrog.co.uk/404/)

Okostroy ( okostroy.ru/404/)

Hey Zap ( heyzap.com/404 )

Fusion Charts ( fusioncharts.com/404/)

Med-Altai ( med-altai.ru/404/)

Bully Entertainment ( bullyentertainment.com/404notfound/)

Mini Handball (www.minihandball.pl/ 404 )

Banks (banks.az/404 )

Purple Travel ( purpletravel.co.uk/abc/)

Funkyimg ( http://funkyimg.com/404 )

Colibris ( http://colibris.ua/404/)

Smart Touch ( smarttouch.me/en/page-not-found )

Gift Rocket  (http://www.giftrocket.com/ 404)

Made with Envy (http://madewithenvy.com/404 )

Space Angry Birds  (http://www.angrybirds.com/404er )

11×11

Fitbit (http://www.fitbit.com/404 )

Sandalikidet (http://sandalikidet.ru/404error/)

Black Wave Creative  (blackwave.net/ 404 )

Оvsyannikoff  ( http://ovsyannikoff.ru/404 )

2013.404fest ( http://2013.404fest.ru/404/)

Kyan ( http://kyan.com/404 )

Coex (https://www.coex.cz/404)

Soline (http://www.soline.ru/ 404 )

ТОП-50 лучших примеров дизайна 404 страницы — Plerdy

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

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

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

Что ж, на этом с теорией закончим, а сейчас давайте познакомимся с 50 крутыми идеями для оформления 404-й страницы.

Содержание

1. Blizzard Entertainment

2. JACK DANIEL

3.Tproger

4. Github

5. Geekbrains

6. Adidas

7. Emailcenter

8. Marvel

9. Crello

10. Sketch

11. Red Bull

12. Cayenne

13. Aviasales

14. LEGO

15. Studiofables

16. ITcluster

17. Pixar

18. 20th Century Fox

19. Planeta Kino

20. Startup Depot

21. MentorMate

22. Specialized

23. 9GAG

24. Orangecoat

25. Teehan+Lax

26. Hakim.se

27. CSS-tricks

28. The New Yorker

29. Dribbble

30. SumatoSoft

31. Skipio

32. CoolFarm

33. Squarespace

34. DustyMiller.ca

35. Mameilleurecuite

36. Agens

37. Rachel the great

38. Fork cms

39. Incore

40. Daniel Karcher

41. Figma

42. Repair pal

43. Romainbrasier

44. Batman 3D

45. Telltale

46. IMDb

47. Netpeak

48. Elativeagency

49. FOX

50. The Software House

Вывод

Первым участником нашего ТОПа стала известная американская компания Blizzard Entertainment. Blizzard занимается разработкой игр. В частности, их творениями являются такие известные продукты как: World of Warcraft, StarCraft, Heroes of the Storm, Diablo, Overwatch. 404-я страница выглядит как разбитый экран, показывающий сломанный сайт.

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

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

Прекрасный пример использования корпоративного стиля для оформления 404-й страницы. Для этого Github взяли свой логотип (кота-восьминога) и стилизовали его под «Звездные войны».

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

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

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

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

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

Компания Sketch решила оформить свою 404-ю страницу в корпоративном стиле. Хороший пример соблюдения фирменного стиля и простоты навигации.

Известный производитель энергетических напитков Red Bull вполне верен своему стилю. В случае ошибки,пользователь попадет на страницу с эффектным видео и надписью: «Хм, это сбивает с толку. Куда делась страница?! «

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

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

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

Французская дизайн студия Studiofables решила подойти к вопросу дизайна 404 страницы с присущим ей колоритом. Пользователю предлагают успокоиться, посмотреть видео про трех поросят и, впоследствии, перейти на главную страницу ресурса.

Львовский IT-Cluster также решил проявить творческий подход. В случае ошибки, посетителя ждет оригинальная страница 404 и кнопка для возврата на главную.

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

Кинокомпания 20th Century Fox хорошенько поработала над своей 404-й страницей. Пользователю случайным образом показывают один из вариантов оформления, каждый из которых включает видео и уникальный текст.

Сеть кинотеатров «Планета Кино» решила, кроме соблюдения своего стиля, использовать известную фразу из “Аполлона-13″. Кроме этого есть удобная кнопка для возврата на главную.

Львовский бизнес-инкубатор Startup Depot, первый в нашем списке кто использовал для оформления 404 страницы мем с Винсентом Вегой (фильм «Криминальное чтиво). Этот момент из фильма пользуется широкой популярностью для объяснения отсутствия понимания каких-то вещей, поэтому его использование является удивительно удачным.

Компания MentorMate решила прибегнуть к простому и проверенному приему. Обыграть код ошибки «404» в виде какой-то красивой картинки. В данном случае это чашка кофе и цифры в цветовой стилистике сайта.

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

Как уже упоминалось, СтартапДепо, не единственные кто решил использовать мем с Винсентом Вегой. Тот самый момент на своей странице использовала интернет-платформа 9GAG. Учитывая количество юмористического контента в пределах сервиса, это решение можно считать идеальным.

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

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

Страница 404 на сайте Hakim.se от шведского дизайнера и разработчика с именем Hakim El Hattab точно придется по вкусу всем фанатам творчества Говарда Филиппа Лавкрафта. Сразу после перехода на пользователя начинают пялиться с десяток страшных глаз и ему предлагают вернуться на главную страницу сайта.

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

The New Yorker — это известное американское еженедельное издание, которое публикуется с 1925 года. 404-я страница оформлена в корпоративном стиле и имеет удобную навигацию.

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

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

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

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

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

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

Этот участник нашего ТОПа также решил порадовать своих пользователей оригинальной 404-й страницей. В случае ошибочного запроса посетитель сможет сыграть в игру Pac-Man в стилистике сайта.

Рекламная компания Agens также поработала над креативным оформлением страницы 404. Гостья сайта встретит надпись «похоже, что ты потерялся в космосе» и изображение астронавта на астероиде.

Хороший пример оформления 404-й страницы от Rachel Nabors. Rachel the Great — это серия авторских комиксов, поэтому такой дизайн идеально подходит.

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

Маркетинговое агентство Incore таже решило подойти к оформлению своей 404-й страницы со стилем и юмором. На ней посетителя встретит изображение хищных птиц и вопросы «Привет, мой друг. Нас ищешь? Действительно? «И кнопка с текстом» Нет, спасибо. Вернемся назад к Incore «.

Один из самых оригинальных участников нашего ТОПа — сайт www.danielkarcher.com. Кроме того, что сам ресурс выполнен в весьма интересном стиле, да еще и 404-я страница с действительно интересной идеей. С ее помощью пользователь сможет провести короткое путешествие по метрополитену и понаблюдать за действиями девушки фотографа. Сама страница написана с помощью технологии Flash.

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

А вот дизайн для своей 404-й страницы выбрала команда с RepairPal. Красивая картинка и удобный интерфейс для формы обратной связи — это хороший способ оформить страницу ошибки.

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

Хороший пример тематического оформления 404-й ошибки от сайта Batman 3D. Не смогли найти нужную страницу? Видимо ее похитил Джокер.

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

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

Хорошим примером оформления 404-й страницы в корпоративном стиле может служить работа компании Netpeak. Увидев сообщение об ошибке, можно воспользоваться удобной навигацией для продолжения работы с сайтом.

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

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

Последним участником нашего топа стала компания The Software House. Простое и стильное оформление в традициях корпоративного дизайна — это хорошая практика для компаний разработчиков.

Вывод

В рамках статьи Вы ознакомились с 50 примерами хорошего оформления 404-й страницы. Часть из участников ТОПа строго придерживались своего корпоративного стиля и делали классические страницы об ошибке. Другие, в свою очередь, не боялись рисковать, шутить и экспериментировать с дизайном.
Надеемся, что эта статья была вам полезна и интересна. Если Вы все еще не создали собственной 404-й страницы, тогда рекомендуем побыстрее этим заняться. В зависимости от типа сайта, аудитории и собственных желаний, можно выбрать различные варианты оформления. А при необходимости, вы всегда можете взять пример с участников нашего ТОПа. Оставайтесь с нами, впереди еще много интересного!

10 оригинальных страниц ошибок для сайта

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

Стандартная страница 404 для uCoz легко заменяется на нестандартную, об этом ниже. Эти страницы такие же простые, как и в этом материале.

Установка

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

Каравай, каравай, кого хочешь выбирай…

Весьма интересный вариант в виде объявления.
Скачать

Объемные цифры возникли из пустоты.
Скачать

А это анимированная страница.
Вы станете свидетелем похищения страницы НЛО.
Скачать

Одинокая и грустная луна…
Скачать

А здесь Лох-несское чудовище.
Скачать

Какая-то сказочная страница, не находите?
Скачать

Кулак. Похоже, какого-то зека.
Скачать

Код виден через дыру в сайте.
Скачать

Слыхали легенду о кракене?
Скачать

Ну, и на последок такая вот страница ошибки.
Скачать

Хочется сделать подборку просто оригинальных страниц ошибок 404 (Page not found) на разных сайтах. Если знаете такие страниц, то отправляйте ссылки на них в комментариях. Будет интересно посмотреть, до чего додумались веб-мастера и дизайнеры.

Надеемся, что и наша подборка вам понравилась. Все изображения взяты с открытого источника dribbble.com.

Улучшаем страницу 404-ой ошибки / Хабр

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

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

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

Извини, друг. Страница, которую вы запросили, не находится в нашей базе данных. Скорее всего вы попали на битую ссылку или опечатались при вводе URL. – A List Apart 404-ая страница

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

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

• Поисковая форма
• Ссылка на главную страницу
• Список самых популярных страниц
• Ссылка на карту сайта
• Кнопка сообщения о битой ссылке

Не думайте, что все знают, что такое 404-ая ошибка. Вас нужно объяснить, в чем проблема, в дружелюбной манере. Лучше сказать так: «Упс! Мы не можем найти страницу, которую вы ищете.», чем так: «404-ая ошибка. Страница не найдена».

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

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

На сайте nosh.com вообще размещено видео:

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

• Убедитесь, что веб сервер возвращает правильный статус 404 HTTP, тогда поисковики будут игнорировать эту страницу.
• Добавьте страницу 404 в файл robots.txt.

Просто добавьте URL любого файла в robots.txt и загрузите на сервер:

Disallow: /404.html

Чтобы использовать собственную страницу 404-ой ошибки, нужно создать файл .htaccess и добавить в него следующую строчку:

ErrorDocument 404 /error/404-error.html

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

PS Все замечания по поводу перевода, орфографии и т.п. с удовольствием приму в личку. Спасибо!

50 прикольных страниц ошибки 404

Хорошая страница ошибки 404 может быть также важна для сайта как и его содержание. С помощью такой страницы вы сможете направить посетителя к нужной вам домашней странице сайта.
Если на вашем сайте или блоге нет такой страницы, возможно вам стоит задуматься о её создании. А для вашего вдохновения тут собрано 50 прикольных и необычных примеров страниц ошибки 404. 
Другие примеры таких страниц вы сможете увидеть в ранее опубликованных подборках Эффективные страницы ошибки 404 и Ошибки 404 — часть вторая.

Сайт Propeller

Иллюстрированная страница ошибки 404 на B3ta

Страница ошибки 404 Cuoma

Забавная страница ошибки 404 на Tinsanity

Сайт  latelategifts

Муха на странице ошибки сайта 24-4 Media

Разорванная бумага на CssTricks

Иллюстрации акул на Renkoo

Плачущий ребенок на iFolderLinks

Мусорная корзина на странице ошибки 404 TurboMilk

Страница ошибки 404 на Zivity

Такая страница ошибки на сайте Soocial

Разноцветные кубики на rush68

Страница ошибки на Ook

Забавный котенок на Github

Так изобразили ошибку на сайте RetardZone

Надпись на футболке на Planetgeek

Кривляющийся мужчина на PatternTap

Простая и забавная страница ошибки 404 на Studentmarket

Иллюстрация на странице ошибки 404 на BrightKite

Страница ошибки 404 на сайте ClearSpring

Иллюстрация девушки на Erotica Challenge

Грустная мордашка на kidmondo

Смешная страница ошибки сайта Funned

Необычная страница ошибки 404 на nickciske

Страница ошибки в стиле ретро на сайте Lileks

Сайт lightpostcreative и его страница ошибки

Стройка на странице ошибки сайта tele2

Яркая страница ошибки 404 на DDZ

Кот в компьютере на Catswhocode

Космос на странице ошибки Abduzeedo

Разыскивается странница на сайте Limpfish

Стильная иллюстрация на Ferdaze

И на  Expansion Broadcast иллюстрированная страница ошибки

Художественная страница ошибки сайта Chrisglass

Страница ошибки на Fuelly

Облака на Zanami

Страница ошибки на Southpark Studios

Страница ошибки сайта Geeksquad

Милый котенок на Centerd

Марио на странице ошибки сайта Dawdle

Смешной монстр на Cartoon Network

Птерозавры на странице ошибки Amorphia Apparel

Такая страница ошибки на Mozilla

Ещё один забавный пример страницы ошибки 404 Jotsai

Смешная страница ошибки на The Brand Surgery

Страница ошибки Mmo Game Zone

На странице ошибки сайта Acorn Creative разместили носок

Автор – hongkiat

Перевод — Дежурка



Комментарии

Оставить ответ

Похожие статьи

Случайные статьи

Креативные примеры страниц ошибки 404

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

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

Mashable

Текст с фото: Плохие новости – мы не смогли найти страницу, которую вы ищете. Хорошие новости – мы наши все ваши потерявшиеся носки.

Template Monster

Текст с фото: Снежный человек, НЛО, хорошие актеры в фильмах Майкла Бэя… сущестование их не доказано. Так же, как и страница, которую вы ищете на TemplateMonster. Но нам кажется, что Вы тут оказались не случайно. Так почему же не вернуться на нашу домашнюю страницу или заглянуть на наш блог? А, кстати, вот Вам прощальный подарочек в виде страницы 404, если вы фанат креативных страниц 404, спешите скачать один из бесплатных шаблонов страниц ошибки 404, созданных нами!

Defrozo

Текст с фото: Нам жаль, но страница расфокусирована.

Diesel

StickerMule

Blue Daniel

dario brozzi

centresource

Текст с фото: Ребята, извините, парковка закрыта! Ваши действия – пойти домой или врезать лосю.

agens

Текст с фото: Похоже, что Вы потерялись в космосе. Может Вы ищете что-то из наших последних проектов?

Tinsanity

MailChimp

Good Dog Design

Текст с фото: Пропала собака! В последний раз видели в желтом кружке заголовка. Черно-белая. Похожа на колли. Отзывается на “good dog”. Отличительные особенности – невероятно быстро разучивает новые трюки и вытаскивает упавших в колодец сирот. Если найдете – вкусно покормите и подкиньте пару ему пару головоломок.

Tripomatic

Текст с фото: Извините, эта страница так и не вернулась из путешествия по пустыне Атакама.

Starbucks

RSQ

Текст с фото: Глубоко скорбим по поводу вашей потери. Ссылка мертва. Соболезнования можно найти на домашней странице RSQ.

Focus Lab

Текст с фото: Хватит шуметь. Почему бы не перейти на страницу, которая работает? Вы что, хотите взломать наш сайт? В чем дело? Проходите. Тут не на что смотреть.

Michael Schmid

Текст с фото: Гамбургер! Подождите, что? Да, вот так я отреагировал, когда Вы тут появились. Это страница ошибки 404, тут не на что смотреть. Проходите мимо.

Высоких конверсий!

04-04-2016

Улучшаем страницу «Ошибка 404» — яркие примеры

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

Что означают эти знакомые всем цифры — 404?

Начнём с истоков. Определение из Википедии:

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

Код 404. Первая цифра «4» указывает на системный сбой со стороны посетителя, к примеру, неверно введён адрес или плохое соединение. Значение «04» обозначает категорию ошибок и статусов разных классов: Bad Reques, Precondition Failed, Conflict и т.д. Причины возникновения: опечатка при написании адресной строки, переезд страницы на другой адрес, ссылка страницы удалена или устарела, плохое соединение.

Почему лучше не использовать страницу «Ошибка 404» по умолчанию?

Наверное, все знакомы со стандартной страницей «Ошибка 404». Она выглядит немного устрашающе:

Страница «Ошибка 404» по умолчанию

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

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

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

Ошибка 404 в книжном интернет-магазине

Пространство для улучшения Страницы 404

Чтобы ошибка не испугала пользователя:

1. Объясните, что произошло
2. Укажите причины происшедшего
3. Скажите, что делать дальше

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

Ошибка 404 на сайте для просмотра фильмов, сериалов

О текстовой составляющей 404-й ошибки читайте в статье Копирайтинг для «Страницы 404» в моём блоге.

Как правильно оформить страницу 404

Главное, объяснить посетителю, что ничего страшного не произошло, и тактично направьте его к выходу из этого «тупика».

Чтобы доверие к вам не было подорвано, мы собрали все способы улучшения страницы «Ошибка 404».

Совет №1: Ссылки на разделы сайта.

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

Оригинальная страница на украинской доске объявления ОЛХ

Совет №2: Добавьте строку поиска.

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

404-я ошибка на сайте маркетингового агентства

Совет №3: Придерживайтесь фирменно стиля и дизайна

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

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

Интересная страница для автомобильного сайта

Совет №4: Будьте понятными и дружелюбными

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

Поэтому в дружелюбной манере объясните, в чём проблема и скажите, что делать дальше.

Если этого не сделать, всегда найдутся те, кто не поймут устрашающую надпись «404 Not found» и запросто исчезнут в неизвестном направлении.

Совет №5: Внесите креатив и юмор

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

Немного юмора от BlizzardКреативная страница под необычную ЦА

Какая страница 404 у студии MEDIOL

Наша 404-я ошибка выглядит так:

Страница «Ошибка 404» веб-студии MEDIOL

Дизайн и внешний вид остался в том, же стиле, что и блог. Мы убрали шапку и подвал сайта. С лёгким юмором объяснили, что такой страницы нет. Для удобства разместили ссылки «На главную» и «Читать блог». Также предлагаем основные кнопки социальных сетей. Добавив все технические нюансы, мы не забыли про юмор и креатив.

Бонус

Примеры интересных страниц «Ошибка 404»:

Анимированное изображение 404-й ошибки от KONUX

или

Еще один хороший пример анимированной ошибки 404

или

Можно смотреть бесконечно 🙂

Заключение

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

А у вас есть любимые 404-е ошибки? Кидайте ссылки в комментариях, посмотрим вместе.

Улучшаем страницу «Ошибка 404» — яркие примеры

Рейтинг: 5 Оценок: 2

Понравилась статья? Поделитесь с друзьями:

Похожее

comments powered by HyperComments

эффективных страниц ошибок 404: передовой опыт и примеры

Вдохновение Натали Берч • 23 марта 2013 г. • 6 минут ПРОЧИТАТЬ

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

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

Хорошо продуманная структура страниц ошибок

Чтобы создать хорошую страницу 404, вы должны решить несколько важных вопросов, таких как:

• предоставить пользователям альтернативные решения, например, интегрированное меню, домашнюю ссылку, окно поиска или список полезных ресурсов;
• развлекают их мини-играми, шутками, текстами или увлекательными иллюстрациями.

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

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

Netiko использует нарисованные от руки грубые иллюстрации со скрытым сообщением и заметным пояснительным текстом.

Конструктор шаблонов электронной почты в Интернете

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

Попробуйте бесплатноДругие продукты

La Yogurt непременно привлекает внимание пользователя спокойным синим фоном и вкусными иллюстрациями. Кроме того, он обеспечивает четкую систему навигации и выделяющуюся кнопку «Домой».

Ideal Hut очаровывает причудливыми иллюстрациями, которые на самом деле придают динамику с помощью анимированной красочной «черной дыры».

Soap Media подчеркивает сообщение о потерянном результате с помощью правильно сделанных иллюстраций.

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

Piccsy отлично справляется с использованием только одного геометрического узора и красного цвета для создания чего-то действительно нестандартного и в то же время художественного.

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

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

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

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

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

Jorgeatgu нарушает монотонность страницы с помощью угловой типографики и классной графики.

Diesel предлагает четкие пути эвакуации в простой и понятной форме .

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

UK TV посвящен популярным сериалам, призывающим вас проверить онлайн-трансляции.

Red Monkey Goo в основном опирается на свой талисман, основные элементы, которые прослеживаются по всему дизайну, и пояснительный текст со стандартным меню навигации.

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

CaptainDash воплотил в себе минималистский стиль с единственной монохромной иллюстрацией и несколькими пунктами меню, представленными в огромных блоках.

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

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

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

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

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

Ian James Cox отмечен тонкой и нежной, слегка мятой текстурой бумаги с написанным от руки заголовком и бодрящей фотографией.

Cool Apps создает ощущение внеземного существования с яркими, богатыми деталями иллюстрациями.

Pixel Stadium основан на концепции, согласно которой несуществующие страницы были поглощены черной дырой. Такой научный подход к объяснению происходящего делает страницу уникальной и привлекательной.

Страницы не существует… или нет?

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

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

Нравится то, что вы читаете? Подпишитесь на наши главные новости.

.

Как создать отличную страницу с ошибкой 404 и 10 примеров

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

Городская легенда гласит, что первый интернет-сервер располагался в комнате 404 здания ЦЕРН.Следовательно, этот сервер также выдал первую ошибку «Не найдено», которая, как гласит легенда, впоследствии была названа ошибкой 404.

Проблема в том, что, по всей видимости, комнаты 404 в ЦЕРНе никогда не существовало.Я там никогда не был, поэтому не знаю. Но есть гораздо более логичное объяснение того, почему сообщение «Не найдено» является ошибкой 404. Код состояния HTTP знает пять различных классов, и в каждом классе имеется до 100 возможных сообщений о состоянии. Класс 4xx сообщает об ошибках клиента, а еще две цифры указывают тип ошибки. В классе 4xx определены 18 различных случаев, и ошибка 404 представляет собой случай, когда запрос (например, запрошенный файл) был «не найден».

Зачем мне делать страницу 404

Скорее всего, посетители вашего сайта увидят вашу страницу 404.Надеюсь, их немного, но, конечно, несколько. Теперь, если это обычная белая страница с большими черными буквами, говорящими им: «Страница 404 не найдена», насколько вы думаете, насколько они будут счастливы?

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

1.Соответствующий дизайн

Это и ежу понятно.Страница 404 должна хорошо гармонировать с внешним видом остальной части сайта.

2. Соответствующее сообщение об ошибке

Это тоже логично.Любой, столкнувшийся с ошибкой, должен сразу это заметить. Избавьтесь от деталей, но дайте серферу немного …

3.Комплектация

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

10 отличных примеров

Чем он хорош?

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

2. Осадки Даффинсон

Чем он хорош?

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

Чем он хорош?

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

4.Системы управления видео [Неработающий URL-адрес удален]

Чем он хорош?

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

5.Насадка для вдохновения

Чем он хорош?

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

Чем он хорош?

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

7. Желудь творческий

Чем он хорош?

Это просто весело.

8. GOG.com

Чем он хорош?

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

9.Из мыслей Джейми Хаскиссона

Чем он хорош?

Забавно, есть необходимая информация, поисковая строка и ссылка на архив блога.Очень ценно.

10. BlueDaniel (битая ссылка удалена)

Чем он хорош?

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

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

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

Изображение предоставлено Виллемом Велтховеном

5 расширений браузера для блокировки отвлекающих факторов в сети и сосредоточения внимания при работе из дома

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

Об авторе

Тина Зибер
(Опубликовано 823 статей)

Тина писала о потребительских технологиях более десяти лет.Она имеет докторскую степень в области естественных наук, диплом Германии и степень магистра Швеции. Ее аналитический опыт помог ей преуспеть в качестве технологического журналиста в MakeUseOf, где теперь она руководит исследованием ключевых слов и операциями.

Ещё от Tina Sieber

Подпишитесь на нашу рассылку новостей

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

Еще один шаг…!

Подтвердите свой адрес электронной почты в только что отправленном вам электронном письме.

.

Примеры страниц с ошибками 404: настраиваемые, анимированные и интерактивные

Зачем вам нужна настраиваемая страница 404

Найти неработающую ссылку на своем сайте несложно. Надеюсь, это не выглядит так:

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

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

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

Essential 404 Элементы страницы

Есть много способов перейти со своими страницами с ошибками 404. Мне нравится баланс творческого и конструктивного.

Например, Airbnb сочетает полезный список популярных внутренних ссылок с креативной анимацией:

Что вы должны включить на страницу с ошибкой 404?

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

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

Eharmony использует легкое сообщение и сильный призыв к действию.

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

Аналитика страницы 404: отслеживание ошибок 404 с помощью Диспетчера тегов Google

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

Во-первых, убедитесь, что вы запускаете скрипт Диспетчера тегов Google на своей странице 404.Это достаточно просто — вы можете вручную проверить исходный HTML-код страницы или установить Tag Assistant (от Google) для Chrome.

Google Tag Assistant, работающий на странице встроенных видимых ошибок

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

Тип переменной — это переменная JavaScript, а имя переменной — document.title :

Эта определяемая пользователем переменная возвращает значение заголовка страницы.Теперь нам нужно создать триггер.

В своей учетной записи Диспетчера тегов Google перейдите в раздел «Триггеры» и создайте триггер для каждого случая, когда заголовок страницы совпадает с тем, что содержится в теге заголовка вашей пользовательской страницы с ошибкой 404.

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

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

Когда вы закончите, опубликуйте.

Больше 404 примеров

Builtvisible

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

Lego

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

Gymbox

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

Marvel

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

.

смешных страниц 404 — примеры и как создать свою

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

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

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

10 примеров смешных страниц 404

1.) Mashable

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

2.) Метель

Когда вы теряетесь на сайте Blizzard Entertainment, создается впечатление, что их сайт сломан. И они дразнят своих пользователей, обвиняя их в взломе сайта.

3.) Джип

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

4.) NPR

Страница 404

NPR на первый взгляд выглядит достаточно обыкновенно. То есть, пока вы не посмотрите на предлагаемые ими статьи, все из которых посвящены потерянным людям и местам.Амелия Эрхарт, Джимми Хоффа, ваш багаж … Все люди и вещи, которые до сих пор не могут быть найдены, как и страница, которую вы искали.

5.) CSS-ПРИЕМЫ

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

6.) Конструктор веб-приложений

Там, где CSS-TRICKS были простыми и элегантными, этот пример принимает совершенно другой поворот.В Web App Designer есть особенно уникальная и забавная страница 404. Вы можете увидеть, как программист был похищен инопланетянами, а затем вы видите «Отведи меня к своим возможностям» («Отведи меня к своему лидеру»?).

7.) Cooklet

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

8.) GitHub

Страница 404 на GitHub

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

9.) Лего

На сайте Lego произошла катастрофа! Что-то отключилось, и вы не можете найти свою страницу. Они использовали своих хорошо известных и забавных персонажей, чтобы изобразить чувство паники из-за невозможности найти страницу, которую вы искали.

10.) Синий Дэниел.com

На странице 404 Дэниела Карчера (bluedaniel.com) так много забавных мелочей. Там есть плакат с фильмом Missing , доска с пропавшими людьми, номера путей и поездов — 404, граффити на стене за поездом говорит: Not Found и Пожалуйста, перейдите на основной уровень сообщения , который также является ссылкой на домашнюю страницу.

Смысл умного или забавного 404 Page

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

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

Страница NPR 404, например, не глупа. Он сохраняет их приверженность новостям, но включает лишь некоторые прихоти и остроумие. (А кто не хочет искать Уолдо?)

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

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

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

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

Вот некоторые вещи, о которых следует подумать при создании страницы 404:

• Что делает вашу компанию уникальной?
• Какие виды продукции производит или продает ваша компания?
• Как можно использовать логотип вашей компании?
• У вас есть слоган или девиз, который вы можете использовать?

Как настроить страницу 404

Если у вас есть сайт WordPress, настроить страницу 404 очень просто.Использование гибкой темы WordPress, такой как iThemes Builder, которая позволяет создавать собственные макеты страниц, — самый простой способ добиться этого.

Если вы используете

.