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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как изменить страницы ошибок 404 и других — Webasyst

В большинстве тем дизайна за отображение страниц ошибок отвечает шаблон

error.html который может быть отредактирован в разделах Сайт — Дизайн, Магазин — Витрина — Шаблоны и в соответствующих разделах других приложений, вид страниц которых вам требуется изменить.

Это требует базовых знаний языка разметки HTML. Инструкция по использованию редактора:
https://www.shop-script.ru/help/9241/video-design-editor/

В теме Default 2.0 изначально данный шаблоны выглядит следующим образом:

<h2>
{if $error_code}{$error_code}. {/if}
{if $error_message}{$error_message}{else}[s`Error`]{/if}
</h2>
[s`The requested resource is not available.`]

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

{if $error_code == 404}<h2>{$error_code}.</h2>
Упс! Ничего не найдено. Если вы видите эту ошибку — сообщите нам, пожалуйста, на адрес <a href=»mailto:[email protected]?subject={$error_code}»>[email protected]</a> указав адрес этой страницы.
{elseif $error_code}<h2>{$error_code}.
{if $error_message}{$error_message}{else}[s`Error`]{/if}
</h2>
[s`The requested resource is not available.`]
{/if}

Добавить ещё один обработчик можно следующим образом:

{if $error_code == 404}<h2>{$error_code}.</h2>

Упс! Ничего не найдено. Если вы видите эту ошибку — сообщите нам, пожалуйста, на адрес <a href=»mailto:[email protected]?subject={$error_code}»>[email protected]</a> указав адрес этой страницы.
{elseif $error_code == 500}<h2>{$error_code}.</h2>
На сервере что-то сломалось! Если вы видите эту ошибку — сообщите нам, пожалуйста, на адрес <a href=»mailto:[email protected]?subject={$error_code}»>[email protected]</a> указав адрес этой страницы, а также описав ваши действия, которые предшествовали возникновению ошибки.
{elseif $error_code}<h2>{$error_code}.
{if $error_message}{$error_message}{else}[s`Error`]{/if}
</h2>
[s`The requested resource is not available.`]
{/if}

15 креативных примеров страницы Ошибка 404 для вдохновения

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

«‎Страница не найдена» — явно не то, что хочет увидеть посетитель веб-ресурса при выборе обуви, бытовой техники или фильма. Около 74% пользователей, которые сталкиваются с ошибкой 404, покидают сайт и не возвращаются. А потому важно настроить и оформить Error page так, чтобы удержать человека на веб-ресурсе. 

Мы собрали 15 креативных примеров, которые помогут сделать «страницу 404» на вашем сайте интересной. 

#1. «Страница 404»: кому и зачем она нужна

Страницу с ошибкой важно оптимизировать — она должна быть нестандартной и полезной для посетителя, чтобы не портить впечатление о компании. При правильном подходе месседж Page not found станет вашим преимуществом. 

Вот еще несколько причин создать оригинальный дизайн такой страницы: 

• Предотвратить все случайные ошибки невозможно — человек может ввести неправильный адрес, не найти нужной информации и уйти с сайта. Так вы потеряете потенциального клиента.
• Отследить все URL на веб-ресурсе тоже сложно: если на нем много страниц, то где-то могли поменять адрес, чтобы улучшить SEO, какой-то раздел удалить, не закрыв его от индексации в поисковой системе.

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

Пример «страницы 404» lifestyle-бренда Oak

#2. Основные приемы создания «страницы 404»

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

«Страница 404» российского агентства digital-дизайна Outlane

2. Развлеките или рассмешите. Цель дизайна «страницы 404» — уменьшить растерянность пользователя. С этим хорошо справляются смешные фото, иллюстрации и анимации. ToV на странице зависит от позиционирования компании, но немного юмора точно не помешает.

«Страница 404» графического редактора Crello

3. Интегрируйте мини-игру. Интерактивные «страницы 404» — самые вовлекающие: они дольше всего задерживают пользователя на сайте и повышают вероятность покупки.

«Страница 404» разработчика программ для энергоменеджмента Innotech

4. Верните пользователя на сайт. Вы отвлекли посетителя смешной анимацией с котом или «залипательной» картинкой космоса — что делать дальше? Постарайтесь поскорее вернуть человека на рабочую страницу. Разместите ссылки для перехода на home page и в каталог товаров — или предложите обратиться за помощью в онлайн-чат.

Хотите получать дайджест статей?

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

 

Спасибо за Вашу подписку!

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

Лучший способ предотвратить попадание пользователя на страницу с ошибкой 404 — регулярно мониторить «битые ссылки». Проверяя раз в месяц статьи, визуальный контент и перемещенные по другому URL-адресу материалы, вы снизите вероятность посещения страницы Error 404. У Google и Яндекс есть бесплатные сервисы для SEO-специалистов, которые помогут найти нерабочие ссылки.

