Страницы 404 примеры: 80+ великолепных страниц ошибки 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 на странице с ошибкой.

Оформление страницы 404 — примеры нестандартных вариантов оформления

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

Советы по дизайну

Универсальной формулы для оформления технической страницы нет. Её нужно разрабатывать с учётом особенностей проекта. Черпать идеи можно у креативных конкурентов.

Задачи, которые решает page 404:

1. Объясняет, что случилось. «У нас сгорел сервер. Пожарные и системные администраторы уже в пути, скоро здесь будет контент».
2. Рассказывает о причинах. «Наш сотрудник Василий мониторит битые ссылки, но в этот раз недоглядел. Придётся снизить ему зарплату».
3. Даёт советы по дальнейшим действиям. «Не переживайте, это случается со всеми. Ниже мы разместили 2 кнопки. Перейдите на главную или используйте поиск».

Создавать нестандартный дизайн Not Found надо на этапе проектирования структуры онлайн-проекта.

Рекомендации по оформлению:

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

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

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

Пример 1 — Ueno

Компания помогает бизнесу выстраивать отношения с клиентами. Ueno с юмором отнеслись к разработке структуры page 404. Анимация бегущего хот-дога завораживает. Над текстом маркетологи тоже потрудились: «Вы нашли её и выиграли стиральную машину и сушилку». Ниже размещена ссылка перехода на главную с текстом «На самом деле, нет». Этот пример демонстрирует нестандартный подход — компания по философски относится к ситуации. Ueno предлагают последовать за хот-догом и сбежать отсюда в другие разделы.

Пример 2 — Canva

Популярный сервис для разработки графики — от логотипов до полноценных макетов — позаботился о посетителях. Юзеры, которые потерялись в «дебрях» интерфейса, могут собрать пазл или вернуться обратно. Примечательно, что Canva сделал раздел в другой стилистике. Хедера и футера нет, зато есть два призыва к переходу на главную. Сервис не забывает давить на психологию: «Попробуйте разобраться». Почти все захотят сначала пройти квест и только потом уйдут решать свои проблемы.

Пример 3 — Airbnb

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

Кстати, если перезагрузить вкладку в браузере, лакомство больше не падает. Скорее всего, Airbnb запоминает, что посетитель здесь уже был и не показывает «страшную» картинку снова.

Пример 4 — Agnes Lloyd-Platt

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

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

Пример 5 — Android

Page 404 на официальном сайте операционной системы для смартфонов раньше была оформлена очень круто. Юзеры могут попробовать силы в веселой игре. Принцип простой: нужно запускать пончики, бобы и зефирки в стеклянные трубы. У игроков есть 5 попыток до обнуления очков.

К сожалению, протестировать геймификацию онлайн уже не получится. На сайте Андроида её больше нет. Теперь там красуется стандартная надпись в стиле «Хьюстон, у нас проблемы».

Пример 6 — PayJunction

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

В этом проекте даже есть пасхалка (бонус). На одной из планет установлен флажок с логотипом PayJunction. Если захотите зайти посмотреть вживую — подключитесь к VPN с американской локацией, сервис заблокирован в России и Украине.

Пример 7 — Spotify

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

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

Пример 8 — Superrb

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

Текст и Сall to action — стандартные. В духе «Здесь ничего нет, возвращайтесь в начало».

Пример 9 — Goooders

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

Пример 10 — Romain Avalle

Ромен занимается веб-разработкой. Он креативно подошел к оформлению портфолио и не побоялся экспериментировать с темным интерфейсом. В центре 404 — объёмный текст. При перемещении курсора он растягивается на всю длину. Если поместить фокус в центр цифры 0, магия прекращается.

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

Пример 11 — Andrea Reni

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

Пример 12 — Dribbble

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

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

Пример 13 — Kommigraphics

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

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

Пример 14 — Aviasales

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

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

Пример 15 — Seegno

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

«Тупик — хорошее место для разворота». Именно так думают посетители и возвращаются на главную.

Мы проанализировали 15 крутых примеров дизайна страницы 404. Надеемся, они вдохновили вас на разработку нестандартного варианта. Специалисты IDBI создадут страницы Not Found любой сложности. Свяжитесь с нами любым удобным способом.

Идеальная страница 404 ошибки, или как удержать пользователя на сайте? / Хабр

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

В качестве вступления отметим, что страница 404 «Не найдено» (404 Page Not Found) – это один из кодов состояния HTTP, принятых Консорциумом Всемирной паутины (W3C) в 1992 году. Для тех, кому интересно значение цифр 404, вкратце расскажем.

1. Первая «4» означает, что произошла ошибка со стороны клиента. Такой ошибкой может быть неверно написанный URL или запрос несуществующей страницы. В свою очередь, первая «5» значила бы ошибку со стороны сервера.
2. Цифры «04» — определяют конкретную ошибку Not Found из группы 4хх. Среди других ошибок из этой группы — 400 Bad Request, 401 Unauthorized, 402 Payment Required, 403 Forbidden и так далее.

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

• был изменен URL;
• страница была удалена;
• ошибка в написании ссылки;
• сайт на данный момент находится оффлайн;
• сайт больше не существует и т. д.

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

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

• удобный для пользователя дизайн, чтобы не отпугнуть его и удержать на сайте;
• полезный контент, который бы предоставил пользователю ответ на вопрос «что мне теперь делать?» и дал простые и ясные инструкции;
• принятие во внимание вопросов SEO.

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

