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

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

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

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

11. Лего

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

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

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

12. Электронный центр UK

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

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

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

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

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

13. Список25

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

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

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

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

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

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

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

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

Страница невзрачная, но очень полезная.

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

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

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

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

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

Что нужно включить в дизайн страницы 404:

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

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

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

16. 9gag

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

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

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

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

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

17. Путь

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

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

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

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

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

18. IMDB

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

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

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

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

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

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

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

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

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

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

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

20. Хейзап

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

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

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

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

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

21. Amazon

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

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

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

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

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

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

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

Опубликовано Натан Томпсон

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

Блестящие примеры 404 страниц

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

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

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

01. KonMari

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

02. Marvel

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

03. LEGO

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

04. Omlet

Игра слов уведет вас далеко, поэтому мы ценим подход Omlet к его странице 404. На странице креативной компании написано: «Эта страница — яичный запах», поскольку на экране появляется анимированная яичная трещина. Ярко-красный цвет показывает, что это «предупреждение», в то время как тема яйца соответствует имени Омлета. Что не нравится?

05. Mantra Labs

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

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

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

07. Carwow

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

08. Ueno

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

09. Gymbox

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

10. Slack

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

11. Purée Maison

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

12. Pixar

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

13. 20th Century Studios

Не можете найти нужный фильм? Недавно переименованная студия 20th Century Studios (ранее 20th Century Fox) может вдохновить вас на случай, если вы укажете неправильный URL; На его странице 404 появляется кадр из культового фильма с лаконичной подписью и подборкой других фильмов, которые вы, возможно, захотите посмотреть.Мы заметили отрывки из фильмов «Эдвард руки-ножницы», «Месть ботаников» и «Наполеон Динамит» и других (посмотрите, какой из них у вас получится).

14. Cloud Sigma

Cloud Sigma — это облачный сервер и облачный хостинг, работающий в США, Европе и Азиатско-Тихоокеанском регионе. Хотя гибкие облачные серверы полезны, они не совсем интересны, и мы предполагаем, что именно поэтому компания приложила немного дополнительных усилий, чтобы добавить немного юмора в свою насмешливую страницу с ошибкой 404.Мы задаемся вопросом, сколько времени пройдет, прежде чем этого полезного молодого разработчика переманивают конкуренты.

15. BluePath

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

16. Kualo

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

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

Как говорит Хлоя Золлингер из Pointe: «Достижение страницы с ошибкой 404 чаще всего разочаровывает пользователя сайта. Мы понимаем, насколько важно взаимодействие с пользователем на веб-странице. Чтобы улучшить взаимодействие с нашими посетителями, наша команда посвятила себя созданию интерактивного на нашей странице 404.»

17. Waaark

Страница 404 французской студии Waaark достаточно хороша для просмотра, но ее лучше слушать — хотя, возможно, и не на работе. Вдохновленная Стивеном Хокингом, Автостопом по Галактике и Порталу, она использует инструмент преобразования текста в речь на языке JavaScript под названием meSpeak, чтобы подвергнуть вас ругательной роботизированной тираде. Подключите наушники и посмотрите.

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

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

Следующая страница: Более вдохновляющие страницы 404 для изучения

страниц с ошибкой 404 — что делает большую страницу с ошибкой 404?

Это сообщение в блоге было обновлено 6 июля 2020 года

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

Существует два типа страниц ошибок 404: общий 404 и специальный 404.

Пользовательский 404 помогает тремя способами:

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

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

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

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

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

Вы узнаете, что это страница с ошибкой 404, когда увидите следующие сообщения об ошибках:

• 404 Не найдено
• Запрошенный URL-адрес не найден на этом сервере.
• HTTP 404 не найдено
• Ошибка 404
• Страница не найдена

Ниже показаны два типичных образца типовых сообщений об ошибках 404.

Ошибки 404 могут быть вызваны разными причинами, например:

• Запрошенная страница не существует
• Сервер не работает
• Отсутствует интернет-соединение
• Неработающие ссылки
• Неверный URL
• Страница перемещена на другой адрес

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

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

Пользовательские страницы ошибок 404 Vs. Общие страницы ошибок 404

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

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

Следовательно, наличие настраиваемой страницы 404 ОБЯЗАТЕЛЬНО.

Как настроить пользовательскую страницу 404

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

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

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

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