«Страница 404» австралийского дизайнерского агентства Swell Design Group

#3. 15 примеров креативных страниц с ошибкой 404

Мы собрали кейсы компаний, которые подошли к оформлению послания Page not found творчески и с юмором.

1. Spotify

«Страница 404» стримингового сервиса Spotify — отсылка к альбому Канье Уэста 808s and Heartbreak. На сайте пользователям предлагают обратиться в техподдержку, перейти в раздел FAQ или вернуться на страницу, с которой они перешли.

2. LEGO

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

3. Pixar

Pixar изобразил мультяшную героиню из анимационного фильма «Головоломка» (Inside Out). На странице с ошибкой персонаж рыдает, а рядом можно увидеть слова «Оу, не плачь. Это всего лишь ошибка 404!», кнопки соцсетей и кликабельные ссылки для перехода в другие разделы сайта.

4. Gymbox

Gymbox — это тренажерный зал в Лондоне. На «странице 404» компании размещено анимированное изображение занятий по фитнесу в стиле 80-х, а также ссылки для перехода на страницу нужного зала или в другой раздел сайта. 

5. Tripadvisor

«Страница 404» на сайте Tripadvisor сообщает: «Упс, кажется, мы потеряли эту страницу. Но не ваш багаж!». Месседж сопровождается анимацией катящегося чемодана и предложением выбрать один из разделов сайта: «Отели», «Рестораны», «Чем заняться» и «Аренда на время отпуска».

6. Disney

На странице с ошибкой развлекательного портала Disney изображен популярный персонаж Ральф из одноименного анимационного фильма, снятого Ричем Муром, который режиссировал «Симпсонов» и «Футураму». На странице также фигурирует Всезнайка, еще один персонаж из «Ральфа» (Wreck-It Ralph).

Внизу расположена панель поиска, а выше — доступные разделы сайта. 

7. Mantra Labs

Разработчик AI-решений Mantra Labs изобразил космонавта, который удаляется в цифры 404. Картинку сопровождает текст «Упс! У вас закончился кислород. Страница, которую вы ищете, сейчас нам недоступна». Здесь же есть таймер, который ведет обратный отсчет до возвращения на home page.

8. The New Yorker

«Страница 404» американского издания The New Yorker оформлена в корпоративном стиле. На ней изображена мышь в лабиринте и есть кнопка перехода на home page, а также в другие разделы сайта.

9. Distilled

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

10. CloudSigma

Страница с ошибкой 404 облачного сервиса с офисами в США, Европе и Азиатско-Тихоокеанском регионе CloudSigma поддерживает пользователя шуткой: «О нет, вы нашли главную страницу junior-разработчика!». Этим «junior-разработчиком» компания сделала кота.

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

11. Ready To Go Survival

Компания Ready To Go Survival выпускает смарт-рюкзаки с предметами первой необходимости для 5-дневного выживания. Страница сайта с ошибкой 404 отсылает к культовому фильму «Матрица» и предлагает два варианта: нажать на красную кнопку и начать приготовления (выбрать рюкзак по подробному гайду) или нажать на синюю — и вернуться на главную страницу.

12. Lovespace

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

13. Планета Кино

Бренды любят космическую тематику, и украинская сеть кинотеатров «Планета Кино» — не исключение. На «странице 404» кроме небольшого изображения космонавта компания использовала известные слова, связанные с аварией «Аполлона-13» по пути к Луне, — «Хьюстон, у нас проблема». 

Эту фразу-мем произнесли 13 апреля 1970 года, когда на борту космического корабля лунной миссии произошел взрыв, а троих астронавтов от Земли отделяли сотни тысяч километров — с перспективой потери кислорода и полного отключения электропитания. 

На странице пользователю предлагают вернуться на главную, перейти в один из разделов сайта или отправить запрос в онлайн-чате. 

14. FLIXESS

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

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

15. The-Artery

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

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

Хотите получать дайджест статей?

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

Спасибо за подписку!

Последние материалы

7 самых известных бренд-персонажей в мире

Как появилась идея говорящих драже M&M’s и в чем успех английского капитана Моргана.

Мед, медицинский стартап и бумажные трубочки. На чем построить миллионный капитал — Игорь Лиски

Рассказываем, как диверсифицировать риски в бизнесе.

6 причин, почему вы застряли на месте

Почему вам мало платят и не повышают в должности.

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

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

Цель страницы 404

Фото: CyboRoZ

Цель страницы 404 — сохранить посетителя на вашем сайте, даже если он попадет на несуществующую страницу.

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

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

Чего не делать

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

Давайте посмотрим на распространенное сообщение об ошибке на сайте без настроенного 404.

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

Образцы хороших страниц 404

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

Лори Соард (мой сайт)