1. Будьте любезны с посетителями.Они попали на эту страницу не по своей вине. Постарайтесь выразить свое сожаление и готовность помочь.
2. Не углубляйтесь в технические детали. Термин «ошибка 404» сам по себе уже в достаточной мере техничен и в то же время понятен большинству пользователей. Нет никакой необходимости отпугивать посетителей любой другой специфической информацией о причинах этой ошибки. По сути, необязательно даже использовать цифры «404», достаточно просто объяснить суть проблемы.
3. Предложите пользователям проверить написание ссылки. Если они вводили адрес ссылки самостоятельно, то вполне вероятно могли допустить ошибку.
4. Придерживайтесь единого стиля сайта. Дизайн страницы 404 по оформлению и по ощущениям должен быть выдержан в стиле Вашего бренда, чтобы у пользователей не возникло заблуждения, что они попали на какой-то другой сайт.
5. Страница ошибки 404 не должна выглядеть как обычная страница. Ваши посетители должны ясно видеть, что страница не была найдена и не содержит какого-либо контента. Поэтому не стоит наполнять ее слишком большим количеством текста и ссылок.
6. Небольшая порция юмора никогда не помешает. Довольно часто 404 страница становится для дизайнеров и разработчиков платформой для выражения своих креативных и юмористических идей. Вместо того чтобы пользователи быстро закрывали ненайденную страницу, лучше удержать их от закрытия сайта, заинтересовав забавно и изобретательно выполненной страницей.
7. Будьте полезными и предоставьте ссылки на возможные совпадения. Если пользователи оказались на ненайденной странице, они, вероятно, что-то искали. Так помогите же им это найти. Разместите на странице меню или ссылки на недавно перемещенные страницы. Или почему бы не дать ссылки на самые популярные страницы Вашего сайта? Либо на самый новый и актуальный контент. Так или иначе, пользователи должны быть не более чем в одном клике от перехода на какую-либо другую страницу сайта. И, конечно же, всегда давайте ссылку на главную страницу.
8. Добавьте строку поиска. Чтобы не потерять своих посетителей, позвольте им найти то, что они искали, оказавшись на странице ошибки.
9. Обеспечьте способ отправить отчет об ошибке. У пользователя всегда должна быть возможность отправить вам сообщение об ошибке, если он пожелает. Это поможет Вам узнать о каких-либо внутренних недочетах сайта. Еще лучшим решением для отслеживания проблем на сайте станет автоматическое уведомление. А если произойдет внезапный всплеск 404-х ошибок, полезным будет мгновенное уведомление. Это позволит исправить проблему в режиме реального времени, пока она еще релевантна.
10. Позаботьтесь о вопросах SEO. Для оптимизации сайта важно максимально сократить количество внутренних ссылок на 404-е страницы, а еще лучше вовсе исключить возможность формирования некорректных URL адресов, ведущих на страницы 404. Инструменты для вебмастеров помогут Вам отслеживать ошибки на сайте, в том числе и ошибки с кодом 404 Not found. Более того, эти инструменты помогут Вам понять, откуда берутся ошибки и как они формируются – ошибка в URL ссылки на сайте, либо это атака конкурентов.

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

    Яндекс:

    Также рекомендую ознакомиться с официальной информацией о страницах 404 от поисковых систем: Google — здесь и Яндекс — здесь.

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

дизайн и текст для 404 страницы

Отдайте свои заботы о хорошем контенте на сайте в наши руки

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

Подпишись на рассылку и получи книгу в подарок!

Ошибка 404 или Not Found («не найдено») — код ответа сервера на несуществующую страницу на сайте.

Как это работает?

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

В нашем случае код ответа- 404. Ответ сервера выглядит следующим образом:

Причины 404 ошибки

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

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

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

Как сделать 404 страницу?

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

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

Как сделать страницу 404? Необходимо просто прописать в данный файл следующую инструкцию:

ErrorDocument 404 //semantica.in/404.php
Всё довольно просто!
Страница 404 для сайта: общие рекомендации
Во первых, 404 страница должна быть! Страница 404 ошибки безусловно должна присутствовать на каждом сайте.
В небольших проектах уменьшить вероятность возникновения 404 ошибки можно используя программу Xenu’s Link. С её помощью вы можете отыскать все битые ссылки на сайте и выполнить следующие действия:
если ссылка страницы была изменена, необходимо изменить URL ссылки на новый;
если страницы уже не существует — просто удаляем ссылку.
 
 
К сожалению, Xenu не спасает от пользователей, которые могут неправильно ввести текст ссылки и не застрахует от битых или неактуальных внешних ссылок, которые введут на страницы вашего сайта.
 
Оформление 404 страницы
По-умолчанию страница 404 ошибки представлена в виде пустой страницы с надписью 404 Not Found, также возможна ситуация с редиректом на страницу хостинга, услугами которого вы пользуетесь.
Значительной доле пользователей всемирной паутины не достаточно предоставить страницу в таком виде — они просто не поймут что произошло, почему сайт вдруг исчез и переслал работать. Это означает только одно — потеря клиента. Но не будем опускать руки и рассмотрим эту ситуацию под другим углом. Как оформить страницу 404 и удержать гостя на сайте?
Текст для 404 страницы
Скажите “Нет!” технической информации!
Большинству пользователей знаком термин “404 ошибка”, но не стоит углубляться в причины её возникновения и давать дополнительные технические рекомендации. Донесите пользователю суть ошибки.
Предоставьте полезный контент!
Необходимо дать полезную информацию в сложившейся ситуации и натолкнуть пользователя на действие которое поможет решить проблему.
Это можно реализовать разными методами:
разместить меню сайта. Не стоит забывать о ссылке на главную страницу сайта
разместить полезные ссылки- это может ссылки на популярный или новый контент.
Разместить строку поиска по сайту- для того чтобы пользователи нашли то что они искали.
В оформлении 404 страницы важно не переусердствовать — не стоит слишком нагружать ее контентом.
Дизайн страницы 404 
Визуальное оформление 404 страницы не должно выбиваться из общего  дизайна.
Сделайте 404 страницу изюминкой сайта! Добавьте креативности страницы с ноткой юмора — это привлекает и удерживает посетителей.
В сети множество примеров того, что значит оригинальная и красивая страница 404. Я не поленился и нашел для вас несколько: 
 
 
 
Не  стоит забывать!
1. Редирект на 404 страницу должен осуществляться без изменения URL страницы.
2. Следите за битыми ссылками на вашем сайте!
В совокупности выполнение этих рекомендаций даст положительный эффект. Не рассматривайте 404 страницу как техническую константу сайта и даже в сложившейся неприятной ситуации она послужит важном инструментом в привлечении посетителей.
 
