Страницы 404: Лучшие 404 страницы

06.03.1970 alexxlab

Содержание

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

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

Сегодня, ко дню вебмастера, мы подготовили подборку интересных четырестачетвертых страниц.

На этом сайте можно найти интерфейс Commodore 64.

Похоже, вам не стоило сюда заходить.

Попробуйте поймать кота 🙂

Студия дизайна делится забавными гифками про собак.

А эта страничка ушла в поход… и не вернулась.

Очень атмосферная интерактивная 404-ая страница.

Веб-страница ищет HTML своей жизни. Желательно без ошибок и вредных привычек.

Спасите несчастных леммингов!

Классический мем на сайте 9GAG.

Красивая иллюстрация броуновского движения от Hot Dot.

А этой страницы на сайте Mikandi нет, как и одежды у этой прекрасной леди.

Вам попалась страница 404? Решайте, кого уволить за такое свинство.

Синий экран смерти от Willismonds.

А эту страницу съели пациенты клиники. Очень сожалеем 🙁

Диаграмма Венна на сайте magnt.com.

Дыра в интернете на сайте CSS Tricks.

Поздравляем. Вы сломали наш сайт.

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

Здесь можно поиграть в пакмана.

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

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

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

Всё минималистично и главное — ссылка на релевантный материал.

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

Вот про экран с ошибкой от GitHub вы точно знаете, а как насчёт не менее известного Docker? Расстроенный кит смотрит на утонувший корабль, параллельно размышляя о ваших проектах.

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

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

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

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

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

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

На странице 404 сайта Музея Сотворения Мира (там всё по Библии) отчётливо видно, что junior и senior не могут найти менеджера проекта. А вообще классно сделали: силуэт с отсутствующей стадией эволюции в центре отражает отношение создателей сайта к этой теории возникновения жизни. Кроме того, «that link is missing» можно перевести так: «связывающее звено отсутствует». Тут как в русском с фразой «я плачу» — либо платишь (за софт), либо плачешь (из-за багов).

Если вы думали, что новозеландцы не в восторге только от шуток про «Властелина Колец», то теперь вы знаете, что каждый раз, когда вы видите карту без Новой Зеландии, где-то в Шире плачет один хоббит. Собственно, на этом и решили акцентировать внимание новозеландцы на сайте правительства.

Самоиронией может похвастаться не только правительство Новой Зеландии. В Делавэре решили поиграть и с картой, и с названием. Хотя карта просто для красоты.

Мы тоже не исключение 🙂 Возможно, вы уже замечали, что мы, как и сайты выше, имеем собственную страницу 404.

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

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

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

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

Интересно и оригинально оформленные 404 страницы

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

01. Discord App

За работой квантовый хомяк-робот из мира Discord.

02. Beach Park

Плавник акулы, он и в луже 404-й страницы захватывает внимание.

03. Toggl

Красиво анимированная трехмерная графика страницы переносит в сказку с 404-сюжетом. По-мультяшному реалистично.

04. Designzillas

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

05. Bench

Такой страницы нет, как и снежного человека, единорога или лох-несского чудовища. …или она существует?

06. Pirate Code

Персонаж с главной страницы сайта задумчиво прогуливается по 404-й.

07. Weemss

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

08. Flipping Book

Может кому знакомо? В домашнем хаосе с малышом и котом, вырванные страницы становятся самолетиками.

09. Vebk

Красивая рестро страница 404 ошибки – в тонах и жанровой стилистике самого сайта.

10. De’Nastia

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

11. Slack

В странном месте бродят свинки с курицами, природа буйствует красками. Страница «Not Found» напоминает сказку.

12. Pikabu

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

13. Rabota Gk-Rte

Обратный отсчет в ожидании столкновения ракеты с землей…

14. Lyft

Страница ошибки сайта американского такси-сервиса.

15. Kick Point

Внедорожник 4×4 на странице 404

16. Madwell

Креативное агентство развело анимированный костер на 404-й странице.

17. Clockwise

Перекати-поле подкатывается к надписи 404. Это растение пустынь и степей, а вы на странице ошибки.

18. Matteo Vandelli

Интерактивная анимация цифр 404 на странице с ошибкой.

19. Grainand Mortar

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

20. Rails Ware

Тематическая 404-я сайта разработчиков и дизайнеров.

21. Domenart Studio

Красиво оформленная 404-я страница российской студии дизайна.

22. Love Beets

Английская ферма выращивает овощи для салатов. Интереактивный редис под социальный шаринг на 404-й странице – это оригинально и уникально.

Страница 404 и красивая айдентика

Увязанные с оформлением ресурса и айдентикой компании страницы 404. Интересны тем, что знакомят с корпоративным стилем или творческой индивидуальностью.

23. Sketch

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

24. Puree Maison

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

25. Hungry Boys

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

26. Phive

После эксцентричного поведения при загрузке страниц, значок прелоадера на 404-ой выглядит изможденным: «Не могу согнуться, потеря 404 грамм жира…»

27. Mail Bakery

Бренд персонаж сообщает об ошибке 404. Однако на возможность сделать заказ указывает интерактивная анимация с призывом.

28. Moosend

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

30. A propos du cancer

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

31. Studio Wolf

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

32. Horton Works

В дополнение к логотипу и сам слон.

33. Pointless Corp

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

34. Nagyi Titka

Рекламный персонаж продукта крупным планом на 404-странице.

35. Panoraven

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

36. Waaffle

На странице с ошибкой персонаж сайта начинает плавиться.

37. Avocode

Страница 404 весьма недвусмысленно подчеркивает креативный нейминг (avocode от авокадо).

38. Yelp

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

Тематичные 404 страницы

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

39. E-co

Анимированное замыкание на 404 странице сайта дистрибьютора производителя источников питания.

40. Slodych

Аппетитная выпечка цифр 404.

41. Codemy Concept

Чашка кофе – символ разработчика.

42. Prob2b

У сервиса по созданию лендингов и повышению бизнес-эффективности лаконичная страница 404 с красивым плоским дизайном.

43. Handy Hat

Оригинальная страница 404 бренда вязанных шапок.

44. Limra Technosys

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

45. Max Style

У агентства по цифровому продвижению компаний эффектная страница 404.

46. Fuse Lab Ceative

Красивый агентский сайт. Страница ошибки эффектно оформлена объемными цифрами 404.

47. 1ps

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

48. Woodst

Анимированная 404-я на сайте агентства, специализирующегося на графике.

Забавные и необычные 404-е

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

47. Tapfiliate

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

48. Пора валить

Анимированная 404-страница агентства «Пора валить»: свинья развлекается на тракторе.

49. Vintage

Забавно анимирована страница 404 украинской студии: чем-то обеспокоен трафаретный олень.

50. Insurance Experiments

Свой забавный промо проект UK-страховщики назвали экспериментальным, а мульти-страницу 404 сделали веселой.

51. Multi Work

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

52. Fromage Abondance

Видео-коуб: французская корова-модница — соответствует тенденциям, также как и сайт.

53. Red Collar

Причудливая фантазия с анимацией на 404 странице цифрового агентства.

404 коты, собаки и разные создания

Смешные и позитивные коты и собачки, которые в какой-то мере выражают назначение сайта, поддерживают общую идею дизайна.

54. Html6

Сделано на шаблоне: интерактивный и сердитый кот.

55. Buzz Feed

Gif-ка слегка анимированного кота на 404-й… а как иначе для развлекательного медиа ресурса?

56. Life Daily

Интересующийся кот-404 с развлекательного веб-ресурса.

57. Kayako

Анимированный котенок рыжими пятнами удачно удачно поддержал акцентный цвет сайта.

58. Idesign

Непонятные создания перед непростым решением. Но надо возвращаться на главную.

59. Help Scout

Собачки рвутся с поводка… впрочем позитивных flat-иллюстраций немало на этом сайте.

60. Marketohttps://www.marketo.com/404

Разве кого-то может рассердить такая мордочка.

61. 99designs

Щенок — терминатор.

Красиво иллюстрированные Not Found страницы

62. Enjoy Kamchatka

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

63. Skipio

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

64. Epic

Красивая страница ошибки, выполнена как креативный вариант страницы «О нас».

65. Branded7

Красивая иллюстрация 404 в стиле шапки и футера сайта.

66. Дом со всем

Качественно отрисованная 404-я страница под тематику сайта компании.

67. Bright Scout

Назад в будущее – отличная идея для 404 страницы. Плоская иллюстрация с градиентами выполнена в стиле этого зеленого сайта и современных Web трендов.

68. Deep Time

Потерянная во времени, винтажная 404-я страница проекта интерактивной инфографики об истории Земли.

Провальное / непреодолимое. Потерянные на 404-ой

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

69. FSRussia

Страница 404 сайта федерации фигурного катания: «провальное выступление».

70. Sibirix

Видео-коуб 404 новосибиркой дизайн студии с роботом-собакой.

71. Anton & Irene

Люди будущего медитируют перед тем как провалиться в черную дыру.

72. Straight North

Кирпичная стена за дверью. Ваш клик привел на несуществующую страницу. Может не все клики засчитываются? Попробуйте еще – тут зачтется (специализируются на PPC рекламе, SEO).

73. Cloud Cart

Попал на распутье (смысл в том, что нужно выбрать подходящий сервис платформы).

74. Ucraft

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

75. Crello

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

76. Kleo

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

Игровые страницы 404

Не найденные четыреста четвертые страницы с простенькой, но очень занимательной игрой.

77. Heyzap

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

77. Kualo

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

78. Pointe Pest

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

79. Canva

Сбор пазла – совсем несложная игра.

80. Amphibian

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

Как сделать 404 страницу: 10 красивых вариантов оформления

Зачем нужна такая страница?

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

Красивое оформление 404 страницы на сайте

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

Неудачный вариант 404 страницы — пользователь точно уйдет

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

Процесс создания правильной 404 страницы на сайте состоит из двух основных этапов — это разработка дизайна и техническая настройка.

Дизайн и структура

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

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

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

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

Технические аспекты настройки

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

Если движок сайта самописный, то готовую страницу (HTML, PHP и т.д.) следует поместить в шаблон по протоколу FTP. И подключить ее в файле .htaccess, который находится в корне сайта, используя следующий код:

ErrorDocument 404 http://URL_сайта/404.html

Для редактирования .htaccess рекомендуется использовать бесплатный редактор Notepad++.

При использовании одной из популярных CMS, к примеру, WordPress, делать 404 страницу скорее всего не придется. По крайней мере технически она уже настроена и подключена, но если есть необходимость создания уникального решения, то его лучше реализовать внутри специального файла, который находится в корне шаблона (/wp-content/themes/тема/) – 404.php. При вставке верстки, нужно учитывать подключаемые хуки движка, некоторые из них могут понадобиться для корректной его работы. В остальном же все схоже с обычной HTML-версткой.

Не все темы WordPress имеют готовый файл 404.php, поэтому если он отсутствует, следует его создать вручную, наполнить и подключить в .htaccess с помощью следующего кода (если он также отсутствует):

ErrorDocument 404/index.php?error=404

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

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

Вариант 1

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

Использование видеокреатива при создании страницы 404

Вариант 2

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

Страница 404 для интернет-магазина с категориями товаров

Вариант 3

Простая и стильная страница, текст которой прямо заявляет об ошибке, но тут же «переводит» фокус внимания на тематику сайта (кредиты, вклады).

