50 примеров креативного оформления страницы 404

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

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

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

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

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

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

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

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

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

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

Carsonified

1. Carsonified

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

YouCastr

2. YouCastr

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

Unit Interactive

3. Unit Interactive

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

Wufoo

4. Wufoo

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

GDZLLA

5. GDZLLA

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

Agens

6. Agens

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

Frye / Wiles

7. Frye / Wiles

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

Product Planner

8. Product Planner

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

Jackfig

9. Jackfig

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

Blizzard Entertainment

10. Blizzard Entertainment

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

Huwshimi

11. Huwshimi

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

Springload

12. Springload

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

i love typography

13. i love typography

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

nclud

14. nclud

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

deviantART

15. deviantART

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

Newspond

16. Newspond

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

HootSuite

17. HootSuite

Клиент для twitter

Jamie Huskisson

18. Jamie Huskisson

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

Vimeo

19. Vimeo

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

Surfing On Static

20. Surfing On Static

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

GOG.com

21. GOG.com

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

Digitalmash

22. Digitalmash

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

iStockphoto

23. iStockphoto

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

GregOne

24. GregOne

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

Kidmondo

25. Kidmondo

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

CSSREMIX

26. CSSREMIX

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

MailChimp

27. MailChimp

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

Robo.to

28. Robo.to

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

Deaxon

29. Deaxon

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

OnWired

30. OnWired

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

CoTweet

31. CoTweet

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

Popscreen

32. Popscreen

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

Fubiz

33. Fubiz

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

creationthing.com

34. creationthing.com

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

Object Adjective

35. Object Adjective

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

Dundee Living

36. Dundee Living

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

Acro Media Inc

37. Acro Media Inc

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

Astuteo

38. Astuteo

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

Brightkite

39. Brightkite

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

Leap Anywhere

40. Leap Anywhere

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

247 media studios

41. 247 media studios

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

Turbomilk

42. Turbomilk

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

Chris Jennings

43. Chris Jennings

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

Ferdaze.com

44. Ferdaze.com

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

Your Web Job

45. Your Web Job

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

Lookitsme

46. Lookitsme

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

Tele2

47. Tele2

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

Heinz

48. Heinz

Кетчуп Heinz

WooThemes

49. WooThemes

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

Хабрахабр

50. Хабрахабр

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

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

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

Написать комментарий