И напоследок вот вам пример того, как мы оформили страницу 404 для своего сайта:
Страницы 404 / Хабр
404 страница. Это место для пасхалок, дурачества и креатива создателей сайтов. Про 404 ошибку есть даже выступление на TED.
Первая «4» — означает, что ошибка на стороне клиента, «04» — означает конкретную ошибку «Not Found».
Кому в пятницу нечего делать или кто в поисках вдохновения — добро пожаловать под кат, там подборка лучших (и худших) 404 страниц.
Your browser does not support HTML5 video.
Начнем с самых животрепещущих сайтов, а потом перейдем к «попсовым».
Роскомнадзор
PornHub
Старая версия 404 Хабра
Новая версия 404 Хабра
Virgin.com
Google
YouTube
Facebook
Reddit.com
Amazon.com
Vk.com
Linkedin.com
Imgur.com
Aliexpress.com
Bing.com
Stackoverflow.com
Github.com
Dropbox.com
Craigslist.org
Dribbble.com
Awwwards.com
Csswinner.com
Coolhunting.com
Codyhouse.co
Mailchimp.com
Slack.com
Mashable.com
Bloomberg.com
Airbnb.com
Bitly.com
МГУ, психфак
Разговаривающая страница 404.
Еще подборки
404 pages from popular sites — Design Inspiration, Muzli, 2017
Anatomy of a 404 Error Page, Envato, 2016
Лучшие 404 страницы, Tproger, 2015
404 – страницы, ради которых стоит заблудиться на сайте, cossa, 2015
Идеальная страница 404 ошибки, или как удержать пользователя на сайте?, Habrahabr, 2014
Лучшие примеры 404 страницы, seo-design, 2013
Лучшие 404 страницы Рунета, oakhill, 2012
Лучшие примеры ошибки 404, netpeak, 2012
50 прикольных страниц ошибки 404 , Дежурка, 2009
Интерактивные
Играем в Pacman
Рушим сайт
Суслик
Спасаем леммингов
Поймай кота
P.S.
 Ну и напоследок
А какая ваша любимая 404 страница?


 Какая 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 страницу, увидев которую, посетителям не захочется покидать ваш сайт.