Чтобы узнать больше, прочтите эту статью о том, как настроить пользовательскую страницу ошибки 404 в мастере сайта.com.

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

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

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

Давайте кратко рассмотрим некоторые из этих передовых методов. Они перечислены ниже:

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

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

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

Пример # 1 AirBnb

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

Выводы с пользовательской страницы 404 Airbnb:

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

• Полезные ссылки на популярные страницы также включены в основную часть страницы.

• Приводится код ошибки с объяснением причины ошибки.

Пример № 2 — Агены

Рекомендации Agens custom 404 page:

• Ссылки верхнего и нижнего колонтитула: страница бренда должна соответствовать основному веб-сайту со ссылками в верхнем и нижнем колонтитулах

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

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

• Сочувствуйте и направляйте пользователя: сопереживайте искателю и помогайте ему в дальнейшем, давая ссылку на ваши старые проекты (если таковые имеются) или недавние проекты, как в этом случае, где написано: Возможно, вы искали один из наших недавних проектов ( ссылка), а может быть старая (ссылка)?

Пример № 3 — iFolderLinks

Выводы из пользовательской страницы 404 iFolderLinks:

• Юмор: добавьте намек на юмор с помощью фотографии милого плачущего ребенка.

• Уровень 404: упомяните, что это страница с ошибкой 404.

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

• Дайте быстрые решения: перечислите различные способы устранения проблемы

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

Пример № 4 — GitHub

Выводы с пользовательской страницы 404 GitHub:

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

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

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

• Панель поиска: Обеспечьте заметную панель поиска и опишите, что в ней можно найти, например, в этом случае написано «Найти код, проекты и людей на GitHub».

• Ссылки на социальные сети: дайте ссылки на службу поддержки, страницу социального бренда (в данном случае — идентификатор Twitter) и страницу, которая дает свежие обновления на сайте, в данном случае статус GitHub.

Пример № 5 — Heinz

Рекомендации Heinz custom 404 page:

• Меню навигации: Меню навигации должно соответствовать основному веб-сайту.

• Панель поиска: включить функцию поиска.

• Ссылки на популярные страницы. Предоставляет множество аккуратно расположенных ссылок на популярные страницы.

• Руководство для посетителей: Объясните простым простым языком, как пользователи могут максимально использовать все возможности, доступные на этой странице.

В этом примере на пользовательской странице 404 Хайнца указано Вы пробовали искать? Введите ключевое слово (а) в поле поиска вверху или воспользуйтесь одной из ссылок ниже.

Пример № 6 — iPlanWebsites.com

Выводы с сайтов iPlan Custom 404 Страница:

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

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

Пример № 7 — VisitSteve

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

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

Пример № 8 — BlueFountainMedia

Выдержки из Custom 404 BlueFountainMedia Страница:

• Добавить игру: Добавьте игру и поднимите настроение потерянным посетителям сайта.

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

, пример № 9 — Imgur.com

Выводы из Imgur’s Custom 404 Страница:

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

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

Пример № 10 — HootSuite

Выводы из пользовательской страницы 404 HootSuite:

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

Пример № 11 — iContact

Выводы со страницы Custom 404 iContact:

• смешное сообщение в стиле классической bad break up line Это не ты, это я
• Ссылка для поддержки, побуждающая пользователей выделять проблемы, когда страница ожидалась.
• Заголовочные ссылки.
Нижний колонтитул
• ссылается на основные страницы сайта.
• ссылок на каналы социальных сетей и контактный телефон.

Пример № 12 — PetFinder

Рекомендации PetFinder Custom 404 Страница:

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

Пример № 13 — Jhuskisson

Выводы из Custom 404 Джейми Хаскиссона Страница:

• Ссылки на страницы социальных сетей и RSS-канал.
• Ссылка на архив сообщений.
• Верхнее главное меню навигации по сайту.

Пример № 14 — PoemOfQuotes

Выводы из пользовательской страницы 404 PoemOfQuotes:

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

Пример № 15 — ExpansionBroadcast

Выводы из пользовательской страницы 404 Expansion Broadcast:

• Ссылки верхнего и нижнего колонтитула сохранены с основного сайта.
• Контактная форма предоставлена.

Example # 16 — CSSLeak

Выводы из пользовательской страницы 404 CSS Leak:

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

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

Пример # 17 — BlueDaniel

