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

  1. Лечение или профилактика?
  2. 1. Pixar
  3. 2. 20th Century Fox
  4. 3. Dogstudio
  5. 4. Чудо
  6. 5. Emailcenter UK Ltd
  7. 6. Woodstreet Inc.
  8. 7. Даниэль Керхер
  9. 8. Smashing Magazine
  10. 9. Клаус
  11. 10. А-фотография
  12. 11. Роман Брайзер
  13. 12. Цирк дю Солей
  14. 13. HubSpot
  15. 14. Бэтмен 3D
  16. 15. IMDB
  17. 16. Хаким Эль Хаттаб
  18. 17. 9gag
  19. 18. Дисней
  20. 19. Play-Doh
  21. 20. Амазонка
  22. 21. Дейв Бартон
  23. 22. Blizzard Entertainment
  24. 23. Страхование домашних животных
  25. 24. CSS-хитрости
  26. 25. Относительный
  27. Резюме

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

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

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

Ошибка 404 - это стандартный ответ, который указывает:

  • Сервер не работает.
  • Не удается найти запрошенный контент (из-за удаления файла или домена).
  • Запрошенный URL не работает.

Вы можете узнать больше на эту тему в 404 vs Soft 404 Ошибки: в чем разница и как исправить оба ,

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

Лечение или профилактика?

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

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

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

  • Xenu's Link Sleuth
  • Кричащая лягушка SEO Spider
  • W3C Link Checker

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

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

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

1. Pixar

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

Всемирно известный Pixar На странице 404 изображен его любимый персонаж Грусти, и он меня сразу привлекает. Я чувствую твою боль, Грусть, и я вижу, что ты чувствуешь мою! Они включили симпатичную текстовую часть, играющую на сюжете их популярного анимационного фильма. (Стоит посмотреть, если вы еще не видели!)

2. 20th Century Fox

Абсолютно любя Foxmovies реализация 404-страничного дизайна. Эта увлекательная часть фильма вызывает и юмор, и сочувствие (я впервые встретился с Эдвардом Ножничными). Мало того, что это вызывает прекрасную память о фильме, но и ссылка содержит целый набор коротких видеоклипов, которые случайным образом появляются на странице 404, с соответствующими частями текста вверху каждого видео, которые каждый раз отличаются!

3. Dogstudio

Проектная компания Dogstudio делится со мной самой симпатичной собакой GIF на своей странице 404. Забавно, коротко и мило - так же, как я их люблю!

Забавно, коротко и мило - так же, как я их люблю

Я также получил удовольствие от их части домашней страницы.

Кстати, их контакт страница качается! Я нашел это очень привлекательным. Я бросил им линию!

4. Чудо

Если вы получаете увеличительное стекло и мини-чувак в первый раз - не волнуйтесь! У Marvel гораздо больше в запасе. Просто обновите страница ! Удивительные герои Marvel предстают перед вашими глазами очень тематически, чтобы удовлетворить любого комического фанатика.

5. Emailcenter UK Ltd

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

6. Woodstreet Inc.

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

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

7. Даниэль Керхер

Даниэль Керхер

Хозяин и режиссер явно приложили некоторые усилия к представлению своей киностудии. Оживленное воздушное настроение его 404 действительно очаровывает.

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

Обледенение на торте - это когда прибывает поезд и двери открываются, как будто приглашают вас. Письма собираются вместе и превращаются в слова на доске прибытия. Захватывающий!

8. Smashing Magazine

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

  • Их 404 часть отформатирована так же, как и их стандартная статья.
  • Содержимое не влияет на общий макет страницы.
  • Они включают в себя юмор, указав «Сервер Smashing Magazine» в качестве автора, «Прямо сейчас» в качестве времени публикации и замечательный «404 тег», который происходит под названием «Мы не смогли найти вашу страницу! (Ошибка 404) ».

9. Клаус

Разработчик по имени Клаус из Дании дает нам всплеск прошлого из-за ошибки в дизайне страницы 404.

Commodore 64 - это 8-битный домашний компьютер, представленный Commodore International в январе 1982 года. Он занесен в книгу рекордов Гиннеса как самая продаваемая модель одного компьютера за все время (15 миллионов единиц).

