Примеры страницы 404: Как сделать из страницы 404 что-то полезное и интересное: 30 примеров

Оформление страницы 404 — примеры нестандартных вариантов оформления

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

Советы по дизайну

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

Задачи, которые решает page 404:

1. Объясняет, что случилось. «У нас сгорел сервер. Пожарные и системные администраторы уже в пути, скоро здесь будет контент».
2. Рассказывает о причинах. «Наш сотрудник Василий мониторит битые ссылки, но в этот раз недоглядел. Придётся снизить ему зарплату».
3. Даёт советы по дальнейшим действиям. «Не переживайте, это случается со всеми. Ниже мы разместили 2 кнопки. Перейдите на главную или используйте поиск».

Создавать нестандартный дизайн Not Found надо на этапе проектирования структуры онлайн-проекта.

Рекомендации по оформлению:

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

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

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

Пример 1 — Ueno

Компания помогает бизнесу выстраивать отношения с клиентами. Ueno с юмором отнеслись к разработке структуры page 404. Анимация бегущего хот-дога завораживает. Над текстом маркетологи тоже потрудились: «Вы нашли её и выиграли стиральную машину и сушилку». Ниже размещена ссылка перехода на главную с текстом «На самом деле, нет». Этот пример демонстрирует нестандартный подход — компания по философски относится к ситуации.

Ueno предлагают последовать за хот-догом и сбежать отсюда в другие разделы.

Пример 2 — Canva

Популярный сервис для разработки графики — от логотипов до полноценных макетов — позаботился о посетителях. Юзеры, которые потерялись в «дебрях» интерфейса, могут собрать пазл или вернуться обратно. Примечательно, что Canva сделал раздел в другой стилистике. Хедера и футера нет, зато есть два призыва к переходу на главную. Сервис не забывает давить на психологию: «Попробуйте разобраться». Почти все захотят сначала пройти квест и только потом уйдут решать свои проблемы.

Пример 3 — Airbnb

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

Кстати, если перезагрузить вкладку в браузере, лакомство больше не падает.

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

Пример 4 — Agnes Lloyd-Platt

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

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

Пример 5 — Android

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

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

К сожалению, протестировать геймификацию онлайн уже не получится. На сайте Андроида её больше нет. Теперь там красуется стандартная надпись в стиле «Хьюстон, у нас проблемы».

Пример 6 — PayJunction

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

В этом проекте даже есть пасхалка (бонус).

На одной из планет установлен флажок с логотипом PayJunction. Если захотите зайти посмотреть вживую — подключитесь к VPN с американской локацией, сервис заблокирован в России и Украине.

Пример 7 — Spotify

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

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

Пример 8 — Superrb

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

Текст и Сall to action — стандартные. В духе «Здесь ничего нет, возвращайтесь в начало».

Пример 9 — Goooders

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

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

Пример 10 — Romain Avalle

Ромен занимается веб-разработкой. Он креативно подошел к оформлению портфолио и не побоялся экспериментировать с темным интерфейсом. В центре 404 — объёмный текст. При перемещении курсора он растягивается на всю длину. Если поместить фокус в центр цифры 0, магия прекращается.

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

Пример 11 — Andrea Reni

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

Пример 12 — Dribbble

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

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

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

Пример 13 — Kommigraphics

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

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

Пример 14 — Aviasales

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

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

Пример 15 — Seegno

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

«Тупик — хорошее место для разворота». Именно так думают посетители и возвращаются на главную.

Мы проанализировали 15 крутых примеров дизайна страницы 404. Надеемся, они вдохновили вас на разработку нестандартного варианта. Специалисты IDBI создадут страницы Not Found любой сложности. Свяжитесь с нами любым удобным способом.

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

Блуждая по Сети, вы иногда натыкаетесь на сообщения об ошибке «page not found». Часто эти «не найденные» 404 страницы ошибок не представляют никакого интереса. Неудовлетворенный таким результатом, посетитель может покинуть сайт. Поскольку ошибки в написании адреса допускаются довольно часто, а сайты не идеальны (например ошибка из-за битой ссылки)  – очевиден факт того, что они теряют своих посетителей. Лучшие примеры страниц 404 наводят на мысль о создании эффективной Error Page, которая должна быть спроектирована и настроена индивидуально под сайт.

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

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