Пример 404 страницы для банка

Вариант 4

Популярный ресторан быстрого питания, коротко и ясно.

Страница 404 ресторана быстрого питания

Вариант 5

Применение анимации задерживает внимание (лупа при перемещении мыши двигается).

Пример применения анимации на странице 404

Вариант 6

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

Пример тематического дизайна на странице 404

Вариант 7

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

Пример страницы 404 на сайте интернет-провайдера

Вариант 8

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

Вариант оформления 404 страницы для агрегатора авиабилетов

Вариант 9

Просто и понятно.

Страница 404 для сайта кофейни

Вариант 10

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

404 страница для турагентства

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

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

Мы привели примеры наиболее креативных 404 страниц и объяснили причины их успешности с точки зрения удержания пользователя. Создайте 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-й страницы, тогда рекомендуем побыстрее этим заняться. В зависимости от типа сайта, аудитории и собственных желаний, можно выбрать различные варианты оформления. А при необходимости, вы всегда можете взять пример с участников нашего ТОПа. Оставайтесь с нами, впереди еще много интересного!

Дизайн страницы с ошибкой 404

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

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

Почему возникают ошибки 404?

404 Page Not Found указывает, что веб-страница не найдена. Это может произойти по одной из следующих причин:

URL был изменен;
веб-страница удалена;
адрес написан неверно;
сайт не существует;
сайт временно не работает и так далее.

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

Особенно сложно отслеживать корректность ссылок на крупных порталах. Чем больше веб-ресурс, тем замысловатей структура, а пропустить что-то в настройке ссылок по невнимательности может даже опытный веб-мастер. Поэтому на практике получается, что хотя бы один раз каждый пользователь видит на своем экране 404 Page Not Found.

У Google и Яндекс есть сервисы для веб-мастеров, которые помогают находить неработающие ссылки — Google Search Console и Яндекс.Вебмастер соответственно. Вы можете воспользоваться ими бесплатно.

Почему нужен оригинальный шаблон для страниц с 404?

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

Каким должен быть дизайн страницы 404?

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

Совет №1. Немного доброжелательности

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

Совет №2. Будьте проще

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

Совет №3. Предложите решение

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

Уместно предложить материалы или товары схожей тематики. Если в URL прописана категория или раздел, несложно понять, что именно искал человек. Также можно оставить ссылки на недавно перемещенные разделы.

Совет №4. Добавьте юмора

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

Совет №5. Позаботьтесь о функциональности

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

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

Важность для SEO

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

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

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

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

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

Оформление страницы с 404 ошибкой: примеры

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

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

Вопрос подбора изображений мы рассматривали в отдельной статье: «Как выбрать иллюстрации для сайта?».

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

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

Советы по созданию страницы с 404 ошибкой

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

А что же означают эти до боли знакомые всем цифры? Первая цифра 4 указывает на ошибку со стороны клиента, например, плохое соединение или неверно введенный адрес в строку поиска. Другие два числа обозначают конкретную категорию ошибок, которая включает такие статусы, как Conflict, Precondition Failed, Bad Request и другие статусы четвертого класса. Возникновение данной ошибки имеет несколько причин:

плохое соединение;
ссылка, ведущая на адрес, устарела или была удалена;
страницу перенесли на новый адрес;
опечатка при вводе адреса сайта.

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

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

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

Существует несколько способов вернуть доверие:

Добавить ссылки на существующие разделы сайта. Не заставляйте его снова писать вручную адрес сайта, обновлять страницу, искать опечатки. Достаточно даже одной кнопочки «Вернуться на главную». Продублировать популярные ссылки разделов вашего сайта было бы вообще замечательно.
Объясните, что произошло. Не обязательно подробно расписывать о происхождении ошибки, составлять длиннющие инструкции. Достаточно обойтись одной или несколькими фразами. Слово «ОШИБКА» совсем необязательное, зачастую лишь больше вгоняет в ступор. Если сайт носит развлекательный характер, можно юморнуть и покреативить. Заставьте улыбнуться гостя, тогда он охотнее вернется на главную страницу. Но обойдемся без юмора ниже пояса и обидных шуточек, давайте уважать наших пользователей.
Не лишним будет добавление строки поиска по сайту, это еще больше упростит действия посетителя. Введя в строку желаемый запрос, он быстро очутится в том разделе сайта, в который должен был попасть до появления ошибки.
Не забывайте про фирменный стиль и общие элементы внешнего облика сайта. Слишком сильное различие дизайна ошибки и сайта в целом настораживают. Это наводит пользователя на мысль: а не перешел ли я по какой-то нехорошей ссылке? А не покинул ли я нужный сайт. Наличие логотипа или названия компании обязательны.
Внесите креатив в страницу с помощью интересной тематической анимации — динамичные иллюстрации всегда приковывают внимание. А ошибка 404 должна вызывать интерес и желание остаться на сайте с вопросом, что еще интересного есть на этом сайте?
Если недавно вы переносили или удаляли достаточно большое количество страниц и точно уверены в том, что многие посетители, перейдя на ваш сайт, не найдут нужной информации, вставьте поисковую строку системы Google или Яндекс. Пользователи вам скажут спасибо за то, что вы сэкономили их время, а это плюсик в карму. 😉

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

404 ошибка: как эта страница выглядит на нашем сайте

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

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

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

Freepik

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

Ой! Здесь ничего нет. Яркая надпись в стиле GIF привлекает внимание и дает подсказку перейти на главную.
Mailchimp

Лошадка потеряла эту страницу. Но не расстраивайтесь! Кликните на нее и сыграйте в игру. Ведь все мы с вами в душе дети.
Font Awesome

«Знаешь, о чем я постоянно думаю? Где мой сэндвич?» Хорошая идея удержать внимание за счет популярных мемов.
Playstation

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

Похищение пришельцами! Выполненная с юмором тематическая анимация заставляет улыбаться.
LEGO

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

Анимация в стиле супрематизма. Различные фигуры складываются в «404». Смотрится необычно, но в то же время понятно.
Marvel

Что-то не так! Я есть Грут. И я помогу вам не заблудиться в темноте — перейдите на главную.
Kinsta

Не нашли то, что так долго искали? Иллюстрация с затерянной гробницей выглядит таинственно. Вам решать, открывать ее или нет. Может, все-таки вернемся на главную?
Coca-Cola

Здесь больше нет Coca-Cola… Пустые бутылки из-под напитка явно никого не устраивают. Нужно срочно перейти на другую страницу.
Onesharedhouse

Пустая таблица без каких-либо данных показывает, что ничего нет. В конце четко написано: 404.
Bubka

Трехглазый монстрик с главной страницы пытается вас загипнотизировать. Если становится страшно — лучше вернитесь на главную.
F1 News

Лаконичная 404 страница от новостного портала. Вместо цифры «0» используется колесо боллида.
Blizzard

Бедный мурлок заблудился. Но ничего страшного! Спасательный отряд уже на подходе. Главное — зовите громче: «Мргрмлмлрлрглмрргл!»
Android

Хорошее применение типографики для 404 страницы. Текст четко дает понять, что произошло.
Bluleadz

Милая страница с котиком никого не оставит равнодушным. Так и хочется ему помочь. Строка поиска Google поможет отыскать решение.
Subsign

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

Потерялись во Вселенной? Теперь можно с легкостью вернуться домой одним нажатием кнопки.
Github

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

Приятная анимация в линейном стиле не дает оторвать взгляда. Но эта не та страница, что вам нужна, так что вернитесь домой.
Amazon

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

Пример использования части брендинга на странице. Грустный смайлик сообщает об ошибке.
9gag

Еще один пример использование мемов для страницы. Ничего не нашлось — скачайте приложение и ищите там. Отличное решение для целевого действия.
Dribbble

Страница исчезла. Но вы можете найти проекты в нужном для вас цвете прямо здесь. Двигайте ползунок снизу и кликайте на нужное изображение.
Canva

Вроде ничего необычного… но игра слов в надписи добавляет нотку юмора.
Dropbox

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

Ой-ой! Осторожно! Смотрите не покиньте этот мир, как все элементы на странице. Скорее кликайте на логотип и переходите на главную.
Netflix

Хороший вариант для 404 страницы — использовать тематическое изображение. Все просто и понятно. Кадр из сериала подскажет, что вы потерялись.
Lekhoa

Кто-то следит за вами. Попытайтесь не попадаться на глаза — возвращайтесь домой.
Фокс Pizza

