Картинки для ошибки 404



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



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

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

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

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

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

В целом страница 404 должна решать следующие задачи:

Общие рекомендации по теме

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

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

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

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

Purée Maison

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

Pixar

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

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

Marvel

Страница не найдена. Даже глаз Уату не видит ваш запрос.

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

Matteo Vandelli

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

20^th Century Fox

То, на что вы смотрите, могло уже быть перемещено. Если вы, конечно, не ищете «Офисное пространство».

Киностудия 20^th 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 страницы недостаточно, поэтому предлагаем изучить советы от экспертов.

Источник: Creative Bloq

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

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

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

• Красиво и оригинально оформленные 404 страницы
• Красивая айдентика на 404-й странице
• Тематичные 404 странички
• Забавные и необычные 404
• Занятные коты и собачки
• Красиво иллюстрированные Not Found
• Провальное-непреодолимое и потерянные на 404
• Игровые 404 страницы

Интересно и оригинально оформленные 404 страницы

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

01. Discord App

За работой квантовый хомяк-робот из мира Discord.

02. Beach Park

Плавник акулы, он и в луже 404-й страницы захватывает внимание.

03. Toggl

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

04. Designzillas

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

05. Bench

Такой страницы нет, как и снежного человека, единорога или лох-несского чудовища. …или она существует?

06. Pirate Code

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

07. Weemss

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

08. Flipping Book

Может кому знакомо? В домашнем хаосе с малышом и котом, вырванные страницы становятся самолетиками.

09. Vebk

Красивая рестро страница 404 ошибки – в тонах и жанровой стилистике самого сайта.

10. De’Nastia

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

11. Slack

В странном месте бродят свинки с курицами, природа буйствует красками. Страница «Not Found» напоминает сказку.

12. Pikabu

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

13. Rabota Gk-Rte

Обратный отсчет в ожидании столкновения ракеты с землей…

14. Lyft

Страница ошибки сайта американского такси-сервиса.

15. Kick Point

Внедорожник 4×4 на странице 404

16. Madwell

Креативное агентство развело анимированный костер на 404-й странице.

17. Clockwise

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

18. Matteo Vandelli

Интерактивная анимация цифр 404 на странице с ошибкой.

19. Grainand Mortar

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

20. Rails Ware

Тематическая 404-я сайта разработчиков и дизайнеров.

21. Domenart Studio

Красиво оформленная 404-я страница российской студии дизайна.

22. Love Beets

Английская ферма выращивает овощи для салатов. Интереактивный редис под социальный шаринг на 404-й странице – это оригинально и уникально.

Страница 404 и красивая айдентика

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

23. Sketch

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

24. Puree Maison

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

25. Hungry Boys

Благодаря лого и анимации прелоадера, жест облизывания в перевернутом виде уже понятен.

26. Phive

После эксцентричного поведения при загрузке страниц, значок прелоадера на 404-ой выглядит изможденным: «Не могу согнуться, потеря 404 грамм жира…»

27. Mail Bakery

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

28. Moosend

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

30. A propos du cancer

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

31. Studio Wolf

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

32. Horton Works

В дополнение к логотипу и сам слон.

33. Pointless Corp

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

34. Nagyi Titka

Рекламный персонаж продукта крупным планом на 404-странице.

35. Panoraven

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

36. Waaffle

На странице с ошибкой персонаж сайта начинает плавиться.

37. Avocode

Страница 404 весьма недвусмысленно подчеркивает креативный нейминг (avocode от авокадо).

38. Yelp

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

Тематичные 404 страницы

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

39. E-co

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

40. Slodych

Аппетитная выпечка цифр 404.

41. Codemy Concept

Чашка кофе – символ разработчика.

42. Prob2b

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

43. Handy Hat

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

44. Limra Technosys

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

45. Max Style

У агентства по цифровому продвижению компаний эффектная страница 404.

46. Fuse Lab Ceative

Красивый агентский сайт. Страница ошибки эффектно оформлена объемными цифрами 404.

47. 1ps

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

48. Woodst

Анимированная 404-я на сайте агентства, специализирующегося на графике.

Забавные и необычные 404-е

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

47. Tapfiliate

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

48. Пора валить

Анимированная 404-страница агентства «Пора валить»: свинья развлекается на тракторе.

49. Vintage

Забавно анимирована страница 404 украинской студии: чем-то обеспокоен трафаретный олень.

50. Insurance Experiments

Свой забавный промо проект UK-страховщики назвали экспериментальным, а мульти-страницу 404 сделали веселой.

51. Multi Work

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

52. Fromage Abondance

Видео-коуб: французская корова-модница — соответствует тенденциям, также как и сайт.

53. Red Collar

Причудливая фантазия с анимацией на 404 странице цифрового агентства.

404 коты, собаки и разные создания

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

54. Html6

Сделано на шаблоне: интерактивный и сердитый кот.

55. Buzz Feed

Gif-ка слегка анимированного кота на 404-й… а как иначе для развлекательного медиа ресурса?

56. Life Daily

Интересующийся кот-404 с развлекательного веб-ресурса.

57. Kayako

Анимированный котенок рыжими пятнами удачно удачно поддержал акцентный цвет сайта.

58. Idesign

