Страница 404 красивая: ТОП-50 лучших примеров дизайна 404 страницы – Plerdy

ТОП-50 лучших примеров дизайна 404 страницы – Plerdy

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

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

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

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

Первым участником нашего ТОПа стала известная американская компания Blizzard Entertainment. Blizzard занимается разработкой игр. В частности, их творениями являются такие известные продукты как: World of Warcraft, StarCraft, Heroes of the Storm, Diablo, Overwatch. 404-я страница выглядит как разбитый экран, показывающий сломанный сайт.

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

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

Прекрасный пример использования корпоративного стиля для оформления 404-й страницы. Для этого Github взяли свой логотип (кота-восьминога) и стилизовали его под «Звездные войны».

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

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

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

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

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

Компания Sketch решила оформить свою 404-ю страницу в корпоративном стиле. Хороший пример соблюдения фирменного стиля и простоты навигации.

Известный производитель энергетических напитков Red Bull вполне верен своему стилю. В случае ошибки,пользователь попадет на страницу с эффектным видео и надписью: «Хм, это сбивает с толку. Куда делась страница?! »

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

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

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

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

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

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

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

Сеть кинотеатров «Планета Кино» решила, кроме соблюдения своего стиля, использовать известную фразу из “Аполлона-13″. Кроме этого есть удобная кнопка для возврата на главную.

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

Компания MentorMate решила прибегнуть к простому и проверенному приему. Обыграть код ошибки «404» в виде какой-то красивой картинки. В данном случае это чашка кофе и цифры в цветовой стилистике сайта.

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

Как уже упоминалось, СтартапДепо, не единственные кто решил использовать мем с Винсентом Вегой. Тот самый момент на своей странице использовала интернет-платформа 9GAG. Учитывая количество юмористического контента в пределах сервиса, это решение можно считать идеальным.

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

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

Страница 404 на сайте Hakim.se от шведского дизайнера и разработчика с именем Hakim El Hattab точно придется по вкусу всем фанатам творчества Говарда Филиппа Лавкрафта. Сразу после перехода на пользователя начинают пялиться с десяток страшных глаз и ему предлагают вернуться на главную страницу сайта.

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

The New Yorker — это известное американское еженедельное издание, которое публикуется с 1925 года. 404-я страница оформлена в корпоративном стиле и имеет удобную навигацию.

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

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

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

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

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

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

Этот участник нашего ТОПа также решил порадовать своих пользователей оригинальной 404-й страницей. В случае ошибочного запроса посетитель сможет сыграть в игру Pac-Man в стилистике сайта.

Рекламная компания Agens также поработала над креативным оформлением страницы 404. Гостья сайта встретит надпись «похоже, что ты потерялся в космосе» и изображение астронавта на астероиде.

Хороший пример оформления 404-й страницы от Rachel Nabors. Rachel the Great — это серия авторских комиксов, поэтому такой дизайн идеально подходит.

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

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

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

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

А вот дизайн для своей 404-й страницы выбрала команда с RepairPal. Красивая картинка и удобный интерфейс для формы обратной связи — это хороший способ оформить страницу ошибки.

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

Хороший пример тематического оформления 404-й ошибки от сайта Batman 3D. Не смогли найти нужную страницу? Видимо ее похитил Джокер.

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

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

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

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

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

Последним участником нашего топа стала компания The Software House. Простое и стильное оформление в традициях корпоративного дизайна — это хорошая практика для компаний разработчиков.

Вывод

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

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

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

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

На этом сайте можно найти интерфейс Commodore 64.

Похоже, вам не стоило сюда заходить.

Попробуйте поймать кота 🙂

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

А эта страничка ушла в поход… и не вернулась.

Очень атмосферная интерактивная 404-ая страница.

Веб-страница ищет HTML своей жизни. Желательно без ошибок и вредных привычек.

Спасите несчастных леммингов!

Классический мем на сайте 9GAG.

Красивая иллюстрация броуновского движения от Hot Dot.

А этой страницы на сайте Mikandi нет, как и одежды у этой прекрасной леди.

Вам попалась страница 404? Решайте, кого уволить за такое свинство.

Синий экран смерти от Willismonds.

А эту страницу съели пациенты клиники. Очень сожалеем 🙁

