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

Сообщение об ошибке ‘404 Not Found’ говорит пользователям сайта о том, что на сайте, который они пытались вызвать, не удалось найти никакого содержимого. Если вы хотите точно знать, что такое ошибка 404 (также известная как код 404 или http 404), что ее вызывает и как ее избежать, вы можете узнать больше в нашей статье об ошибке ‘Error 404 Not Found’. Какие же способы борьбы с этим сообщением об ошибке нашли компании? Многие сайты доказали, что можно превратить ошибку 404 в положительный момент, создав оригинальную и забавную страницу 404 вместо обычного и стандартного отображения ошибки. На 20 вдохновляющих экспертных примерах мы покажем вам, как вы можете сделать то же самое.

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

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

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

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

• Кратко объясните посетителю, что произошло: не каждый пользователь знает, что означает ошибка 404. Вместо того чтобы просто написать «404 Not Found» или «Ошибка 404: страница не найдена», вы должны кратко и просто объяснить, почему пользователь попал на эту страницу. Это можно сделать в легкомысленной, забавной форме — часто креативные сообщения об ошибке 404 предполагают, что пользователь навсегда затерялся в огромном, пустом мире Интернета, или что он был слишком медленным, и содержимое веб-страницы было перемещено.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Онлайн-школа программирования Code School придерживается темы космоса, представив на своей странице ошибок сценарий запуска шаттла. Анимированный запуск проходит не слишком успешно: кусок веревки, закрепленный в земле внизу, удерживает космический челнок. Появляется код 404 с классической цитатой «Хьюстон, у нас проблема».

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

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

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

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

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