Разное

Красивая страница 404: Примеры 404 страниц: ТОП-155 самых прикольных, красивых, интересных, креативных примеров оформления, дизайна и текста страниц 404 ошибки

09.09.1987

Содержание

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

9 мин — время чтения

Дек 24, 2020

Поделиться

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

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

Почему пользователи видят страницу 404

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

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

  • 404 Not Found
  • 404 Error
  • HTTP 404 Not Found
  • The page cannot be found
  • The requested URL was not found on this server

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

  • На ваш сайт поставлена некорректная ссылка с другого сайта. Например, страница с тарифами на нашем сайте имеет вид https://seranking.com/ru/oplata-za-proverku.html. Допустим, «u» в адресе страницы заменили на «y» — ссылка будет указывать на несуществующую страницу https://seranking.com/ru/oplata-za-proverky.html 
  • На вашем сайте стоит некорректная внутренняя ссылка. Например, вебмастер или контент-менеджер допустили ошибку и забыли указать .html в конце URL-адреса https://seranking.com/ru/oplata-za-proverku.html. В результате перейдя по ссылке https://seranking.com/ru/oplata-za-proverku, пользователь увидит страницу 404.
  • Пользователь может сам некорректно ввести URL в адресную строку браузера.
  • Иногда контент запрашиваемой страницы могут по какой-либо причине скрывать от пользователей и перенаправлять их на 404 страницу.
  • Наконец, бывает, что страница с таким адресом существовала, но вы в какой-то момент ее удалили. При этом пользователь пытается открыть страницу, например, из закладок браузера или по ссылке с другого сайта. Появление таких страниц — естественный процесс в жизни сайта, хоть их наличие и нежелательно. Найти 404 страницы можно в процессе аудита сайта.

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

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

Хорошая и плохая страница 404

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

Для начала взглянем на рекомендации Google для страниц 404: 

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

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

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

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

Какой должна быть хорошая страница 404?

Что же из себя представляет хорошая страница 404? Именно то, что процитировано в справке поисковика.  

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

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

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

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

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

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

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

Согласитесь, эти ребята хорошо покреативили и об этом хочется рассказать друзьям.  

Ошибки при создании страницы 404

Кроме плохой информированности страницы 404 нужно помнить и о других проблемах.

Перенаправление на главную

Страница 404 это страница 404 🙂 Никаких перенаправлений с нее быть не должно, за исключением случаев, описанных ниже. Поисковый робот должен четко понимать, что страница не найдена (в случае ответа 404) либо удалена (в случае ответа 410). Больше про ответы сервера в технической документации — https://developer.mozilla.org/ru/docs/Web/HTTP/Status. 

Таким образом, когда вы перенаправляете бота на главную страницу, вы вводите его в заблуждение. Не рекомендует так делать и сотрудник Google Джон Мюллер:

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

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

Ответ сервера, отличный от 404

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

Это в корне неверно, так как приводит к ряду проблем:

  • ответ сервера 200 позволяет роботам просканировать и проиндексировать страницу, если не существует других запретов; 
  • вместо сообщения о том, что страница не существует, она будет обработана.

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

Возвращаясь к кодам ответа севера, важно понимать следующее:

  • При использовании ответа сервера 404 поисковый бот еще некоторое время будет посещать страницу в надежде на то, что она вернулась и код ответа 404 был получен случайно — ведь в жизни сайта случается всякое. Но через время он поймет, что страницы не существует, и она будет удалена из индекса.
  • При использовании ответа сервера 410 страница будет удалена быстрее. Хотя обычно вебмастера не сильно переживают по этому поводу и используют 404 код.
  • Ответ сервера 200, как писалось выше, не решает задачу сообщить боту, что страницы больше нет. Ведь ответ сервера 200 — это ответ существующих страниц сайта.  
  • В случае когда страница отдает ответ сервера 200, но на самом деле страницы не существует, могут появляться Soft 404 ошибки. Больше про Soft 404 описано в справке Google. А здесь сотрудник Google John Mueller также комментирует возможные ситуации, при которых появляется Soft 404.
  • Ответ сервера 301 используется в случае перенаправления несуществующего URL-адреса на другой URL.

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