Лисичка так расстроена: она уронила свою пиццу. =( Но можно перейти в каталог и заказать еще одну.
SYDO

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

Минимализм с нотками юмора. Не стоит так переживать и падать вверх ногами. Лучше перейдите к покупкам.
Nextpage

Космические захватчики уничтожили эту страницу! Отомстите им! Как долго вы сможете продержаться под огнем?
Brand Crowd

Оригинальная иллюстрация, отображающая деятельность компании — дизайнер рисует «404». Вам необходимо проверить URL-адрес.
Dogstudio

Прекрасная задумка 404 страницы. GIF-анимация меняется каждый раз при перезагрузке.
Издательство «МИФ»

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

Хм, страница, которую вы искали, больше не существует. Анимация показывает, что происходит что-то опасное.
Purple Bunny

Упс! Вы попали не в ту кроличью нору. Кролик обеспокоен и просит вас вернуться на домашнюю страницу.
Virtual Building

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

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

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

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

404 страница в минималистическом стиле. Ой, это же не страница…
Jackrabbit

Посмотрите на этих прекрасных прыгающих кроликов! Все персонажи уникальны по-своему. На такую анимацию можно смотреть бесконечно. А если не бесконечно — перепрыгивайте на главную.
Figma

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

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

Тематическая страница с Марио от игрового портала содержит ссылки на разделы сайта. Страница не найдена. Возможно, она в другом замке, как и принцесса.
YO-YO

Очень красочная анимация для 404 страницы. Такой дизайн всегда поднимает настроение и выделяется среди остальных. Кликайте дальше.
ASOS

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

Заключение

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

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

30+ креативных страниц 404 ошибки: подборка

Редактор-переводчик SEOnews

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

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

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

Purée Maison

Purée Maison – французское креативное агентство, специализирующееся на коммуникационных стратегиях. Персонаж со страницы ошибки 404 нарисован в фирменном стиле сайта и также встречается на страницах загрузки.

Pixar

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

На странице ошибки 404 мультипликационной студии Pixar Печаль из мультфильма «Головоломка» приняла ошибку слишком близко к сердцу. Хороший пример тематической страницы: персонаж известен многим, кто знаком с творчеством компании.

Marvel

Страница не найдена. Даже глаз Уату не видит ваш запрос.

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

Matteo Vandelli

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

20

^th Century Fox

То, на что вы смотрите, могло уже быть перемещено. Если вы, конечно, не ищете «Офисное пространство».

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

Cloud Sigma

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

Cloud Sigma – облачное хранилище. На странице – немного юмора и кнопка, ведущая на Главную.

BluePath

Раз вы попали на эту страницу, наслаждайтесь картой, которую мы для вас составили. На ней показаны все преступления, совершенные в Атланте за пару лет. Зачем? Да потому что то, что вы нас еще не наняли, – преступление!

Другой сайт, страница которого сделана с юмором, – сайт компании BluePath, работающей с Big Data. На странице 404 – карта Атланты с точками, обозначающими преступления, совершенные в городе за 2 года. А все потому, что вовремя не начать сотрудничать с BluePath – преступление.

The Useless Web Index

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

Kualo

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

Веб-хостинг Kualo на рынке уже 15 лет, бесконечность по меркам интернета. Их страница ошибки 404 – отсылка в прошлое. Те, кто наткнулся на нее, могут поиграть в Space Invaders, лучшую аркадную игру по версии Книги рекордов Гиннесса и основоположницу всех современных аркад.

Waaark

Упс, что-то пошло не так.

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

Steve Lambert

Самая неловкая страница ошибки 404 в интернете. Страницы здесь нет. Она перемещена. Или никогда не существовала. Извините. Так иногда случается. Может, воспользуетесь поиском?

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

Figma

Надпись «404» можно растягивать за опорные точки. Расслабляет.

Airbnb

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

Hot Dot Production

Слоган веб-разработчик Hot Dot Production «Где дизайн встречается с технологией» хорошо отражен на его странице ошибки 404. Три цифры составлены из сотен маленьких точек, которые меняют направление или расходятся в разные стороны в зависимости от движений мышки.

GitHub

Страница Github нацелена на гиков-фанатов серии «Звездные войны».

Помимо 404 у GitHub еще есть креативная страница с 500 ошибкой.

CSS Ninja

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

MailChimp

Мы потеряли эту страницу. Мы посмотрели везде, но так и не нашли то, что вы ищете. Давайте найдем для вас место получше.

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

Emirates

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

Audiko

Audiko – сервис для создания рингтонов. На странице ошибки 404 – иллюстрация Лондона с его традиционными красным автобусом, телефонной будкой, Биг Беном, Шерлоком Холмсом и Тауэрским мостом. А чтобы не потеряться, по центру расположен поиск рингтонов и ссылка на домашнюю страницу.

IMDb

На 404 странице главного западного сайта о кинематографе можно найти измененные цитаты из кинофильмов, в которые вставлено слово «страница». Например, «Я отсутствующая страница Джека» из Бойцовского клуба или «Что на странице?!» из фильма «Семь».

Зайдите и проверьте, цитата из какого фильма попадется вам.

NPR

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

Blizzard Entertainment

Компания-создатель игр World of Warcraft и Diablo обвиняет пользователя в том, что страница «сломалась». Ущерб действительно налицо: хедер навигации «упал», а экран разбит.

TProger

На странице 404 портала о разработке TProger есть все: объявление об ошибке, забавные видео (каждый раз новые) и ссылки на другие страницы.

Crello

Страницу сервиса для создания дизайнов Crello украли голуби. Действительно, теперь остается только вернуться на предыдущую страницу или сразу перейти к созданию дизайна.

Hakim.se

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

Android

Android предлагает пользователю вернуться на сайт либо поиграть в игру: помочь сладостям попасть в нужную трубу.

Sumatosoft

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

Ma meilleur cuite

Этой страницы не существует… Вы пьяны или просто потерялись? В любом случае вы нашли Pacman’а, который тоже потерялся. Помогите ему найти выход, по пути собирая кружки с пивом!

Французский блог об алкоголе Ma meilleur cuite предлагает сыграть в игру Pacman, выполненную в стилистике сайта.

Romainbraser

На странице сайта разработчика Romainbraser можно сыграть в аналог популярной игры Lemmings.

Fox

На 404 странице студии Fox пользователей ждет Стьюи из Гриффинов. Кнопка «Get Together» ведет на главную страницу.

Discord

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

Slack

На странице 404 ошибки корпоративного мессенджера Slack – отсылка к небольшой MMO-игре Glitch (от англ. глюк), созданной одним из основателей программы.

Canva

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

Amphibian

На портале с комиксами Amphibian можно сыграть в лягушачий футбол.

Советы от экспертов

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

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

Задачи кастомной страницы 404:

уведомить об ошибке в дружелюбной форме. Не забывайте про тональность коммуникации (ToV, Tone of Voice): ошибка произошла не по вине пользователя, успокойте его, просто скажите, что контент не найден;
объяснить причину. Например, что страница была удалена либо что вы недавно обновили структуру сайта;
предложить решение, чтобы оставить посетителя на сайте.

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

Если причина возникновения ошибки неизвестна, можно предложить типовые решения: предоставить возможность перейти на работающие страницы, показать основную навигацию, дать ссылки на популярные разделы. Например, для ecommerce-сайтов имеет смысл предложить перейти в каталог товаров или дать ссылки на самые популярные. Главное – не оставить посетителя наедине с проблемой. Хорошие примеры реализации этих идей – Squarespace и IFTTT.

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

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

Примеры того, как можно удивлять и веселить, но при этом все равно предлагать полезное действие:

CreativePeople – сюрреалистичная фирменная иллюстрация поддерживает наш стиль, а отсылка к уровню в игре предлагает в неформальном стиле решение проблемы.
Andrea Areni – хорошая визуализация ошибки, напоминающая помехи на телеэкране. Круто, технологично, непонятно.
Gymbox – а тут просто удивляют посетителя, смешат его. Все-таки 404-я ошибка – не какая-то трагедия.

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

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

Константин Кислейко, руководитель отдела дизайна AGIMA

Я уже давно не встречал 404 страницу в реальной жизни.

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

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

Источник: Creative Bloq

Блестящие примеры 404 страниц

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

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

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

01. Marvel

(Изображение предоставлено Marvel)

У Marvel есть несколько версий своих 404 страниц, которые (конечно) посвящены MCU.Мы заметили ссылки на Гидру (одна из которых выше) и глаз Утау, и это всего лишь пара. Проверьте страницу, чтобы узнать, какой из них вы получите.

02. LEGO

(Изображение предоставлено LEGO)

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

03. Omlet

(Изображение предоставлено Omlet)

Игра слов уведет вас далеко, поэтому мы ценим подход Omlet к его странице 404.На странице креативной компании написано: «Эта страница — яичный привкус», поскольку на экране появляется анимированная яичная трещина. Ярко-красный цвет показывает, что это «предупреждение», в то время как тема яйца соответствует имени Омлета. Что не нравится?

04. Mantra Labs

(Изображение предоставлено Mantra Labs)

Эта страница 404 от Mantra Labs проста, но эффективна. Иллюстрация космического человека, плавающего в «404», сопровождает текст «Ой! У вас закончился кислород ». Также есть таймер, отсчитывающий до того, как вы вернетесь на главную страницу.Если вы моргнули, то можете даже пропустить эту страницу 404, хотя стоит специально пойти не так, чтобы просто посетить ее.

05. Готовы к выживанию

(Изображение предоставлено: Готовы пойти на выживание)

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

06. Carwow

(Изображение предоставлено carwow)

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

07. Ueno

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

08. Gymbox

Gym Box — компания по производству спортзалов, цель которой — предложить «самые уникальные и разнообразные классы в Лондоне». Пределы этого утверждения могут заключаться в великолепном фитнес-зрелище 80-х, которое появляется на его странице 404. Короткие шорты, укороченные топы и тазовый толчок — чего еще можно хотеть от страницы с ошибкой?

09. Slack

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

10. Purée Maison

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

11. Pixar

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

12. 20th Century Studios

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

13. Cloud Sigma

Cloud Sigma — это облачный сервер и облачный хостинг, работающий в США, Европе и Азиатско-Тихоокеанском регионе. Хотя гибкие облачные серверы полезны, они не совсем интересны, поэтому мы предполагаем, что компания приложила немного дополнительных усилий, чтобы добавить немного юмора в свою ироническую страницу с ошибкой 404.Интересно, сколько времени пройдет, прежде чем этого полезного молодого разработчика переманивают конкуренты.

14. BluePath

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

15. Kualo

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

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

Как говорит Хлоя Золлингер из Pointe: «Достижение страницы с ошибкой 404 чаще всего разочаровывает пользователя сайта. Мы понимаем, насколько важно взаимодействие с пользователем на веб-странице. Чтобы улучшить взаимодействие с нашими посетителями, наша команда посвятила себя созданию интерактивного на нашей странице 404.»

16. Waaark

Страница 404 французской студии Waaark достаточно хороша для просмотра, но ее лучше слушать — хотя, возможно, и не на работе. Вдохновленная Стивеном Хокингом, Автостопом по Галактике и Порталу, она использует инструмент преобразования текста в речь на языке JavaScript под названием meSpeak, чтобы подвергнуть вас ругательной роботизированной тираде. Подключите наушники и посмотрите.

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

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

Следующая страница: Более вдохновляющие страницы 404 для изучения

37 примеров, которые вам нужно увидеть

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

Но это показывает, что вы заботитесь о своих клиентах.

Отличная страница 404 может стать отличным способом продемонстрировать индивидуальность вашего бренда.

Но стоит ли вкладывать деньги в причудливую страницу 404?

Может быть.

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

Использование ссылок, умной графики и остроумного текста может заставить их забыть, что вы (возможно) напортачили, и вернуть их в нужное русло.

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

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

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

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

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

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

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

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

Почему посетитель может попасть на страницу 404?

Почему пользователь может получить ошибку 404?

Есть несколько причин, в том числе:

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

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

Зачем делать выделяющуюся страницу 404?

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

Продолжить чтение ниже

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

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

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

Вот 37 лучших примеров из 404 страниц, сделанных хорошо.

1. Дисней

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

Продолжить чтение ниже

В них также есть Знаменитость, побочный персонаж в «Ральфе ломает Интернет».

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

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

2. Drift

Drift — это инструмент конверсионного маркетинга и платформа продаж, предлагающая инструменты для живого чата, целевых страниц и т. Д.

Продолжить чтение ниже

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

В правом верхнем углу они также предлагают путь к конверсии, предоставляя кнопку Get Drift Free.

3. Help Scout

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

Продолжить чтение ниже

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

4. Apartment Therapy

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

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

Продолжить чтение ниже

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

5.CoSchedule

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

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

Это просто, но выполняет свою работу.

Продолжить чтение ниже

6. Sprout Social

Sprout Social, маркетинговый инструмент в социальных сетях, действительно хочет, чтобы его клиенты оставались на странице.

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

Затем появляется их чат-бот, чтобы узнать, что вам нужно.

Внизу они продвигают свой информационный бюллетень.

По сути, они превратили свою страницу 404 в целевую.

Продолжить чтение ниже

7. ConvertKit

Кто не любит собак?

ConvertKit упрощает работу, предлагая фотографию собаки члена команды и ссылку на их домашнюю страницу.

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

8. Screaming Frog

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

Продолжить чтение ниже

В отличие от других страниц 404 в списке, эта не статичная.

Мухи перемещаются по странице, рыба плавает, а кувшинки кружатся.

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

9. Moz

Moz упрощает жизнь благодаря камео от Роджера Мозбата, талисмана бренда.

Его присутствие — это бренд и простой способ заставить большинство людей улыбнуться.

Продолжить чтение ниже

Moz также дает вам панель поиска по сайту, чтобы вы могли найти то, что ищете.

10. BigCommerce

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

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

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

Продолжить чтение ниже

11. Kinsta

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

У них есть верхняя панель навигации и поисковая строка, поэтому пользователи могут легко найти другую информацию.

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

12. Lego

Lego делает его светлее, используя большое изображение человека Lego вместе с шуткой «Извините, мы не можем найти эту страницу! Не волнуйтесь, хотя все ВСЕ ЕЩЕ УДИВИТЕЛЬНО! » который является отсылкой к песне из фильма «Лего».

Продолжить чтение ниже

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

13. Slack

Страница 404 Slack просто невероятна.

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

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

Зайдите на их сайт, чтобы узнать больше.

Продолжить чтение ниже

14. Mailchimp

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

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

15. okta

Okta — это облачная компания по управлению доступом, базирующаяся в Сан-Франциско.

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

Продолжить чтение ниже

16. Swiss

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

Облака движутся, когда вы наводите курсор на страницу, окутывая вас облаками.

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

17. Волшебный мир

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

Продолжить чтение ниже

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

18. Юго-запад

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

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

Продолжить чтение ниже

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

Функциональный, но при этом выделяющийся.

19. 9GAG

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

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

Продолжить чтение ниже

20. Flywheel

Flywheel, управляемая хостинговая компания WordPress, предлагает эту причудливую страницу 404, чтобы люди знали, что они попали не на ту страницу.

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

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

21.Дэн Вудгер

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

Продолжить чтение ниже

Обратите внимание, что он не упоминает, что это страница 404, и не дает никакой другой информации, кроме ссылки на свою работу.

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

22. Дистиллированный

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

Но демонстрация стиля вашего бренда на (казалось бы) незначительной странице имеет большой вес.

Продолжить чтение ниже

Если вы заботитесь о своей странице 404, велика вероятность, что вы заботитесь и о своих клиентах.

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

23. Taco Bell

Taco Bell известен своей непочтительностью.Их страница 404 — не исключение.

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

Продолжить чтение ниже

Это забавное напоминание о том, что они знают, что что-то пошло не так.

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

24. Magnt

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

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

Продолжить чтение ниже

25. Dribble

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

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

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

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

26. Overflow

Личность Overflow помещена впереди и в центре их страницы 404.

Продолжить чтение ниже

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

И тот же голос и тон передаются на главной странице.

27. Wendy’s

К настоящему времени вы, вероятно, посмеялись над одним или двумя твитами Wendy’s.

Но, как и в случае с Overflow, Wendy’s сохраняет тот же голос и тональность на своем веб-сайте, даже на своей странице 404.

Продолжить чтение ниже

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

Посмотрим, сможешь ли ты довести Венди до конца!

28.Red Bull

Страница 404 Red Bull — мечта любого специалиста по SEO или маркетингу.

Он набит ссылками на статьи и плейлисты с видео.

Red Bull даже поворачивает список воспроизведения видео для своего последнего события.

На изображении выше видно, что Red Bull использовала серфинг-событие Red Bull Big Wave 2020 в качестве источника вдохновения.

Продолжить чтение ниже

29. Blizzard

Blizzard Entertainment, создатели World of Warcraft, также известного как WOW, если вы такой гик, как я.🤓

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

30. Marvel

Marvel использует различных персонажей комиксов, таких как Капитан Америка, Дэдпул и т. Д., На вращающейся странице 404.

Небольшая подсказка: продолжайте нажимать кнопку «Обновить». Каждое третье обновление Marvel будет предлагать новый визуальный ряд.

Продолжить чтение ниже

31. Patagonia

Patagonia вешает десятку на своей странице 404, подчеркивая ее повседневную тропическую атмосферу.

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

32. Backcountry

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

Продолжить чтение ниже

33. Nintendo

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

Но важно то, что Nintendo добавляет ссылки на ресурсы для пользователя.

Он заставляет пользователей оставаться на веб-сайте и не возвращаться к поисковой выдаче.

34. Zillow

Zillow предлагает интерактивные GIF-файлы для домашних поисковиков.

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

Продолжить чтение ниже

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

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

35. H&R Block

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

Продолжить чтение ниже

36. World of Warcraft

Команда World of Warcraft отмечает набор навыков своей аудитории несколькими шутками о CDN и выше.

37. Playstation

Playstation дает хороший отзыв об одной из своих новых игр на своей странице 404.

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

Сводка

В идеальном мире никто никогда бы не увидел ваши 404 страницы.

Продолжить чтение Ниже

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

Но в реальном мире все бывает.

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

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

Дополнительные ресурсы:

Кредиты на изображения

Показанное изображение: Создано автором, август 2020 г.
Все скриншоты сделаны автором, август 2020 г. В постоянных клиентов

Что, если бы мы сказали вам, что ваша страница с ошибкой 404 действительно может увеличить количество конверсий и увеличить доход?

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

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

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

Что такое страница с ошибкой 404 и почему вас это должно волновать

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

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

Отражает ли ваша страница 404 ваш бренд?

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

Это…

Ни для кого не годится.

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

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

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

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

1. Lego — дружественная ошибка «Страница не найдена»

Почему это работает:

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

Все, что нужно знать вашему посетителю, — это то, что он не получил нужную страницу. Их на самом деле не волнует, почему; они просто хотят решения.

Как это сделать:

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

«Страница не найдена.”
«К сожалению, мы не можем найти страницу, которую вы искали».
«Ой! Что-то сломано ».
«Ой, эта ссылка не работает».

2. Центр электронной почты Великобритании — Пример интерактивной страницы 404

Почему это работает:

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

Как это сделать:

Не вините посетителя в ошибке.Вместо этого извинитесь .

Если вы объясняете, что пошло не так, не используйте абсолютные выражения. Вместо этого используйте такие слова и фразы, как «мог бы иметь» или «возможно». Такая формулировка вряд ли заставит посетителя почувствовать, что ошибка — его вина.

Вы также можете сделать то, что сделал Email Center UK, и позволить пользователю «уволить» одного из разработчиков.

Бедный Люк, в самом деле.

3. List25 — Best 404 Page

Почему это работает:

Эта страница с ошибкой 404 из List25 великолепна, и, по сути, это больно.

Лучшая практика проектирования взаимодействия с пользователем — объяснить, что пошло не так при доставке сообщения об ошибке. List25 предлагает 25 объяснений. Естественно.

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

Как это сделать:

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

Вот список возможных причин ошибки 404:

Ошибочный URL
Ошибка копирования и вставки
Ссылка не работает
Усеченная ссылка
Перемещенный контент
Удаленное содержимое

Если вы хотите добавить несколько забавных вещей, которые подходят вашему бренду, сделайте это!

4. Бретт Терпстра — Простой дизайн страницы 404

Почему это работает:

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

Страница 404
Brett Terpstra содержит список сообщений, содержащих ключевые слова, относящиеся к ссылке, по которой вы пытались получить доступ. Сообщения связаны ссылками, что упрощает и ускоряет переход к ним.
Страница невзрачная, но очень полезная.
Как это сделать:
Вы можете использовать API пользовательского поиска Google, чтобы получать наиболее подходящие совпадения с вашего веб-сайта и отображать их на странице 404. Этот дает посетителям немедленное решение их проблемы с потерянной страницей.
Это требует доступа к консоли разработчика Google и не для слабонервных. На сайте Smashing Magazine есть отличное руководство, которое поможет вам начать работу.
5. Стив Мэдден — Страница 404 с продуктами
Почему это работает:
Страница 404 Стива Мэддена предлагает варианты для потерянных посетителей. Окно поиска является отличным дополнением к любой ошибке 404 и предлагает несколько различных способов получить помощь, позволяя посетителям узнать, что они их слушают.
Они также включают ссылки на другие популярные продукты, чтобы отвлечь посетителей от того, что может быть очень неприятным. Подлый и эффективный.
Как это сделать:
Помогите своим потерянным посетителям с текстом и оформлением сообщения об ошибке 404. Включение некоторых из приведенных ниже идей может побудить посетителей продолжить просмотр и поиск , продлевая время их пребывания на вашем сайте.
Что нужно включить в дизайн страницы 404:
Навигация по меню
Ссылка на домашнюю страницу
Ссылка на вашу карту сайта
Панель поиска
Ссылки на популярные сообщения
А с SeedProd вы можете легко отображать продукты на странице с ошибкой 404.Просто перетащите один из настраиваемых блоков WooCommerce от SeedProd и поместите его на место.
Вы можете выбирать из блоков, таких как сетка продуктов, продукты продажи, продукты с самым высоким рейтингом и т.
6. 9gag — Текст страницы 404 с призывом к действию
Почему это работает:
Страница 404 компании
9gag имеет одну цель: заставить вас загрузить их приложение. Они даже не делают вид, что хотят ничего другого.
Добавить целую страницу популярной гифки «Криминальное чтиво Траволта» — это забавно!
Как это сделать:
Простота — ключ к успеху.Да, мы только что говорили о способах удержания посетителей в Интернете, но не перегружайте их слишком большим количеством вариантов .
В идеале вы должны придерживаться одного призыва к действию, может быть, двух. Вы же не хотите, чтобы посетители страдали от паралича нерешительности и в ужасе покидали ваш сайт.
Трава всегда зеленее, правда? Если вы предоставите своим посетителям слишком много вариантов, они могут в конечном итоге пожалеть о своем выборе и обидеться на вас.
7. Путь — Супер-простой дизайн страницы 404
Почему это работает:
Страница 404
Path проста и понятна.Они не хотят, чтобы у них были неработающие ссылки и отсутствующие страницы, поэтому они дают посетителям возможность связаться со службой поддержки Path, чтобы сообщить об этом.
Обратите внимание, что Path также включает нижний колонтитул на тот случай, если посетитель не хочет сообщать о проблеме и предпочитает просмотреть. Это возвращает посетителю силы и помогает облегчить его разочарование.
Как это сделать:
Цель состоит в том, чтобы дать посетителям возможность сообщить о проблеме .
Вы можете сделать это несколькими способами.Вы можете сделать это простым, как Path, и включить возможность обращения в службу поддержки. Другой вариант — использовать форму обратной связи.
8. IMDB — Веселые и фирменные 404 Страница
Почему это работает:
Помните ту ужасную страницу с ошибкой 404 по умолчанию из начала этой статьи? Вашему посетителю не будет чем-то знакомым, чтобы успокоиться. IMDB устраняет это, показывая посетителям цитату из фильма на их странице 404.
Брендинг здесь тонкий. Нет афиш с фильмами или трейлеров, соревнующихся за внимание посетителя.IMDB просто предлагает цитату из фильма, ссылку на домашнюю страницу сайта и ссылку на процитированный фильм.
Как это сделать:
При разработке страницы с ошибкой 404 убедитесь, что поддерживает знакомство с брендом .
Вместо того, чтобы дезориентировать ваших пользователей, им будет приятно познакомиться с тем же брендом, который они узнали.
9. Everipedia — Пример текста сообщения об ошибке 404
Почему это работает:
Страница 404 Everipedia — это все, что посетители ожидают от онлайн-энциклопедии.Это напоминает посетителям, почему они любят этот сайт и продолжают возвращаться.
Как это сделать:
Спикер и маркетолог TED Ренни Глисон сказал о странице ошибки 404,
Простая ошибка может сказать мне, чем вы не являетесь. Или напомни мне, почему я тебя люблю.
Используйте свою страницу 404, чтобы напомнить посетителям, за что они вас любят . В чем заключается ваше уникальное ценностное предложение? Что отличает вас от конкурентов?
10. Heyzap — Best Interactive 404 Page
Почему это работает:
Кто не любит играть в игры?
Страница 404
Heyzap добавляет интерактивный элемент, который на некоторое время будет развлекать посетителей на сайте.Может быть, даже достаточно долго, чтобы с самого начала избавиться от разочарования от попадания на страницу с ошибкой!
Как это сделать:
Нет, вам не нужно разрабатывать игру, но рассмотрите возможность добавления интерактивного элемента на вашу страницу .
Добавление интерактивного элемента позволяет посетителям вашего сайта чем-то заняться на странице с ошибкой 404. Это увеличивает время пребывания на странице и снижает показатель отказов, что важно для сохранения вашего веб-сайта в результатах поиска Google.
11. OptinMonster — Пример страницы 404 с лид-магнитом
Почему это работает:
Страница 404
OptinMonster включает в себя супер крутой свинцовый магнит. Кроме того, предложение загрузки о том, как конвертировать уходящих посетителей со страницы с ошибкой, является довольно гениальным.
Мы не хотим, чтобы люди считали свое время на наших сайтах потраченным впустую. Урок маркетинга на странице 404 по-прежнему дает нашим посетителям полезную информацию.
Да, мы немного предвзяты, но у нас тоже хорошо получается.Это превращается в бандитов.
Как это сделать:
Предложите свой собственный лид-магнит, добавив MonsterLink на страницу с ошибкой 404.
MonsterLinks — одна из замечательных функций OptinMonster, позволяющая превратить любую ссылку, кнопку или изображение в двухэтапный процесс подписки.
Двухэтапная подписка требует, чтобы пользователь инициировал процесс, щелкнув ссылку сначала , прежде чем появится форма подписки.
Вот как выглядит этот двухэтапный процесс:
Доказано, что эти типы оптинов увеличивают конверсию на 785%! Нажмите здесь, чтобы начать работу с OptinMonster, а затем следуйте этому руководству, чтобы добавить MonsterLink на страницу с ошибкой 404.
Бонусная секция: Выход-намерение
Одна из вещей, которые мы не часто наблюдаем, — это использование технологии выхода на страницы 404. Намерение выхода помогает снизить показатель отказов, его легко настроить и каждый раз увеличивает конверсию.
Exit-intent определяет, когда пользователь собирается покинуть страницу с ошибкой 404, а затем отображает всплывающее окно прямо в этот момент. Это предотвращает потерю более 70% посетителей, которые покидают ваш сайт, и никогда не вернутся.
Вот пример всплывающего окна, которое появляется, когда пользователь собирается отказаться от страницы с ошибкой 404.
(Это было создано с использованием темы холста OptinMonster.)
Это всплывающее окно является приветственным сайтом для пользователей, поскольку оно помогает им найти то, что им нужно. И это творит чудеса для вас, как владельца веб-сайта, потому что дает им последний шанс продолжить просмотр вашего сайта.
Вы также можете использовать намерение выхода, чтобы предоставить посетителям купон или код скидки, когда они покидают вашу страницу 404.
Вот и все! 11 из найденных нами лучших страниц 404 и множество советов, которые можно использовать для увеличения числа конверсий и увеличения дохода.
Ищете другие советы по увеличению доходов? Ознакомьтесь с полным руководством по оптимизации электронной коммерции: 13 шагов к мгновенному увеличению дохода!
Подпишитесь на нас в Facebook и Twitter, чтобы получить больше полезных советов и руководств от OptinMonster.
Опубликовано Jacinda Santora
Джасинда Сантора — писатель, специализирующийся на электронной коммерции и маркетинге роста.Она гордится своей способностью упрощать сложные вещи. Когда она не пишет, вы можете увидеть, как она мечтает о кемпингах, пьет кофе и слушает подкасты.
19 лучших примеров страниц 404 для восстановления потерянных посетителей
Знаете ли вы, что отличная страница 404 может увеличить конверсию вашего сайта и увеличить доход?
Это может показаться довольно безумным заявлением. Но правильно оптимизированная страница 404 может превратить потерянных посетителей сайта в постоянных, вернувшихся клиентов.
В этой статье мы рассмотрим лучшие примеры страниц с ошибками 404, которые мы обнаружили, и почему они так хорошо работают.
Прежде чем мы поделимся лучшими страницами 404, давайте посмотрим, почему целевая страница 404 важна для вашего бизнеса.
Что такое страница с ошибкой 404 и зачем она вам нужна?
Возможно, вы уже знаете, что со временем ссылки на некоторые веб-сайты портятся. Это может быть связано с отсутствием страниц, удалением некачественного контента, изменением веб-дизайна или даже изменением структуры постоянных ссылок на вашем веб-сайте.
Но вот в чем дело…
Эти удаленные или перемещенные страницы часто появляются в поисковых системах или социальных сетях на их старых URL-адресах. Поэтому, когда кто-то нажимает, чтобы посетить их, он видит страницу с ошибкой 404 с сообщением о том, что страница не найдена. Это также может произойти, если они пропустят URL-адрес или нажмут неработающую или неработающую ссылку.
Имея это в виду, внимательно посмотрите на свой текущий дизайн страницы 404. Точно ли он отражает ваш бренд?
Если этого не произойдет, вы можете потерять посетителей и потенциальных клиентов.
Например, если ваша страница 404 выглядит так…
… это оттолкнет людей, и они могут никогда не вернуться.
Тем не менее, если вы оптимизируете целевую страницу 404 not found с помощью:
Вы можете снизить показатель отказов и увеличить количество подписчиков и количество конверсий на вашем веб-сайте.
Теперь, когда вы знаете, что такое страница с ошибкой 404 и почему она важна для вашего веб-сайта, давайте рассмотрим лучшие примеры страниц с ошибкой 404. Если повезет, вы получите вдохновение для дизайна 404, которое поможет вам создать свою собственную страницу 404.
11 лучших примеров страниц 404 от реальных брендов
Следующие ниже дизайны страниц с ошибкой 404 взяты от реальных брендов в Интернете. Мы объясним, почему именно этот дизайн работает, и дадим несколько советов, как сделать это самостоятельно.
1. Lego — Дружественный дизайн страницы 404, вдохновение
Страница
Lego 404 — отличный пример использования юмора и хорошего бренда для привлечения посетителей сайта.
Пользователи сталкиваются с узнаваемым персонажем, Эмметом, который сожалеет о том, что не нашел страницу, которую вы ищете.Затем он говорит вам не беспокоиться, заверив вас, что все по-прежнему великолепно, что является отличным отсылкой к фильму и намеком на песню из фильма lego.
К этому моменту, когда песня гудит в вашей голове, он предлагает вам начать делать покупки с помощью четкой кнопки с призывом к действию (CTA).
Вся концепция работает, потому что она дружелюбна, узнаваема и полностью соответствует бренду.
Чтобы создать похожий дизайн страницы 404, сначала удалите все технические термины и замените их чем-то более человечным.Используйте такие слова, как «не беспокойтесь», «ой» и «извините», чтобы убедить пользователей, что страница с ошибкой — не их вина.
Вы также можете использовать изображения, связанные с вашим брендом, чтобы пользователи знали, что они почти в нужном месте. Затем с помощью кнопки CTA вы можете помочь им найти то, что они ищут, и дольше удерживать их на вашем сайте. Включение окна поиска или панели поиска — еще один отличный способ улучшить взаимодействие с пользователем и повысить эффективность SEO.
2. Промедление — прокрутка страницы 404, пример не найден
Этот пользовательский дизайн страницы 404 от Slack предлагает более интерактивный пользовательский интерфейс, чем некоторые другие примеры веб-страниц в этой статье.
Приземлившись на страницу, вы попадаете в волшебный пейзаж с деревьями, цветами и даже радугой вдалеке. Бабочки порхают по небу, и вы даже можете увидеть странных поросенка и цыпленка, которые бродят вокруг.
Более того, вся страница прокручивается по горизонтали при перемещении курсора мыши, открывая больше ярких сцен для просмотра.
Вас можно простить за то, что вы подумали, что реальность на мгновение сбилась с толку, о чем, кажется, думает и Slack, как вы можете видеть из их сообщений.
В сообщении об ошибке не упоминается ошибка 404. Вместо этого они используют слова и фразы, понятные каждому. Он также предлагает, что вам делать дальше: вернуться или найти решение в справочном центре.
Предоставляя пользователям выбор, они дольше удерживают их на своем веб-сайте, а не закрывают вкладку.
3. Mantra Labs — Страница 404 с перенаправлением
Индивидуальный дизайн страницы 404 от Mantra Labs — это умный пример того, как пользователь принимает решение.
Достигнув страницы, вы видите простую иллюстрацию парящего в космосе космонавта с заголовком «Ой! У тебя закончился кислород ». Астронавт помещается над «0» в 404 и медленно втягивается в нее, как если бы он упал в черную дыру или полетел в космос.
Затем вы видите таймер обратного отсчета, который отсчитывает время, пока они не вернут вас «домой», который перенаправляет вас на главную страницу веб-сайта. Если вы моргнете, вы можете полностью пропустить страницу 404.
Самое замечательное в этом примере — некогда думать.Всего за 10 секунд вы будете перенаправлены на главную страницу, где сможете найти нужный контент, а этого времени вряд ли хватит, чтобы принять решение уйти.
4. Студия 20 века — Страница 404 с идеями фильмов
Еще один замечательный пример правильного креативного брендинга страниц 404 — это от 20th Century Studios. Если вы перейдете по неработающей ссылке или удалите статью на их веб-сайте, вы увидите содержательное сообщение и кадр из одного из их культовых фильмов.
Далее по странице они предлагают несколько фильмов из своей коллекции, где вы можете щелкнуть, чтобы узнать больше и купить копию.
Это фантастический способ удержать пользователей на веб-сайте, который естественным образом превращается в квалифицированных потенциальных клиентов.
Вы можете использовать аналогичный подход для своего сайта, предлагая популярные статьи или продукты.
Например, с помощью настраиваемых блоков WooCommerce от SeedProd вы можете легко добавить сетку продуктов на свою страницу 404 для отображения последних продуктов, продуктов со скидками, самых продаваемых продуктов и т. Д.
Теперь вы можете совершать продажи прямо со своей 404 страницы!
5.Figma — Интерактивная страница 404, страница
Нам нравится дизайн 404 страницы Figmas за его простоту. Страница довольно прямолинейна, минимальна и не содержит лишних наворотов.
Если, конечно, вы не учитываете тот факт, что вы можете манипулировать точками привязки в тексте 404 и играть с ними.
Хотя сначала это может показаться бессмысленным, на самом деле это довольно умно. Эта маленькая дизайнерская игра идеально воплощает в себе бренд Figmas как инструмент дизайна. Вы мгновенно получаете представление о том, что с ним можно делать, и это побуждает вас узнать больше.
Получить дополнительную информацию тоже несложно. Страница 404 Figmas включает меню навигации и полезные ссылки, чтобы легко найти то, что им нужно.
6. Behance — 404 с предложениями по проектам
Behance, сайт, похожий на Dribbble, предоставляет еще один отличный пример страницы 404, который помогает пользователям находить нужную информацию.
У страницы простой заголовок «Ой! Мы не можем найти эту страницу ». с подзаголовком, предлагающим посетителям посетить галереи их проектов.
Под заголовком вы можете щелкнуть различные категории проектов, чтобы перейти на нужную страницу. Затем у вас есть возможность просмотреть несколько избранных проектов в поисках вдохновения.
С этой страницей пользователи не останутся без дела. Они не попали на страницу, которую искали, но с таким количеством предложений они могли найти что-то похожее или лучшее.
7. eBay — Страница 404 с актуальными предложениями
eBay — популярный веб-сайт электронной коммерции, который использует пользовательское сообщение об ошибке 404 для демонстрации самых популярных продуктов.
При посещении страницы вы видите забавное изображение и причудливый заголовок, в котором говорится, что они «везде искали» вашу желаемую страницу. Это помогает пользователям понять ситуацию. Затем он ссылается на их домашнюю страницу с помощью привлекательной кнопки.
После этого они предлагают заглянуть на свои справочные страницы, если вам все еще нужна помощь. Или вы можете сразу перейти к просмотру их популярных сделок, которые большинство пользователей, вероятно, в любом случае ищут.
Организуя таким образом дизайн своей страницы 404, они предлагают людям больше возможностей продолжать использовать их сайт, не будучи слишком настойчивыми.
8. 9gag — Призыв к действию 404 Страница
Знание своей аудитории имеет решающее значение для превращения ее в платежеспособных клиентов. Если вы не знаете, что им нравится, вы не можете предлагать контент, продукты и услуги, которые им нужны больше всего.
На этой странице с ошибкой 404 9gag демонстрирует, что они хорошо знают свою аудиторию.
На их целевой странице 404 изображен популярный мем, с которым знакомо большинство их пользователей. Это не оставляет сомнений в том, что вы попали в нужное место, даже если это не та страница, которую вы искали.
Далее следует простое сообщение и призыв к действию для загрузки приложения, мгновенное решение для привлечения большего числа потенциальных клиентов.
9. IMDB — 404 Page Design Inspiration
Большинство людей знают, что IMDB — это веб-сайт, на котором можно найти новости и предложения о кино. Поэтому неудивительно, что их страница 404 ориентирована на кино.
При входе пользователей развлекает индивидуализированная цитата из популярного фильма. В приведенном выше примере это известная цитата Гэндальфа из «Властелина колец».
Название фильма под сообщением 404 связано с соответствующей страницей, что дает людям возможность узнать больше. Или вы можете перейти на домашнюю страницу, чтобы продолжить просмотр. В любом случае пользователи остаются на сайте.
10. Уэно — Creative 404 Page
Еще один способ использовать пользовательскую страницу 404 — продемонстрировать творческий потенциал ваших брендов. Это то, что Ueno, агентство полного цикла, сделало с этим примером страницы 404.
Вы не можете увидеть полный эффект на скриншоте выше.
Это изображение представляет собой анимацию хот-дога, бегущего по странным и сюрреалистическим пейзажам. Более того, каждый раз, когда вы обновляете страницу, вы будете видеть другое сообщение, объясняющее ситуацию.
Эта страница 404 демонстрирует весь творческий потенциал агентства, что идеально подходит для потенциальных клиентов. Кроме того, вернуться на главную страницу легко с помощью хорошо размещенной ссылки «вернуться».
11. CloudSigma — Веселый дизайн страницы 404
Облачный хостинг — не обязательно забавная тема для демонстрации, даже если это невероятно полезная услуга для многих владельцев веб-сайтов.Вот почему нам нравится дизайн страницы 404 от CloudSigma.
Их шутливые сообщения дают посетителям возможность заглянуть за кулисы жизни разработчика. Тем не менее, юмор достаточно беззаботный, чтобы не обидеться.
Вся страница создает привлекательное и дружелюбное впечатление, заставляя вас перейти на главную страницу, чтобы узнать больше.
Надеюсь, что приведенные выше примеры страниц 404 дадут вам достаточно вдохновения для того, чтобы сделать один для своего веб-сайта.
12. Brett Terpstra Simple 404 Страница
Если ваша страница 404 плохо спроектирована, это может сигнализировать о тупике для посетителей и предлагать им больше некуда идти. Это может привести к потере тонны потенциальных клиентов.
Вместо этого вы можете сделать что-то вроде этой страницы 404 от Бретта Терпстры. Он сразу понимает, что что-то пошло не так, и вместо того, чтобы оставить все как есть, предлагает варианты того, что вы, возможно, ищете.
Хотя страница некрасивая, она очень полезна.
Вы можете создать нечто подобное, просмотрев аналитику своего веб-сайта, чтобы определить, какие статьи люди ищут больше всего.
13. Marvel Animated 404, пример
404 страницы
Marvel бывают всех форм и размеров. Фактически, у них есть много страниц с ошибками, посвященных различным персонажам их вселенной.
В этом примере они анимировали свою страницу 404 со ссылкой на Железного человека, который понравится многим фанатам.
Движение анимированного gif привлекает внимание к инструкциям.И это побуждает посетителей либо нажать кнопку «Назад», либо воспользоваться функцией поиска, чтобы найти то, что они ищут.
14. CSS-хитрости 404 Дизайн страницы
Эта простая, но функциональная страница 404 от CSS Tricks — отличный пример хорошего знания своей аудитории. Внизу страницы есть разрыв, открывающий ее CSS, который найдет отклик у многих разработчиков.
Как видите, они также включают ссылки на соответствующие страницы, чтобы люди не покинули их веб-сайт.Кроме того, внутренние ссылки — отличный способ повысить ваш SEO.
15. Пример страницы 404 Mailchimp
Когда что-то идет не так, часто лучший способ справиться с ситуацией — это откровенно признать свою вину. Именно это делает Mailchimp со своим дизайном страницы 404.
На странице есть анимированный GIF-файл с изображением персонажа, «ищущего» то, что вы ищете. Кроме того, сообщение о потере страницы полностью честно. Тем не менее, они предлагают читателям решение, показывая кнопку, возвращающую посетителей на их домашнюю страницу.
16. Разбитое яйцо SeedProd 404 Страница
Страница 404 разбитого яйца от SeedProd — это простой дизайн с простым настраиваемым сообщением. Он включает в себя область для логотипа вашего сайта, меню навигации и призыв к действию, направляющий пользователей обратно на вашу домашнюю страницу.
Фоновое изображение — отличный признак того, что что-то сломалось. А ссылки в меню упрощают переход к другим областям веб-сайта.
17. Шаблон страницы 404 SeedProd для электронной коммерции
Эта страница 404 будет полезна
сайтам электронной коммерции.В нем есть простое сообщение о том, что что-то пошло не так, а также предложения по продукту, чтобы пользователи продолжали просматривать.
18. SeedProd Sunset 404 Пример страницы
В этом дизайне от SeedProd вы можете создать потрясающую полноэкранную страницу 404, которая производит впечатление. Полноэкранный дисплей сразу привлекает внимание теплым изображением заката. Затем пользователи могут щелкнуть большую кнопку «домой», чтобы вернуться на вашу домашнюю страницу.
19. SeedProd Funny Пример страницы 404
Кто устоит перед милой собачкой в костюме ананаса?
Этот яркий и веселый дизайн страницы 404 говорит о том, что страницы не существует.Но с небольшой помощью вы можете перейти на домашнюю страницу, на которой действительно существует.
Он также включает удобное меню навигации, чтобы пользователи могли легко находить другие страницы вашего веб-сайта.
404 Страница FAQ
Что должно быть на странице 404?
При создании страницы 404 вы должны сначала сказать людям, что страница, которую они ищут, не может быть найдена. Затем вы можете дополнить страницу полезными ссылками на другие страницы вашего сайта или даже добавить форму подписки для подписки на электронную рассылку новостей.
Как перенаправить страницу 404?
Вы можете использовать плагин SEO для перенаправления страниц с ошибкой 404 на другую страницу вашего сайта. Мы рекомендуем использовать All in One SEO, так как это самый простой и удобный плагин для SEO для WordPress. Ознакомьтесь с их руководством о том, как легко найти и исправить ошибку 404 в WordPress.
Как сделать хорошую страницу 404?
Когда дело доходит до создания собственной страницы 404, есть несколько вариантов.
Многие темы WordPress включают готовые дизайны страниц 404 как часть пакета тем.Таким образом, вы могли увидеть, есть ли у используемой вами в настоящее время темы такие функции.
Вы также можете нанять разработчика для разработки и кодирования страницы 404, но это может стать дорогостоящим.
Или вы можете создать страницу 404 с помощью конструктора целевых страниц, такого как SeedProd.
SeedProd — лучший конструктор целевых страниц для WordPress. Он упрощает создание любой целевой страницы и предоставляет простой конструктор перетаскивания для создания страниц без необходимости кодирования.
Он также поставляется с широким спектром шаблонов целевых страниц, которые вы можете настроить в визуальном конструкторе.Кроме того, плагин не содержит раздутых материалов и содержит минимум кода, поэтому он не замедлит работу вашего сайта.
Конструктор целевой страницы
SeedProd и шаблоны страниц 404 позволяют легко создавать страницы 404, которые увеличивают количество потенциальных клиентов и коэффициент конверсии.
Так чего же вы ждете?
И если вам понравилась эта статья, подпишитесь на нас в Twitter и Facebook, чтобы получать больше полезного контента, который поможет вам в развитии вашего бизнеса.
404 Страница: Дизайн не найден. Как создавать большие страницы ошибок | Катя Шокурова
Иллюстрация Пекеньо Капитан
Что для вас страница с ошибкой? Причина смущения и раздражения? Немного беспокоит? Вообще ничего? То, что пользователи натыкаются на страницу 404, также расстраивает владельцев сайтов.Тем не менее, может существовать дизайн страницы 404, на котором можно заработать.
У вас есть возможность выбрать, как это будет чувствовать ваш пользователь.
Дизайнер может создать креативную страницу с ошибкой 404, чтобы повысить коэффициент конверсии и увеличить трафик, превращая прохожих в потенциальных клиентов. Если вы ищете вдохновение, как улучшить страницу 404 (с примерами), то читайте дальше!
Дизайн страницы 404 Алекс Калиниченко для Shakuro
Страница 404 — это онлайн-страница, на которую вы попадаете после нажатия на ссылку, которая не работает и, следовательно, больше не доступна.
Есть две основные причины, по которым посетитель может оказаться на странице с ошибкой 404:
компания удалила определенный контент со своего веб-сайта или изменила его URL-адрес
человек ошибочно ввел URL-адрес, что не является редкостью на нашем мобильном телефоне. эпоха.
Итак, ошибка 404 означает, что кто-то напортачил.
404 Page by OSCAR
Ошибки — часть нашей жизни, это точно. В идеале пользователи не должны видеть страницу 404 полностью, но в реальном мире веб-сайты регулярно обновляются, некоторые ссылки больше не действуют.Вы никогда полностью не избавитесь от необходимости в странице 404. Но лучше проявить инициативу.
Надежная страница с ошибкой 404 может превратить плохое качество обслуживания клиентов в приятное.
Не полагайтесь на 404, предоставляемый браузерами.
Ух! Это так жестко, холодно, скучно и трудно понять. Слишком много текста и технического жаргона. Он ничем не помогает посетителям.
Пользовательская страница 404 намного лучше:
Брендинг. Он укрепляет имидж вашего бренда и увеличивает вероятность того, что посетители продолжат посещать ваш сайт, а не покинут его навсегда.
Здание треста. Обслуживаемая страница 404 действует как надежный метод установления определенного уровня доверия между потребителем и компанией.
SEO. Он предоставляет дополнительные ссылки на важные части вашего сайта, чтобы поисковые системы могли достичь его полной структуры.
Удовольствие. Забавные страницы 404 играют на творчестве и смягчают удар несбывшихся ожиданий пользователей.
Daily UI Challenge Day 08–404 Страница Сергея Семенова
Страница 404 — это страница, на создание которой могут уйти тысячи долларов, при этом надеясь, что ее никто никогда не увидит.
Дизайн страницы 404, вероятно, не первое, что думает дизайнер или владелец веб-сайта, но все же он жизненно важен. Лучшие практики дизайна страницы ошибок гарантируют, что ваша страница на высшем уровне и будет хорошо служить своим целям.
Новая страница Dribbble 404 от Rogie для Dribbble
Когда вы создаете настраиваемую страницу с ошибкой 404, она по-прежнему остается страницей вашего веб-сайта, поэтому на ней должны сохраняться те же фирменные и визуальные элементы, что и на любой другой странице, например шрифты, цвета, заголовок, логотип , и сохранить общий стиль и индивидуальность бренда.
Страница 404 — Еженедельные задачи пользовательского интерфейса, сезон 02 / нед. [2/10], Ана Руменович
Основная цель страницы 404 — быть функциональной и быстро указывать пользователям в правильном направлении. При разработке страницы 404 подумайте о включении следующих компонентов:
Базовый элемент. Но, на самом деле, если вы последовали совету из предыдущего пункта, он может вам не понадобиться, потому что все необходимые ссылки будут там.
Поле поиска на макете страницы 404 дает пользователю возможность продолжить поиск любой страницы, которую он имел в виду, тем самым заставляя их оставаться на месте.
Несколько ссылок на самые популярные страницы
Здесь вы можете попробовать сделать некоторые прогнозы и полагаться на законы вероятности. Если пользователю была интересна популярная страница, вы можете быстро указать ему правильное направление.
404 Иллюстрация взаимодействия с ошибкой «Не найдена» для веб-страницы. Автор Тарас Мигулко. Поле поиска очень удобно предлагается после увлекательной анимации.
Представление пользователю страницы 404, заполненной до краев ссылками на каждую отдельную страницу вашего веб-сайта, — это определенный способ проверить пределы терпения уже разочарованного пользователя.
Минималистичный дизайн страницы с ошибкой 404 может в конечном итоге наиболее эффективно служить своим целям. Лучший дизайн способен достичь своих целей простейшими средствами. Это вершина изысканности дизайна.
Лучший дизайн — самый простой, который работает.
— Альберт Эйнштейн
404 Page — DailyUI # 008 Хендрик С.
Каким бы цифровым ни было современное общество, было бы ошибкой думать, что все понимают значение ошибки 404.В конце концов, это не та страница, к которой люди привыкли. Более эффективно разъяснить, в чем проблема, полезным и ясным образом.
Обратите внимание на текст 404 страницы и выбор слов. Более эффективно выбрать вариант «Извините! Мы не могли найти эту классическую страницу по сравнению с машинной «Ошибка 404: страница не найдена», как раньше.
Извините. Возможно, это даже не ваша вина, но это покажет пользователю, что вам не все равно.
Страница не найдена Тран Мау Три Тамом
Многие веб-сайты используют забавный подход и делают свои страницы интересными, например, GitHub или Pixar.
Создание забавного и замечательного дизайна страницы 404 может оказать на удивление сильное влияние на то, чтобы посетители дольше оставались на вашем веб-сайте. Люди могли даже рассказать о вашей особенно забавной 404-й странице своим друзьям.
404. Где страница, Лебовски? Автор: Дмитрий З. Веселый дизайн 404 со ссылкой на «Большой Лебовски»
братьев Коэн. Предложение некоторых специальных предложений, таких как 10% скидка на странице 404, может уменьшить разочарование ваших посетителей и побудить их продолжить работу с вашим сайтом. и даже получить прибыль от этой ситуации.Используйте что-нибудь вроде «Приносим извинения за неудобства. Давайте вернем вам что-нибудь, сделав специальную сделку ». Это мощный стимул для продолжения и совершения покупки.
Пустое состояние — страница ошибки 404, автор: Rudityas W Anggoro
16 супер умных страниц 404, которые полностью соответствуют бренду
Креативные страницы 404 в наши дни пользуются популярностью.
Похоже, веб-дизайнеры постоянно пытаются превзойти друг друга, создавая все более и более совершенные версии того, что раньше было общим сообщением об ошибке.
Простой поиск в Google, Pinterest или Dribbble найдет тысячи примеров, которые помогут развить ваши творческие способности.
… Но погодите — красивая эстетика — это только полдела!
Единственное, что действительно отличает страницу 404 от остальных, — это то, как она связана с вашим брендом, продуктами, услугами и прямыми призывами к действию, которые повторно привлекают ваших посетителей, чтобы они продолжали изучать ваш сайт.
Следующие бренды проделали большую работу по созданию пользовательских страниц 404, которые устанавливают все флажки.
Marvel
Marvel помещает своих супергероев в центр внимания на своей странице 404. Они проделали большую работу, связав сообщение об ошибке с конкретным персонажем. Добавлен бонус, страница имеет тонкую анимацию и может быть обновлена для просмотра других персонажей. Гений.
20th Century Fox
Такой простой, но такой умный. Компания 20th Century Fox использует сцены из своих фильмов, чтобы подшутить над ужасной страницей 404, как они это делают со сценой из «Мести ботаников». Вы даже можете немного отомстить — купив фильм со скидкой!
Specialized
Почему бы не продемонстрировать ваш продукт в действии? Specialized использует одного из своих гонщиков, чтобы объяснить свою страницу 404.Все делают ошибки, почему бы не продемонстрировать одну на своей странице?
Blizzard
Blizzard, популярный производитель видеоигр, выводит неработающие страницы на совершенно другой уровень. Меню, экран — все битое. И это ты во всем виноват! Бонусные баллы за меню, которое все еще работает и позволяет посетителям повторно участвовать.
eHarmony
Сайты знакомств известны тем, что имеют отличные страницы 404. Eharmony’s — еще один отличный пример того, как простое изображение и дерзкий текст могут превратить разочарованных посетителей в потенциальных клиентов.
Pixar
У этого гиганта анимационных фильмов сегодня одна из самых популярных страниц 404 в Интернете. Печаль из их популярного фильма «Наизнанку» используется для объяснения сообщения об ошибке, используя концепции прямо из фильма. Кроме того, реквизит для красивого дизайна с большим количеством белого пространства!
Distilled
Страница 404 Distilled идет по совершенно иному пути. Вместо того, чтобы искать минимальное количество копий и надеяться на клик, на странице представлены два очень симпатичных мультяшных персонажа, обсуждающих ошибку 404 и то, что посетители могут делать дальше.Такой простой, но такой творческий.
PageCloud
Да, даже разработчикам сайтов нужна страница 404! Страница PageCloud 404 объединяет бренд, продукт и контекст как единое целое. Вы находитесь на неработающей странице, почему бы вместо этого не создать ее? Ах да, на заднем плане тоже облако. Возьми? PageCloud.
airbnb
Вы не можете не чувствовать себя виноватым из-за анимированной девушки airbnb, которая роняет мороженое на этой странице 404. Вы же не хотите сразу уходить, это было бы нехорошо! Почему бы вместо этого не щелкнуть ссылку справки?
9 Gag
9GAG известен смешными видео, изображениями и гифками.Их страница 404 демонстрирует известную сцену из «Криминального чтива», где растерянный Винсент (Джон Траволта) ищет Миа (Ума Турман). Подзаголовок: «Здесь ничего нет» и скачивание нашего приложения, чтобы найти то, что вы ищете, идеально связывает все воедино.
Дэн Вуджер
Популярный иллюстратор-фрилансер, чьи творения использовались такими гигантами, как McDonald’s, добавляет один из своих дружелюбных гамбургеров с флагом жалости на свою умную страницу 404. Бонус? Тонкий призыв к действию, отправляющий посетителей посмотреть его другие иллюстрации.
Email Center UK
Поговорим о том, как высмеивать сообщение «об ошибке». Это ведь должна быть чья-то вина? На странице 404 Emailcenter вас попросят выбрать, кого из их разработчиков следует уволить за ошибку. Кого бы вы ни выбрали, вы увидите забавную групповую картинку и соответствующую копию. Может, в следующий раз добавят редирект и сохранят работу.
IMDb
IMDb — один из крупнейших источников фильмов, телепередач и знаменитостей. Их страница 404 содержит несколько цитат из популярных фильмов, которые были изменены, чтобы соответствовать контексту.Нажмите «Обновить», и вы увидите новую цитату со стратегической ссылкой на дополнительную информацию о фильме.
Orange Coat
Страница 404 Orange Coat содержит продуманную блок-схему, которая поможет «счастливому интернет-путешественнику» найти нужную информацию. Все, что вам нужно сделать, это ответить на их вопросы ДА / НЕТ, и вы отправитесь в путь. Бонус: их URL даже заканчивается на / дорогой-счастливый-интернет-путешественник — гораздо удобнее, чем / error, верно?
LEGO
Страница 404 LEGO — еще один пример, который показывает, насколько ваша страница может быть: привлекательной, эффективной и брендовой, но без чрезмерной сложности.Изображение, строка текста и кнопка для отправки пользователей домой. Вот и все — и каждый раз это заставляет улыбаться.
TSheets
Поскольку они предлагают программное обеспечение для планирования, TSheets решили отметить одну из великих сцен из фильма «Назад в будущее», где доктор Эммет Браун разгоняется до 88 миль в час на Delorean, используя свой конденсатор потока. Как и программное обеспечение TSheet, эта сцена демонстрирует важность точности и эффективности, поэтому вы не запускаете OUTATIME.
Что вы думаете об этих конструкциях? Какой из них твой любимый?
Если вы чувствуете вдохновение, почему бы не узнать, как создать свою собственную страницу 404 сегодня? Это проще, чем вы думаете!
15 лучших примеров 404 страниц в Интернете
Мы все привыкли свободно перемещаться по веб-сайтам и непрерывно прокручивать каналы вниз.Когда что-то идет не так или мы нажимаем на ссылку, которая не работает, последующее сообщение «Эта страница не может быть найдена» может быть более чем разочаровывающим. И именно здесь в игру вступают 404 страницы.
Страница с ошибкой 404 может улучшить или испортить качество обслуживания клиентов. Этот небольшой, но очень важный раздел дизайна вашего веб-сайта может повысить ваши продажи и побудить посетителей к действию. Это может быть разница между тем, как посетитель сайта бросает и покидает ваш сайт, или становится постоянным клиентом и поклонником вашего бренда.
Следующие бренды и дизайнеры показывают нам, как можно использовать классическое сообщение об ошибке в ваших интересах. Они обновили свои 404 страницы, чтобы не только смягчить удар, но и подарить клиентам улыбку, чувство облегчения или даже небольшой смех. Вот некоторые из лучших примеров страницы 404:
Что такое страница 404?
Страница 404 — это онлайн-страница, которая появляется, когда вы нажимаете на ссылку, которая не работает и, следовательно, больше (или фактически никогда не была) доступна.
Это может произойти, если кто-то неправильно наберет URL (или, другими словами, веб-адрес, который отображается в адресной строке браузера). Вы также можете перейти на страницу 404, если компания удалила или переместила определенный контент со своего веб-сайта или внесла изменения в структуру своих постоянных ссылок.
При создании веб-сайта вы можете либо оставить параметр по умолчанию как есть, либо настроить страницу с ошибкой 404. Последнее дает вам возможность создать привлекательный дизайн, который повысит качество обслуживания клиентов.В дополнение к дизайну у вас будет возможность написать дружественное сообщение о бренде, которое предоставит посетителям помощь и указания, которые им необходимы для продолжения просмотра.
01. Pixar — Симпатичная страница 404
Поклонники Pixar, несомненно, оценят эту трогательную страницу 404. В нем представлен персонаж из всеми любимого фильма Inside Out , что помогает укрепить репутацию их бренда и наладить связь с посетителями их сайтов. Использование разговорного языка и знакомого персонажа также делает страницу более человечной, помогая нам общаться и общаться.
Независимо от того, известен ли ваш бренд во всем мире так же широко, как Pixar, вы можете экспериментировать с текстом и изображениями, чтобы создать дружеское, человеческое ощущение. Поиграйте с тёплым и неформальным языком, используя такие слова, как «уууу» и «ой», чтобы установить связь со своей аудиторией.
02. Омлет — страница 404 с юмором
Нет ничего лучше легкого юмора, чтобы облегчить разочаровывающую ситуацию, особенно если все сделано хорошо. Креативная компания Omelet использовала силу сдержанной комедии на своей странице 404, при этом придерживаясь своей темы, связанной с яйцами.
Яркий оттенок красного автоматически указывает на предупреждающий знак, но первоначальная паника уравновешивается комическим сообщением «Эта страница неестественно». Обратите внимание, как они оставили свою строку меню видимой в верхней части экрана, что упростило навигацию по сайту и позволило посетителям сайта продолжить просмотр.
03. Dribbble — Interactive 404 page
Отвлечение — не всегда плохо. Страница с ошибкой социальной сети Dribbble доказывает это. Веселый интерактивный дизайн приглашает посетителей поиграть, на мгновение отвлекая их внимание от того факта, что они не достигли желаемой веб-страницы.
Игра не только затягивает, но и служит формой навигации; щелкнув любое изображение, вы попадете в профиль его создателя, плавно удалив вас со страницы 404. Они также позаботились о том, чтобы включить строку поиска и ссылку на свою домашнюю страницу.
04. Dropbox — Helpful 404 page
Вы не можете не влюбиться в этот дружелюбный, балансирующий на велосипеде дуэт. Нарисованные в невинном иллюстративном стиле, фигуры улыбаются от щеки к щеке и, кажется, делают все немного лучше.Этот замечательный пример включения иллюстраций в веб-дизайн передает ощущение знакомства и доступности, что облегчает разочарование при достижении страницы с ошибкой 404.
Кроме того, Dropbox постарался добавить несколько полезных ссылок. Это позволяет пользователю легко перейти на альтернативную страницу. При создании собственной страницы 404 рекомендуется помочь посетителям вашего сайта, добавив ссылки на самые популярные разделы вашего сайта, такие как домашняя страница, раздел контактов и страница «О нас».
05. The-Artery — фирменная страница 404
Не так много людей, которые будут жаловаться, открыв эту красиво оформленную страницу 404. Модные визуальные эффекты гармонируют с остальной частью веб-сайта этой творческой студии, что обеспечивает удобство просмотра даже при обнаружении неработающей ссылки.
Само изображение движется в ответ на курсор и состоит из интересных элементов. Это увеличивает вероятность того, что посетители сайта даже намеренно задержатся на этой странице немного дольше.Используемый текст также удобен, предлагая вам щелкнуть в любом месте экрана, чтобы легко продолжить просмотр.
06. Lazy Oaf — пример модной страницы 404
Вот страница 404, которая не совсем придерживается условностей. Модный лейбл Lazy Oaf, утверждающий, что он «держит это странно с 2001 года», сдержал свое обещание и здесь — наилучшим образом.
Вместо того, чтобы предоставлять посетителям сайта обычное объяснение того, почему они, возможно, попали на эту страницу с ошибкой, они заменили ее комичными отговорками, грустными смайликами и табличкой с надписью «дерьмо происходит».Однако эта очень откровенная и ярко раскрашенная страница 404 совсем не грустная. Они также обеспечили интуитивно понятную навигацию, сохранив видимую строку меню, а также добавив изображения из своего интернет-магазина на расстоянии короткой полосы прокрутки.
07. Spotify — страница 404 с индивидуальным оформлением
Страница ошибки Spotify помогает укрепить идентичность их бренда за счет модного использования розового цвета тысячелетия и изображений виниловых пластинок. Они сохранили свои панели меню на виду, как в верхнем, так и в нижнем колонтитулах, что упростило навигацию.
Помимо возможности навигации по меню, Spotify также принял дружественный разговорный язык, чтобы предлагать другие полезные страницы. Создавая свой собственный, попробуйте использовать неформальные слова, такие как «может быть», и вопросы, чтобы посетители вашего сайта почувствовали, что с другой стороны находится человек.
08. Julie Bonnemoy — Анимированная страница 404
Это портфолио от дизайнера-фрилансера Julie Bonnemoy — настоящий праздник для глаз. Страница 404 почти идентична дизайну домашней страницы, только с другим текстом.Это означает, что вы можете плавно переходить к любому из других разделов, едва заметив, что вы достигли 404.
Если вы решите оформить свою домашнюю страницу и страницу 404 в аналогичном стиле, вы можете поэкспериментировать с добавлением определенных элементов для создания увлекательный опыт. Поиграйте с анимированными элементами на своем сайте, добавьте прозрачные видеоролики и уникальные векторные иллюстрации.
09. OkCupid — Tranquil 404 стр.
Сеть знакомств OkCupid не пытается скрыть свою главную цель: побудить посетителей сайта подписаться на ее сервис.Хотя этот заметный CTA (призыв к действию) очень прямой по своему подходу, он сочетается с нежным шрифтом и успокаивающими подводными визуальными эффектами, которые плавно перемещаются по экрану. Вместе они образуют общий уравновешенный вид, который далеко не напористый.
Еще один совет — сконцентрируйте дизайн страницы 404 вокруг успокаивающих оттенков, чтобы убедить клиентов, что, хотя страница может отсутствовать, они все еще на правильном пути. Оттенок синего OkCupid вызывает умиротворение и чувство доверия — мудрый выбор для страницы 404.Чтобы подобрать подходящий оттенок для вашего дизайна, стоит изучить психологию цвета.
10. Lego — Friendly 404 page
Lego использовала знакомого персонажа для дизайна своей страницы 404, помогая связать аудиторию с брендом и создать дружескую атмосферу. Их разговорный стиль текста также обнадеживает, сохраняет тон легким и игривым, с восклицательными знаками и повседневным языком.
Если вы также собираетесь создать юмористическую страницу 404, убедитесь, что она функциональна, как это сделала Lego здесь, предлагая альтернативные варианты навигации.Они выделили кнопку с призывом к действию на белом фоне, что делает ее заметной. Сохраняя меню на виду, как в верхнем, так и в нижнем колонтитуле, посетители сайта могут легко переходить на дополнительные страницы.
11. Ueno — страница 404 с креативной копией
Цифровое агентство Ueno создало несколько вариаций своей веселой, беззаботной страницы 404. Анимированного хот-дога, который, казалось бы, спасает свою жизнь, достаточно, чтобы вызвать улыбку на любом лице. Но в сочетании с остроумным текстом слева посетители сайта будут рады, что наткнулись на эту отсутствующую страницу.
Уэно сочетает комедию с точным, минималистичным дизайном. Если вы добавляете юмор на свою страницу 404, убедитесь, что он сбалансирован, поддерживая профессиональный вид, соответствующий принципам дизайна. Использование белого пространства, минимальной цветовой палитры и текстовой иерархии помогает бренду достичь профессионального тона.
12. Figma — Привлечение 404 page
Хотя на первый взгляд это может показаться классическим дизайном «черный текст на белом фоне», это далеко не так. Более пристальный взгляд откроет возможность поиграть с текстом, сделав несколько захватывающей интерактивной игрой и дающей представление о природе самого продукта.
Figma также включает множество различных вариантов навигации, включая меню как вверху, так и внизу страницы. Потенциально разочарованные посетители могут легко получить доступ к нужной странице, щелкнув один из множества пунктов меню.
13. MailChimp — Heartwarming 404 page
Реализуя стиль иллюстрации, идеально сочетающий детский и эмоциональный характер, MailChimp определенно знает, как смягчить несколько удручающую ситуацию при переходе на страницу 404.Они включают большую кнопку, которая выделяется, являясь единственным цветным элементом и расположена прямо посередине страницы.
Однако, что делает эту страницу 404 по-настоящему особенной, так это чувствительность, с которой был создан каждый элемент. Образ осла с головой в норе, отчаянно ищущего страницу, которую искал посетитель, движется сам по себе. Но в сочетании с поэтическим языком и сочетанием шрифтов с засечками и без засечек общий эффект трогает и поднимает настроение.
14. Уэйд и Лета — Странные и чудесные 404 стр.
Этот уникальный дизайн творческого дуэта Уэйда и Леты выделяется из толпы. Как и все остальное в их онлайн-портфолио, оно личное и странное во всех смыслах. Они включили короткую зацикленную гифку, на которой Уэйд болтает в проходе супермаркета и делает жест рукой, который, кажется, не имеет отношения к проблеме страницы 404.
Однако он вызывает улыбку, что, несомненно, является положительным результатом перехода на страницу с ошибкой.Большой текст на вашем лице — это не только тренд веб-дизайна, он также служит для того, чтобы прямо и стильно проинформировать вас о проблеме.
15. Wix — Четкая и лаконичная страница 404
Мы не могли не добавить эту. И не только потому, что на нем невероятно пушистый кот. Хотя этот кошачий друг, безусловно, выигрывает по привлекательности, он также позволяет тонко предположить, что посетитель сайта, возможно, неправильно набрал доменное имя (либо это, либо виноваты какие-то лапы).

Страницы 404: Лучшие 404 страницы

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

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

Интересно и оригинально оформленные 404 страницы

17. Clockwise

Страница 404 и красивая айдентика

Тематичные 404 страницы

Забавные и необычные 404-е

50. Insurance Experiments

404 коты, собаки и разные создания

Красиво иллюстрированные Not Found страницы

Провальное / непреодолимое. Потерянные на 404-ой

Игровые страницы 404

Как сделать 404 страницу: 10 красивых вариантов оформления

Зачем нужна такая страница?

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

Дизайн и структура

Технические аспекты настройки

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

Вариант 1

Вариант 2

Вариант 3

Вариант 4

Вариант 5

Вариант 6

Вариант 7

Вариант 8

Вариант 9

Вариант 10

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

Дизайн страницы с ошибкой 404

Почему возникают ошибки 404?

Почему нужен оригинальный шаблон для страниц с 404?

Каким должен быть дизайн страницы 404?

Важность для SEO

Оформление страницы с 404 ошибкой: примеры

Советы по созданию страницы с 404 ошибкой

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

404 ошибка: как эта страница выглядит на нашем сайте

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

Freepik

Giphy

Mailchimp

Font Awesome

Playstation

IKEA

LEGO

Coursera

Marvel

Kinsta

Coca-Cola

Onesharedhouse

Bubka

F1 News

Blizzard

Android

Bluleadz

Subsign

Chanceupon

Github

Flywheel

Amazon

Логомашина

9gag

Dribbble

Canva

Dropbox

Hugoware