Диаграмма Венна на сайте magnt.com.

Дыра в интернете на сайте CSS Tricks.

Поздравляем. Вы сломали наш сайт.

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

Здесь можно поиграть в пакмана.

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

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

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

Всё минималистично и главное — ссылка на релевантный материал.

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

Вот про экран с ошибкой от GitHub вы точно знаете, а как насчёт не менее известного Docker? Расстроенный кит смотрит на утонувший корабль, параллельно размышляя о ваших проектах.

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

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

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

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

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

На странице 404 сайта Музея Сотворения Мира (там всё по Библии) отчётливо видно, что junior и senior не могут найти менеджера проекта. А вообще классно сделали: силуэт с отсутствующей стадией эволюции в центре отражает отношение создателей сайта к этой теории возникновения жизни. Кроме того, «that link is missing» можно перевести так: «связывающее звено отсутствует». Тут как в русском с фразой «я плачу» — либо платишь (за софт), либо плачешь (из-за багов).

Если вы думали, что новозеландцы не в восторге только от шуток про «Властелина Колец», то теперь вы знаете, что каждый раз, когда вы видите карту без Новой Зеландии, где-то в Шире плачет один хоббит. Собственно, на этом и решили акцентировать внимание новозеландцы на сайте правительства.

Самоиронией может похвастаться не только правительство Новой Зеландии. В Делавэре решили поиграть и с картой, и с названием. Хотя карта просто для красоты.

Мы тоже не исключение 🙂 Возможно, вы уже замечали, что мы, как и сайты выше, имеем собственную страницу 404.

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

Перейти к регистрации

Как сделать 404 страницу: 10 красивых вариантов оформления

Зачем нужна такая страница?

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

Красивое оформление 404 страницы на сайте

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

Неудачный вариант 404 страницы — пользователь точно уйдет

Как создать 404 страницу?

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

Дизайн и структура

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

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

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




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




• Для разработчиков игр – поместить на 404 простенькую флеш игру.




• И т.д.

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

Технические аспекты настройки

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

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

ErrorDocument 404 http://URL_сайта/404.html

Для редактирования .htaccess рекомендуется использовать бесплатный редактор Notepad++.

При использовании одной из популярных CMS, к примеру, WordPress, делать 404 страницу скорее всего не придется. По крайней мере технически она уже настроена и подключена, но если есть необходимость создания уникального решения, то его лучше реализовать внутри специального файла, который находится в корне шаблона (/wp-content/themes/тема/) – 404.php. При вставке верстки, нужно учитывать подключаемые хуки движка, некоторые из них могут понадобиться для корректной его работы. В остальном же все схоже с обычной HTML-версткой.

Не все темы WordPress имеют готовый файл 404.php, поэтому если он отсутствует, следует его создать вручную, наполнить и подключить в .htaccess с помощью следующего кода (если он также отсутствует):

ErrorDocument 404/index.php?error=404

10 красивых примеров страниц 404 ошибки

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

Вариант 1

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

Использование видеокреатива при создании страницы 404

Вариант 2

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

Страница 404 для интернет-магазина с категориями товаров

Вариант 3

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

Пример 404 страницы для банка

Вариант 4

Популярный ресторан быстрого питания, коротко и ясно.

Страница 404 ресторана быстрого питания

Вариант 5

Применение анимации задерживает внимание (лупа при перемещении мыши двигается).

Пример применения анимации на странице 404

Вариант 6

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

Пример тематического дизайна на странице 404

Вариант 7

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

Пример страницы 404 на сайте интернет-провайдера

Вариант 8

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

Вариант оформления 404 страницы для агрегатора авиабилетов

Вариант 9

Просто и понятно.

Страница 404 для сайта кофейни

Вариант 10

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

404 страница для турагентства

Вышеприведенные примеры страниц объединяют несколько качеств:

• Они креативные и уникальные – непохожие на 90% 404 страниц других сайтов.




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




• В некоторых случаях наоборот могут повысить лояльность к компании (сайту) со стороны пользователя.

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

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

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

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

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

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

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

Скачать

Colorlib 404 v1

Скачать Демо

Colorlib 404 v2

Скачать Демо

Colorlib 404 v3

Скачать Демо

Colorlib 404 v4

