ТОП-50 лучших примеров дизайна 404 страницы — Plerdy
Каждая страница в сети Интернет имеет свой собственный уникальный адрес с помощью которого на нее можно попасть. Если же страница удалена, перенесена или в адресе допущена ошибка, тогда пользователь будет перенаправлен на 404-ю страницу. 404-я ошибка означает, что сервер не смог найти никаких данных по запросу клиента, то есть у сайта нет страницы, соответствующей вашему запросу.
Очень важно правильно настроить или продумать 404-ю страницу, ведь она может стать последней, которую увидит пользователь на вашем сайте. Для этого можно использовать несколько тактик:
- Для интернет-магазинов прекрасно подходит идея оформления 404-й страницы в своем фирменном стиле и презентации на ней различных товарных предложений. Таким образом пользователь сможет или легко вернуться на необходимую страницу, или перейти на товар которого он еще не видел.
- Для любителей креатива тоже есть интересный вариант. Можно оформить страницу ошибки в интересном стиле: шутка, провокация, крутой дизайн, мини игры и тому подобное.
- Для остальных случаев следует просто оформить эту страницу в корпоративном стиле и дать возможность пользователю продолжить свое путешествие по вашему ресурсу.
Что ж, на этом с теорией закончим, а сейчас давайте познакомимся с 50 крутыми идеями для оформления 404-й страницы.
Содержание
1. Blizzard Entertainment
2. JACK DANIEL
3.Tproger
4. Github
5. Geekbrains
6. Adidas
7. Emailcenter
8. Marvel
9. Crello
10. Sketch
11. Red Bull
12. Cayenne
13. Aviasales
14. LEGO
15. Studiofables
16. ITcluster
17. Pixar
18. 20th Century Fox
19. Planeta Kino
20. Startup Depot
21. MentorMate
22. Specialized
23. 9GAG
24. Orangecoat
25. Teehan+Lax
26. Hakim.se
27. CSS-tricks
28. The New Yorker
29. Dribbble
30. SumatoSoft
31. Skipio
32. CoolFarm
33. Squarespace
34. DustyMiller.ca
35. Mameilleurecuite
36. Agens
37. Rachel the great
38. Fork cms
39. Incore
40. Daniel Karcher
41. Figma
42. Repair pal
43. Romainbrasier
44. Batman 3D
45. Telltale
46. IMDb
47. Netpeak
48. Elativeagency
49. FOX
50. The Software House
Вывод
Первым участником нашего ТОПа стала известная американская компания 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 страницу: 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 страницу, увидев которую, посетителям не захочется покидать ваш сайт.
30+ креативных страниц 404 ошибки: подборка
Редактор-переводчик SEOnews
Работая над дизайном сайта, стоит учитывать все возможности лишний раз зацепить внимание пользователя. Одним из таких способов является креативная страница ошибки 404. Изначально ее цель – оповестить пользователя о том, что URL, по которому он переходил, отсутствует и вернуть его на сайт. Конечно, можно оставить стандартную страницу и не тратить время на проработку идеи и создание дизайна. Однако наличие красочной страницы, цепляющей внимание, поможет сгладить впечатления от того, что пользователь «потерялся», не смог найти то, что искал.
В идеале страница 404 ошибки должна не только сообщить пользователю, что произошло, но и предложить альтернативу: главную страницу или другой часто посещаемый раздел сайта. Чтобы не потерять клиента или читателя, вам стоит продумать концепцию страницы и приложить усилия для разработки. А вдохновение предлагаем поискать в нашей подборке.
В качестве бонуса в конце статьи вы также найдете советы по оформлению страницы 404.
Purée Maison
Purée Maison – французское креативное агентство, специализирующееся на коммуникационных стратегиях. Персонаж со страницы ошибки 404 нарисован в фирменном стиле сайта и также встречается на страницах загрузки.
Pixar
Не плачь, это всего лишь ошибка 404. То, что ты ищешь, могло переместиться в долгосрочную память.
На странице ошибки 404 мультипликационной студии Pixar Печаль из мультфильма «Головоломка» приняла ошибку слишком близко к сердцу. Хороший пример тематической страницы: персонаж известен многим, кто знаком с творчеством компании.
Marvel
Страница не найдена. Даже глаз Уату не видит ваш запрос.
Главным героем страницы ошибки 404 Marvel стал персонаж вселенной Наблюдателя. Поскольку Уату – не такой уж хороший наблюдатель, в Marvel решили, что глаза, следующего за курсором, недостаточно и расположили его рядом с Черной вдовой.
Matteo Vandelli
Креативные страницы 404 нужны не только крупным известным брендам. Страница итальянского графического дизайнера Маттео Ванделли – одна из работ его портфолио. Зайдите на нее, проведите мышкой и посмотрите, что будет.
20th Century Fox
То, на что вы смотрите, могло уже быть перемещено. Если вы, конечно, не ищете «Офисное пространство».
Киностудия 20th Century Fox вместо страницы с ошибкой 404 выдает кадры из своих фильмов, среди которых «Эдвард Руки-ножницы», «Офисное пространство», «Месть полудурков», «Наполеон Динамит» и другие. Забавно, что на момент написания статьи при попытке кликнуть по тексту пользователя перебрасывало на другую, менее креативную страницу ошибки 404.
Cloud Sigma
О, вы нашли домашнюю страницу нашего junior-разработчика. Даже спя на диване целыми днями, он иногда находит время немного покодить…
Cloud Sigma – облачное хранилище. На странице – немного юмора и кнопка, ведущая на Главную.
BluePath
Раз вы попали на эту страницу, наслаждайтесь картой, которую мы для вас составили. На ней показаны все преступления, совершенные в Атланте за пару лет. Зачем? Да потому что то, что вы нас еще не наняли, – преступление!
Другой сайт, страница которого сделана с юмором, – сайт компании BluePath, работающей с Big Data. На странице 404 – карта Атланты с точками, обозначающими преступления, совершенные в городе за 2 года. А все потому, что вовремя не начать сотрудничать с BluePath – преступление.
The Useless Web Index
На странице реестра самых бесполезных сайтов интернета несколько опоссумов ищут потерявшуюся страницу и никак не могут ее найти.
Kualo
О нет, космические завоеватели уничтожили эту страницу. Отомстите им. Или кликните на ссылку, чтобы вернуться на предыдущую страницу.
Веб-хостинг Kualo на рынке уже 15 лет, бесконечность по меркам интернета. Их страница ошибки 404 – отсылка в прошлое. Те, кто наткнулся на нее, могут поиграть в Space Invaders, лучшую аркадную игру по версии Книги рекордов Гиннесса и основоположницу всех современных аркад.
Waaark
Упс, что-то пошло не так.
Страница креативной студии Waark выполнена в приятной цветовой гамме, но это не главное. Чтобы понять, насколько она крута, нужно вставить наушники или включить громкость. Перейдите на страницу и послушайте, как робот ругается на того, кто попал на страницу 404, и заявляет о своем превосходстве.
Steve Lambert
Самая неловкая страница ошибки 404 в интернете. Страницы здесь нет. Она перемещена. Или никогда не существовала. Извините. Так иногда случается. Может, воспользуетесь поиском?
На странице ошибки 404 сайта американского художника Стива Ламберта размещено видео, в котором автор неловко рассуждает об ошибке 404 и никак не может остановиться. Если вы знаете английский, попробуйте посмотреть его хотя бы до середины, не испытав чувства неловкости за автора. У нас не получилось.
Figma
Надпись «404» можно растягивать за опорные точки. Расслабляет.
Airbnb
Airbnb решил ограничиться простой, но приятной анимацией о невезучей девочке, уронившей мороженое. Компания известна дружелюбием и лояльным отношением к своим клиентам, и страница соответствует имиджу. Зато здесь есть много полезных ссылок.
Hot Dot Production
Слоган веб-разработчик Hot Dot Production «Где дизайн встречается с технологией» хорошо отражен на его странице ошибки 404. Три цифры составлены из сотен маленьких точек, которые меняют направление или расходятся в разные стороны в зависимости от движений мышки.
GitHub
Страница Github нацелена на гиков-фанатов серии «Звездные войны».
Помимо 404 у GitHub еще есть креативная страница с 500 ошибкой.
CSS Ninja
Ниндзя, символ компании CSS Ninja, обосновался на странице 404 ошибки. Он предлагает пользователю перейти на предыдущую или домашнюю страницу.
MailChimp
Мы потеряли эту страницу. Мы посмотрели везде, но так и не нашли то, что вы ищете. Давайте найдем для вас место получше.
В сервисе для рассылок MailChimp недавно произошел ребрендинг, страница ошибки 404 соответствует новому фирменному стилю. Судя по всему, осел со страницы тоже не понимает, куда попал.
Emirates
Страница ошибки 404 от Emirates выполнена в фирменном стиле компании. Один из менеджеров компании Томас Панек утверждает, что упор на ней сделан на UX-дизайн: компания провела исследование и вычислила, на какие страницы пользователи обычно переходят после 404. Так на странице появились 4 кнопки для перехода на поиск рейсов, управление бронью, вход в аккаунт и главную страницу.
Audiko
Audiko – сервис для создания рингтонов. На странице ошибки 404 – иллюстрация Лондона с его традиционными красным автобусом, телефонной будкой, Биг Беном, Шерлоком Холмсом и Тауэрским мостом. А чтобы не потеряться, по центру расположен поиск рингтонов и ссылка на домашнюю страницу.
IMDb
На 404 странице главного западного сайта о кинематографе можно найти измененные цитаты из кинофильмов, в которые вставлено слово «страница». Например, «Я отсутствующая страница Джека» из Бойцовского клуба или «Что на странице?!» из фильма «Семь».
Зайдите и проверьте, цитата из какого фильма попадется вам.
NPR
Организация National Public Radio, распространяющая новости радиостанций США, на своей странице 404 ошибки предлагает ознакомиться с материалами о других пропавших: Атлантиде, летчице Амелии Эрхарт и изображении Валдо на крыше одного из зданий Ванкувера.
Blizzard Entertainment
Компания-создатель игр World of Warcraft и Diablo обвиняет пользователя в том, что страница «сломалась». Ущерб действительно налицо: хедер навигации «упал», а экран разбит.
TProger
На странице 404 портала о разработке TProger есть все: объявление об ошибке, забавные видео (каждый раз новые) и ссылки на другие страницы.
Crello
Страницу сервиса для создания дизайнов Crello украли голуби. Действительно, теперь остается только вернуться на предыдущую страницу или сразу перейти к созданию дизайна.
Hakim.se
Страничка 404 ошибки сайта шведского разработчика Хакима Эль Хаттаба. Сразу после перехода на пользователя начинают смотреть с десяток глаз, не сбежать со страницы в этот момент невозможно.
Android
Android предлагает пользователю вернуться на сайт либо поиграть в игру: помочь сладостям попасть в нужную трубу.
Sumatosoft
Авторы страницы Sumatosoft намекают на то, что страницу украли инопланетяне. Но не стоит расстраиваться: вы все еще можете перейти на домашнюю страницу, просмотреть кейсы или написать компании.
Ma meilleur cuite
Этой страницы не существует… Вы пьяны или просто потерялись? В любом случае вы нашли Pacman’а, который тоже потерялся. Помогите ему найти выход, по пути собирая кружки с пивом!
Французский блог об алкоголе Ma meilleur cuite предлагает сыграть в игру Pacman, выполненную в стилистике сайта.
Romainbraser
На странице сайта разработчика Romainbraser можно сыграть в аналог популярной игры Lemmings.
Fox
На 404 странице студии Fox пользователей ждет Стьюи из Гриффинов. Кнопка «Get Together» ведет на главную страницу.
Discord
Оказывается, мессенджер Discord приводят в действие квантовые хомяки-роботы. Узнать об этом можно, только попав на страницу ошибки 404.
Slack
На странице 404 ошибки корпоративного мессенджера Slack – отсылка к небольшой MMO-игре Glitch (от англ. глюк), созданной одним из основателей программы.
Canva
Сервис для дизайна изображений Canva предлагает решить головоломку или вернуться на предыдущую страницу.
Amphibian
На портале с комиксами Amphibian можно сыграть в лягушачий футбол.
Советы от экспертов
Одного вдохновения для создания хорошей 404 страницы недостаточно, поэтому предлагаем изучить советы от экспертов.
В первую очередь нужно принять, что возникновение 404 ошибки – это слабо контролируемая проблема. Причины могут быть разными. Вы обновили структуру сайта, а старая ссылка ведет на ныне несуществующую часть. Пользователь опечатался. Вы опечатались при заполнении сайта.
Задачи кастомной страницы 404:
- уведомить об ошибке в дружелюбной форме. Не забывайте про тональность коммуникации (ToV, Tone of Voice): ошибка произошла не по вине пользователя, успокойте его, просто скажите, что контент не найден;
- объяснить причину. Например, что страница была удалена либо что вы недавно обновили структуру сайта;
- предложить решение, чтобы оставить посетителя на сайте.
Можно посмотреть логи и изучить проблему, чтобы понять причину ошибок 404. Устраните причину, если она зависит от вас. Если ошибочный URL повторяется, предложите уникальное для этого адреса решение. Например, настройте редирект на новый адрес статьи либо предложите альтернативный контент, тематический раздел. Допустим, пользователь отложил в браузерные закладки товар, возвращается через год и не находит его, т.к. модель снята с производства, а страница удалена. В таком случае на странице 404 порекомендуйте ему новую модель.
Если причина возникновения ошибки неизвестна, можно предложить типовые решения: предоставить возможность перейти на работающие страницы, показать основную навигацию, дать ссылки на популярные разделы. Например, для ecommerce-сайтов имеет смысл предложить перейти в каталог товаров или дать ссылки на самые популярные. Главное – не оставить посетителя наедине с проблемой. Хорошие примеры реализации этих идей – Squarespace и IFTTT.
Это рекомендации, которые удовлетворяют базовые задачи. Можно сделать страницу нетипичной, но это улучшение уже на уровне эмоционального отклика.
Удивить можно с помощью иллюстрации или необычного копирайтинга. Попробуйте пойти еще дальше: сделайте игру-рулетку, призом в которой будет промокод на скидку. Креативьте! Однако увлекаться не стоит: клиенту в первую очередь нужно помочь найти то, за чем он пришел.
Примеры того, как можно удивлять и веселить, но при этом все равно предлагать полезное действие:
- CreativePeople – сюрреалистичная фирменная иллюстрация поддерживает наш стиль, а отсылка к уровню в игре предлагает в неформальном стиле решение проблемы.
- Andrea Areni – хорошая визуализация ошибки, напоминающая помехи на телеэкране. Круто, технологично, непонятно.
- Gymbox – а тут просто удивляют посетителя, смешат его. Все-таки 404-я ошибка – не какая-то трагедия.
Всем работающим с 404 страницей также советую прочитать статью Джейкоба Нельсона, написанную еще 21 год назад. Все советы остаются актуальны.
Однако стоит помнить, что все-таки лучше, чтобы пользователь вообще не попадал на страницу 404 ошибки.
Константин Кислейко, руководитель отдела дизайна AGIMA
Я уже давно не встречал 404 страницу в реальной жизни.
Видимо, CMS стали достаточно совершенными, чтобы исключить эту проблему. Ссылки внутри сайта проверяются и исправляются автоматически, а внешние переходы сразу перенаправляют на наиболее релевантную страницу. В общем, на хорошем сайте у посетителя шансов увидеть 404 страницу немного. А про плохие сайты и разговаривать незачем.
В последнее время даже дизайнеры перестали веселиться на этой странице. Смысла нет, разве в портфолио выложить. Так что, перефразируя классику, – хорошая 404 страница – это невидимая 404 страница.
Источник: Creative Bloq
Страницы 404 / Хабр
404 страница. Это место для пасхалок, дурачества и креатива создателей сайтов. Про 404 ошибку есть даже выступление на TED.
Первая «4» — означает, что ошибка на стороне клиента, «04» — означает конкретную ошибку «Not Found».
Кому в пятницу нечего делать или кто в поисках вдохновения — добро пожаловать под кат, там подборка лучших (и худших) 404 страниц.
Your browser does not support HTML5 video.
Начнем с самых животрепещущих сайтов, а потом перейдем к «попсовым».
Роскомнадзор
PornHub
Старая версия 404 Хабра
Новая версия 404 Хабра
Virgin.com
YouTube
Reddit.com
Amazon.com
Vk.com
Linkedin.com
Imgur.com
Aliexpress.com
Bing.com
Stackoverflow.com
Github.com
Dropbox.com
Craigslist.org
Dribbble.com
Awwwards.com
Csswinner.com
Coolhunting.com
Codyhouse.co
Mailchimp.com
Slack.com
Mashable.com
Bloomberg.com
Airbnb.com
Bitly.com
МГУ, психфак
Разговаривающая страница 404.
Еще подборки
404 pages from popular sites — Design Inspiration, Muzli, 2017
Anatomy of a 404 Error Page, Envato, 2016
Лучшие 404 страницы, Tproger, 2015
404 – страницы, ради которых стоит заблудиться на сайте, cossa, 2015
Идеальная страница 404 ошибки, или как удержать пользователя на сайте?, Habrahabr, 2014
Лучшие примеры 404 страницы, seo-design, 2013
Лучшие 404 страницы Рунета, oakhill, 2012
Лучшие примеры ошибки 404, netpeak, 2012
50 прикольных страниц ошибки 404 , Дежурка, 2009
Интерактивные
Играем в Pacman
Рушим сайт
Суслик
Спасаем леммингов
Поймай кота
P.S.
Ну и напоследок
А какая ваша любимая 404 страница?
Какая 404 страница на вашем сайте?
Креативные примеры страниц ошибки 404
Иметь креативную страницу ошибки 404 также важно, как иметь хороший контент на вашем сайте. Иногда попадание посетителя на эту страницу – не ваша вина, однако вашей задачей является направить пользователей на главную страницу. Это что-то вроде второго шанса вновь привлечь посетителя. Если у вас до сих пор нет страницы ошибки 404, подумайте об этом.
Здесь мы собрали 20 примеров креативных творческих страниц ошибки 404, чтобы вдохновить вас и заставить улыбнуться. Эта страница, как скрытый мир – вы думаете, что никто не увидит, но если это случится, пусть это будет действительно запоминающимся.
Mashable
Текст с фото: Плохие новости – мы не смогли найти страницу, которую вы ищете. Хорошие новости – мы наши все ваши потерявшиеся носки.
Template Monster
Текст с фото: Снежный человек, НЛО, хорошие актеры в фильмах Майкла Бэя… сущестование их не доказано. Так же, как и страница, которую вы ищете на TemplateMonster. Но нам кажется, что Вы тут оказались не случайно. Так почему же не вернуться на нашу домашнюю страницу или заглянуть на наш блог? А, кстати, вот Вам прощальный подарочек в виде страницы 404, если вы фанат креативных страниц 404, спешите скачать один из бесплатных шаблонов страниц ошибки 404, созданных нами!
Defrozo
Текст с фото: Нам жаль, но страница расфокусирована.
Diesel
StickerMule
Blue Daniel
dario brozzi
centresource
Текст с фото: Ребята, извините, парковка закрыта! Ваши действия – пойти домой или врезать лосю.
agens
Текст с фото: Похоже, что Вы потерялись в космосе. Может Вы ищете что-то из наших последних проектов?
Tinsanity
MailChimp
Good Dog Design
Текст с фото: Пропала собака! В последний раз видели в желтом кружке заголовка. Черно-белая. Похожа на колли. Отзывается на “good dog”. Отличительные особенности – невероятно быстро разучивает новые трюки и вытаскивает упавших в колодец сирот. Если найдете – вкусно покормите и подкиньте пару ему пару головоломок.
Tripomatic
Текст с фото: Извините, эта страница так и не вернулась из путешествия по пустыне Атакама.
Starbucks
RSQ
Текст с фото: Глубоко скорбим по поводу вашей потери. Ссылка мертва. Соболезнования можно найти на домашней странице RSQ.
Focus Lab
Текст с фото: Хватит шуметь. Почему бы не перейти на страницу, которая работает? Вы что, хотите взломать наш сайт? В чем дело? Проходите. Тут не на что смотреть.
Michael Schmid
Текст с фото: Гамбургер! Подождите, что? Да, вот так я отреагировал, когда Вы тут появились. Это страница ошибки 404, тут не на что смотреть. Проходите мимо.
Высоких конверсий!
04-04-2016
Улучшаем страницу «Ошибка 404» — яркие примеры
Когда посетитель попадает на стандартную страницу «Ошибка 404», велика вероятность, что он сразу же уйдёт с веб-сайта и никогда не вернётся. И совсем другое дело кастомная, привлекательная и полезная страница 404. Она способствует дальнейшему пребыванию пользователя на веб-ресурсе, повышает лояльность аудитории и улучшает SEO-показатели сайта.
Что означают эти знакомые всем цифры — 404?
Начнём с истоков. Определение из Википедии:
«Ошибка 404 или Not Found («не найдено») — стандартный код ответа HTTP о том, что клиент был в состоянии общаться с сервером, но сервер не может найти данные согласно запросу».
Код 404. Первая цифра «4» указывает на системный сбой со стороны посетителя, к примеру, неверно введён адрес или плохое соединение. Значение «04» обозначает категорию ошибок и статусов разных классов: Bad Reques, Precondition Failed, Conflict и т.д. Причины возникновения: опечатка при написании адресной строки, переезд страницы на другой адрес, ссылка страницы удалена или устарела, плохое соединение.
Почему лучше не использовать страницу «Ошибка 404» по умолчанию?
Наверное, все знакомы со стандартной страницей «Ошибка 404». Она выглядит немного устрашающе:
Страница «Ошибка 404» по умолчанию
Такая страница не будет полезна посетителю и даже ссылка «На главную» не поможет. Ведь пользователи, которые ищут определённую страницу, но по каким-то обстоятельствам попали на несуществующую ссылку, вынуждены вернуться на главную и начать поиск заново.
В идеале клиент никогда не должен столкнуться с подобной ошибкой. Но никто не может быть застрахован от человеческого фактора при введении адреса. К тому же даже небольшой сайт зачастую имеет «битые ссылки».
Привлекательная и грамотно оформленная страница 404 позволяет извиниться перед посетителем и предложить ему помощь в поисках нужной информации.
Ошибка 404 в книжном интернет-магазине
Пространство для улучшения Страницы 404
Чтобы ошибка не испугала пользователя:
- Объясните, что произошло
- Укажите причины происшедшего
- Скажите, что делать дальше
Это стандарт. Но можно применять и другие текстовые проявления с изюминкой и креативными нотками.
Ошибка 404 на сайте для просмотра фильмов, сериалов
О текстовой составляющей 404-й ошибки читайте в статье Копирайтинг для «Страницы 404» в моём блоге.
Как правильно оформить страницу 404
Главное, объяснить посетителю, что ничего страшного не произошло, и тактично направьте его к выходу из этого «тупика».
Чтобы доверие к вам не было подорвано, мы собрали все способы улучшения страницы «Ошибка 404».
Совет №1: Ссылки на разделы сайта.
Не заставляйте посетителя вручную писать адреса страниц, искать опечатки и обновлять страницу. Добавьте кнопку «Вернуться на главную» и продублируйте ссылки популярных разделов сайта.
Оригинальная страница на украинской доске объявления ОЛХ
Совет №2: Добавьте строку поиска.
Этот инструмент значительно упростит действие клиента. Он введёт в строку нужный запрос и быстро перейдёт в тот раздел, в котором должен был оказаться до появления ошибки.
404-я ошибка на сайте маркетингового агентства
Совет №3: Придерживайтесь фирменно стиля и дизайна
Важно, чтобы дизайн страницы 404 не сильно отличался от веб-сайта. Навигация, логотип, цветовая схема и другие элементы должны быть идентичными.
Слишком сильное различие настораживает и создаёт впечатление, что случайно перешли по нехорошей ссылке на другой ресурс.
Интересная страница для автомобильного сайта
Совет №4: Будьте понятными и дружелюбными
Если вы думаете, что каждый пользователь знает, что такое «ошибка 404» — вынужден вас огорчить. Не все посетители сайта одинаково продвинуты.
Поэтому в дружелюбной манере объясните, в чём проблема и скажите, что делать дальше.
Если этого не сделать, всегда найдутся те, кто не поймут устрашающую надпись «404 Not found» и запросто исчезнут в неизвестном направлении.
Совет №5: Внесите креатив и юмор
Нарисуйте интересную картинку, тематическую анимацию с лёгким юмором. Динамические иллюстрации приковывают внимание, а такая страница вызовет интерес и желание узнать, что же ещё интересного есть на этом веб-ресурсе?
Немного юмора от BlizzardКреативная страница под необычную ЦА
Какая страница 404 у студии MEDIOL
Наша 404-я ошибка выглядит так:
Страница «Ошибка 404» веб-студии MEDIOL
Дизайн и внешний вид остался в том, же стиле, что и блог. Мы убрали шапку и подвал сайта. С лёгким юмором объяснили, что такой страницы нет. Для удобства разместили ссылки «На главную» и «Читать блог». Также предлагаем основные кнопки социальных сетей. Добавив все технические нюансы, мы не забыли про юмор и креатив.
Бонус
Примеры интересных страниц «Ошибка 404»:
Анимированное изображение 404-й ошибки от KONUX
или
Еще один хороший пример анимированной ошибки 404
или
Можно смотреть бесконечно 🙂
Заключение
Создавайте собственные информативные и запоминающиеся страницы, вместо скучных и бесполезных шаблонных вариантов. И пользователи не захотят покидать ваш сайт.
А у вас есть любимые 404-е ошибки? Кидайте ссылки в комментариях, посмотрим вместе.
Улучшаем страницу «Ошибка 404» — яркие примеры
Рейтинг: 5 Оценок: 2
Понравилась статья? Поделитесь с друзьями:
Похожее
comments powered by HyperComments
Что такое станица 404 и зачем она нужна
Страница 404 говорит нам, что мы не попали на сайт и ввели URL некорректно. Как правило, пользователи покидают такие сайты, потому что, видя страницу ошибки, они чувствуют раздражение.
Страница 404 появляется в том случае, когда пользователь запрашивал сайт, который не удалось найти. Самый распространенный пример – это когда вы удалили промо-страницу, приуроченную к конкретной акции. Переходя по ссылке на нее, пользователь окажется на странице 404.
Стоит отметить, что страница 404 «Не найдено» (404 Page Not Found) – это один из кодов состояния HTTP, принятых Консорциумом Всемирной паутины (W3C) в 1992 году. У каждой цифры в ошибке есть свое значение:
Первая «4» означает, что произошла ошибка со стороны клиента. В свою очередь, первая «5» значила бы ошибку со стороны сервера.
Цифры «04» — определяют конкретную ошибку Not Found из группы 4хх. Среди других ошибок из этой группы — 400 Bad Request, 401 Unauthorized, 402 Payment Required, 403 Forbidden и так далее.
Зачем она сайту
Для страницы 404 есть несколько причин:
1. Ошибки случаются у всех. Вы не можете предугадать поведение всех ваших покупателей и их действия. Если они не смогут найти то, что им было нужно, они уйдут, а вы потеряете клиента.
2. Со временем сайт растет и страниц становится очень много. Невозможно отследить все изменения. Где-то поменяли адрес, какую-то страницу удалили, но она по-прежнему индексируется. В таком случае, страница 404 – это возможность перестраховаться.
3. Большое количество страниц 404, которые не позволяют пользователям перейти на другие страницы вашего сайта, негативно отражаются на позициях в органическом поиске. Поэтому, правильно оформить страницу 404 – выгодно с точки зрения SEO.
Как создать страницу 404: важные моменты
1. Объяснить пользователю ситуацию
Снизить негативное отношение посетителя к странице 404 можно. Достаточно объяснить ему, что произошло, по каким причинам он мог попасть на эту страницу (старая ссылка, неверный адрес) и оставить ссылку на главную страницу.
2. Юмор
Не бойтесь самоиронии. Если пользователь попал на страницу 404, постарайтесь его рассмешить. В случае успеха, это уменьшит его ощущение потери. Используйте картинки, анимации и даже видео.
3. Обратно на сайт
Самое главное, не забудьте дать пользователю возможность вернуться на «рабочую страницу». Оставьте ссылку на главную или на блог.
4. Ваш стиль
Так как страница 404 является частью вашего сайта, то и оформлена она должна быть подобающе. Соблюдайте корпоративный стиль, тональность и манеру общения. Это даст понять пользователю, что он по-прежнему на вашем сайте и все еще может попасть туда, где находится интересующая его информация.
5. Анализ
Постарайтесь с определенной периодичностью проверять сайт на предмет несуществующих страниц, ссылок, которые на них ведут и прочих вариантов ошибок. Это лучший способ сделать так, чтобы пользователь все же не попал на страницу 404.
Жуковский Александр
Top 50 Best 404 Error Pages Design Примеры — Plerdy
Каждая страница в Интернете имеет свой уникальный адрес, который ведет на нее. Если страница была удалена, перемещена или в ее URL-адресе есть ошибка, пользователи будут перенаправлены на страницу 404. Ошибка 404 означает, что серверу не удалось найти никаких данных для запроса пользователя, поэтому сайт не может предоставить ответ.
Очень важно продумать и правильно настроить страницу 404, так как это может быть последнее, что пользователь увидит на вашем сайте.Для этого можно использовать несколько тактик:
- Для интернет-магазинов дизайн страницы 404 должен быть вдохновлен их корпоративным стилем и включать предложение различных товаров. Таким образом, пользователи смогут легко вернуться на нужную страницу или проверить товар, который они еще не видели.
- Есть еще интересный вариант для тех, кто любит творческий подход. Вы можете выбрать необычный стиль для страницы с ошибкой на основе шутки, провокации, мини-игры и т. Д.
- В остальных случаях просто используйте свой фирменный стиль и разрешите пользователям продолжить просмотр вашего веб-ресурса со страницы ошибки
Итак, мы закончили с теорией, и пора проверить 50 отличных дизайнов страницы 404.
Наш ТОП начинается с известной американской компании Blizzard Entertainment. Blizzard разрабатывает игры и разработала такие известные продукты, как World of Warcraft, StarCraft, Heroes of the Storm, Diablo, Overwatch. Их страница 404 выглядит как раздавленный экран, на котором отображается неработающий сайт.
.
Лучшие примеры страниц 404 в электронной коммерции
Добрый день всем читателям блога Amasty!
Сегодня мы поговорим на тему, которую часто упускают из виду магазины: как выделить свой 404.
Что мы можем сделать со страницами ошибок 404
Чем больше ваш магазин, тем важнее кажется проблема 404-й страницы.
Для сайтов электронной коммерции страница 404 играет огромную роль: она должна зацеплять разные группы клиентов, чтобы они не ушли с неправильной страницы.Таким образом, есть много вариантов, которые вы можете использовать для своей страницы 404:
- поле поиска;
- популярных / бестселлеров;
- код купона или специальные предложения;
- правый фрагмент текста, объясняющий, что произошло;
- ;
- избранных / последних сообщений / элементов;
- ключевых ссылок;
- или любое сочетание этих элементов.
Список категорий
Однако есть и другая сторона дела: как всегда, нужно выделяться из толпы.Помимо технических и маркетинговых задач, которые решают эти страницы, вы можете использовать их для более крупных идей:
404 страницы ошибок все еще игнорируются магазинами
Проводя исследование для статьи, я просмотрел сотни лучших сайтов Alexa в Покупках, выбрав самые смешные, самые красивые или креативные примеры страниц с ошибкой 404. И вот что я нашел:
- Многие и многие магазины используют страницу 404 по умолчанию — это не смертный грех, но определенно дает возможность сделать здесь немного больше;
- многие магазины перенаправляют с несуществующих страниц на страницы категорий / предыдущие / домашние, что тоже нормально, но все же может сбивать с толку, особенно для неопытных пользователей Интернета.Хорошо показать небольшое уведомление о том, что страница, которую запрашивал посетитель, не существует и он был перенаправлен.
- Многие магазины вообще не имеют надлежащей страницы 404 . В этом случае вы видите пустую страницу или страницу, показывающую стандартное сообщение об ошибке 404, возвращаемое сервером, без дизайна и вообще без ссылок. Я бы оценил количество магазинов без надлежащей (по крайней мере, по умолчанию) страницы CMS 404 около 40%, что является удивительно большим количеством для топ-листа Alexa!
- другие мелкие проблемы например, отображение текста ошибки 404 на неправильном языке.
- креативных, забавных или, по крайней мере, замечательных страниц 404 — это не более 3% — на самом деле, я трачу гораздо больше времени, хотя мне может потребоваться составить достойный список из примеров 404 страниц.
Наконец: лучшие примеры страниц с ошибками 404 за 2014 год в электронной коммерции
Но все же мне посчастливилось встретить интересные, забавные, забавные и красивые страницы ошибок 404 с сайтов электронной коммерции; о них стоит упомянуть и уделить пару минут. Кто знает, может быть, этот список вас вдохновит.
Если вам нужно взглянуть на детали снимков экрана, просто щелкните, чтобы увеличить изображения.
1. underarmour.com
Ничего сложного, но яркое изображение и цветовая гамма выделяют эту страницу 404.
2. nespresso.com
Брендируйте все! Всего одно яркое изображение с идеальной чашкой кофе превращает неприятный опыт посещения удаленной или перемещенной страницы во что-то лучшее.
3.futureshop.ca
Хороший пример: Future Shop создал страницу 404, которая действительно увеличивает d
сайта.
14 последних и лучших дизайнов страниц с ошибками 404 для веб-сайтов / мобильных приложений
Страница с ошибкой 404, которая часто служит для предупреждения посетителей сети / приложения о том, что страница, на которую они пытаются перейти, не существует, часто рассматривается как один из наиболее вероятных элементов потери пользователей / посетителей из-за утомительного и утомительного входа в систему / вывод / загрузка / ведущие страницы в веб / приложении. Однако это не означает, что такие страницы ошибок во всех случаях будут кошмаром.
На самом деле, креативная, классная, интересная или информативная страница с ошибкой 404 может не только плавно привести клиентов к другим частям ваших веб-сайтов / приложений, но также уменьшить разочарование клиентов и позволить им оставаться на сайте / в приложении намного дольше.
Итак, как же создать такую классную, интересную и креативную страницу с ошибкой, чтобы привлечь внимание пользователей и удерживать их на сайте / в приложении в качестве дизайнера веб-интерфейса / приложения или менеджера по продукту? Давайте продолжим читать эту статью и насладимся 14 последними и лучшими дизайнами страниц с ошибкой 404, чтобы получить вдохновение и узнать, как создать красивый, интересный и привлекательный дизайн страницы с ошибкой 404:
Во-первых, какие сообщения об общих ошибках используются на страницах ошибок 404?
В наши дни все больше и больше дизайнеров осознают важность копирайтинга в дизайне своих веб-приложений и приложений и тщательно выбирают каждый текст, чтобы сделать их дизайн более гуманным, уникальным и понятным.Поэтому, имея это в виду, прежде чем знакомить с 14 передовыми практиками для устранения ошибок 404 и пользоваться ими, нам лучше сначала изучить некоторые распространенные сообщения об ошибках, которые часто используются на страницах ошибок 404, чтобы вы также могли разработать уникальный и креативный копирайтинг для своих страниц ошибок. на основе этих распространенных сообщений об ошибках:
* Запрошенный URL не найден на этом сервере
* 404 Файл или каталог не найдены
* HTTP 404 не найден / страница 404 не найдена
* Ошибка 404 / Ошибка 404 / HTTP 404
* Страница не найдена
Конечно, в некоторых случаях дизайнеры UI / UX также специально добавляют некоторые индивидуальные слова / предложения с логотипом «404», чтобы сделать страницу с ошибкой более впечатляющей и интересной.
14 новейших и наиболее креативных дизайнов страниц с ошибкой 404 для веб-сайтов / приложений
1. Затерянный в лесу
* Дизайнер: Tajana Barac
* Мелирование ： Цветовые контрасты, цветовые градиенты, формы и тени
Цветовые контрасты классического синего и белого, цветовые градиенты и формы с тенями на этой странице ошибки — все они дают людям ощущение покоя и безмятежности. Это действительно отличная стратегия для эффективного уменьшения негативных эмоций, вызванных внезапно появившимся предупреждением об ошибке 404.
Кроме того, его идеальная цветовая схема и стиль иллюстраций также действительно привлекают внимание, что может естественным образом привлечь внимание пользователей и уменьшить их неприятные впечатления.
* Что можно узнать?
Оптимизируйте дизайн страницы ошибок с помощью различных тенденций дизайна.
В последние годы смешивание различных дизайнерских тенденций, таких как цветовые контракты, цветовые градиенты, формы, тени, слои и т. Д., Никогда не станет плохой идеей, чтобы помочь дизайнерам создать выдающийся UI / UX-дизайн.Таким образом, вы также можете применять различные тенденции дизайна вместе, чтобы оптимизировать дизайн страниц с ошибкой 404. (Щелкните здесь, чтобы проверить 9 основных тенденций дизайна пользовательского интерфейса для мобильных приложений в 2018 г. )
2. Требуется
* Дизайнер: Источник: limpfish.com
* Основные моменты ： Уникальная форма для отображения сообщения об ошибке 404
В отличие от некоторых разочаровывающих страниц ошибок, которые просто отображают сообщения об ошибках в скучной форме, дизайнер этой страницы с ошибкой 404 принимает уникальную форму, которая очень похожа на объявление о розыске, чтобы интуитивно объяснить ошибки и предоставить несколько вариантов для ссылки на другие части этого сайта.Это действительно креативно и интересно.
Более того, этот «плакат о розыске» также намеренно сделан очень старым и даже сломанным, что делает его более реальным и заметным.
* Что можно узнать?
Настройте специальную форму для страницы с ошибкой 404.
Также настройте специальную форму для своей страницы 404. Имея достаточно времени, вы даже можете создать серию страниц с ошибками 404 с разными формами и добавить их все в свой дизайнерский журнал.Конечно, также превращает их в интуитивно понятные прототипы с помощью полезного инструмента для создания прототипов, чтобы вы могли их проверить и свободно использовать в будущем. (Прочтите это, чтобы узнать , как выбрать лучший инструмент для создания прототипов для вашего дизайна)
3. Шиноби
* Дизайнер: cssninjas.com
* Особенности ： Прогрессивное раскрытие информации
За исключением общего объяснения ошибки 404 страница не найдена, разработчик этой страницы с ошибкой применяет метод проектирования, называемый «прогрессивное раскрытие», для расширения функций страницы.Люди могут легко нажимать связанные слова / фразы, чтобы легко переключаться на другие страницы.
* Что можно узнать?
Также используйте метод прогрессивного раскрытия в дизайне своей страницы.
В дизайне страницы ошибок также примените метод прогрессивного раскрытия информации и добавьте ссылки, кнопки, меню боковой панели или скрытые строки меню, чтобы расширить функции страниц с ошибками 404.
4. Страница ошибки Switex
* Дизайнер: Ash Rahal
* Моменты ： Наложения, эмоциональные элементы и забавные фото
Дизайнер страницы с ошибкой 404 использует наложение слов, фотографий и теней, чтобы создать ощущение пространства.Более того, чтобы ослабить негативные эмоции, вызванные страницами с ошибками 404, дизайнер также добавляет много эмоциональных элементов, таких как юмористическое объяснение и забавное фото, на котором изображен депрессивный мужчина, чтобы пользователи понимали и находили отклик.
* Что можно узнать?
Добавьте эмоциональные элементы, чтобы улучшить эмоциональное восприятие ваших дизайнов.
Эмоциональные элементы, такие как некоторые юмористические слова, забавные значки выражений , интересные фотографии, более продуманный и плавный дизайн взаимодействия и цветовая схема, которая может успокоить пользователей и т. Д., могут сделать дизайн страницы ошибок более гуманным и удерживать их на вашей странице намного дольше.
5. 404 Стр.
* Дизайнер: Алана Брайдик
* Особенности: Опции и простота
Как пишет дизайнер этой страницы с ошибкой: «404 должны быть содержательными. Расскажите пользователю, что произошло, почему и что они могут сделать, чтобы решить эту проблему », — дизайнер отображает простые слова и фотографии, чтобы ясно объяснить ошибку 404 и предоставить им различные варианты перехода к другим частям этого сайта.Это также полезно, чтобы предложить посетителям сайта лучший пользовательский опыт.
Конечно, простой стиль дизайна этой страницы также соответствует все более упрощенным тенденциям дизайна , набирающим силу в последние годы.
* Что можно узнать?
Примите простой стиль дизайна с большим количеством функциональных возможностей и улучшенным пользовательским интерфейсом.
Страница ошибки не должна быть сложной. Если вы не можете идеально сбалансировать функции и перспективы веб-страницы / страницы приложения, простая и интуитивно понятная страница с большим количеством функциональных возможностей и лучшим пользовательским интерфейсом также может быть успешной.
6. UI 404 Стр.
* Дизайнер: Марио Сестак
* Особенности ： Сильные визуальные эффекты и идеальное эхо изображений и содержимого
Черные фоновые фотографии с сильными визуальными эффектами могут не только выделить белые тексты страницы с ошибкой 404, но и быстро привлечь внимание посетителей сайта / приложения после того, как они зашли на эту страницу.
Более того, идеальное эхо изображений и содержимого также делает его текст более убедительным и эффективным, чтобы уменьшить негативные эмоции пользователей.
Кроме того, боковая панель с дополнительными ссылками, такими как «Справка», «О программе» и другими параметрами, также эффективно улучшает взаимодействие с пользователем.
* Что можно узнать?
Также используйте сильные визуальные эффекты, чтобы улучшить дизайн страниц ошибок.
Существует множество визуальных эффектов, которые можно использовать для создания выдающейся страницы с ошибкой 404, например, высококачественные фотографии, правильные цветовые схемы, творческая тема и т. Д.
* Также используйте боковые панели для расширения функций страницы и улучшения взаимодействия с пользователем.
7. 404 Страница Хоссейн
* Дизайнер: Хоссейн Махмуди
* Основные моменты: стиль постера фильма и тема научной фантастики
Этот дизайн страницы ошибок предназначен для адаптации стиля постера к фильму и выбора темы научной фантастики. Слова «404» идеально вписаны в «плакат научно-фантастического фильма», что может заставить посетителей сайта / приложения естественным образом погрузиться в задумчивость. И это действительно креативно и интересно.
* Что можно узнать?
Также выберите подходящую тему для дизайна своей страницы.
Правильная тема для страницы с ошибкой 404 может удвоить объем вашей работы и сделать ее более привлекательной. Таким образом, вы также можете выбрать правильную тему для дизайна своей страницы, такую как вышеупомянутые фильмы, анимация, мультфильмы, фестивали и разные культуры и т. Д.
8. 404 Страница не найдена
* Дизайнер: Наяб Фатима
* Основные моменты: Яркая анимация и очаровательный стиль иллюстраций
Самая отличительная часть этого дизайна страницы с ошибкой 404 — это две анимированные совы, которые постоянно моргают своими большими чистыми глазами, что заставляет людей чувствовать себя спокойно и комфортно.Кроме того, очаровательный стиль иллюстрации и пустое пространство также делают страницу более красивой и мечтательной. Попадая на эту страницу, вы словно попадаете в сказочный мир, тщательно созданный дизайнером. И это также эффективный способ облегчить разочарование посетителей сайта.
* Что можно узнать?
Также добавьте несколько анимаций / взаимодействий на страницу с ошибкой 404.
Стиль иллюстрации также делает ваш дизайн более красивым.
9. Ежедневный пользовательский интерфейс — 404 стр.
* Дизайнер: Карлос Париенте
* Основные моменты: юмористические анимации и элементы, связанные с фильмами
Не можете удержаться от смеха, увидев эту страницу с ошибкой? В ПОРЯДКЕ! Независимо от того, соответствует ли он некоторым обычно используемым принципам дизайна интерфейса, он, по крайней мере, очень успешен в привлечении внимания пользователей и создании более приятного пользовательского опыта, верно? Кроме того, юмористическая анимация с хорошо известными фигурами, относящимися к фильмам, на этой странице ошибок не только идеально сочетается с сообщением об ошибке 404, но и очень привлекательна для людей, которые очень любят фильмы.
* Что можно узнать?
Также добавьте в свой дизайн известные или модные элементы.
Также добавьте юмор или забавные элементы в свой дизайн.
10. Ежедневное испытание пользовательского интерфейса — страница 404
* Дизайнер: Андреа Хок
* Основные моменты: Хороший снимок, объединяющий функции веб-приложения / приложения
За исключением добавления связанных анимаций и высококачественных фотографий для улучшения дизайна страниц с ошибками, вы также можете легко комбинировать функции целевых веб-сайтов, приложений и рекламных продуктов.Например, эта страница с ошибкой 404 — хороший снимок, чтобы объединить функции продвигаемых продуктов, и используется как еще одна хорошая платформа для демонстрации различных украшений. Таким образом, даже когда люди внезапно прерываются этим сообщением об ошибке при просмотре различных ювелирных изделий, они также могут продолжить предварительный просмотр своих предпочтительных. И это действительно хороший способ снизить показатель отказов страницы.
* Что можно узнать?
Также объедините функции веб-сайта / приложения, чтобы обогатить содержание страницы с ошибкой.
11. Ежедневная ошибка 404 UI-8, страница
* Дизайнер: Дина Лам
* Основные моменты: Красивый пейзаж, фото
В дизайн страницы с ошибкой 404 действительно неплохо добавить изображение жизни или красивого пейзажа, чтобы пользователи чувствовали себя более расслабленно и комфортно.
* Что можно узнать?
Также добавьте удобную фотографию из жизни или пейзажа на страницу с ошибкой 404.
12.404 страница Друзей Эрмитажа
* Дизайнер: Борзенков Антон
* Основные моменты: Интересный стиль масляной живописи и продуманное окно поиска
Дизайнер этой страницы использует уникальный и интересный стиль масляной живописи, чтобы привлечь посетителей. Более того, чтобы создать более приятный и плавный пользовательский интерфейс, дизайнер также добавляет окно поиска после сообщения об ошибке 404, чтобы каждый пользователь мог свободно искать и переходить к своим предпочтительным ссылкам / страницам как можно скорее, как только они столкнутся с проблемами с ошибкой 404. .
* Что можно узнать?
Также используйте уникальный стиль масляной живописи или китайской туши.
13. Дэвид 404 Стр.
* Дизайнер: Давид Ковалев
* Особенности: 3D-технологии
Дизайнер этой страницы использует передовую технологию 3D, чтобы показать ошибку 404, что действительно интересно и интуитивно понятно.
* Что можно узнать?
Также используйте передовые технологии для улучшения своих проектов.
В наши дни также существует множество передовых технологий, которые можно использовать в дизайне страницы ошибок, например видео / аудио, 3D-технологии и многое другое.
14. Шремаль 404 Стр.
* Дизайнер: Шремаль
* Основные моменты: используйте страницу ошибок, чтобы рассказать историю
Разработчик этой страницы с ошибкой использует формы, цвета, тени, текст и все другие элементы, включенные, чтобы рассказать историю: «Ваша искомая страница не может быть основана на Земле» или «Эта страница перенесла вас на другую планету».Это действительно впечатляюще и интересно.
* Что можно узнать?
Используйте свое воображение, чтобы рассказать историю в дизайне страницы.
В целом, надеюсь, вы легко сможете вдохновиться этими новейшими дизайнами страниц с ошибкой 404, а также узнать что-то полезное для улучшения дизайна своей страницы.
Mockplus помогает легко и быстро сохранять и повторять идеи дизайна страницы с ошибкой 404
Почерпнуть много хороших идей из этих отличных примеров ошибок 404? Не хотите, чтобы эти драгоценные идеи исчезли бесследно? Как насчет того, чтобы быстро превратить их все в визуализированные прототипы с помощью хорошего инструмента для создания прототипов, повторить и сохранить их в своих дизайнерских дневниках для лучшего использования? В ПОРЯДКЕ! Если вы случайно задумались об этом, вы можете дать Mockplus (простой и быстрый инструмент для создания прототипов) хорошую попытку воплотить идеи дизайна страницы с ошибкой 404 в красивые и интерактивные прототипы за 10 минут.
Давайте кратко рассмотрим его мощные функции, которые вы можете использовать для создания и улучшения дизайна страницы с ошибкой 404:
Шаг1. Легко и быстро добавляйте / импортируйте статические / динамические изображения в Mockplus
В качестве более простого и быстрого инструмента для создания прототипов Mockplus предоставляет дизайнерам широкий спектр удобных для пользователя компонентов и функций, связанных с изображениями:
* Используйте компоненты изображения, чтобы добавить фотографии на страницу ошибки
В Mockplus вы можете легко перетащить компоненты «Изображение», чтобы добавить необходимые фотографии для страницы с ошибкой.Кроме того, при необходимости вы также можете использовать его Repeater и Auto Fill для добавления и автоматического заполнения большого количества компонентов изображения в течение нескольких секунд.
* Используйте Мои библиотеки для пакетного импорта изображений
Если вы хотите импортировать множество красивых изображений сразу, чтобы украсить дизайн ошибок, вы можете легко открыть раздел «Мои библиотеки» и импортировать нужные изображения партиями.
* Легко импортировать изображения из Sketch
Хотите импортировать изображения, созданные и отредактированные в Sketch, для оптимизации страницы с ошибкой 404? Вы также можете напрямую использовать «Импорт изображений в Mockplus», чтобы продолжить.Кроме того, плагин Mockplus для Sketc
.
Примеры страниц с ошибками 404: настраиваемые, анимированные и интерактивные
Зачем вам нужна настраиваемая страница 404
Найти неработающую ссылку на своем сайте несложно. Надеюсь, это не выглядит так:
Средний пользователь Интернета может не знать, что ошибка 404 означает, что страница, которую они искали, отсутствует.
Они могут подумать, что весь ваш веб-сайт исчез, и отправятся на поиски нового. Это может привести к потере читателей, подписчиков, потенциальных клиентов и продаж.И все потому, что они пытались добраться до одной маленькой недостающей страницы.
Вот почему наличие настраиваемой страницы 404 необходимо для каждого веб-сайта, будь то блог или бизнес.
Essential 404 Элементы страницы
Есть много способов перейти со своими страницами с ошибками 404. Мне нравится баланс творческого и конструктивного.
Например, Airbnb смешивает полезный список популярных внутренних ссылок с креативной анимацией:
Что вы должны включить на страницу с ошибкой 404?
Попробуйте следующие полезные рекомендации для своей страницы с ошибкой:
- Что обычно хотят посетители, когда заходят на ваш сайт?
- Какова основная цель вашего бизнеса.Может ли ваше сообщение быть усилено креативом на странице 404?
- Есть ли конкретный призыв к действию, который важен для вашего бизнеса?
- Это не ваша вина, что они попали на страницу 404, это ваша вина. Можете ли вы воспользоваться возможностью, чтобы осветить ситуацию и развлечься?
- Это возможность для ваших творцов! Классные страницы с ошибками 404 часто представляют интересный проект для вашей внутренней команды.
Eharmony использует легкое сообщение и сильный призыв к действию.
В большинстве случаев этого достаточно для вашей творческой команды, чтобы создать что-то захватывающее. Сейчас мы рассмотрим несколько примеров, но сначала рассмотрим отслеживание ошибок в Google Analytics.
Аналитика страницы 404: отслеживание ошибок 404 с помощью Диспетчера тегов Google
Правильная настройка отслеживания 404 на вашем веб-сайте будет означать, что большинство, если не все ошибки будут отслеживаться, что даст вам множество возможностей для их решения.
Во-первых, убедитесь, что вы запускаете скрипт Диспетчера тегов Google на своей странице 404.Это достаточно просто — вы можете вручную проверить исходный HTML-код страницы или установить Tag Assistant (от Google) для Chrome.
Google Tag Assistant, работающий на встроенной странице пользовательских ошибок.
Чтобы отслеживать страницы с ошибками 404 с помощью Диспетчера тегов, вы собираетесь создать пользовательскую переменную под названием «Переменная заголовка страницы».
Тип переменной — это переменная JavaScript, а имя переменной — document.title :
Эта определяемая пользователем переменная возвращает значение заголовка страницы.Теперь нам нужно создать триггер.
В своей учетной записи Диспетчера тегов Google перейдите в раздел «Триггеры» и создайте триггер для каждого случая, когда заголовок страницы совпадает с тем, что содержится в теге заголовка вашей пользовательской страницы с ошибкой 404.
Наша страница содержит «Страница не найдена», поэтому мы устанавливаем триггер на это значение. Будьте осторожны, так как этот тип соответствия будет чувствителен к регистру. Если вы не уверены, используйте «соответствует регулярному выражению (без учета регистра)».
Наконец, создайте новый тег — я немного уменьшил масштаб, чтобы попытаться продемонстрировать все настройки.По сути, вы создаете событие с ошибкой 404 с названием категории, которое регистрирует путь к странице как действие.
Когда все будет готово, опубликуйте.
Больше 404 примеров
Builtvisible
Builtvisible имеет настраиваемую страницу ошибки 404, которая отправляет наших посетителей либо в наш блог, либо в раздел тематических исследований.
Lego
Страница ошибки 404 Lego — это интересный и легкий для понимания опыт общения с брендом. Есть много ссылок, которые помогут пользователю вернуться в нужное русло, куда бы он ни пошел.
Gymbox
Это забавный пример анимированной пользовательской страницы 404 от Gymbox. С творческой точки зрения я могу представить себе команду, получающую от этого массу удовольствия. Это также говорит об их ценностях — они, очевидно, достаточно расслаблены для этого!
Marvel
Даже Око Уату не видит вашу просьбу! Идеально продуманная и очень специфичная для поклонников страница 404 с некоторыми базовыми интерактивными компонентами, чтобы немного развлечься.
.
Добавить комментарий