187 views

🔥 Большой выбор шаблонов 404 страниц — WEB-EXITO.ru

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


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

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

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

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

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

Номер кода состоит из трех цифр:

  • «4» — означает, что загрузка протекает слишком долго;
  • «0» — символ синтаксической неточности;
  • «4» — точный признак сбоя, а именно – отсутствие данных по этому адресу.
Интересно знать:
Когда ресурс открывается корректно, в браузере со стороны сервера срабатывает код «200 ОК».

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

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

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

Каждый администратор или веб-программист без сложностей способен создать страницу 404, которая не просто сгладит острые углы неловкости, но и продолжит рекламировать ваши услуги. 404 может содержать контакты или поисковую строку. Фраза: «Звоните нам сейчас по номеру — и мы предоставим Вам скидку 15%» более оптимистичная, чем «Не удалось найти ни одного результата», которую автоматически предлагает Internet Explorer.

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

Не дайте гостю потерять первичный интерес к тому, что искал и рассчитывал найти у вас. Развлеките его, однако не применяйте стандартное «Упс! Что-то пошло не так!». Банальные «оправдывания-404» стали для потенциальных клиентов еще более неприятными, чем «Браузер не может найти Web-ресурс».

И главное, помните: первый в мире сервер располагался в комнате № 404, поэтому данная страница – не просто вынужденная необходимость, а целое историческое событие в мире IT.

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

Выбирайте и скачивайте шаблоны страниц 404 абсолютно бесплатно на нашем сайте web-exito.ru

Читать текст далее…

Шаблон 404 страницы — кулак

Шаблон 404 страницы — кулак выполнен на черном фоне с изображением по центру виде кулака с татуировкой «404». Шаблон 404 страницы содержит: Изображение; Шрифт: Open+Sans; Ссылку на главную страницу; Написано на …

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

Простой шаблон 404 страницы

Простой шаблон 404 страницы написан на чистом HTML и CSS. Так же шаблон имеет мобильную адаптацию. На странице 404 присутствует: Извините, страница не найдена; Ссылка «Вернуться на главную». Скачивайте простой …

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

🔥 Страница 404 — грустная луна

Простая, серая 404 страница ошибки с грустной луной, которая адаптивна на любом устройстве. Скачивайте серую 404 страницу ошибки бесплатно и пользуйтесь на здоровье! С Уважением, команда Web-exito.ru

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

🔥 Желтая 404 страница ошибки

Простая, желтая 404 страница ошибки со злобным смайлом, которая адаптивна на любом устройстве. Скачивайте желтую 404 страницу ошибки бесплатно и пользуйтесь на здоровье! С Уважением, команда Web-exito.ru

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

🔥 Синяя 404 страница ошибки

Простая, синяя 404 страница ошибки, которая адаптивна на любом устройстве. Скачивайте синюю 404 страницу ошибки бесплатно и пользуйтесь на здоровье! С Уважением, команда Web-exito.ru

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

20 лучших бесплатных шаблонов страниц с ошибкой 404 2022 – лучшие темы, плагины и хостинг для WordPress

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

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

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

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

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

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

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

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

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

Colorlib 404 Customizer (плагин для WordPress)

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

Подробнее / Скачать

Colorlib 404 v1

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

Colorlib 404 v2

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

Colorlib 404 v3

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

Colorlib 404 v4

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

Colorlib 404 v5

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

Colorlib 404 v6

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

Colorlib 404 v7

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

Colorlib 404 v8

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

Colorlib 404 v9

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

Colorlib 404 v10

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

Colorlib 404 v11

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

Colorlib 404 v12

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

Colorlib 404 v13

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