Скачать Демо

Colorlib 404 v5

Скачать Демо

Colorlib 404 v6

Скачать Демо

Colorlib 404 v7

Скачать Демо

Colorlib 404 v8

Скачать Демо

Colorlib 404 v9

Скачать Демо

Colorlib 404 v10

Скачать Демо

Colorlib 404 v11

Скачать Демо

Colorlib 404 v12

Скачать Демо

Colorlib 404 v13

Скачать Демо

Colorlib 404 v14

Скачать Демо

Colorlib 404 v15

Скачать Демо

Colorlib 404 v16

Скачать Демо

Colorlib 404 v17

Скачать Демо

Colorlib 404 v18

Скачать Демо

Colorlib 404 v19

Скачать Демо

Colorlib 404 v20

Скачать Демо

Simple Pure Error Page

Simple Pure Error Page — это анимированный шаблон от Enrico Chiaromonte. Если вы хотите проявлять творческий подход на своей странице ошибок, тогда этот шаблон может быть полезен для вас. В этом шаблоне синий цвет используется в качестве цветовой схемы страницы, если у вас есть фирменный цвет для вашего сайта, то вы можете настроить его под нужный вам цвет.

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

В основном цветовой код, используемый в файле CSS, будет в шестнадцатеричных значениях цветового кода. Здесь в шаблоне по умолчанию используется синий цвет, код которого # 48A9E6. Этот код будет упомянут в коде в качестве фона: # 48A9E6; измените это значение на ваш фирменный цвет с шестнадцатеричным цветовым кодом.

Скачать Демо

Not Found

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

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