Страница ошибки 404 на сайте LoriSoard.com

 

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

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

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

Секрет веб-хостинга раскрыт

Страница 404 в WHSR

Неудивительно, что WHSR хорошо справляется со своей страницей 404.

Здесь, в WHSR, есть страница с ошибкой 404, которая предлагает то же преимущество, что имеет ту же структуру навигации, что и остальная часть сайта. Изображение сварливого кота добавляет причудливости, а текст в шутку гласит: «Кот съел наш файл».

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

Голубой фонтан

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

Blue Fountain Media приглашает посетителя, который не может найти страницу, которую он ищет, чтобы поиграть в игру Pac Man. Кто мог устоять? Разумеется, навигационная структура и контактная информация расположены в верхней части страницы на случай, если посетитель захочет получить дополнительную информацию о Blue Fountain Media.

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

Википедия

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

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

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

Советы по обновлению вашей страницы

• Выкинь технаря. Посетители вашего сайта не заботятся о том, почему страницы нет или что вызвало ошибку, так же, как они заботятся о том, чтобы попасть на нужную страницу.
• Включите ссылку на домашнюю страницу.
• Не показывайте пальцем на посетителей. Никто не любит, когда ему говорят, что он неправ. Вместо того, чтобы говорить «вы ввели неправильный URL», просто укажите, что страница не может быть найдена.
• Творчество это хорошо, а безумие — нет. Страница WHSR 404 (скриншот выше) является хорошим примером, потому что она предлагает юмор, но не имеет летающих обезьян, увеличивающих и уменьшающих масштаб.

Google также предлагает некоторые конкретные советы по созданию полезной страницы 404.

Как добавить собственную страницу 404

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

1. Настройте ошибки через cPanel

Перейдите на панель управления вашего сайта. Адрес, вероятно, что-то вроде этого:

http://yoursite.com/controlpanel

or

http://yoursite.com:2082

После входа в панель управления прокрутите вниз до раздела «Дополнительно» и нажмите «Страницы ошибок».

3. Редактировать страницы ошибок

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

Страница, которая вытягивает, — это место, где вы можете вставить коды, которые вы хотите для этой страницы.

Пользовательские 404s WordPress

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

• Google 404
• Полезные 404
• Страница ошибки в стиле Dunstan

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

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

Редактирование страницы 404

В данной статье рассмотрим как внести изменения на страницу 404.

Через статический блок

Перейдите в пункт меню «Мои сайты — Редактировать», далее «Страницы и блоки — Блоки» и нажмите на кнопку «Добавить статический блок» (рис.1).

Рисунок 1.

Впишите ключ доступа: Error404, название, включите активность статического блока и напишите текст, который хотите вывести на страницу 404 (рис.2):

Рисунок 2.

Выглядеть будет как на рисунке 3.

Рисунок 3.

Заметка

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

Через локализацию

Перейдите в пункт меню «Настройки — Системные настройки» (рис.4).

Рисунок 4.

Вкладка «Локализация» и введите в строку поиска: Error.NotFound. (рис.5).

Рисунок 5.

Отображаются все переменные, которые относятся к странице 404 (рис.6).

Рисунок 6.

Рассмотрим на примере ключа: Error.NotFound.PageWasDeleted  — текст «Страница была удалена или перемещена», заменим на «Страница была удалена» (рис.7).

Рисунок 7.

Как видим на странице 404 текст изменился (рис.8).

Рисунок 8.

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

Заметка

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

Внешний вид страницы (например, фон, изменить цвет текста, разместить картинку вместо текста 404) можно изменить по аналогии с другими примерами в статье.

Готово. Мы рассмотрели как внести изменения на страницу 404.

Тэги: 404, изменение, свой текст, локализация, статический блок

21 потрясающая страница 404 для привлечения потерянных посетителей [2021]

Опубликовано: 2021-08-19

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

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

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

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

Что такое страница 404 (и почему они имеют значение)

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

Так, например, если вы искали определенную страницу на OptinMonster, но неправильно написали URL-адрес, вы попадете на эту страницу:

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

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

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

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

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

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

SeedProd — это ЛУЧШИЙ конструктор страниц 404 и целевых страниц для WordPress. Начать работу легко и совсем не требует кода.

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

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

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

Хотите попробовать сами? Нажмите здесь, чтобы открыть свой 100% безрисковый аккаунт SeedProd сегодня!

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

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

1. OptinMonster — Пример страницы 404

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

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

Опять же, главная изюминка этой страницы — насколько она функциональна. У пользователей есть 3 варианта. Они могут пойти:

• Вернуться на главную
• На страницу » Связаться с нами»
• Панель навигационного поиска

Но цель всегда одна: удержать пользователей на сайте OptinMonster.

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

2. WPForms

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

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

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

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