Colorlib 404 v14

Чтобы сохранить крутые вибрации во всех частях вашего сайта, вы можете выбрать один из наших бесплатных шаблонов страниц с ошибкой 404. Они бывают всех форм и размеров, чтобы ваши пользователи, читатели и случайные посетители сайта сохраняли свое присутствие, возвращаясь на вашу домашнюю страницу или даже посещая ваши учетные записи в социальных сетях. Вы можете добиться фантастических результатов с помощью гибкого, мобильного и простого в использовании инструмента, такого как шаблон страницы Colorlib 404 v15. Скажите «УПА!» необычным способом, и они продолжат просмотр, перейдя в нужный раздел вашей страницы.
Подробнее / Скачать

Colorlib 404 v15

Мы всегда предлагаем вам всевозможные бесплатные шаблоны для ваших сайтов. Некоторым людям нравится сводить все к минимуму, в то время как другим нравятся дополнительные анимации и специальные эффекты. Если вы попадаете в последнее ведро, у нас есть впечатляющий и привлекающий внимание бесплатный шаблон страницы ошибки 404 для вас. Он имеет яркие цвета и кнопку призыва к действию (CTA), чтобы направлять ваших пользователей обратно на вашу домашнюю страницу. Более того, вы также заметите, что кнопки социальных сетей включены в веб-дизайн для вашего удобства. Кроме того, укажите (настройте), почему они видят страницу с ошибкой.
Подробнее / Скачать

Colorlib 404 v16

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

Colorlib 404 v17

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

Colorlib 404 v18

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

Colorlib 404 v19

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

Colorlib 404 v20

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

Создайте страницу с ошибкой 404

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

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

19 креативных страниц 404 с продуманным дизайном

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

Риз Киршнер

Менеджер по контент-маркетингу

Ничего не найдено.

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

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

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

Забавные 404 страницы

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

Томас Боск


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

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

Polo Garcia

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

Даже белка в конце концов поворачивается к экрану, как будто спрашивает посетителей сайта — что вы здесь делаете? Polo вызывает смех, но поддерживает плавность взаимодействия с пользователем, включая очевидную кнопку «отвези меня домой».

Шалом Осахон

Дизайнер продукта и разработчик Webflow Шалом Осахон напоминает вам не паниковать и сравнивает страницу 404 с пожарной тревогой.

‍

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

Mill 3 Studio

Mill 3 Studio отлично передает ощущение приземления на странице 404 с изображением потерянного и сбитого с толку Джона Траволты.

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

Креатив 404 страницы

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

Textio

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

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

Dribbble

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

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

DFY

Вместо «страница не найдена», страница 404 DFY сочетает «дизайн не найден» с космонавтом, который медленно уплывает.

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

Страницы 404, посвященные бренду

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

D&D Beyond

D&D Beyond напрямую обращается к своей аудитории, любящей Dungeons and Dragons, с сообщением об ошибке, в котором утверждается, что халфлинг мог украсть то, что ищут посетители веб-сайта, и спрятал это в другом мире.

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

Spotify

Spotify выдает сообщение об ошибке, похожее на плейлист «404 и разбитое сердце» рядом с вращающейся пластинкой.

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

OK Micah

Если мы немного заблудимся на сайте OK Micah, «горячий мужчина» мягко направит нас обратно домой.

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

Цвет года

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

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

Дайте волю своему творчеству в Интернете

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

Начните бесплатно

Подпишитесь на участие в программе предварительной оценки Webflow

Спасибо! Теперь вы подписаны!

Ой! Что-то пошло не так при подписке.

Начните бесплатно

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

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

Куало

Куало радует нас фирменной версией олдскульной видеоигры Space Invader.

