Примеры 404 страницы

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

Для начала немного теории и мнение, сложившиеся после просмотра полсотни сайтов.

Что же все таки значит ошибка «404 Not Found (Не найдено)»? Если говорить техническим языком:

Сервер понял запрос, но не нашёл соответствующего ресурса по указанному URI.

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

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

Основные правила при оформлении страницы 404:

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

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

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

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

1.

Креативное агентство специализирующееся на разработке веб-приложений

2.

Вещание местных спортивных соревнований

3.

Студия веб-дизайна

4.

Online-приложение для разработки веб-форм

5.

Сервис для работы с twitter и flickr. Страница выполнена на флэш

6.

Медийная реклама в играх

7.

Студия веб-дизайна

8.

Планировщик для разработки веб-приложений

9.

Студия веб-дизайна

10.

Разработчик WarCraft, StarCraft и Diablo

11.

Блог фрилансера из Австралии

12.

Студия веб-дизайна

13.

Любительский блог о типографике

14.

Студия веб-дизайна

15.

Сообщество дизайнеров

16.

Новостной сайт

17.

Клиент для twitter

18.

Блог PHP-программиста

19.

Популярный видео-хостинг

20.

Сайт музыкальной группы

21.

Обзор культовых игр, которые получили всемирное признание. Полное название сайта Good Old Games

22.

Портфолио австралийского дизайнера

23.

Онлайн-магазин фотографий, графических изображений и флэш

24.

Сайт французского дизайнера

25.

Онлайн-журнал для родителей

26.

Каталог CSS-дизайна

27.

Управление Email-рассылками

28.

Что-то на подобии создания визитной карточки. Страница выполнена на флэш

29.

Студия веб-дизайна

30.

Студия веб-дизайна

31.

Клиент для twitter, решающий бизнес-задачи

32.

Видео-хостинг

33.

Блог о дизайне

34.

Сайт-визитка дизайнера

35.

Студия веб-дизайна

36.

Сайт-визитка

37.

Студия веб-дизайна

38.

Студия веб-дизайна

39.

Сервис похож на twitter, основной фишкой считается привязка к картам Google

40.

Социальная благотворительная сеть

41.

Студия веб-дизайна

42.

Отечественная веб-студия

43.

Блог веб-разработчика из Майами

44.

Форум. Страница выполнена на флэш

45.

Поиск вакансий для веб-разработчиков

46.

Социальная сеть знакомств

47.

Оператор сотовой связи

48.

Кетчуп Heinz

49.

Разработчик тем для WordPress

50.

Хабр знают многие…

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

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

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

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

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

#1 — IconFinder

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

#2 — GitHub

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

#3 — Hoppermagic

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

#4 — DanWoodger

Красивый развлекательный веб проект.

#5 — DropBox

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

#6 — Bilty

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

#7 — BrandCrowd

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

#8 — Lego

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

#9 — Airbnb

Сайт по бронированию домов по всему миру.

#10 — HotDot

Крупная веб студия по созданию сайтов и веб проектов.


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

Больше интересных новостей

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

Почему?
1. В адресе допущена ошибка или это старая закладка.
2. Старый результат поиска.
3.

Недействительная ссылка данного сайта.
4. Недействительная ссылка с другого сайта.

Как создать собственную страницу с сообщением об ошибке 404 «Страница не найдена»?
Рекомендуем разместить одну из следующих ссылок в тексте сообщения «Страница не найдена»: 

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

Данная информация поможет посетителям сайта легче ориентироваться на сайте

Пример приемлемой страницы об ошибке

Чтобы настроить эту страницу, следуйте этим шагам:
1. Кликните «Перейти на страницу» и кликните «Страница не найдена».

2. Текст с ошибкой отобразится. Чтобы его поменять, кликните «Поменять текст».

3. Внесите изменения, которые хотите, и кликните «ОК», чтобы сохранить.

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


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

Будет интересно выслушать ваши идеи.

Добавить комментарий

Закрыть меню