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

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

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

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

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

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

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

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

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

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

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

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

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

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

Когда пользователи попадут на 404 страницы?

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

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

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

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

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

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

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

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

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

Что делает замечательную страницу 404?

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

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

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

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

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

1. Marvel

The Best 404 Pages: 40 Examples You Need to See

The Best 404 Pages: 40 Examples You Need to See

Скриншот из Marvel, февраль 2024 года

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

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

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

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана Ready to Go Survival, февраль 2024 г.

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

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

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

3. Куало

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана из Куало, февраль 2024 г.

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

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

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

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

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

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

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана от Стива Ламберта, февраль 2024 г.

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

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

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

5. Mailchimp

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Mailchimp, февраль 2024 г.

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

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

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

Сочетание обоих фиксирует фирменное использование Mailchimp’ игривой графики и сдержанного юмора, чтобы соединить простоту с индивидуальностью, что, надеюсь, убедит пользователей посетить известный “Mailchimp Home” и продолжают свое путешествие дальше.

6. Левая логика

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана из Left Logic, февраль 2024 г.

Дизайнер Реми Шарп и команда Left Logic расширяют творческие пределы того, что возможно с помощью JavaScript, благодаря своей странице 404, которая работает несколько по-другому, чтобы заинтересовать пользователя.

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

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

7. Magnt

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана от Magnt4, февраль

Когда вы попадаете на страницу 404 Magnt’, вы получаете немного визуального юмора в чистом дизайне.

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

В любом случае оба приведут к появлению этого жирного сообщения об ошибке 404.

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

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

8. Lego

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Lego, февраль 2024 г.

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

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

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

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

9. Вэнди’s

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Wendy’s, февраль 2024 года

Когда люди думают о Wendy’s, их мнения, скорее всего, попадают на его фирменные бургеры – the Baconator или Dave’s Double – и рыжеволосый талисман бренда.

Итак, для страницы Венди 404 компания разработала брендированную версию старинной игры с составлением бургеров “BurgerTime” с участием самой Венди.

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

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

10. 9GAG

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с 9GAG, февраль 2024 г.

Интернет-центр юмора 9GAG хранит свою страницу 404 простоя, но идеально соответствует бренду. изображение &nd;ndash; использование классического GIF-изображения Симпсонов, чтобы обобщить ощущение от ошибки 404.

Такая эмпатия к пользователю, вероятно, заставит их хихикать и упадет прямо в приятный тон голоса 9GAG&rsquo.

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

11. OrangeCoat

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с OrangeCoat, февраль 2024 г.

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

Обращаться к зрителю веб-сайта как к ‘счастливому Интернет-путешественнику,’ Orange Coat приглашает их ответить на ряд вопросов да или нет, пока они не дойдут до правильной подсказки, чтобы вернуть пользователя на правильный путь.

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

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

12. DashThis

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с DashThis, февраль 2024 г.

Хотя на диаграмме воспроизведена гора Дум и Глаз Саурона, в тексте есть игра слов (404 = Мордор), чтобы сделать эту страницу ошибки немного беззаботнее.

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

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

13. Помогите разведчику

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с HelpScout, февраль 2024 г.

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

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

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

14. Всемирная ассоциация зоопарков и аквариумов (WAZA)

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана от WAZA, февраль 2024 г.

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

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

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

15. BluePath

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с BluePath, февраль 2024 г.

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

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

Здесь бренд демонстрирует свое мастерство обработки данных с помощью интерактивной информационной панели преступных точек и копии инструментов, что более рискованно благодаря каламбуру – “потому что это’это преступление, вы еще не наняли нас!”

Это креативный способ потенциально привлечь потенциальных клиентов из-за неправильного поворота сайта и влияет на индивидуальность бренда BluePath&rsquo.

16. Spotify

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана из Spotify, февраль 2024 г.

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

Когда трек пользователя на сайте Spotify имеет рекордный момент, его приветствует линейное изображение останавливающейся вертушки, а копия воспроизводит старинную ссылку на Кейна – 808s & Heartbreak — его четвертый альбом.

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

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

17. Мириады

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Myriad, февраль 2024 г.

Когда посетители веб-сайта переходят на страницу, которой не существует, они увидят классический тестовый шаблон цветовой полосы SMPTE и ‘СПС НЕТ СИГНАЛА!’ гремит по экрану в знак дани телевизионным программам эпохи ЭЛТ.

<стр.>Это реверанс к техническим трудностям, которые иногда возникали во время трансляции, теперь перепрофилирован для более современного выпуска, полностью отвечающего бренду Myriad.</стр>

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

18. Папоротник

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана от Fern, февраль 2024 г.

Прокручиваемый текст обеспечивает привлекательное движение, а иллюстрированные визуальные элементы и момент мема Клея Дэвиса из The Wire помогают передать игривый голос бренду Fern’ и эстетику.

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

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