Вместо того, чтобы использовать немедленный призыв к действию (CTA), чтобы отправить нас домой, Куало призывает нас отомстить пиксельным космическим захватчикам, на которых написано «куало». Эта полнофункциональная игра станет развлекательным сюрпризом. Мы можем продолжать играть до тех пор, пока у нас не закончатся жизни, после чего появится сообщение «Вы проиграли!» появляется сообщение. Но снова Kualo возвращает нас обратно, обещая скидку на их хостинг для всех, кто наберет более 1000 баллов.

Nouvelle

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

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

Feldman Studio

Перед тем, как щелкнуть мышью, подготовьтесь — страница ошибки 404 Feldman Studio дает вам всего 3 секунды, чтобы подготовиться к игре.

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

MAD

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

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

Kffein

404-страничный дизайн Kffein передает атмосферу интернет-кошки «Я могу есть чизбургер» с ливнем котов в пузырьках, падающих и подпрыгивающих вокруг.

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

Клонируемые страницы 404

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

Актив

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

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

Игра с анимацией

Шаблон страницы 404 Бенджамина Ле Гоффа объявляет, что мы потерялись в космосе, с сообщением: «Ой, космический корабль ушел без вас… Страница, которую вы запрашивали, не может быть найдена».

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

404 анимированная вешалка с ручкой

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

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

Не пренебрегайте своей страницей 404

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

24 февраля 2022 г.

Вдохновение

Поделиться

Рекомендуем прочитать

Вдохновение

Вдохновение

Вдохновение

Подпишитесь на Webflow Inspo

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

Электронная почта

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

Все готово, следите за нашей следующей рассылкой!

К сожалению, адрес электронной почты недействителен. Попробуйте еще раз!

Подробнее о Designer

Designer

Сила CSS, HTML и JavaScript в визуальном холсте.

Взаимодействия

Визуально создавайте взаимодействия и анимацию веб-сайта.

Подробнее о взаимодействиях

CMS

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

Подробнее о CMS

Электронная торговля

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

Подробнее об электронной торговле

Редактор

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

Подробнее о редакторе

Хостинг

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

Подробнее о хостинге

Бесплатно, пока вы не будете готовы к запуску

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

Начните работу — это бесплатно

Трансформация процесса проектирования в

20+ потрясающих примеров 404 страниц (2022)

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

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

Посадка на «страницу не найдена» может реально свести посетителей с ума.

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

Содержание

  • Что такое страница 404 и зачем она нужна?
  • 1. Bluegg — Игра слов
  • 2. Дрифт — встраивайте причудливые видео
  • 3. 9Gag — Включить абсурдные активы
  • 4. Маховик — Минималистичный и тонкий юмор​
  • 5. Slack — смешно, потому что странно
  • 6. Дэн Вуджер. Иногда достаточно милой иллюстрации.
  • 7. Team Coco — Глупые гифки
  • 8. Comedy Central — истеричный, но фирменный
  • 9. NMFH — черный юмор в лучшем виде
  • 10. HBO – используйте внутренние шутки​
  • 11. The New Yorker – Воспользуйтесь преимуществами того, что уже работает​
  • 12. Blizzard — Удивите свою аудиторию
  • 13. eharmony — Отнеси тему к своему сервису
  • 14. Distilled — Акценты забавны
  • 15. Emailcenter — сделайте его личным
  • 16. IMDB — Быть смешным требует времени и усилий
  • 17. Orangecoat — добавьте визуальные диаграммы
  • 18. Github — шутки
  • 19. CSS-трюки — меньше да больше смеха
  • 20. Mashable – Забавный взгляд на потерянное
  • 21. Taco Bell — Еще один глупый смех
  • 22. Стив Ламберт — Признайте неловкость
  • 23. SHOCK — Шаблон страницы 404 для продажи

Что такое страница 404 и зачем она нужна?

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

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

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

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

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

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

Вот 23 отличных примера хорошо выполненных 404 страниц.

1. Блюгг — Игра слов

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

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

2. Дрифт — Встраивайте причудливые видео

Элемент неожиданности является ключом к успешному предложению новых 404-х.

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

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