Выводы из BlueDaniel’s Custom 404 Страница:

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

Пример № 18 — MailChimp

Выводы с пользовательской страницы 404 MailChimp:

• Креативное использование талисмана бренда, чтобы передать его — страница 404.
• Панель поиска и навигационные ссылки заголовка.

Пример № 19 — ApartmentHomeLiving

Выводы из обычай 404 ApartmentHomeLiving Страница:

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

Пример № 20 — EternalMoon

Выводы из EternalMoon Custom 404 Страница:

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

Пример № 21 — ShelfWorthy

Выводы из Custom 404 Shelfworthy Страница:

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

Выводы из ClubPenguin’s Custom 404 Страница:

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

Пример № 22 — Twingly

Рекомендации Twingly Custom 404 Страница:

• Забавная картинка ниндзя Google
• Забавное сообщение об ошибке с подробным описанием кода ошибки
• Адрес электронной почты службы поддержки.

Выводы из Mutacao Custom 404 Страница:

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

Пример № 23 — Dropbox

Выводы с пользовательской страницы 404 Dropbox:

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

Пример № 24 — LimpFish

Выводы из Custom 404 от limpfish Страница:

• Забавное изображение страницы 404, не найденной в виде РАЗЫСКИВАЕМОГО объявления.
• Ссылки на основной и дочерние сайты.

Пример № 25 — Jabong

Выводы с Jabong Custom 404 Страница:

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

Пример № 26 — Nosh

Выводы из Nosh’s Custom 404 Страница:

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

Пример № 27 — NotFound.org

Рекомендации NotFound:

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

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

Пример № 28 — BrandCrowd

Выводы со страницы 404 BrandCrowd:

• Ссылки верхнего и нижнего колонтитулов с основного сайта сохранены.
• Нет интерактивной области на пользовательском эскизе 404 карандашом.
• Удобный текст.

Пример № 29 — Хаким

Выводы со страницы 404 Хакима:

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

Пример № 30 — Mattel

Выводы со страницы 404 компании Mattel:

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

Пример 31 — eHarmony

Выводы со страницы 404 eHarmony:

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

Пример № 32 — Modcloth

Выводы со страницы 404 Modcloth:

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

Пример № 33 — Бета-бренд

Выводы со страницы 404 BetaBrand:

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

Сообщите нам в комментариях, как выглядит ваша страница с ошибкой 404. Это общий или индивидуальный?

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. Битли

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

4. Discovery Building

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

5. Forsanetti

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

6. Строения Солт-Сити

Salt City Builds специализируется на обслуживании и ремонте мотоциклов японских моделей, выпущенных до 1979 года.Страница 404 этого бренда изящная и фирменная с сообщением: «заблудиться — не так уж и плохо». Он хорошо обращается к их целевому рынку, а также имеет удобную навигацию вверху, которая поможет им вернуться на правильный путь, когда они будут готовы!

7. Pixar

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

8. Orangecoat

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

9. Dogstudio

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

10. Чудо

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

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

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

12. Cirque du Soleil

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

13. Дисней

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

14. Метель

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

15. Уловки CSS

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

16. Слабина

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

17. GoDaddy

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

18. Purée Maison

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

19. LEGO

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. Живая нация

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

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

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

29. Github

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

30. 9GAG

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

31. Фортнит

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

32. Southwest Airlines

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

33. Reddit

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

34. ebay

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

35.Buzzfeed

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

36. TED

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

37. Giphy

Конечно, страница 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! Это определенно обеспечивает отличный пользовательский опыт.Щелкните ссылку выше и убедитесь в этом сами.

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

В какой-то момент в нашей жизни в Интернете мы наткнулись на страницу 404.

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

Так почему они вообще существуют?

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

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

Вот как вы можете создать отличную страницу 404 для своего сайта:

01.Развлекайтесь

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

Behance / Thapwaris Chinsirirathkul

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

02. Блок в форме

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

Behance / Manoj Bhadana

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

03. Использование движения

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

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

04. Сохраняйте краткость

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

Behance / Керен Риженски

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

05. Используйте эмоции

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

Behance / Керен Риженски

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

06. Будь иллюстративным

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

Behance / kobieta

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

07. Не переусердствуйте

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

Behance / Аарон Снайдер

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

08.Будьте буквально

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

Элекс

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

09. Стилизация

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

Behance / Diogo Marquetti

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