опупенное оформление + 10 примеров
Все, кто хоть раз пользовался интернетом, попадали на страницу “ошибка 404”. И наверняка, видя её у себя на экране, просто брали и уходили с этого сайта.
Особо настойчивые пытались разобраться в ссылке и понять, что в ней не так. Но из этого скорее всего тоже ничего хорошего не выходило.
Поэтому сейчас мы будем разбираться, как сделать 404 страницу, и как же она должна выглядеть, чтобы цеплять посетителей и даже продавать Ваш продукт.
Почему она появляется
Данная ошибка бывает у всех, даже если Вы мне скажете, что у Вас её нет. Она появляется, когда клиент пытается зайти на несуществующую страницу. Без дизайна она выглядит вот так:
Стандартная ошибка 404
Теперь давайте определимся, почему же посетитель сайта может видеть такую ошибку. А все происходит потому что:
Ссылающаяся сторона совершила ошибку при указывании информации на Вас;
Пользователь неправильно ввёл ссылку;
Страница (ссылка) была удалена;
Страница (ссылка) была изменена.
Ещё раз, если Ваш сайт состоит из 10+ страниц, то скорее всего у Вас уже есть эта ошибка, и Вы о ней просто не знаете.
Кстати, для поиска битых ссылок, как минимум, в рамках сайта, можете воспользоваться бесплатной программой Xenu. Делает всё быстро и легко.
Чем грозит
Как Вы поняли, от этого не уйти. Такие коллапсы будут, если не по Вашей вине, то по вине клиентов.
Поэтому нужно быть готовым к этому, чтобы сохранить и приумножить свой честно заработанный трафик, который на первых порах так дорог.
А если Ваша страница не будет следовать дальнейшим рекомендациям, то посетители будут уходить с сайта, расстраиваться, и их уровень доверия к Вам будет падать. 
Всё это ведёт не просто к отсутствию дополнительных денег, а к убыткам и потерям, что я могу представить только в страшном сне.
НАС УЖЕ БОЛЕЕ 32 000 чел.
ВКЛЮЧАЙТЕСЬ
Как Сделать такую страницу
Если Вы задались вопросом, как сделать страницу ошибки 404, то хочу Вас поздравить, она у Вас уже есть (кроме landing page).
Потому что страницы ошибок для сайтов по умолчанию предусмотрены при работе в любой CMS. Конечно, дизайн её на данный момент оставляет желать лучшего.
404 для сайта – это такая же страница, как самая обычная другая страница Вашего сайта.
И чтобы понять, как создать правильную и уникальную 404 страницу с индивидуальным дизайном, Вам нужно зайти в корневую папку своего сайта, найти там файл .htaccess (если его нет, то создайте сами).
И просто в любое место с новой строки вписать – ErrorDocument 404 http://ВАШ_САЙТ/404.php
Как сделать
Данная ссылка будет являться указанием пути к файлу, который будет показывать Ваш сайт при возникновении ошибки.
Больше ничего не надо, всё очень просто! И если вдруг не хотите расширение .php, то можете сделать .html, в глобальном смысле разницы нет.
как оформить
Начнем с того, что дизайн страницы 404 должен быть. А он должен цеплять и быть в стиле общего оформления сайта.
В остальном он может преследовать разные задачи. Для этого давайте рассмотрим разные варианты и их преимущества.
– Просто и красиво
Можно сделать ставку на дизайн в виде креативного изображения с оригинальной надписью.
Такой вариант нельзя назвать продающим, но если в нём будет достаточное количество юмора и оригинальности, он может запомниться.
Обязательное условие – это наличие кнопки возврата на домашнюю страницу. Вот вам примеры такого исполнения:
Ох, капитан, мы потерялись.
(404. Это не то место, где ты должен быть)
Идти домой Хлоп!
Я стесняюсь…
Извините, Вы попали на “битую” страницу
Свалить отсюда
– Ссылки на основные разделы
Как вариант, создать страницу 404 с ссылками на основные разделы, чтобы если клиент вдруг попал туда, куда не хотел попасть, он мог быстро вернуться в тот раздел, что искал, ну либо заинтересоваться чем-то другим.
При этом дизайн также важен, как и в первом случае. Делайте уклон на оригинальность и юмор.
Упс!
Я стесняюсь…
Мы не можем показать страницу, которую Вы ищите.
– Попробуй ещё раз/поиск
Возможно клиент искал нужный контент и не нашел его, но у Вас то он есть. Для этого ему нужно показать поле для поиска и предложить попробовать найти его еще раз.
В этом случае Вам нужно сделать удобный поиск, который не отпугнёт. Мы, к слову, пользуемся официальным поиском яндекса на своём блоге.
Попробуйте еще раз
– Реклама продукта
Раз уже так случилось, что перед клиентом страница 404, то почему бы не воспользоваться моментом и не показать ему свой продукт или услугу во всей красе, ну и, конечно же, не забыть предложить перейти по ссылке, чтобы узнать подробнее.
Причём показать Ваш продукт можно даже когда он искал что-то другое. В идеале, не просто показать, но и сделать специальное предложение на него.
Пример рекламы 1 Пример рекламы 2
– Интерактив
Чтобы клиент чуть больше провёл на Вашем сайте и повзаимодействовал с ним, можно на данной странице создать “интерактив”, с которым он может что-то поделать, потаскать, покликать, посмотреть или даже поиграть.
Интерактив играИнтерактив видео
– Форма захвата
Раз к Вам попали, значит это судьба. Только вот она жёстко бьёт, и выражается это в том, что больше половины людей уходит с ошибки в закат.
Поэтому, чтобы не терять посетителя, и чтобы он к Вам ещё раз вернулся, нужно взять его контактные данные и добавить в свою e-mail рассылку.
Главное создать настолько вкусное предложение, от которого сложно будет отказаться и подчеркнуть ярким дизайном.
Пример формы захвата
Это наш вариант страницы, на который Вы можете легко попасть введя in-scale.ru/любыеслова. Самое интересное, что такого рода ошибок почти нет на просторах интернета.
Поэтому рекомендую сделать акцент именно на этом, если Ваш бизнес подразумевает e-mail маркетинг.
Коротко о главном
Ух, я Вам покажу!
Страница ошибки всегда вызывает негатив, поэтому его нужно развернуть в нужную нам сторону.
Для этого нужна правильная страница 404, которая использует позитивный смысл, креативное изображение, запоминающийся дизайн, мощный текст и посыл, что нужно сделать дальше.
Тут и встаёт вопрос, что нужно Вашему посетителю в тот момент, когда он попал на эту страницу и как его плавно перевести на то, что Вы хотите от него.
Поэтому сейчас, когда Вы уже знаете, как сделать 404 страницу, немного подумали и скорее принимаемся за реализацию, тем более, сделать это довольно легко и дёшево (дизайн и вёрстка выходит около 2-3 т.р.).
 51 Шаблоны страниц HTML 404 
 Коллекция бесплатных  шаблонов страниц HTML и CSS 404  примеров. Обновление майской коллекции 2019 года. 12 новинок.
 HTML Смешные 404 страницы
 403 Запрещенных HTML-шаблонов
 HTML 408 страниц
 500 HTML-шаблонов страниц с ошибками
 О коде 
 Простая 404 Страница 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: font-awesome.css
 О коде 
 Sassy 404 UI ​​Study 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 Автор 
 Хенаро Колюссо
  31 марта 2020 г. 
 О коде 
 404 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 Сделано с 
 HTML (мопс) / CSS (стилус) / JS (Babel)
 О коде 
 404 заставляет медведя грустить 
 Использует родственный комбинатор, чтобы вытирать слезы при наведении курсора мыши на ссылку, чтобы выбраться оттуда.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: react.js, react-dom.js
 Автор 
 Каспер Де Брюйне
  18 февраля 2020 г. 
 Сделано с 
 HTML / CSS (SCSS) / JS (Babel)
 О коде 
 404 Стр. 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: bootstrap.css, gsap.js
 Автор 
 Сваруп Кумар Куйла
  7 февраля 2020 г. 
 О коде 
 Страница ошибки 404 
 Ошибка 404 страницы анимации SVG.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: anime.js
 Автор 
 Рафаэла Лукас
  27 ноября 2019 г. 
 О коде 
 404 Страница UI 
 404 страница с навигацией и эффектом параллакса.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: parallax.js
 О коде 
 Космос 404 
 Страница 404, созданная на чистом CSS и немного холста  .
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: —
 О коде 
 Neon — Страница 404 не найдена 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 О коде 
 404 Стр. № 8 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: jquery.js
 Автор 
 Мортен Соренсен
  28 февраля 2019 г. 
 О коде 
 Spacy 404 Стр. 
 Просторная страница 404 с подсчетом вверх.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: jquery.js
 Автор 
 Джон Кантнер
  28 декабря 2018 г. 
 О коде 
 Sad Mac 404 Ошибка страницы 
 Страница с ошибкой 404, основанная на Sad Mac, который был классическим синим экраном смерти Mac OS.Экран отображался в случае сбоя запуска из-за проблем с оборудованием или программным обеспечением.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 О коде 
 CSS Поезд 404 Страница 
 SVG 404 страница ошибки только CSS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 Автор 
 Джанет Мендес
  7 сентября 2018 г. 
 О коде 
 Ошибка 404 — потерянный и одинокий 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 О коде 
 404 Стр. 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: —
 Автор 
 Сара Фриск
  6 сентября 2018 г. 
 О коде 
 404 Страница Eroor: Игроки не найдены 
 Рисованная анимация смотрящего и анимированная с помощью CSS.В основном это был повод для рисования анимацией под видом страницы 404.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 Автор 
 Мансур
  5 сентября 2018 г. 
 О коде 
 404 Стр. 
 Чистый CSS, только 404 страница.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: —
 Сделано с 
 HTML (мопс) / CSS (стилус) / JS (Babel)
 О коде 
 404 частицы с PixiJS 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: pixi.js
 Автор 
 Лина Лаванья
  4 сентября 2018 г. 
 О коде 
 Кодовая тема 404 Страница 
 Команды кода ошибки HTTP 404 в JavaScript.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 Автор 
 Реми Денимал
  3 сентября 2018 г. 
 О коде 
 404 Галактика не найдена 
 Ты снова заблудился, космический пришелец.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 отзывчивый: да
 Зависимости: —
 Автор 
 Сасси Касасола
  28 апреля 2018 г. 
 О коде 
 Страница ошибки 404 
 Ошибка страницы 404 на чистом CSS: вдохновение из Долины монументов.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 Эндрю Хани
  27 апреля 2018 г. 
 О коде 
 404 Стр. 
 Еще один шаблон анимированной страницы HTML 404.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: jquery.js
 Автор 
 Салех Риаз Куреши
  23 апреля 2018 г. 
 О коде 
 Страница 404 — Затерянный в космосе 
 Анимированная страница 404, затерянная в космосе. Используется анимация по ключевым кадрам CSS3.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Сделано с 
 HTML / CSS (SCSS) / JavaScript
 О коде 
 UI 404 Стр. 
 Полужирный макет страницы 404.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 Очки Винсента Ван
  14 ноября 2017 г. 
 О коде 
 404 Анимированная страница 
 Маленькая аккуратная текстовая анимация на CSS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 Рикардо Прието
  5 ноября 2017 г. 
 О коде 
 Пример ошибки 404 # 3 
  Страница ошибки 404  с простыми цветами, которые меняются в зависимости от нулевого числа.Все с анимацией CSS и тенями.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 Рикардо Прието
  4 ноября 2017 г. 
 О коде 
 Пример ошибки 404 # 2 
 От графического дизайна к веб-дизайну. Этот пример  с ошибкой 404  был разработан Yoga Perdana, и мы преобразовали его в Интернет с помощью чистого CSS и минимального HTML, используя градиенты и тени CSS3.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 Сельчук Кура
  21 октября 2017 г. 
 Сделано с 
 HTML / CSS (SCSS) / JavaScript
 О коде 
 404 набранное сообщение 
 GSAP  404 набранное сообщение  с использованием SplitText.js.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: jquery.js, tweenmax.js, splittext.js
 Автор 
 Джейми Розен
  14 октября 2017 г. 
 О коде 
 404 Стр. 
 Анимированный шаблон HTML  404 страницы .
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: tweenmax.js, splittext.js, morphsvgplugin.js
 Автор 
 Робин Сельмер
  22 августа 2017 г. 
 О коде 
 Ретро страница ошибки 
 Хакерская страница с ошибкой 404.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 Омар Дсоки
  10 августа 2017 г. 
 О коде 
 Страница ошибки 404 Вампир 
 Страница ошибки 404 Vampire на чистом CSS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 О коде 
 404 Не найдено 
 SVG 404 макет страницы не найден.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: —
 Автор 
 Габриэль Ви
  8 февраля 2017 г. 
 О коде 
 404 Стр. 
 Минимальная  Ошибка 404  — появляется текст для ввода из русификатора.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 Аднен Ребай
  24 ноября 2016 г. 
 О коде 
 404 Стр. 
 Футуристическая страница 404.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Адаптивный: нет
 Зависимости: —
 Автор 
 Владимир Гашенко
  7 октября 2016 г. 
 О коде 
 404 Концепция анимированной страницы SVG 
 404 концепция анимированных страниц с SVG и чистым CSS3.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Зависимости: —
 О коде 
 BSOD 404, стр. 
 Страница 404 HTML и CSS BSOD.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 О коде 
 Пузырьковые 404 Стр. 
 Пузырящаяся страница 404 на чистом HTML и CSS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 Кайл Лавери
  14 марта 2016 г. 
 О коде 
 Страница ошибки HTML 
 Простая страница ошибки HTML 404.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 Кайл Лавери
  27 февраля 2016 г. 
 О коде 
 Черная дыра 404 шаблон страницы 
 Простой макет  404 страницы  с классной анимацией космического корабля.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 Дэни Сантос
  25 февраля 2016 г. 
 О коде 
 404 Анимация страницы 
 Ошибка 404 страницы с анимацией.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 Фабио Оттавиани
  21 февраля 2016 г. 
 Сделано с 
 HTML / CSS (SCSS) / JavaScript
 О коде 
 404 Страница UI 
 HTML / CSS и JS 404-й интерфейс страницы.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: jquery.js
 О коде 
 Шаблон страницы 404 
 404 стр. (На основе броска на ведение).
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 Клеман Жиро
  22 мая 2015 г. 
 О коде 
 404 Низкополигональный эффект 
 Анимированный шаблон страницы 404 с эффектом low poly  .
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Зависимости: jquery.js
 Автор 
 Роберт Лемон
  30 апреля 2015 г. 
 О коде 
 HTML CSS 404 шаблоны страниц 
 Хорошая страница с ошибкой.
 Совместимые браузеры: Firefox
 Зависимости: —
 О коде 
 Чистый CSS 404 Страница ошибки 
 Чистая страница ошибки CSS 404 с CSS-анимацией.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 энрико тониато
  25 февраля 2015 г. 
 Сделано с 
 HTML / CSS (SCSS) / JavaScript
 О коде 
 404 Текст частиц 
 Эксперимент с 404 не найденным текстом частицы.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: pixi.js
 Автор 
 Энрико Кьяромонте
  16 октября 2014 г. 
 О коде 
 Simple Pure CSS3 404 Error Page 
 Просто  простая анимированная страница на чистом CSS3  (без JS) для ошибки 404: страница не найдена.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: —
 Сделано с 
 HTML / CSS (Меньше) / JavaScript
 О коде 
 404 Страница с SVG 
 Анимированная страница 404 с SVG.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Зависимости: —
 Автор 
 Саранш Синха
  20 августа 2014 г. 
 О коде 
 HTML 404 Страница 
 Простая анимированная страница 404.
 Совместимые браузеры: Chrome, Firefox, Opera, Safari
 Зависимости: —
 О коде 
 404 Страница не найдена 
 Шаблон страницы 404 HTML, CSS и JS.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Зависимости: jquery.js
 .
 Блестящие примеры 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 появляется кадр из культового фильма с лаконичной подписью и подборкой других фильмов, которые вы, возможно, захотите посмотреть.Мы заметили отрывки из фильмов «Эдвард руки-ножницы», «Месть ботаников» и «Наполеон Динамит», среди других (
.
 20 беспроигрышных примеров самых забавных страниц ошибок 404 
 Время от времени мы натыкаемся на страницу 404, что может очень расстраивать. Помимо неудачного результата поиска, мы обычно наблюдаем очень скучный и скучный дизайн страницы, который значительно усугубляет наше замешательство. Итак, почему бы не выбрать привлекательные, забавные, креативные страницы 404, которые могут уменьшить наше разочарование и заставить нас улыбнуться? Оказывается, существует множество блестяще разработанных, креативно выглядящих и прекрасно работающих шаблонов страниц с ошибками 404, которые могут украсить любой веб-сайт.
 Как превратить разочаровывающую страницу 404 в источник вдохновения 
 Если вы собираетесь вести блог, электронный магазин, портфолио или любой другой веб-сайт, вам точно понадобится страница 404. Однако лучше отказаться от традиционных скучных страниц и выбрать различные неординарные решения. Используйте эту страницу как источник уникальной возможности выделиться в сети. Это отличный шанс показать, что даже огромный источник разочарования можно превратить в источник положительных эмоций, юмора, запоминающейся графики и многого другого.Персонализированные и креативные страницы предупреждений по самой своей природе могут стать открытием для ваших посетителей. Чтобы превратить неудачную ситуацию в выигрышную, вы можете улучшить свои 404 страницы с помощью:
 любые подсказки, как попасть в нужное место;
 элементов юмора, таких как гифки, картинки и т.д .;
 продвинутых элементов пользовательского опыта;
 красивый и привлекающий внимание дизайн;
 занимательных анимаций / иллюстраций;
 интерактивных компонентов;
 узнаваемых шрифтов.
 Само собой разумеется, что забавные страницы с ошибками 404 действительно самые эффективные. Но что же в них такого смешного? Давайте подробнее рассмотрим некоторые из самых запоминающихся страниц предупреждений.
 Эффективные и запоминающиеся примеры 404 страниц 
 Страница не найдена — Забавная иллюстрация 
 Старайтесь избегать скучных изображений, бесстрастной графики и скучных решений при создании конкретной страницы предупреждений. Помните, что страница 404 может сбивать с толку, поэтому не усугубляйте ситуацию.Такая креативная, расслабляющая и забавная иллюстрация «Страница не найдена» обязательно украсит вашу страницу. Выглядит стильно, но добавляет юмора странице предупреждений. Кажется, что человек с иллюстрации недоумевает, что ему делать в такой неприятной ситуации. Однако его расслабленная поза, яркая одежда и смешное лицо, несомненно, уменьшат разочарование пользователей.
 Страница TemplateMonster 404 — Ошибка монстра 
 Эту страницу 404 вы можете найти на сайте TemplateMonster.Большой фиолетовый монстр делает страницу действительно интересной. Компания забавным образом извиняется за неудобства, причиненные одним их монстром. Более того, компания добавила полезную ссылку, которая перенаправляет пользователей на действующие веб-страницы. Такой подход непременно подарит вашим пользователям положительные эмоции и даст возможность получить ожидаемую информацию.
 NMFH — Часть черного юмора 
 Черный юмор привлекает к себе внимание, потому что люди всегда ценят качественные примеры юмора всех сортов.Почему бы не применить такую ​​практику для страницы с ошибкой 404, как это сделал Национальный музей истории похорон. Он выглядит креативно, эффектно и запоминается, потому что блестяще отражает концепцию сайта. Фраза «Страница, которую вы ищете, ушла в загробный мир» звучит потрясающе и строго. Итак, если ваша бизнес-ниша совместима с чем-то вроде темного юмора, вы, безусловно, можете использовать его для дизайна на 404 страницы.
 Маховик — минималистичный подход с тонким юмором 
 Дизайнеры веб-сайтов
 Flywheel решили не перегружать страницу предупреждений замысловатыми изображениями и иллюстрациями.Они нашли более привлекательное решение — чистую, минималистичную иллюстрацию с помпезными словами: «Holey Moley. Это действительно отстой ». Кроме того, все мелкие детали и буква «О» на странице предупреждения перемещаются по экрану, привлекая внимание пользователей. Смотрится минималистично и концептуально.
 Бермуды 404 — Контрастная векторная иллюстрация 
 Вам нравятся яркие векторные иллюстрации? Эта иллюстрация «Страница не найдена» в стиле Бермудских островов поможет вам сделать страницу 404 более привлекательной.Расслабленный мужчина в шортах-бермудах как бы говорит: Хм… какой путь выбрать, если для меня нет ничего полезного? С этой иллюстрацией у вас не возникнет проблем с включением различных ссылок для перенаправления пользователей на необходимые страницы вашего веб-сайта.
 Блюгг — Еще одна часть черного юмора 
 Страница
 Bluegg 404 представляет собой смесь игры слов, яркой типографики и черного юмора. Веб-дизайнеры любят использовать различные шутки о смерти при создании дизайна типа «Страница не найдена». Тот же подход может работать и для вашего веб-сайта, он не противоречит общей концепции сайта.Это вам решать.
 Colorlib 404 — Замечательный эмодзи 
 Ой! Добро пожаловать на страницу с еще одной забавной ошибкой, на которой вместо банальной цифры «О» изображен плачущий смайлик. Этот плоский простой дизайн выглядит позитивно и свежо благодаря этому забавному элементу. Кроме того, макет страницы содержит кнопку с призывом к действию. Это умное решение, которое поможет вашим посетителям найти то, что они хотят, не покидая вашего сайта.
 Distilled — Comic British Error Страница 
 Британский комический диалог в манере разговора Шерлока понравится многим пользователям.»Not Found Page» Distilled звучит достаточно забавно, чтобы привлечь внимание посетителей к содержанию беседы. Акцент диалога сделан на решении проблемы: навигаторы, попавшие на эту страницу, должны связаться с владельцами сайта и сообщить об ошибке.
 Orangecoat — Интерактивные графики 
 На странице 404 Orangecoat поисковики получат массу удовольствия. Страница создана в виде визуально привлекательной диаграммы, которая предлагает различные решения в зависимости от цели поиска пользователя: перейдите на страницу «О нас», выполните поиск в форме выше или свяжитесь с владельцами веб-сайтов, чтобы решить проблему.Диаграмма начинается с комического изображения бегущего человека с медведями-кенгуру на ногах, что делает страницу в целом более забавной и интересной.
 404 — Транспортировка в космос 
 Со страницей 404 можно делегировать пользователей в космос! Не бойтесь проявить изобретательность при создании страницы с ошибкой. Это динамичное, красивое и приятное для глаз решение для страницы 404 обязательно придется по вкусу публике. Он действительно развлекает и оставляет приятное послевкусие.
 404 Еще раз код и пробел 
 Если вы будете просматривать Интернет более внимательно, вы обязательно заметите интересную тенденцию.В сети есть масса 404 страниц, связанных с космосом. Пространство — это что-то недоступное и далекое, и когда вы попадаете на страницу, которой не существует, она действительно напоминает неизвестное пространство. Эта векторная иллюстрация для дизайна «Страница не найдена» пригодится тем, кто хочет добавить космическую тему на свою страницу предупреждений. Он яркий, понятный и занимательный.
 Страница 404 Джесс и Маркс — Правила простоты 
 Эту страницу с ошибкой могут встретить пользователи на сайте свадебных фотографов.Выглядит просто, стильно, информативно. Яркие буквы и привлекательный серый фон уведомляют о том, что вы попали не на ту страницу, но у вас есть отличный шанс вернуться в меню или страницу блога. Страница оформлена в соответствии с общими принципами свадебного сайта.
 Mashable — забавно и творчески 
 Это одна из самых простых, но увлекательных страниц 404, которые я когда-либо видел. Глубокое впечатление производит полноэкранное изображение вязаного носка с дыркой и носком, выглядывающим из дырочки.Кроме того, на правой боковой панели находится поле поиска, позволяющее пользователю находить необходимую информацию по всему сайту. Фраза о «хороших и плохих новостях» — это традиционный, но эффективный подход, который привлекает внимание людей и заставляет их улыбаться. Оно работает!
 Pixar — супер умный 404 Page 
 404-я страница
 Pixar идеально подходит для сервиса. Это настоящая Печаль с участием невероятно популярного героя из компьютерного анимационного фильма Pixar Inside Out. Выглядит просто, но умно.Печаль прекрасно отражает реакцию пользователей на переход на страницу 404.
 Игра с фигурами 
 Если вы не знаете, как создать действительно интересную страницу 404, попробуйте использовать формы. Они будут работать на все 100%, особенно если вам это нужно для интернет-магазина. Вы можете использовать свои продукты или другие изображения, чтобы сделать привлекательную форму и разместить на странице с ошибкой. Присмотритесь, как дизайнеры использовали такой подход. Как по мне, это выглядит вдохновляюще и выдающе.
 Airbnb — Умное решение с анимированной девушкой 
 Попав на страницу 404 Airbnb, вы определенно почувствуете себя плохо из-за анимированной девушки.Она выглядит такой расстроенной из-за того, что уронила мороженое, так что вы забудете о собственном разочаровании. Однако Airbnb предлагает список полезных ссылок, по которым вы можете получить необходимую информацию: «Домой», «Поиск», «Помощь», «Карта сайта» и т. Д.
 Бесполезный веб-индекс — сурикаты помогут найти 
 Эта страница способна поднять настроение, просто взгляните на этих удивительных сурикатов. Они остановились в поисках нужной страницы. Они выглядят настолько сосредоточенными, что на их успех можно рассчитывать. Страница с ошибкой вызывает у пользователей улыбку, это действительно стоит вашего внимания!
 Еще одна векторная иллюстрация для кода 404 
 Если вы не предпочитаете простое решение для простых вещей, таких как дизайн «страница не найдена», попробуйте это векторное решение.Он выглядит необычно и привлекает внимание посетителей. Он может украсить скучную, сбивающую с толку страницу 404. У вас не возникнет проблем с добавлением полезных ссылок или окна поиска на страницу с такой иллюстрацией. Все будет выглядеть гармонично и уравновешенно, просто постарайтесь сделать страницу визуально более привлекательной.
 Невероятно простое решение 
 Делайте страницы 404 краткими, если не знаете, как их оформить. Простота правит миром, помните об этом, и у вас все получится. Люди оценят ваш подход, потому что такая страница не займет у них много времени.Это переходит к делу, не теряя времени. Нет нужной информации, не нужно там оставаться…
 Сварливый кот 
 Страница 404 с сварливым котом — беспроигрышное решение. Взгляни на это раздраженное лицо. Он на 100% отражает ваше настроение при переходе на несуществующую страницу. Однако этот кот превращает вашу неудачу в свою собственную. В любом случае эта иллюстративная страница с ошибкой призвана сразу привлечь внимание посетителей.
 Итог 
 Эта потрясающая коллекция вариантов на 404 страницы доказывает, что даже скучная страница может вызвать улыбку.Постарайтесь найти способ привлечь внимание пользователей и направить их на нужную сторону. Юмор и иллюстрации работают на 100%, поэтому учтите этот факт при создании собственного макета страницы с ошибкой. Вы можете реализовать некоторые из этих идей или разработать свою собственную. Сделайте свой UX менее утомительным, и посетители не захотят покидать ваш сайт.
  Об авторе: это гостевой пост от команды Template Monster 
   Узнайте, как создавать собственные HTML-шаблоны для электронных писем, просмотрите список актуальных тенденций UI / UX для электронной коммерции и узнайте, как справиться с баннерной слепотой  
 .
 Блестящие примеры 404 страниц: Страница 2 
 18. Lazy Oaf 
 (Изображение предоставлено: Lazy Oaf)
 Модный лейбл Lazy Oaf применил хипстерский подход к своей 404 странице. В забавных коробочках написано «счастливый 404», «дерьмо случается» и «эта ссылка мертва», даются некоторые причины, по которым вы могли ошибиться, в том числе «вы не умеете писать», и предоставляет удобную ссылку на дом .
 19. Виктория Спайсер 
 Виктория Спайсер — дизайнер декораций и стилист из Лондона.Как и следовало ожидать, ее сайт портфолио заполнен красивыми фотографиями, и ее страница с ошибкой 404 ничем не отличается. Это демонстрирует ее игривую сторону, сохраняя при этом безупречный вид.
 19. Figma 
 Несмотря на то, что у нас есть копия Illustrator CC прямо здесь, и мы можем играть с опорными точками и кривыми Безье буквально в любое время, когда захотим, мы по-прежнему очарованы страницей 404 Figma. Негабаритный текст 404 отображается в векторах, которые вы можете изменять по своему усмотрению. Попробуйте сами.
 20. Airbnb 
 На этой странице 404 с Airbnb изображена простая, но очаровательная анимация несчастной девушки, роняющей мороженое на пол. Airbnb заработал свою репутацию благодаря тому, что он представительный и дружелюбный, и эта страница 404 идеально соответствует имиджу его бренда.
 21. Hot Dot Production 
 Hot Dot Productions применила слоган «где дизайн встречается с технологиями» на своей впечатляющей странице 404, на которой представлены три числа, состоящие из сотен крошечных точек, которые меняют направление или расходятся в ответ на взгляд посетителя. движения мыши.Серьезно круто. Поиграйте с этим сами здесь.
 22. GitHub 
 Можно ожидать некоторого технического волшебства от веб-сайта, посвященного управлению версиями кода. Страница 404 предназначена для разных гиков с помощью простой пародии на «Звездные войны», усиленной умным эффектом параллакса при перемещении мыши. GitHub также имеет красивую страницу 500, когда сервер ломается.
 23. CSS Ninjas 
 Мир веб-дизайна любит ниндзя. Часто как часть самопровозглашенной должности.Соответствуя тенденции (и, как мы предполагаем, ее названию), страница 404 для CSS Ninjas имеет чистую стилизованную иллюстрацию, которая отражает общий подход сайта к дизайну.
 24. MailChimp 
 На странице ошибок Mailchimp есть наивные иллюстрации, вокруг которых сосредоточен брендинг MailChimp. И действительно, что говорит «Я заблудился» лучше, чем осел с головой в норе?
 Volta — это магазин обуви в Милане. Его веб-сайт включает в себя множество интересных элементов дизайна пользовательского интерфейса, и нам нравится, что он не просто исчез для стандартной страницы 404.Хорошее качество, специализированная фотография продукта с причудливым штрихом — миниатюрная мраморная статуя, напоминающая итальянский дом флагманского магазина — помогает поднять эту страницу с ошибкой.
 26. Брет Виктор 
 Страница 404 компьютерного ученого Брета Виктора, вдохновленная, конечно же, культовой картиной Рене Магритта «Предательство образов», ставит перед зрителем несколько сложных философских вопросов. Если это не страница, то что это? Что представляет собой «страница»? Можно ли действительно сказать, что это существует? Что это за «это», о котором идет речь в этой очевидной не-странице? Что-нибудь действительно реально? Вы думаете, нет?
 27.IMDb 
 Еще одну замечательную страницу с ошибкой 404 из фильмов можно найти на сайте IMDb. Эта обширная база данных фактов о фильмах пополнила свою 404-ю страницу знаковыми цитатами из известных фильмов, тонко отредактированными в соответствии с их новым предназначением. Посмотрите, какой из них вы получите.
 28. Bit.ly 
 На странице 404 для службы сокращения ссылок Bit.ly изображен симпатичный иглобрюх, подпрыгивающий вверх ногами в интерактивном море. Выброшенная на мель рыба реагирует на ваши движения мыши, а легкие анимационные детали в облаках и чайках помогают создать успокаивающее настроение.
 29. DropBox 
 DropBox заменил невозможный ящик в стиле Эшера, который годами украшал его страницу 404, похожей причудливой иллюстрацией. Нам нравится думать об абстрактном представлении всего, что идет не так — отрывающихся колес. Это красивая, простая рисованная иллюстрация, которая хорошо передает сообщение, с множеством полезных навигационных ссылок для лучшего взаимодействия с пользователем.
 30. Starbucks 
 Starbucks эффективно использует свой основной продукт для иллюстрации своего сообщения 404.В этом случае для рассказа истории используются контрольные признаки пропавшей чашки кофе. Также есть текст без жаргона, чтобы помочь пользователю найти то, что он искал.
 31. Blizzard Entertainment 
 (Изображение предоставлено Blizzard Entertainment)
 Разработчик видеоигр Blizzard делает его простым и фирменным на своей странице 404. Анимированный персонаж привлекает внимание посетителей сообщением: «Мы отправили спасательного мурлока, который проведет вас обратно в безопасное место». Не уверен, что такое «Мммрргмгррргммлл!» означает, но нажмите кнопку и вернитесь на домашнюю страницу.
  Статьи по теме: 
 .
No related posts.