В остальном это элегантный и профессиональный пример страницы 404, который, как мы знаем, работает.

3. Pixar

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

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

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

В этом разделе такие сайты, как OptinMonster или WPForms, имеют лучшие страницы 404.

Но страница Pixar предназначена для того, чтобы заставить пользователя улыбнуться, и они, безусловно, добиваются этого.

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

4. Дисней

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

Как и в случае с Pixar, страница 404 Disney полностью соответствует бренду.

Фактически, как вы можете видеть, он идет с анимацией из их популярного фильма « Ральф ломает Интернет» .

Это отличный способ вернуть пользователей во Вселенную Диснея. Кроме того, у них есть навигационная панель поиска (в отличие от Pixar), чтобы помочь своей аудитории найти то, что они ищут.

5. Netflix

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

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

Главное, на что стоит обратить внимание, — это большая кнопка CTA посередине: Netflix Home.

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

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

6. Хулу

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

Другой пример страницы с кодом 404 был получен от конкурента Netflix: Hulu.

Что интересно на этой странице, так это то, насколько она урезана. Нет никаких цветов, и есть только одна кнопка с надписью «ОК».

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

Но если такой мегабренд, как Hulu, что-то делает, скорее всего, это потому, что это работает.

7. Нерф

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

У Nerf есть подробная страница 404 с забавной графикой и большой кнопкой CTA с надписью «Перейти к брендам».

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

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

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

8. Tripadvisor.

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

На сайте Tripadvisor есть забавный анимированный пример страницы 404.

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

• Отели
• Рестораны
• Список задач
• Аренда на время отпуска

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

9. Постоянный контакт

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

Constant Contact использует более неформальный язык, который находит отклик у их целевой аудитории (молодые стартапы и специалисты по цифровому маркетингу).

Не столь сдержанный язык быстро объясняет это словами: «Вещи больше не так хороши».

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

Одна вещь, которую мы бы исправили, — это язык, окружающий CTA. В нем говорится: «Вы можете вернуться или попробовать одну из ссылок ниже». Но после этого пользователь может выбрать только одну ссылку.

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

10. Слабость

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

Slack сделал целый анимированный фон для страницы с ошибкой 404.

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

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

11. Лего

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

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

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

12. Электронный центр Великобритании

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

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

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

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

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

13. Список25

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

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

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

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

14. Бретт Терпстра

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

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

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

Страница не броская, но чрезвычайно полезная.

15. Стив Мэдден

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

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

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

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

Некоторые вещи, которые следует включить в дизайн страницы 404:

• Навигация по меню
• Ссылка на главную
• Ссылка на вашу карту сайта
• Панель поиска
• Ссылки на популярные посты

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

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

16. 9gag

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

Страница 404 от 9gag имеет одну цель: заставить вас загрузить их приложение . Они даже не делают вид, что хотят ничего другого.

Добавление полной страницы популярной гифки «Криминальное чтиво Траволта» в фоновом режиме — забавный штрих!

И здесь главное — простота.

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

17. Путь

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

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

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

Цель здесь — дать посетителям возможность сообщить о проблеме .

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

18. IMDB

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

IMDB показывает посетителям цитату из фильма на их странице 404.

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

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

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

19. Эверипедия

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

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

Спикер и маркетолог TED Ренни Глисон сказал о странице с ошибкой 404: « Простая ошибка может сказать мне, чем вы не являетесь. Или напомни мне, почему я тебя люблю. ”

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

Если вы сможете быстро ответить на этот вопрос со своей страницы 404, вы сможете превратить потерянных посетителей в платящих клиентов.

20. Хейзап

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

Кто не любит играть в игры?

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

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

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

21. Амазонка

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

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

Amazon начинает с извинений большими жирными буквами. Затем он перенаправляет пользователей на домашнюю страницу Amazon ИЛИ позволяет пользователям познакомиться с «собаками Amazon».

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

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

Надеемся, вам понравился этот пост. Если да, то вам обязательно стоит ознакомиться со следующими ресурсами:

• Как легко создавать целевые страницы менее чем за 5 минут
• 38 инструментов для создания целевых страниц для увеличения числа конверсий
• Анатомия идеальной целевой страницы

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

Только 404-страничный дизайн, необходимый для вдохновения

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

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

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

1. Сообщение об ошибке
2. Внешний вид бренда
3. Легкий комический рельеф
4. Ссылки на ваш лучший контент
5. Призыв к действию (CTA)

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

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

Lego использует плохую ситуацию и превращает ее в возможность. Дизайн страницы 404 является одновременно фирменным и полезным. То есть CTA страницы перенаправляет пользователей обратно на главную страницу.

Связано: Использование базовой психологии для создания эффективных призывов к действию: упрощенный призыв к действию!

CSS Tricks обнажает все это, чтобы показать, в чем их суть. Этот креативный дизайн страницы 404 продуман и напоминает то, чем занимается их бренд: CSS.