10.Используйте перекрытие

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

Behance / Evtimov

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

11. Используйте релевантные изображения

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

Behance / Colin Tossijn

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

12.Ограничить цвет

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

Behance / Alessandro Ceporina

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

13. Embrace exture

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

Behance / Damien Pereira

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

14. Предоставьте варианты

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

Behance / Harry Tran

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

15. Будьте нестандартными

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

Behance / Родриго Коста

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

16. Используйте отрицательное пространство

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

Behance / Jacopo Caracci

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

17. Сделайте его каламбуром

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

Behance / Zach Daley

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

18. Будьте дерзкими

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

Behance / Zach Daley

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

19. Создайте измерение

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

Behance / Dariusz S

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

20. Распространяйте формы по всему пространству

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

Behance / Cristina Maria

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

21. Будьте сложными

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

Behance / Ruth Lin

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

22. Используйте аспекты вашего бренда

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

Behance / Андрей Молдован

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

23. Будьте информативными

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

Behance / Maurília de Nóbrega

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

24. Используйте разные носители

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

Behance / Todd Goldstein

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

25. Выйдите за пределы компьютера

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

Behance / Ольга Шипило

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

26. Разбивка текста на части

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

Dribbble / Оля Гожа

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

27. Создайте эмоциональную связь

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

Salt City Builds

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

28. Используйте фотографию

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

Dribbble / Евгений Долгов

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

29. Используйте движение

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

Dribbble / Justas Galaburda

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

30. Внедрите поп-культуру

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

СТГ.

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

31. Будьте символичны

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

Dribbble / Рон Евгений

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

32. Создайте контраст

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

Dribbble / Meng To

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

33. Используйте значки

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

Underbelly

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

34. Создайте тему

Выберите тему и используйте ее. Единая тема сделает вашу страницу более связной и будет работать вместе.

Dribbble / Garrett Godsey

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

35. Сделайте его узнаваемым

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

Hugo Franca

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

36. Учитывайте пространство

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

Dribbble / Jenny Leonard

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

37. Не бойтесь толпиться

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

Dribbble / Ben Jordan

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

38. Используйте вырезы

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

Dribbble / Fabricio Rosa Marques

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

39. Сделайте понятным

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

Dribbble / Kevin Cdnc

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

40. Показать сцену

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

Почтовый ящик

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

41. Экспериментируйте

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

Dribbble / Jazmine Kohl

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

42. Будьте яркими

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

Juicy Graphics

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

43. Не ограничивайте себя

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

Dribbble / Justin Belcher

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

44. Упакуйте его в

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

Handmade Studio

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

45. Будьте изобретательны

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

Dribbble / Morgana D’Almeida

Это карандаш? Пчела? Оба? На этой странице 404 создатель взял оба и объединил их. Жужжащий след, который он оставил позади, выглядит так, как если бы он был нанесен концом карандаша (или жала). Цвета связаны друг с другом, что дополнительно указывает на то, что это должна быть пчела.

46.Будьте дрянными

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

Dribbble / Mitchell Geere

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

47. Дайте ему остроту

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

Dribbble / Мартин Бонов

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

48. Расширяйте границы

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

Ologie

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

49. Используйте выкройки

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

McCann

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

Персонализируйте этот шаблон для своей страницы 404 с помощью Canva:

50. Имейте слои информации

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

Dribbble / Trina Parkin

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

С уважением

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

21+ лучших примеров страниц с ошибками 404 (+ полезные передовые практики)

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

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

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

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

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

🔎 По теме: 25 страниц контактов компаний, которые вдохновят вас

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

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

На самом деле, сегодня я наткнулся на одну, когда тратил на 100% деньги, которые не должен был тратить, поскольку у меня уже есть рынок спортивной одежды для работы на дому:

Хотя Old Navy убивает меня в игре, когда дело касается леггинсов и майок нейтрального цвета, я обнаружил, что полностью оттолкнул их 404 страница по двум причинам:

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

«Это страница с ошибкой 404, Лиз. Чего ты ждала, парада?»

Да ну конечно нет. (Хотя, если вы хотите устроить мне парад, я не говорю «нет».)

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

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

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

Хорошо, я так рад, что вы спросили …

Фирменный веб-сайт Обязательные функции страницы ошибки 404 и передовые методы

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

1. Навигация по вашему сайту должна быть доступна

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