3. 9Gag — Включить абсурдные активы

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

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

4. Маховик — Минималистичный и тонкий юмор

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

5. Slack — это смешно, потому что странно

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

6. Дэн Вуджер — Иногда достаточно милой иллюстрации

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

Вуджер ловко связывает посетителя со своим портфолио строкой «Вероятно, вы искали мою иллюстрацию…»

Несмотря на то, что сайт Конана О’Брайена явно содержит некоторые ошибки и показывает чистый HTML, он не перестает удивлять, используя серию гифок, чтобы пролить свет на затруднительное положение Энди и Конана.

8. Comedy Central — истеричный, но фирменный

Comedy Central был достаточно умен, чтобы отобразить несколько персонажей из своих шоу и приписать каждому из них цитату, связанную с 404 страницей. Например, Тревор Ноа из The Daily Show появляется с растерянным лицом и цитатой, относящейся к сегменту «Момент дзен» из его шоу.

9. NMFH — черный юмор в лучшем виде

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

10. HBO — использование внутренних шуток

HBO 404 — один из моих любимых. Он показывает, как использовать внутренние шутки, чтобы вызвать смех. В этом случае они добавили изображение «Умерь свой энтузиазм» за буквами 404 и добавили текст: «Похоже, эта ссылка красивая, красивая, довольно неработающая». Любой, кто видел шоу, сразу понял это.

11. Житель Нью-Йорка – Воспользуйтесь тем, что уже работает

Пример New Yorker показывает, как взять и без того забавный актив бренда, связанный с потерей, и разместить его на странице 404. Мультфильм из выпуска 2011 года, на котором изображена мышь с GPS — идеальный мультфильм для использования на странице «страница не найдена».

12. Blizzard — Удивите свою аудиторию

Вот еще один дизайн страницы 404, оригинальный и неожиданный. У Blizzard Entertainment есть разбитое окно, меню, которое, кажется, упало, и обвинение: «Благодарю (поздравляю). Вы его сломали».

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

13. eharmony — Связать тему с вашим сервисом

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

14. Дистиллированный — Акценты забавны

На странице 404

Distilled есть комичная британская беседа, наполненная такими фразами, как «старый приятель» и «взорван». Они называют свой 404 «Четыреста четвертое сообщение об ошибке», что само по себе забавно.

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

Distilled сами британцы, что делает всю страницу еще более глупой. Это напомнило мне о наброске «Четыре йоркширца» Монти Пайтона, который всегда приводит меня в ярость.

15. Центр электронной почты — сделайте его личным

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

16. IMDB — Быть смешным требует времени и усилий

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

17. Оранжевое пальто — добавление визуальных карт

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

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

18. Github — шутки

 Аудитория Github — разработчики-гики. Их вдохновленная «Звездными войнами» сцена с талисманом Octocat и цитатой «Это не та веб-страница, которую вы ищете» является подходящим посланием для их аудитории. Обратите также внимание на то, как размещение панели поиска в центре обеспечивает отличное решение для навигации с этой страницы.

19. CSS-трюки — меньше да больше смеха

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

20. Mashable — Забавный взгляд на потерянное

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

21. Taco Bell — Еще один глупый смех

Taco Bell известен как бренд, умеющий пошутить в социальных сетях. Их страница 404 также вызывает смех с ее анимацией тако и глупым текстом: «СТРАНИЦА, КОТОРУЮ ВЫ ИСКАЛИ, НЕ СУЩЕСТВУЕТ (если только вы не искали страницу с анимацией тако, спотыкающегося и буквально проливающего бобы. Если это случае, он точно существует, и вы его точно нашли.)’

22. Стив Ламберт — Признайте неловкость

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

23. ШОК — Шаблон страницы 404 для продажи

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

ШОК минимальная страница скоро появится, которая имеет 6 стилей фона на любой вкус.

Заключение

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

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