Остроумное использование Диснеем самого популярного персонажа для разрушения — Wreck-it Ральфа — заслуживает аплодисментов.Более того, они добавили панель поиска, чтобы пользователи оставались на странице.

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

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

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

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

Симпатичный талисман бренда Moz Roger Mozbat делает камею, чтобы заставить людей улыбаться. Как и у Disney, их дизайн страницы 404 также дает вам панель поиска.

Креативный и интерактивный дизайн 404 страницы

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

Космический юмор, навигационные ссылки и фирменные сообщения — страница 404 НАСА — это именно то, что вы ожидаете.

На странице 404

PIXAR есть Печаль, персонаж из любимого фильма « Наизнанку». Использование ими знакомого персонажа, каламбуров из фильмов и разговорной речи делает страницу более человечной.

404-я страница

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

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

Связано: (Добавьте сюда ссылку на Часть 2)

Другие почетные упоминания

1. ГБО

2. Слабый

3. HomeStarRunner.com

4. OrangeCoat

5. Старые добрые игры (GOG)

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

15 лучших примеров 404 страниц в Интернете

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

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

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

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

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

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

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

01. Pixar — Симпатичная страница 404

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

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

02. Омлет — страница 404 с юмором

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

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

03. Dribbble — Interactive 404 page

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

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

04. Dropbox — Helpful 404 page

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

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

05. The-Artery — фирменная 404-я страница

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

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

06. Lazy Oaf — пример модной страницы 404

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

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

07. Spotify — страница 404 с индивидуальным оформлением

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

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

08. Джули Боннемой — Анимированные 404 стр.

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

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

09. OkCupid — Tranquil 404 page

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

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

10. Lego — Friendly 404 page

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

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

11. Ueno — страница 404 с креативной копией

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

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

12. Figma — Привлечение 404 стр.

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

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

13. MailChimp — Heartwarming 404 page

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

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

14. Уэйд и Лета — Странные и чудесные 404 page

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

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

15. Wix — Четкая и лаконичная страница 404

Мы не могли не добавить эту. И не только потому, что на нем невероятно пушистый кот. Хотя этот кошачий друг, безусловно, выигрывает по привлекательности, он также позволяет тонко предположить, что посетитель сайта, возможно, неправильно набрал доменное имя (либо это, либо виноваты какие-то лапы).

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

Автор: Дана Меир

Эксперт и писатель по дизайну

Самые креативные примеры дизайна страницы 404

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

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

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

Пожалуйста, не :

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

Вместо этого, пожалуйста, сделайте :

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

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

Страница ошибки 404 на веб-сайте Никколо МирандыAndroid создал геймифицированную страницу ошибки 404Android на странице 404Magnt’s 404 страницы дизайн со ссылкой на диаграмму Венна Пользовательская иллюстрация на странице 404 из Sea Harvest Дизайн страницы ошибки 404 ЭмиратовДизайн Marvel для страницы 404 AnimationОдна студия Shared House Дизайн страницы 404 Страница 404, относящаяся к фильму Inside Out Страница ошибки 404 Nike React с возможностью настраиваемого создания Пользовательский скект Nike React Creator на странице 404 Пользовательский шаблон страницы BrandCrowd для страницы ошибки 404 Концепция дизайна страницы 404 от PopArt StudioLego страница 404 Страница ошибки 404 GoDaddyСредний дизайн страницы 404Volta Footwear 404 страница ошибки 404 Starbucks страницаПередача дизайна страницы 404Пользовательская иллюстрация для страницы 404 при перелистывании книгиBluePath 404, связанный с картой дизайн страницы 40420th Century Fox, страница 404 с видеофоном, страница 404 Airbnb, пользовательская иллюстрация в формате GIF

---

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

---

Взгляните и на другие вдохновляющие примеры, связанные с дизайном:

20 лучших бесплатных шаблонов страниц с ошибками 404 2021

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

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

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

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

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

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

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

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

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

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

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

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

Colorlib 404 версия 1

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

Colorlib 404 версия 2

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

Colorlib 404 версия 3

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

Colorlib 404 версия 4

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

Colorlib 404 версия 5

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

Colorlib 404 версия 6

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

Colorlib 404 версия 7

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

Colorlib 404 версия 8

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

Colorlib 404 версия 9

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

Colorlib 404 версия 10

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

Colorlib 404 версия 11

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

Colorlib 404 версия 12

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

Colorlib 404 версия 13

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

Colorlib 404 версия 14

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

Colorlib 404 версия 15

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

Colorlib 404 версия 16

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

Colorlib 404 версия 17

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

Colorlib 404 версия 18

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

Colorlib 404 v19

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

Colorlib 404 версия 20

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

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

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

40 примеров 404 страниц