Screaming Frog ( screamingfrog.co.uk/404/)

Okostroy ( okostroy.ru/404/)

Hey Zap ( heyzap.com/404 )

Fusion Charts ( fusioncharts.com/404/)

Med-Altai ( med-altai.ru/404/)

Bully Entertainment ( bullyentertainment.com/404notfound/)

Mini Handball (www.minihandball.pl/ 404 )

Banks (banks.az/404 )

Purple Travel ( purpletravel.co.uk/abc/)

Funkyimg ( http://funkyimg.com/404 )

Colibris ( http://colibris.ua/404/)

Smart Touch ( smarttouch.me/en/page-not-found )

Gift Rocket  (http://www.giftrocket.com/ 404)

Made with Envy (http://madewithenvy.com/404 )

Space Angry Birds  (http://www.angrybirds.com/404er )

11×11

Fitbit (http://www.fitbit.com/404 )

Sandalikidet (http://sandalikidet.ru/404error/)

Black Wave Creative  (blackwave.net/ 404 )

Оvsyannikoff  ( http://ovsyannikoff.ru/404 )

2013.404fest ( http://2013.404fest.ru/404/)

Kyan ( http://kyan.com/404 )

Coex (https://www.coex.cz/404)

Soline (http://www.soline.ru/ 404 )

ТОП-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 страницы

Отдайте свои заботы о хорошем контенте на сайте в наши руки

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

Подпишись на рассылку и получи книгу в подарок!

Ошибка 404 или Not Found («не найдено») — код ответа сервера на несуществующую страницу на сайте.

Как это работает?

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

В нашем случае код ответа- 404. Ответ сервера выглядит следующим образом:

Причины 404 ошибки

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

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

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

Как сделать 404 страницу?

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

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

Как сделать страницу 404? Необходимо просто прописать в данный файл следующую инструкцию:

ErrorDocument 404 //semantica.in/404.php
Всё довольно просто!
Страница 404 для сайта: общие рекомендации
Во первых, 404 страница должна быть! Страница 404 ошибки безусловно должна присутствовать на каждом сайте.
В небольших проектах уменьшить вероятность возникновения 404 ошибки можно используя программу Xenu’s Link. С её помощью вы можете отыскать все битые ссылки на сайте и выполнить следующие действия:
если ссылка страницы была изменена, необходимо изменить URL ссылки на новый;
если страницы уже не существует — просто удаляем ссылку.
 
 
К сожалению, Xenu не спасает от пользователей, которые могут неправильно ввести текст ссылки и не застрахует от битых или неактуальных внешних ссылок, которые введут на страницы вашего сайта.
 
Оформление 404 страницы
По-умолчанию страница 404 ошибки представлена в виде пустой страницы с надписью 404 Not Found, также возможна ситуация с редиректом на страницу хостинга, услугами которого вы пользуетесь.
Значительной доле пользователей всемирной паутины не достаточно предоставить страницу в таком виде — они просто не поймут что произошло, почему сайт вдруг исчез и переслал работать. Это означает только одно — потеря клиента. Но не будем опускать руки и рассмотрим эту ситуацию под другим углом. Как оформить страницу 404 и удержать гостя на сайте?
Текст для 404 страницы
Скажите “Нет!” технической информации!
Большинству пользователей знаком термин “404 ошибка”, но не стоит углубляться в причины её возникновения и давать дополнительные технические рекомендации. Донесите пользователю суть ошибки.
Предоставьте полезный контент!
Необходимо дать полезную информацию в сложившейся ситуации и натолкнуть пользователя на действие которое поможет решить проблему.
Это можно реализовать разными методами:
разместить меню сайта. Не стоит забывать о ссылке на главную страницу сайта
разместить полезные ссылки- это может ссылки на популярный или новый контент.
Разместить строку поиска по сайту- для того чтобы пользователи нашли то что они искали.
В оформлении 404 страницы важно не переусердствовать — не стоит слишком нагружать ее контентом.
Дизайн страницы 404 
Визуальное оформление 404 страницы не должно выбиваться из общего  дизайна.
Сделайте 404 страницу изюминкой сайта! Добавьте креативности страницы с ноткой юмора — это привлекает и удерживает посетителей.
В сети множество примеров того, что значит оригинальная и красивая страница 404. Я не поленился и нашел для вас несколько: 
 
 
 
Не  стоит забывать!
1. Редирект на 404 страницу должен осуществляться без изменения URL страницы.
2. Следите за битыми ссылками на вашем сайте!
В совокупности выполнение этих рекомендаций даст положительный эффект. Не рассматривайте 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 страницу: 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 страницу, увидев которую, посетителям не захочется покидать ваш сайт.
Улучшаем страницу 404-ой ошибки / Хабр
 Если пользователь попадает на стандартную страницу ошибки 404, велика вероятность того, что он покинет веб-сайт и вряд ли вернется. Кастомная страница 404, полезная и привлекательная, способствует дальнейшему пребываниваю на вашем веб-сайте.




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


 Самое важное сделать страницу 404-ой ошибки простой и понятной пользователю. Напишите, что страница, которую ищет посетитель, не существует. Объясните, почему именно она не существует.
Извини, друг. Страница, которую вы запросили, не находится в нашей базе данных. Скорее всего вы попали на битую ссылку или опечатались при вводе URL. – A List Apart 404-ая страница


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


 Страница 404-ой ошибки должна быть предельно полезной для пользователя. Чтобы достичь желаемого эффекта, можно применить следующие элементы:
Поисковая форма
Ссылка на главную страницу
Список самых популярных страниц
Ссылка на карту сайта
Кнопка сообщения о битой ссылке
Не думайте, что все знают, что такое 404-ая ошибка. Вас нужно объяснить, в чем проблема, в дружелюбной манере. Лучше сказать так: «Упс! Мы не можем найти страницу, которую вы ищете.», чем так: «404-ая ошибка. Страница не найдена».


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


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


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

 Просто добавьте URL любого файла в robots.txt и загрузите на сервер:
Disallow: /404.html


 Чтобы использовать собственную страницу 404-ой ошибки, нужно создать файл .htaccess и добавить в него следующую строчку:
ErrorDocument 404 /error/404-error.html


 Теперь мы знаем, что вместо скучных и бесполезных страниц 404-ой ошибки, нужно потратить время на создание собственной информативной страницы, увидев которую, посетителям не захочется покидать веб-сайт.
PS Все замечания по поводу перевода, орфографии и т.п. с удовольствием приму в личку. Спасибо!
 10 оригинальных ошибок страниц для сайта 
 Страницы ошибки 404 уделяют мало внимания, мы предлагаем вам аж 10 оригинальных страниц. Смешная или просто оригинальная картинка будет приятным сюрпризом в столь неприятной ситуации, именно так это и работает.
 Стандартная страница 404 для uCoz легко заменяется на нестандартную, об этом ниже. Эти страницы такие же простые, как и в этом материале.
 Установка 
 Выберите приглядевшуюся вам страницу ниже, нажмите «Скачать» и загрузите с помощью «Файлового менеджера» файлы из скаченного архива  404.htm  и вложенное изображение в архиве в основной каталог. Большего не нужно, страница установлена.
 Каравай, каравай, кого хочешь выбирай … 
 
 Весьма интересный вариант в виде объявления. 
 Скачать
 
 
 Объемные цифры возникли из пустоты. 
 Скачать
 
 
 А это анимированная страница. 
 Вы станете свидетелем похищения страницы НЛО. 
 Скачать
 
 
 Одинокая и грустная луна… 
 Скачать
 
 
 А здесь Лох-несское чудовище. 
 Скачать
 
 
 Какая-то сказочная страница, не находите? 
 Скачать
 
 
 Кулак. Похоже, какого-то зека. 
 Скачать
 
 
 Код виден через дыру на сайте. 
 Скачать
 
 
 Слыхали легенду о кракене? 
 Скачать
 
 
 Ну, и на последок такая вот страница ошибки.
 Скачать
 
 Хочется сделать подборку просто оригинальных страниц ошибок 404 (Страница не найдена) на разных сайтах. Если знаете такие страницы, то отправляйте ссылки на них в комментариях. Будет интересно посмотреть, до чего додумались веб-мастера и дизайнеры.
 Надеемся, что и наша подборка вам понравилась. Все изображения взяты с открытого источника dribbble.com.
 .
 Улучшаем страницу 404-ой ошибки / Хабр 
 Если пользователь попадает на стандартную страницу ошибки 404, велика вероятность того, что он покинет веб-сайт и вряд ли вернется. Кастомная страница 404, полезная и привлекательная, способствует дальнейшему пребыванию на вашем веб-сайте.
 
 
 
 
 Ответ прост: все. Страница 404, на которой лишь написано «Страница не найдена», не будет полезной для посетителя; даже ссылка «Вернуться на главную» не поможет.
 Отсутствие достойной 404-ой страницы плохого качества. Посетители, которые ищут определенную страницу на вашем сайте, но попали на битую ссылку, будут вынуждены вернуться на главную страницу и начать поиск заново. Если они не найдут, что ищут, то тут же покинут веб-сайт. В идеале пользователь никогда не столкнется с подобными ошибками, но страница 404-ая позволяет извиниться перед пользователем и помочь ему найти то, что он ищет. Довольный посетитель вероятнее всего вернется на ваш веб-сайт.
 Еще хуже, когда 404-ая страница отсутствует вовсе. У посетителя не будет представления о том, что происходит. Отсутствие такой страницы делает сайт непрофессиональным и заставляет пользователя покинуть его.
 
 
 Самое важное сделать страницу 404-ой ошибки простой и понятной пользователю. Напишите, что страница, которую ищет посетитель, не существует. Объясните, почему именно она не существует.
 Извини, друг. Страница, которую вы запросили, не находится в нашей базе данных.Скорее всего вы попали на битую ссылку или опечатались при вводе URL. — A List Apart 404-ая страница
 
 
 Очень важно, чтобы дизайн 404-ой страницы не отличался от остального веб-сайта. Это включает логотип, навигацию, цветовую схему и т.д.
 
 
 Страница 404-ой ошибки должна быть предельно полезной для пользователя. Чтобы достичь желаемого эффекта, можно применить следующие элементы: 
  Поисковая форма 
  Ссылка на главную страницу 
  Список самых популярных страниц 
  Ссылка на карту сайта 
  Кнопка сообщения о битой ссылке 
 Не думайте, что все знают, что такое 404-ая ошибка.Вас нужно объяснить, в чем проблема, в дружелюбной манере. Лучше сказать так: «Упс! Мы не можем найти страницу, которую вы ищете », чем так:« 404-ая ошибка. Страница не найдена ».
 
 
 Если вы владеете большим веб-сайтом, например, как Google, с множеством страниц разного содержания, страница 404 с помощью популярной страницы или поисковой формы не пользователю.
 
 
 404-ая страница может быть простой и даже смешной.Если ваша страница является таковой, то она бесспорно задержит посетителей на вашем сайте. Возможно даже, что они будут скидывать эту страницу своим друзьям. Именно это и произошло с 404-ой страницей GitHub:
 На сайте nosh.com вообще размещено видео:
 
 
 
 Ваша страница 404-ой ошибки может быть хорошо и отлично смотреться, но очевидно, что она не должна отображаться в результатах поиска. Это можно осуществить двумя способами:
 Убедитесь, что веб-сервер возвращает правильный статус 404 HTTP, тогда поисковики будут игнорировать эту страницу.
 Добавьте страницу 404 в файл robots.txt.
 
 Просто добавьте URL любого файла в robots.txt и загрузите на сервер:
  Disallow: /404.html
  
 
 
 Чтобы использовать собственную страницу 404-ой ошибки, нужно создать файл .htaccess и добавить в него следующую строчку:
  ErrorDocument 404 /error/404-error.html
  
 
 
 Теперь мы знаем, что вместо скучных и бесполезных страниц 404-ой ошибки, нужно потратить время на собственную информативную страницу, увидев которую, посетителям не захочется покидать веб-сайт.
  PS  Все замечания по поводу перевода, орфографии и т.п. с удовольствием приму в личку. Спасибо!
.
No related posts.