Опять же, если у вас есть фирменный стиль в качестве цвета градиента, вы можете легко изменить его в CSS. Здесь в этом коде это упоминается как background: -webkit-repeating-linear-Gradient (-45deg, # FFEB3B, # FF6F00, # 00B0FF, # 76FF03, # b98acc, # 69a6ce, # 9b59b6). Все хэштеги имеют шестнадцатеричное значение кода цвета. Как я уже говорил вам в предыдущем шаблоне, просто измените цветовой код на тот, который вы хотите. Спасибо Джону Финку за то, что он поделился с нами этим хорошим шаблоном 404 ошибки.

Скачать Демо

Bootstrap 404

Этот тип страницы ошибок лучше всего подходит для шаблонов веб-сайтов, связанных с образом жизни, и шаблонов сайтов современных компаний-разработчиков программного обеспечения. Чтобы шаблон соответствовал существующему шаблону веб-сайта, вам может потребоваться изменить шрифты и цветовую схему этого шаблона. Разработчик этого шаблона Ахмед использовал HTML, CSS и Javascript. Код хорошо написан, так что вы можете легко соотнести эти коды с существующей кодировкой шаблона веб-сайта. Если вы хотите изменить только внешний вид шаблона, вы можете настроить раздел CSS в одиночку.

Скачать Демо

Pure CSS

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

Скачать Демо

404 Vampire

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

Скачать Демо

Fantasy Error Page

Fantasy error page — это простой и элегантный шаблон. С полным дизайном страницы, он использует все пространство экрана устройства. Чтобы придать смысл названию шаблона, используется фоновое изображение в стиле фэнтези. Кроме этого вы получаете прямое сообщение об ошибке жирным шрифтом 404 и кнопку призыва к действию, чтобы перенести пользователя на предыдущую страницу. Единственное, что вам нужно изменить в этом шаблоне при интеграции с существующим шаблоном, — это цвет кнопки призыва к действию. Этот простой в использовании шаблон использует рамки HTML и CSS3.

Скачать Демо

Elegant Error Page

Скачать Демо

Fashion Error Page

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

Скачать Демо

Easy Error Widget

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

Скачать Демо

Smart Error Page

Скачать Демо

Flashy Error Page

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

Скачать Демо

Effective Error Page

Скачать Демо

Smooth Error Page

Скачать Демо

Dark Error Page

Скачать Демо

Modern Error Widget

Скачать Демо

404 Error Widget

Скачать Демо

Simple Error Page

Скачать Демо

Cool 404 Page

Скачать Демо

Simplified Error Page

Скачать Демо

Страница 404 ошибки — как сделать, примеры красивых дизайнов

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

Ошибка 404 страница не найдена (404 page not found) — это такой код ответ сервера, который был принят консорциумом W3C в 1992 году. Клиент (браузер) отправляет запрос серверу через протокол HTTP. А сервер этот запрос обрабатывает и выдает ответ 404.

Что означают эти цифры:

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

Вторые две цифры (0 и 4) означают именно ошибку “Не найдено”, которая относится к группе ошибок 4xx, например, 403 Forbidden (доступ запрещен), 400 Bad Request (неправильный запрос), 401 Unauthorized (не авторизовано) и другие.

Причины, почему возникает страница 404 ошибки:

• У страницы сменился url адрес
• Страница вообще была удалена с сайта
• Пользователь написал адрес с ошибкой
• Сайт недоступен в данный момент
• Сайт вообще больше не работает
• Некачественное интернет соединение

Страница 404 и SEO

Для SEO продвижения сайта важно, чтобы на сайте не было внутренних ссылок на 404 страницы, то есть так называемых битых ссылок. Проверяется это с помощью разных сервисов и программ, самой популярной из которых является программа Xenu’s Link.

Смотрите видео, как пользоваться программой:

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

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

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

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

Правильная страница ошибки

Рекомендации, как сделать правильную 404 страницу для сайта:

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

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

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

ErrorDocument 404 http://ВАШ_САЙТ/404.php

Теперь и на вашем сайте есть 404 страница.

Несколько примеров

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

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

Ну и напоследок посмотрите мое подробное видео про страницу 404:

P.S. Если вам понравилась статья, то поделитесь ею в социальных сетях, пишите ваши вопросы или комментарии ниже.

10 оригинальных страниц ошибок для сайта

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

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

Установка

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

Каравай, каравай, кого хочешь выбирай…

Весьма интересный вариант в виде объявления.
Скачать

Объемные цифры возникли из пустоты.
Скачать

А это анимированная страница.
Вы станете свидетелем похищения страницы НЛО.
Скачать

Одинокая и грустная луна…
Скачать

А здесь Лох-несское чудовище.
Скачать

Какая-то сказочная страница, не находите?
Скачать

Кулак. Похоже, какого-то зека.
Скачать

Код виден через дыру в сайте.
Скачать

Слыхали легенду о кракене?
Скачать

Ну, и на последок такая вот страница ошибки.
Скачать

Хочется сделать подборку просто оригинальных страниц ошибок 404 (Page not found) на разных сайтах. Если знаете такие страниц, то отправляйте ссылки на них в комментариях. Будет интересно посмотреть, до чего додумались веб-мастера и дизайнеры.

Надеемся, что и наша подборка вам понравилась. Все изображения взяты с открытого источника dribbble.com.

50 прикольных страниц ошибки 404

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

Сайт Propeller

Иллюстрированная страница ошибки 404 на B3ta

Страница ошибки 404 Cuoma

Забавная страница ошибки 404 на Tinsanity

Сайт  latelategifts

Муха на странице ошибки сайта 24-4 Media

Разорванная бумага на CssTricks

Иллюстрации акул на Renkoo

Плачущий ребенок на iFolderLinks

Мусорная корзина на странице ошибки 404 TurboMilk

Страница ошибки 404 на Zivity

Такая страница ошибки на сайте Soocial

Разноцветные кубики на rush68

Страница ошибки на Ook

Забавный котенок на Github

Так изобразили ошибку на сайте RetardZone

Надпись на футболке на Planetgeek

Кривляющийся мужчина на PatternTap

Простая и забавная страница ошибки 404 на Studentmarket

Иллюстрация на странице ошибки 404 на BrightKite

Страница ошибки 404 на сайте ClearSpring

Иллюстрация девушки на Erotica Challenge

Грустная мордашка на kidmondo

Смешная страница ошибки сайта Funned

Необычная страница ошибки 404 на nickciske

Страница ошибки в стиле ретро на сайте Lileks

Сайт lightpostcreative и его страница ошибки

Стройка на странице ошибки сайта tele2

Яркая страница ошибки 404 на DDZ

Кот в компьютере на Catswhocode

Космос на странице ошибки Abduzeedo

Разыскивается странница на сайте Limpfish

Стильная иллюстрация на Ferdaze

И на  Expansion Broadcast иллюстрированная страница ошибки

Художественная страница ошибки сайта Chrisglass

Страница ошибки на Fuelly

Облака на Zanami

Страница ошибки на Southpark Studios

Страница ошибки сайта Geeksquad

Милый котенок на Centerd

Марио на странице ошибки сайта Dawdle

Смешной монстр на Cartoon Network

Птерозавры на странице ошибки Amorphia Apparel

Такая страница ошибки на Mozilla

Ещё один забавный пример страницы ошибки 404 Jotsai

Смешная страница ошибки на The Brand Surgery

Страница ошибки Mmo Game Zone

На странице ошибки сайта Acorn Creative разместили носок

Автор – hongkiat

Перевод — Дежурка



Комментарии

[an error occurred while processing the directive]

Похожие статьи

Случайные статьи

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

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

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

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

01. KonMari

(Изображение предоставлено KonMari)

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

02. Marvel

(Изображение предоставлено Marvel)

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

03. LEGO

(Изображение предоставлено LEGO)

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

04. Omlet

(Изображение предоставлено Omlet)

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

05. Mantra Labs

(Изображение предоставлено: Mantra Labs)

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

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

(Изображение предоставлено: Готовы пойти на выживание)

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

07. Carwow

(Изображение предоставлено: 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 для изучения

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 для привлечения потерянных посетителей [2021]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. WPForms

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

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

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

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

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

3. Pixar

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

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

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

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

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

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

4. Дисней

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

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

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

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

5. Netflix

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

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

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

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

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

6. Hulu

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

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

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

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

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

7. Нерф

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

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

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

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

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

8. Tripadvisor

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

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

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

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

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

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

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

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

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

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

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

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

10.Slack

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

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

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

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

11. Lego

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

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

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

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

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

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

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

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

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

13. Список25

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

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

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

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

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

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

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

Страница

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

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

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

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

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

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

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

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

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

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

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

16. 9gag

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

Страница 404

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

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

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

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

17. Путь

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

Страница 404

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

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

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

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

18. IMDB

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

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

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

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

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

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

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

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

Спикер

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

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

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

20. Heyzap

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

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

Страница 404

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

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

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

21. Amazon

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

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

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

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

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

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

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

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

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

40 Умных страниц с ошибками 404 с реальных веб-сайтов

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

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

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

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

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

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

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

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

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

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

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

Страница не найдена: TK Creative 404 страницы ошибок

1. Пипкорн

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

2. Spotify

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

3. Доброжелательно

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

4. Adobe

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

5. Clorox

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

6. Думский Коллектив

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

7. Холодильный дом

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

8. Битли

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

9.Икеа

404-я страница

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

10. Moxie Design Co.

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

11. McKissack & McKissack

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

12. Уловки CSS

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

13. Старые добрые игры

Для других веб-сайтов вы разворачиваете интерфейсную часть, и там… просто огромная пустота. Эта страница является умным отсылкой к GOG Galaxy, родному клиенту видеоигр Good Old Games. К счастью, здесь есть маленький персонаж видеоигры, чтобы дать посетителям возможность сообщить об ошибке, если они захотят.

14. Canva

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

15. Иннотек

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

16. Мириады

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

17. KonMari

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

18. BrandCrowd

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

19. Hot Dot Productions

Страница ошибок

Hot Dot остается верной своему девизу: «Пересечение новых технологий и дизайна.»Страница анимирована сотнями крошечных точек, которые меняют направление в зависимости от того, куда вы перемещаете курсор. Это завораживает и демонстрирует дизайнерские возможности агентства.

20. Оранжевое пальто

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

21. Эрвин и Смит

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

22. DayCloud Studios

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

23. Свободное пространство

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

24. Пекарня Wildwood

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

Страница не найдена: TK Funny 404 страницы ошибок

25. Astuteo

Страница 404 дизайн-агентства

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

26. LEGO

.

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

27. Magnt

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

28.IconFinder

Страница ошибок

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

29. Сладкие сны

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

30. GitHub

Строка «Это не те дроиды, которых вы ищете» относится к уловке Джедая Оби-Вана Кеноби над штурмовиками в Star Wars Episode IV , и эта фраза стала широко известной, чтобы сказать кому-то, что они следуя неправильному образу действий. GitHub использует эту знаменитую строчку в своем сообщении об ошибке 404.

31. Патагония

Пользовательская страница 404

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

32. Облако сигма

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

33. AMC Theaters

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

34. Бруно

Неслучайно креативным агентствам удается создавать классные страницы 404. Вот еще один фильм от креативщиков Bruno, который проигрывает классическую культовую комедию 2000 года Dude, Where’s My Car? Нет, это не имеет ничего общего с компанией или веб-сайтом, но обязательно вызовет смех.

35. NPR

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

36. Средний

Medium использует тот же подход, что и страница 404 NPR, рекомендуя статьи о потерянных и потерянных вещах. Прочтите эти статьи, если у вас есть время — они неплохо читаются.

37. HomeStarRunner

На сайте

HomeStarRunner.com, где размещается мультсериал с Flash-анимацией, на протяжении многих лет появлялась серия забавных страниц с ошибками 404. В самых последних персонажах мультсериала изображена сцена, которая могла бы появиться прямо из одного из их эпизодов.Если вы включите звук при загрузке страницы, вы услышите, как их персонаж Strong Bad, известный тем, что выкрикивает фразы вслух, говорит: «404’d!»

38. Blizzard Entertainment

Вот простая идея, которая в итоге выглядит привлекательной: на странице 404 Blizzard Entertainment есть анимированный персонаж, потерянный в настоящей метели, и немного юмора, которые оценят поклонники World of Warcraft.

39. Привет, большая идея

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

40. HubSpot

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

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

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

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

Примечание редактора: этот пост был первоначально опубликован в декабре 2015 года и был обновлен для полноты.

Дизайн страницы 404: лучшие практики и отличные примеры

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

Вы знаете это чувство. Вы нажимаете интересную ссылку на сообщение в блоге, которое хотите прочитать, и БАМ! 404 Страница не найдена. Это автоматически раздражающий и негативный опыт. Но как эта страница 404 говорит с вами? Это полезно? Даже восхитительно?

Начните создавать запоминающиеся интерактивные страницы 404 с помощью Justinmind

Скачать бесплатно

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

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

Коды состояния HTTP: краткая история страницы 404

Так почему же она вообще называется страницей 404? Как обычно, объяснение довольно загадочно и возвращает нас в темные века Интернета (где-то около 1990 года). Несмотря на популярные мифы о 404, относящиеся к древней серверной комнате или к офису изобретателя во всемирной паутине Тима Бернерса-Ли, оказывается, что 400 было произвольным ярлыком, прикрепленным к ошибкам клиента, включая 404: Страница не найдена.

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

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

Конкурирующие философии страницы с ошибкой 404

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

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

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

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

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

Более пристальный взгляд: важные аспекты вашей 404-страницы

Превратите ошибку пользователя в возможность UX

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

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

Избегайте беспорядка для более высоких показателей успеха пользователей

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

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

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

Лучшие страницы 404 — это возможности для брендинга

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

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

Великолепный дизайн страниц 404 для вдохновения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12. Музей науки и промышленности Чикаго

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

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

Дэн Вуджер — иллюстратор и графический дизайнер, работавший в таких крупных компаниях, как McDonald’s, Bloomberg’s и New York Times.Нам нравится, что дизайн его страницы 404 забавный и непринужденный, с некоторыми вещами, кроме иллюстрации гамбургера, в котором он сожалеет о пропавшей странице. Иногда это все, что вам нужно.

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

Mashable — новостная платформа, охватывающая все, от технологий до публикаций в Game of Thrones. Их контент разнообразен и пытается охватить широкую группу пользователей.Их страница 404 — победитель, потому что она проста и приятна.

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

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

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

Это момент, когда вы выбираете момент, который обычно наполнен разочарованием и негативом, и превращаете его во что-то хорошее.Сделайте его незабываемым по правильным причинам!

20 лучших примеров страниц 404, когда-либо существовавших (+ Советы, как сделать вашу страницу крутой)

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

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

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

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

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

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

• Протокол
• Доменное имя
• Путь

Например, примите во внимание URL нашего блога: https://www.bluleadz.com/blog. Протокол — https: //, домен — bluleadz.com, а / blog — путь.

Страница 404 появляется, когда пользователи случайно вводят что-то вроде https://www.bluleadz.com/bling. Домен правильный, но путь / шик никуда не ведет.

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

Таким образом, ваш URL-адрес будет https://www.pretendbiz.com/products/shirt-1 со ссылкой на этот продукт на главной странице. Если вы решите удалить этот продукт, но забудете удалить ссылку, пользователь будет перенаправлен на страницу 404, что позволит им узнать, что страница не может быть найдена.

6 основных компонентов Cool 404 Pages

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

Юмор

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

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

Четкая тема бренда

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

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

Использование графики

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

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

Ссылки на другие популярные страницы

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

Текст, который направляет пользователей в нужное место

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

Не бойтесь придавать тексту свое собственное восприятие вместо использования стандартной строки «Вы попали не на ту страницу» или «Страница не найдена».

Ссылки верхнего и нижнего колонтитулов

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

Это означает, что они с меньшей вероятностью откажутся от вашего сайта.

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

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

1. Amazon

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

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

2. Чудо

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

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

3. Pixar

На странице

Pixar 404 опубликована «Печаль» из «Наизнанку» 2015 года вместе с сообщением «Оууу … Не горюй, это просто ошибка 404».

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

4. Произвольная форма

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

Freeform является представителем одного из популярных шоу Freeform — Siren . Их изображение бухты в ночное время привлекает внимание, а их копия проста и умна.

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

5. Битли

Страница ошибки

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

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

6. Huda Beauty

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

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

7. Австралийский

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

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

8. Codecademy

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

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

9. Восточный рынок

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

Eastern Market в Детройте имеет страницу с ошибкой, на которой изображена игра под названием «Flappy Spud», в которой вы летите картофелем сквозь стены.Когда вы сталкиваетесь с препятствием, оно превращается в груду картошки фри. Приятное прикосновение.

10. Индекс бесполезной сети

Индекс бесполезных веб-сайтов — это крупнейший индекс совершенно бесполезных веб-сайтов в Интернете. Даже у них есть выходные.

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

11. Penguin Random House

У

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

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

12. IMDb

Страница ошибок

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

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

13. Мемориальная библиотека Фалви

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

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

14. Эмирейтс

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

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

15. Одинокая планета

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

16. Bluleadz

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

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

17. Студия 20-го века

У

20th Century Studios есть потрясающая фирменная страница 404 с большим черно-белым кадром из одного из их знаменитых старых фильмов. Они обыгрывают изображение забавным текстом под заголовком.

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

18. Дисней

Disney — это высшее качество, и их страница 404 — не исключение. У них есть анимированный Wreck it, Ральф просовывает голову через 0 в 404, чтобы отразить замешательство пользователя. Ниже большого 404 — отчетливая и остроумная копия, которая ссылается на один из их фильмов.

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

19. Лиса

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

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

20. HelpScout

У

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

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

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

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

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

404 Дизайн страниц с ошибкой веб-сайта | Michigan Web Design

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

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

Зачем нужно создавать пользовательскую страницу с ошибкой 404?

Пользовательская страница 404 намного удобнее, чем стандартная страница 404. Мы рекомендуем индивидуальный дизайн страницы 404 по нескольким причинам. Во-первых, настраиваемая страница ошибок намного привлекательнее для пользователей, чем стандартный дизайн. Например, посмотрите этот простой, но привлекательный дизайн страницы с ошибкой 404 на веб-сайте EverDry Hydraing в Толедо:

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

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

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

Дизайн Michigan Art Education Association яркий, фирменный, актуальный, эстетически привлекательный и предлагает пользователям полезные навигационные ссылки.

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

Дизайн страниц с ошибкой 404 на веб-сайте

За прошедшие годы компания Artonic разработала МНОГО пользовательских страниц с ошибками 404! Выбираем фото и забавное или подходящее высказывание, добавляем полезные ссылки, и готово! Для этой статьи мы составили список наших любимых — и самых ЗНАЧИТЕЛЬНЫХ — 404 веб-сайтов с ошибками дизайна . Просмотрите их и расскажите нам, что вы думаете.

Напольные покрытия V3 от Schafer Hardwood

Этот дизайн страницы 404 был создан для Schafer Hardware of Michigan.Компания, расположенная в Мейкон-Тауншип, штат Мичиган, производит и устанавливает для своих клиентов красивые деревянные полы. Дизайн страницы создается на основе пользовательских фотографий, сделанных на месте. Мы добавили забавную поговорку, имеющую отношение к клиентской базе Шафера, чтобы облегчить любое разочарование пользователей. Наконец, были включены ссылки на три наиболее посещаемых страницы, чтобы пользователи могли быстро перейти на нужную страницу.

Доктор Шон Томпсон

Дантист из Огайо, доктор Шон Томпсон, предлагает стоматологические услуги в Пембервилле и Моми.Для его пользовательской страницы 404 мы использовали частично съеденный пончик, чтобы привлечь внимание. (Брызги добавляют забавные цвета к синему дизайну веб-сайта.) Текст глупый и предназначен для того, чтобы посетители веб-сайта улыбались. Для доктора Томпсона тоже очень уместно пошутить о пустяках!

Полуобслуживание

Semi Service, региональный дилер грузовых автомобилей и фургонов, находится в Солт-Лейк-Сити, штат Юта. Для этой компании Artonic выбрала для своей страницы тему Road Closed . Изображение простое и сильно контрастирует с дизайном веб-сайта.Текст не так много, но есть ссылки как на ГЛАВНУЮ, так и на страницу КОНТАКТЫ (две из наиболее важных страниц для включения в ваш веб-сайт), чтобы помочь пользователям эффективно ориентироваться.

Harcourt Manufacturing

Красивая пользовательская страница 404 была разработана для компании Harcourt Manufacturing из Мэдисон-Хайтс, штат Мичиган. В комплекте есть летная лента, элемент, сфотографированный в штаб-квартире компании. Этот 404 изящный и привлекательный. Он поддерживает общий элегантный, но смелый бренд Harcourt.

Клей Grizzly

Хотите чего-нибудь менее серьезного и немного более увлекательного? Обратите внимание на этот культовый дизайн страницы 404, созданный для Grizzly Glue, онлайн-магазина знаменитого Grizzly Glue из Мичигана. Этот дизайн страницы 404 выглядит немного глупо, но он работает! Пользователи могут почувствовать некоторое разочарование, когда поймут, что попали на страницу с ошибкой, но медвежонок может помочь немного ослабить напряжение. Кроме того, он идеально подходит для бренда!

FH Mason Company

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

401K Центр опрокидывания

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

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

Leading Families Home

Базирующаяся в Толедо некоммерческая организация Leading Families Home — замечательная организация в Северо-Западном Огайо.Организация работает с семьями, в которых часто остаются маленькие дети. Это изображение маленькой девочки милое, забавное и представляет целевую аудиторию LFH. Мы любим это!

UpLevel боевые искусства

Чтобы соответствовать смелому и энергичному бренду UpLevel Martial Arts, компания Artonic создала дизайн страницы с ошибкой 404. Глупая фотография с изображением боевых искусств была использована для повышения вовлеченности. Текст большой, для общения с пользователями, и есть только одна кнопка. Это простой, но эффективный дизайн страницы 404, потому что он включает в себя бренд, юмор, один призыв к действию и очень мало текста.Изображение также имеет отношение к общему дизайну веб-сайта.

Полюсные амбары своими руками

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

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

Земляные работы и мощение Slusarski

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

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

Наш фаворит: UNISORB

Наконец-то! Наша любимая страница с ошибками 404 (пока) — UNISORB! Расположенная в Мичиган-центре, штат Мичиган, UNISORB предлагает технологии установки B2B производственным компаниям по всему штату. Компания предлагает услуги, а также товары. UNISORB был интересным проектом для работы, и наши контакты в офисе UNISORB были веселыми. Мы были вдохновлены на создание следующей страницы, которую мы обожаем!

Нужен индивидуальный дизайн веб-сайта?

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

Каждый сайт, который мы создаем, полностью индивидуален. Мы не используем шаблоны. (Узнайте, почему так важен индивидуальный дизайн веб-сайта). Каждая часть вашего веб-сайта создается специально для ВАС — ваши цели, ваша аудитория, ваша стратегия и ваш бренд.

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