Эээ… 404, страница не найдена! Худшая ошибка, правда?

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

Что такое ошибка 404?

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

Ошибки 404 вредны для SEO?

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

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

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

Лучшие методы проектирования страницы 404

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

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

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

40 примеров 404 страниц

1.Ялантис

Элегантный минималистичный черно-белый дизайн

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

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

2. IMDB

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

3. Битли

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

4. Здание Discovery

Модель 404 для Discovery Building чрезвычайно элегантна. Этот дизайн включает красивые изображения пути и дерзкое сообщение «Мы свернули не туда». Страница также включает в себя полную навигацию, которая чрезвычайно полезна для возврата туда, куда вы хотели пойти.

5.Форсанетти

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

6. Взрывоопасные темы

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

7. Pixar

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

8. Orangecoat

Orangecoat — дизайнерская фирма, базирующаяся в Гринвилле, Южная Каролина, специализирующаяся на веб-дизайне и маркетинге, которая помогает предпринимателям создавать компании и руководить веб-стратегиями существующих компаний.На их потрясающе оформленной странице 404 есть диаграмма, которая направляет действия пользователя.

9. Dogstudio

Бренд

Design компании Dogstudio соответствует их 404 странице. Их страница включает в себя случайный GIF-файл с изображением собаки, зацикленной на заднем плане страницы. Обновите страницу, и вы получите еще один GIF с изображением собаки!

10. Чудо

404-я страница

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

11. Точка доступа

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

12. Цирк дю Солей

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

13. Дисней

На этой забавной странице 404 изображен один из современных персонажей Диснея, Ральф, который, похоже, пробивает дыру в странице, потому что заблудился.Интересный способ создать страницу 404 — это увлекательное объединение их персонажей в соответствии с сюжетной линией фильма!

14. Метель

На странице 404

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

15. Уловки CSS

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

16. Слабина

Очаровательная страница 404 в

Slack имеет интерактивный фон, который делает работу с 404 безмятежной. Это также связано с брендом, потому что, если Slack когда-либо обнаруживает ошибку в приложении, экран, который появляется, будет таким же. Убедитесь сами!

17. GoDaddy

Страница 404

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

18. Purée Maison

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

19. LEGO

На очаровательной 404 странице

Lego, конечно же, изображен персонаж LEGO из фильма LEGO. Он включает в себя симпатичную графику и краткую аннотацию (и строку из фильма), убеждая пользователя, что все по-прежнему великолепно!

20. 20 век Фокс

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

21. Фигма

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

22. Mailchimp

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

23. Чудо

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

24. ИКЕА

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

25. Американский домашний щит

Компания

American Home Shield известна своими гарантиями на бытовую технику, поэтому она идеально подходит для того, чтобы показать что-то, что сломано по неработающей ссылке.Нам также нравится, что AHS пользуется этой возможностью, чтобы превратить потерянный трафик в преобразованного пользователя, предлагая пользователю ознакомиться с доступными планами. Может быть, эта страница не так уж и «сломана»!

26. Sony Alpha Вселенная

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

27. Живая нация

Страница 404 на сайте

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

28. Каждодоллар

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

29. Github

Страница

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

30. 9GAG

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

31. Фортнит

Как и следовало ожидать, страница Fortnite 404 на сайте

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

32. Southwest Airlines

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

33. Reddit

Страница 404

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

34. ebay

Страница

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

35. Buzzfeed

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

36.TED

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

37. Гифи

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

38. Trivago

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

39. Одноклассники

У

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

40. Lyft

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

БОНУС 404 ДИЗАЙНА СТРАНИЦ

Но подождите, это еще не все! Мы продолжим добавлять в эту статью, поскольку найдем больше интересных примеров.

41. Акодез

Acodez — веб-агентство, расположенное в Индии. Это агентство демонстрирует свою индивидуальность на своей странице 404, на которой изображен талисман компании Acodie!

42. CarWow

.

CarWow поможет вам найти следующую любимую машину. Этот веб-сайт является одним из наиболее широко используемых сайтов сравнения покупок автомобилей в Интернете.Но пытались ли вы найти машину, которая, возможно, была продана или больше не указана? Не грустите слишком долго … вы можете сыграть в эту супер веселую интерактивную гоночную игру, которую они разместили на своей странице 404! Это определенно обеспечивает отличный пользовательский опыт. Щелкните ссылку выше и убедитесь в этом сами.

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

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

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

Итак, как можно создать такую ​​классную, интересную и креативную страницу с ошибкой, чтобы привлечь внимание пользователей и удерживать их на сайте / в приложении в качестве дизайнера веб-интерфейса / приложения или менеджера по продукту? Давайте продолжим читать эту статью и насладимся 14 последними и лучшими дизайнами страниц с ошибкой 404, чтобы получить вдохновение и узнать, как сделать красивый, интересный и привлекательный дизайн страницы с ошибкой 404:

Во-первых, какие типичные сообщения об ошибках используются в ошибке 404 Страницы?

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

* Запрошенный URL-адрес не найден на этом сервере

* 404 Файл или каталог не найдены

* HTTP 404 не найден / страница 404 не найдена

* Ошибка 404 / Ошибка 404 / HTTP 404

* Страница не может быть найдена

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

14 последних и наиболее креативных дизайнов страниц с ошибками 404 для веб-сайтов / приложений

1. Затерянные в лесу

* Дизайнер: Tajana Barac

* Основные моменты ： Цветовые контрасты, цветовые градиенты, формы и shadows

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

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

* Что можно узнать

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

В последние годы смешивание различных дизайнерских тенденций, таких как цветовые контракты, цветовые градиенты, формы, тени, слои и т. Д., Никогда не будет плохой идеей, чтобы помочь дизайнерам создать выдающийся UI / UX-дизайн.Таким образом, вы также можете применять различные тенденции дизайна вместе, чтобы оптимизировать дизайн страниц с ошибкой 404. (Нажмите здесь, чтобы проверить 9 основных тенденций дизайна пользовательского интерфейса для мобильных приложений в 2018 году )

2. Требуется

* Дизайнер: с сайта limpfish.com

* Основные моменты ： Уникальная форма для отображения 404 сообщение об ошибке

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

Более того, этот «плакат с розысками» намеренно сделан очень старым и даже сломанным, что делает его более реальным и заметным.

* Что можно узнать

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

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

3. Shinobi

* Дизайнер: с cssninjas.com

* Основные моменты ： Прогрессивное раскрытие

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

* Что вы можете узнать

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

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

4. Страница ошибки Switex

* Дизайнер: Ash Rahal

* Основные моменты ： Наложение, эмоциональные элементы и забавные фотографии

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

* Что вы можете узнать

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

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

5. 404 Страница

* Дизайнер: Алана Брайдик

* Основные особенности: Возможности и простота

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

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

* Что вы можете узнать

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

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

6. UI 404 Страница

* Дизайнер: Марио Сестак

* Основные моменты ： Сильные визуальные эффекты и идеальное эхо изображений и содержимого

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

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

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

* Что можно узнать

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

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

* Также используйте боковые панели для расширения функций страницы и улучшения пользовательский опыт.

7. 404 Page Hossein

* Дизайнер: Хоссейн Махмуди

* Основные моменты: стиль постера фильма и тема научной фантастики

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

* Что можно узнать

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

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

8. 404 Страница не найдена

* Дизайнер: Наяб Фатима

* Основные моменты: яркая анимация и очаровательный стиль иллюстраций

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

* Что можно узнать

Также добавьте анимацию / взаимодействие на страницу с ошибкой 404.

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

9. Daily UI — 404 Page

* Дизайнер: Карлос Париенте

* Основные моменты: юмористические анимации и элементы, связанные с фильмами

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

* Чему вы можете научиться

Также добавьте хорошо известные или модные элементы в свой дизайн.

Также добавьте юмора или забавных элементов в свой дизайн.

10. Ежедневное испытание пользовательского интерфейса — страница 404

* Дизайнер: Андреа Хок

* Основные моменты: Хороший снимок для объединения функций веб-приложения / приложения

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

* Что можно узнать

Также объедините функции веб-сайта / приложения, чтобы обогатить содержание страницы ошибок.

11. Ежедневная страница ошибки 404 UI-8

* Дизайнер: Дина Лам

* Основные моменты: Красивая фотография пейзажа

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

* Что можно узнать

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

12.Страница 404 Друзья Эрмитажа

* Дизайнер: Антон Борзенков

* Основные моменты: Интересный стиль масляной живописи и продуманное поле поиска

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

* Чему вы можете научиться

Также используйте уникальный стиль масляной живописи или китайской живописи тушью.

13. Давид 404 Страница

* Дизайнер: Давид Ковалев

* Основные моменты: 3D-технология

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

* Что вы можете узнать

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

В наши дни также существует множество передовых технологий, которые можно использовать в дизайне страниц с ошибками, например видео / аудио, 3D-технологии и многое другое.

14. Shremal 404 Страница

* Дизайнер: Shremal

* Основные моменты: используйте страницу ошибки, чтобы рассказать историю

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

* Что вы можете узнать

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

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

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

Почерпнуть много хороших идей из этих отличных примеров ошибок 404? Не хотите, чтобы эти драгоценные идеи исчезли бесследно? Как насчет того, чтобы быстро превратить их все в визуализированные прототипы с помощью хорошего инструмента для создания прототипов, повторить и сохранить их в своих дизайнерских дневниках для лучшего использования? OK! Если вы случайно задумались об этом, вы можете дать Mockplus (простой и быстрый инструмент для создания прототипов) хорошую попытку воплотить идеи дизайна страницы с ошибкой 404 в красивые и интерактивные прототипы в течение 10 минут.

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