Непонятные создания перед непростым решением. Но надо возвращаться на главную.

59. Help Scout

Собачки рвутся с поводка… впрочем позитивных flat-иллюстраций немало на этом сайте.

60. Marketohttps://www.marketo.com/404

Разве кого-то может рассердить такая мордочка.

61. 99designs

Щенок — терминатор.

Красиво иллюстрированные Not Found страницы

62. Enjoy Kamchatka

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

63. Skipio

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

64. Epic

Красивая страница ошибки, выполнена как креативный вариант страницы «О нас».

65. Branded7

Красивая иллюстрация 404 в стиле шапки и футера сайта.

66. Дом со всем

Качественно отрисованная 404-я страница под тематику сайта компании.

67. Bright Scout

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

68. Deep Time

Потерянная во времени, винтажная 404-я страница проекта интерактивной инфографики об истории Земли.

Провальное / непреодолимое. Потерянные на 404-ой

На таких страницах ошибки есть непреодолимое препятствие, полный провал. Либо вы ясно понимаете, что потерялись на сайте.

69. FSRussia

Страница 404 сайта федерации фигурного катания: «провальное выступление».

70. Sibirix

Видео-коуб 404 новосибиркой дизайн студии с роботом-собакой.

71. Anton & Irene

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

72. Straight North

Кирпичная стена за дверью. Ваш клик привел на несуществующую страницу. Может не все клики засчитываются? Попробуйте еще – тут зачтется (специализируются на  PPC рекламе, SEO).

73. Cloud Cart

Попал на распутье (смысл в том, что нужно выбрать подходящий сервис платформы).

74. Ucraft

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

75. Crello

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

76. Kleo

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

Игровые страницы 404

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

77. Heyzap

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

77. Kualo

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

78. Pointe Pest

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

79. Canva

Сбор пазла – совсем несложная игра.

80. Amphibian

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

CSS3, SVG
31.03.2022

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

54 креативных страниц с ошибкой 404 с классной анимацией!

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

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

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

И так рассмотрим все собранные мной примеры анимированых 404 страниц:

1. Mars 404 Error Page

2. Dripping paint 404 page | Анимация SVG

3. CSS 404 page

4. 404 animation

5. 404 — new

6. 404 — animation

7. Error Page

8. Ark 404 animation

9. 404 Animation

10. 404 Animation

11. Neon 404 — CSS only(Static)

12. 404 svg animated концепция страницы для интернет-магазина

13. Darkmode animation | 404

14. 404 error page

15. Text Wave Animation (404 not found)

16. GSAP: SVG Animation 404 Error Milk Carton)

17. Error 404 Page With Astronaut

18. MJ 404 in Pure CSS

19. 404 error page, Caveman mode — pure CSS

20. Space 404 (pure CSS)

21. StevenGFX Robot 404 Error

22. Weight a Minute — Error 404

23. 404 Page

24. 404 Page

25. Css only 404 Crying Baby

26. 404 Frog

27. Yeti 404 Page

28. 404 Error Example #2

29. 404 Page

30. CSS Train 404 Page

31. Error Page

32. 404 — SVG Animation

33. 404 Page SVG animation

34. 404 Error Page: Animated SVG GSAP

35. 404 Error page — Animated SVG

36. SVG Animation 404 page

37. 404

38. Animated Error page — #Project4

39. 404 Error Page

40. Fargo 404

41. 404 Error Page

42. 404 magnifying glass SVG animation CSS

43. Error 404 bulb SVG animation CSS smil

44. 404 animation CSS Javascript Mousemove

45. Tractor Pull 404 Error

46. Space 404

47. «Lost in Space» — 404 Error

48. «Lost in Space» — 404 Error

49. 404 Page Not Found

50. Challenge: 404 page

51. 404 — Glitched out

52. 404 No signal

53. Neon — 404 Page Not Found

54. Glitchy 404 Page

Надеюсь, вам понравилось! Пользуйтесь!

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

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

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

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

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

1. Blizzard Entertainment

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

2. JACK DANIELS

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

3.Tproger

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

4. Github

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

5. Geekbrains

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

6. Adidas

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

7. Emailcenter

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

8. Marvel

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

9. Crello

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

10. Sketch

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

11. Red Bull

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

12. Cayenne

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

13. Aviasales

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

14. LEGO

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

15. Studiofables

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

16. ITcluster

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

17. Pixar

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

18. 20th Century Fox

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

19. Planeta Kino

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

20. Startup Depot

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

21. MentorMate

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

22. Specialized

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

23. 9GAG

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

24. Orangecoat

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

25. Teehan+Lax

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

26. Hakim.se

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

27. CSS-tricks

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

28. The New Yorker

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

29. Dribbble

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

30. SumatoSoft

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

31. Skipio

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

32. CoolFarm

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

33. Squarespace

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

34. DustyMiller.ca

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

35. Mameilleurecuite

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

36. Agens

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

37. Rachel the great

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

38. Fork cms

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

39. Incore

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

40. Daniel Karcher

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

41. Figma

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

42. Repair pal

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

43. Romainbrasier

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

44. Batman 3D

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

45. Telltale

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

46. IMDb

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

47. Netpeak

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

48. Elativeagency

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

49. FOX

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

50. The Software House

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

Вывод

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