19. Дисней

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана от Disney, февраль 2024 г.

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

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

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

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

20. Figma

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Figma, февраль 2024 г.

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

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

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

21. Невинные напитки

The Best 404 Pages: 40 Examples You Need to See

The Best 404 Pages: 40 Examples You Need to See

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Innocent Drinks, февраль 2024 г.

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

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

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

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

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

22. Gymbox

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Gymbox, февраль 2024 г.

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

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

Его сообщение об ошибке 404 идет на шаг дальше, чем другие, информируя пользователей, что они ’находятся ‘не в том месте,’ тогда как GIF Джона Траволты из “Perfect” вращается на уроке физкультуры в своих собственных пьесах в фоновом режиме.

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

23. Jamba Juice

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Jamba Juice, февраль 2024 г.

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

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

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

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

24. Kinsta

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана от Kinsta, февраль 2024 г.

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

Посетителей попадающих сюда веб-сайта встретит практическая копия, объясняющая, почему они оказались здесь, и предлагает несколько ссылок, которые помогут вернуться туда, где они, возможно, хотели бы быть.< /p>

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

25. Carwow

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Carwow, февраль 2024 г.

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

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

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

26. Wayside Studio

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Wayside Studio, февраль 2024 г.

Способ бренда делает что-то несколько вне нормы, но не только ради него – и то же касается его страницы 404.

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

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

27. П’ер-Луи

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана от Pierre-Louis, февраль 2024 г.

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

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

Это rsquo;является целостный фирменный пакет, где даже сообщение об ошибке разработано по заказу Labonne, с большим и жирным ‘Go Home’ кнопку вверху, чтобы вы могли вернуться к знакомому месту.

28. Red Bull

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана Red Bull, февраль 2024 г.

Высокая энергия и потрясающее визуальное содержимое составляют хлеб с маслом Red Bull&rsquo, когда речь идет о бренде.

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

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

Если посетителям веб-сайта понравится это видео, они могут нажать кнопку Gimme more! ниже, которая переведет их в Red Bull& rsquo;s Откройте страницу, чтобы возобновить свое путешествие с новой энергией.

29. Tumblr

The Best 404 Pages: 40 Examples You Need to See

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Tumblr, февраль 2024 г.

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

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

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

30. Инвесторы

The Best 404 Pages: 40 Examples You Need to See

Скриншот с сайта Investors, февраль 2024 года

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

Следовательно, иногда легче прибегать к проверенным и правдивым отказам – как классика Инвесторов, “Собака съел нашу страницу.”

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

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

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

31. Критическая опасность

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Critical Danger, февраль 2024 г.

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

Поскольку его основное содержимое имеет более редакционный и взвешенный объектив, его 404 страница прорезается, используя только три буквы – “Га?”

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

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

32. Суперсписок

The Best 404 Pages: 40 Examples You Need to See

The Best 404 Pages: 40 Examples You Need to See

< /p>

The Best 404 Pages: 40 Examples You Need to See

Снимки экрана с Суперлист, февраль 2024 г.

Благодаря интеграции с Giphy страница вращается по предварительно установленному списку GIF – от Мосса в The IT Crowd к велосипедисту, который ездит по земле – чтобы передать ощущение, что все идет немного не так.

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

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

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

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

The Best 404 Pages: 40 Examples You Need to See

Снимки экрана с Wizarding World, февраль 2024 г.

Скорее всего, если вы ищете на веб-сайте Wizarding World, вы хорошо знакомы с Гарри Поттером и его знаковыми моментами.

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

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

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

34. Томас Боск

The Best 404 Pages: 40 Examples You Need to See

Снимки экрана от Томаса Боска, февраль 2024 г.

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

Поскольку это единственная интерактивная функция, вас естественно тянет нажать на нее.

Когда вы это сделаете, он берется за свою метлу и удаляется, чтобы прикрепить к вашему курсору – оставив только “404” сообщение позади его вслед. Это немного магии, которая отображает Томаса’ навыков и баловства, которые будут неизбежно выделяться среди других в его области.

35. Ведение

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Dribble, февраль 2024 г.

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

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

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

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

36. Экозия

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Ecosia, февраль 2024 г.

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

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

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

37. Дискорд

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Discord, февраль 2024 г.

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

Страница 404 Discord’ похожа на обнаружение тайного продавца еды за границей, с копией, которая напоминает этот опыт.

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

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

38. Деловой повседневный копирайтинг

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана из Business Casual Copywriting, февраль 2024 г.

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

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

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

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

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

39. Gamespot

The Best 404 Pages: 40 Examples You Need to See

Снимок экрана с Gamespot, январь 2024

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

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

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

40. Артерия

The Best 404 Pages: 40 Examples You Need to See

Скриншот из The-Artery, январь 2024 г.

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

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

Итог

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

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

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

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

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