Шаг1. Легко и быстро добавляйте / импортируйте статические / динамические изображения в Mockplus

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

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

В Mockplus вы можете легко перетащить компоненты «Изображение», чтобы добавить необходимые фотографии для вашей страницы с ошибкой.Более того, при необходимости вы также можете использовать его Repeater и Auto Fill для добавления и автоматического заполнения большого количества компонентов изображения в течение нескольких секунд.

* Используйте Мои библиотеки для пакетного импорта изображений

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

* Легко импортировать изображения из Sketch

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

* Используйте компоненты GIF для добавления динамических фотографий

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

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

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

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

Шаг 2. Добавьте интересное сообщение об ошибке 404 с помощью метки и текстовой области Mockplus

В дизайне страницы с ошибкой 404 некоторые интересные, юмористические и ясные объяснения проблем с ошибкой 404 также являются важным фактором, выделяющим ваш дизайн. А в Mockplus вы можете легко использовать компоненты «Ярлык» или «Текстовая область» для свободного ввода и редактирования интересных и гуманистических копий для вашей страницы ошибок простым перетаскиванием.Свойства этих компонентов также можно легко настроить. Конечно, при необходимости, также добавьте State Interaction для этих текстов , чтобы создать лучшие визуальные эффекты.

Шаг 3. Добавьте значки эмоционального выражения для дизайна своей страницы с помощью Mockplus

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

Шаг 4. Добавляйте умные взаимодействия или анимацию по своему усмотрению в Mockplus

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

Шаг 5. Синхронизируйте и загружайте свой проект в любое время и в любом месте

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

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

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

Заключение

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

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

Добрый день всем читателям блога Amasty!

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

Что мы можем сделать со страницами ошибок 404

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

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

Окно поиска

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

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

страницы с ошибками 404 по-прежнему игнорируются магазинами

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

• Многие и многие магазины используют страницу 404 по умолчанию — это не смертный грех, но определенно дает возможность сделать здесь немного больше;
• Многие магазины перенаправляют с несуществующих страниц на страницы категорий / предыдущие / домашние, что тоже нормально, но все же может сбивать с толку, особенно для неопытных пользователей Интернета.Хорошо показать небольшое уведомление о том, что запрошенная посетителем страница не существует и он был перенаправлен.
• Многие магазины вообще не имеют правильной страницы 404 . В этом случае вы видите пустую страницу или страницу со стандартным сообщением об ошибке 404, возвращаемым сервером, без дизайна и вообще без ссылок. Я бы оценил количество магазинов без надлежащей (по крайней мере, по умолчанию) страницы CMS 404 около 40%, что является удивительно большим количеством для топ-листа Alexa!
• другие мелкие проблемы например, отображение текста ошибки 404 на неправильном языке.
• креативных, забавных или, по крайней мере, замечательных страниц 404 — это не более 3% — на самом деле, я трачу гораздо больше времени, хотя мне может потребоваться составить достойный список из 404 примеров страниц.

Наконец: лучшие примеры страниц с ошибками 404 за 2014 год в электронной коммерции

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

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

1. underarmour.com

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

2. nespresso.com

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

3. Фьючерсный магазин.ок.

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

4. modcloth.com

Собака в штанах и забавный призыв к действию; хорошее настроение гарантировано.

5. lego.com

Идеальный пример брендинга страницы 404 из Lego:

6. backcountry.com

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

7. bedbathandbeyond.com

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

8. ikea.com

Очень простая, но интересная страница!

9. etsy.com

Вещи случаются, говорит страница 404 для Etsy.

10. munchkin.com

Кто-то выглядит очень расстроенным из-за отсутствия страницы.

11. магазин.lululemon.com

На первый взгляд, эта страница выглядит вполне обыденно: заголовок, немного текста и стоковое изображение. Но если присмотреться…

12. Dish.com

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

13. mlb.mlb.com

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

14. bluenile.com

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

15. karmaloop.com

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

16. duluthtrading.com

Ну… Не знаю, кто первым догнал идею.

17. otterbox.com

Еще одна приятная идея от Otterbox: единороги и креативная формулировка. «Если вы настроены оптимистично» — это определенно хит.

18. converse.com

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

19. opticsplanet.com

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

20. stevemadden.com

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

21. patagonia.com

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

Заключение

Итак, что же делает страницу 404 выдающейся, если мы посмотрим на эти примеры? (Без стандартных блоков вроде поиска, ссылок и т. Д.)

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

Вам понравились какие-то конкретные? Или вы можете поделиться другими примерами страниц 404, с которыми вы недавно познакомились?

.