Страница 404 Клауса возвращает нас к раннему возрасту в области компьютерных технологий. Мой, как все изменилось!

10. А-фотография

Изображение, которое приветствует нас на фотографа Арманда 404 страница изображает личность, эмоции и артистизм. Мы видим другую сторону Учителя, показывающего уставшего малыша.

Пользователь, увлеченный этим расстроенным детским выстрелом, может перейти к просмотру сайта без проблем, как будто ошибки никогда не было. Зрителю предлагается несколько вариантов того, куда идти дальше, и страница маркируется так же, как и любая другая страница a-fotografy.co.uk.

11. Роман Брайзер

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

12. Цирк дю Солей

На своей странице 404 Cirque du Soleil предлагает мечтательное изображение, чтобы избавиться от разочарования посетителей от отсутствия контента. Фраза «Иногда вам нужно потеряться, прежде чем вы найдете то, что вы ищете», резонирует и интригует зрителя, чтобы продолжить свой поиск. Страница является фирменной и имеет меню верхнего и нижнего колонтитула, чтобы направить пользователя на главные страницы сайта.

13. HubSpot

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

14. Бэтмен 3D

Baaaat-Maaaan! Страница с ошибкой на немецком 3D-сайте фильма страшна, но я предполагаю, что это было их намерением!

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

15. IMDB

База данных интернет-фильмов 404 страница содержит цитаты из персонажей великих фильмов, таких как «Большой Лебовски» (1998), «Назад в будущее» (1985), «Матрица» (1999), «Вечный солнечный свет чистого разума» (2004), «День сурка» (1993) и многое другое. Страница перенаправляет пользователя на домашнюю страницу.

16. Хаким Эль Хаттаб

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

17. 9gag

Подход 9gag к дизайну 404 страниц полностью отражает их общее настроение и содержание.

Джон Траволта никогда не бывает скучным и никогда не выходит из моды! Замечательно, что на этой странице также есть приложение для скачивания! Двойная задача. Очень мудрый!

18. Дисней

Микки Маус - один из самых узнаваемых персонажей в мире мультфильмов, и он появляется почти на каждой странице сайта Диснея. На его лице изображено удивление пользователя, который не нашел ожидаемого контента. Я готов снова вернуться за этим твоим очаровательным лицом, Микки, даже если это Страница ошибки ,

Сайт Disney в Великобритании предлагает изменение удивления:

Сайт Disney в Великобритании предлагает   изменение   удивления:

19. Play-Doh

Play-doh сформировал белку с приятными глазами, чтобы сообщить пользователю об ошибке. Они блестяще предлагают вам ходить по магазинам прямо с их 404 и предоставить дополнительные ссылки в своей конкретной отрасли.

20. Амазонка

Амазонка

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

21. Дейв Бартон

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

Коротко и сладко.

Не забудьте фото!

22. Blizzard Entertainment

Blizzard Entertainment обвиняет меня в моей ошибке с вычурная страница 404 отражая их индустрию и бренд сообщение.

23. Страхование домашних животных

Embrace, компания по страхованию домашних животных, по-своему смеется над ошибкой, говоря, что их клиенты съели страницу. Эти непослушные парни!

И они время от времени обновляют дизайн:

24. CSS-хитрости

На их несуществующей странице CSS-Tricks отправляет нам сообщение, которое трудно понять, благодаря дизайну.

«Вы пробили дыру в ткани Интернета. Любовь, Крис из CSS-Tricks ».

Сообщение воспроизводится по их URL-адресу:

https://css-tricks.com/thispagedoesntexist

Они извиняюсь об их имени тоже! Реквизит для творчества!

25. Относительный

Креативное агентство Elative, базирующееся в Пало-Альто, создало этот зашифрованный заголовок для своих страница ошибки , Выбирая изображение застрявшего космонавта, они мудро предлагают вернуться на Home Base, сохраняя актуальность страницы.

Резюме

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

Кредиты изображений

Скриншоты, сделанные автором, август 2017.

Лечение или профилактика?
Лечение или профилактика?
Как вы можете быть расстроены, когда такая привлекательность перенаправляет ваш поиск?