404 страница:

Содержание

Почему любому сайту нужна страница 404

Приемы создания страницы и лучшие примеры от сайтов на Тильде и в вебе

Tilda Education

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

Содержание

Зачем нужна страница 404
Приемы создания страницы 404: о чем стоит помнить
Как правильно сделать страницу ошибки на Тильде
Примеры классных страниц 404 на Тильде

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

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

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

Зачем нужна страница 404

Кажется, что можно и обойтись без собственного дизайна страницы ошибки — что в этом такого?

На самом деле страница 404 нужна всем, и вот почему:

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

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

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

ifttt.com

www.dtelepathy. com

www.cosowinerestaurant.com

oak.is

www.hannabi.com

www.panicstudio.tv

panike.pt

outlane.co

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

Приемы создания страницы 404: о чем стоит помнить

Объяснить посетителю, что происходит.

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


solarcomplekt.com

www.uxsofia.com

marvelapp.com

Развлечь и рассмешить.

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

hugeinc.com

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

worrydream.com

www.pixar.com

renk-magazin.de

off-box.com

bakkenbaeck.com

emojibook.club

Вернуть пользователя на сайт.

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

builtvisible.com

theoryandpractice.ru

finely.co

mag.fieldsroads.ru

Сохранять свой стиль.

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

dropbox.com

hula-hoop.fr

intercom.com

airbnb.ru

Предупредить ошибку.

Лучший способ сделать так, чтобы пользователь не попал на страницу 404 — постоянно проверять «битые ссылки» на сайте. Если раз в месяц проверять потерянные статьи, видео, картинки и так далее, ваши пользователи будут все меньше попадать на страницу 404.

У Google и Яндекс есть бесплатные сервисы для веб-мастеров, которые помогают найти неработающие ссылки.

Как правильно сделать страницу ошибки 404 на Тильде

Создайте новую страницу сайта на Тильде.

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

Опубликуйте.

Перейдите в «Настройки сайта > Еще > 404 страница». Выберите из списка страницу, которую вы создали и сохраните.

Важно:

  • Не задавайте адрес /404 — будет появляться стандартная ошибка Тильды
  • Чтобы 404 заработала, вам нужно переопубликовать все страницы сайта

Какую информацию разместить на странице 404?

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

Какие блоки я могу использовать для создания страницы 404?

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

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

Как должна выглядеть моя страница 404?

Предела совершенству нет.

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

danwoodger.com

bons.me

swelldesigngroup.com

robinhood.com

www.dogstudio.co

Примеры классных страниц 404 на Тильде

controforma.school

basetemplates.com

www.arenaslab.com

thewonderdesigns.com

www.togdazine.ru

happyfication.space

lab-w.com

Текст: Варя Гурова
Иллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

Читайте также:

Продвижение по методу AARRR

Что такое UX дизайн?

Как привлечь новых пользователей с подходом Jobs To Be Done

Закон о защите персональных данных — как избежать штрафов

Впечатление о сайте — что повышает доверие пользователя в веб-дизайне

Визуальная иерархия сайта: оформление и организация контента

Персональный сайт личного бренда: как использовать Тильду для развития личного бренда

Бизнес в инстаграм: как увеличить продажи с помощью сайта

Как повысить конверсию сайта — 12 психологических приемов

Уникальное торговое предложение для сайта — как составить продающий оффер

Аналитика сайта — как повысить конверсию сайта, используя веб-аналитику

SEO продвижение сайта на Тильде самостоятельно — пошаговая инструкция

Показать больше

примеры оригинальных страниц Not found

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

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

eBay

«Человечная» надпись и такая же картина делают так, что не хочется убегать обратно в поиск

Разрабатываем и продвигаем сайты

Быстро и эффективно

Подробнее

Aviasales

Aviasales, по традиции, чуть поиграли словами – страницы нет, билеты есть

Blizzard

404-я у Blizzard анимированная: посмотрите, как симпатично выглядит

Coca-Cola

Coca-Cola тоже сыграла словами: «Здесь больше нет Coca-Cola» уместно смотрится рядом с пустыми бутылочками

Convert Monster

Content Monster меняет призыв и картинку каждый раз при обновлении страницы

Amazon

А у Amazon кликабельная собака – она отправляет нас на страницу «Собаки Amazon»

«Тупичок Гоблина»

Дизайн на сайте Дмитрия Юрьевича не обновляется годами (и смотрится по-своему стильно). Графическое оформление 404-й в стиле игр конца 90-х смотрится тут органично

«Лабиринт»

Еще одна ожидаемая игра слов: страница «Лабиринта» потерялась в лабиринте

OZON

OZON вернулся к минимализму

Что интересно – старая страница была немного креативнее (и как будто заимствовала идею eBay):

А это старая 404 страница на сайте OZON

Сотмаркет

Тот же тренд на минимализм – у «Сотмаркета»: только навигация, только хардкор

А вот как выглядела эта страница раньше:

Интереснее по задумке, но уже не так трендово (да, 404 тоже стоит обновлять в духе времени)

Студия Артемия Лебедева

Кстати, тайтл у страницы иронично спрашивает: «Потерялись?»

Банк «Тинькофф»

«Тинькофф» перешел от минимализма к ультраминимализму – смотрите следующее фото: это старая страница 404

Когда страницу освежали в плане дизайна, отсюда в числе прочих изменений ушел смайлик

«Яндекс»

Коротко и понятно – и тоже с навигацией

Университет «Синергия»

У «Синергии» как будто отсылка к фильму «Гравитация»

Студия Дениса Каплунова

Стильно и минималистично

LEGO

Выражение лица человечка демонстрирует панику. А вот надпись говорит, что все прекрасно

«Кинопоиск»

На «Кинопоиске» тоже есть элемент анимации

PlayboyRussia

404 страница PlayboyRussia

«Единый визовый центр»

Нетривиальный ход – для дочитавших подарок

Pikabu

Заморочились и отрисовали – узнаваемо и на века

Pixar

Более удачный образ, чем Печаль из мультика «Головоломка» для страницы 404 трудно представить

Какой не должна быть страница 404

  1. Мгновенный переход на главную страницу: в этом случае человек не поймет, что он ввел неверный адрес или перешел по неработающей ссылке, и может повторить неверный ввод.
  2. Внешний вид страницы
  • с нечитаемыми символами:
  • со стандартной и малоинформативной надписью:
  • дзен-вариант страницы 404 (такой, например, у Школы-студии МХАТ):

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

Лучшие 404 страницы для вдохновения гениального веб-дизайна

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

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

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

Чтобы узнать больше о UX и UI, запишитесь на наш основной онлайн-курс по дизайну UX открывается в новой вкладке), Основы UX-дизайна, который предлагает удобный и гибкий способ изучения всех основ UX-дизайна. А пока, вот наш выбор лучших 404 страниц, которые мы видели.

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

01. Netflix

(Изображение предоставлено Netflix)

Вы можете оживить 404 страницы с помощью CSS-анимации или классной параллаксной прокрутки, но иногда все, что вам нужно, — это сильный визуальный ряд и развлекательный текст. У Netflix есть целый ряд контента для страницы 404 (открывается в новой вкладке), и он выбрал кадр из фильма «Затерянные в космосе».

Сайт спрашивает «заблудился?» и предоставляет четкую кнопку, чтобы вернуть вас на домашнюю страницу. Единственным улучшением, которое мы могли бы себе представить, было бы предоставление ряда фильмов, как это делает IMDB (см. далее в списке), чтобы немного их смешать — что облегчает разочарование, если вы попадаете на страницу 404 более одного раза.

02. M&Ms

(Изображение предоставлено: m&ms)

Кондитерская компания M&Ms использует своих персонажей для своей страницы 404 (открывается в новой вкладке). Когда вы натыкаетесь на страницу 404, вас встречает встревоженный m&m, который вместе с вами сталкивается с проблемой. Это простое изображение усиливает фирменный стиль m&m и вызывает улыбку, прежде чем вы отправитесь обратно в безопасное место.

03. KonMari

(Изображение предоставлено KonMari)

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

04. Marvel

(Изображение предоставлено Marvel)

У Marvel есть несколько версий своих 404 страниц, которые (конечно) посвящены MCU. Мы заметили упоминания о Гидре (одна из них выше) и оке Утау, и это лишь некоторые из них. Посетите страницу Marvel 404 (откроется в новой вкладке), чтобы узнать, какой из них вы получите.

05. LEGO

(Изображение предоставлено LEGO)

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

06. Omlet

(Изображение предоставлено: Omlet)

Игра слов уведет вас далеко, поэтому мы ценим подход Omlet к странице 404. На странице креативной компании написано: «Эта страница — это яйца», когда на экране появляется анимированная трещина в яйце. Ярко-красный цвет показывает, что это «предупреждение», а тема яйца соответствует имени Омлета. Что не нравится?

07. Mantra Labs

(Изображение предоставлено Mantra Labs)

Эта страница 404 от Mantra Labs (открывается в новой вкладке) проста, но эффективна. Иллюстрация космического человека, плавающего в «404», сопровождается текстом «Ой! У тебя кончился кислород». Также есть таймер обратного отсчета до того, как вы вернетесь на домашнюю страницу. Если вы моргнули, вы могли бы даже пропустить эту страницу 404, хотя стоит специально ошибиться, чтобы посетить ее.

08. Готов к выживанию

(Изображение предоставлено: Готов к выживанию)

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

09.

Carwow. Посетителям предлагается 8-битный игровой экран. Все, что вам нужно сделать, это нажать на кнопку «Пуск», чтобы насладиться простой игрой с горизонтальной прокруткой, где все, что вам нужно сделать, это избегать препятствий и других автомобилей. Попробуйте страницу 404 Carwow (откроется в новой вкладке).

10. Ueno

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

11. Gymbox

Gym Box — это компания, занимающаяся тренажерным залом, которая стремится предлагать «самые уникальные и разнообразные занятия в Лондоне». Ограничениями этого утверждения может быть великолепное зрелище фитнеса 80-х, которое появляется на его странице 404 (открывается в новой вкладке). Короткие шорты, укороченные топы и выпячивание таза — чего еще желать от страницы с ошибкой?

12. Slack

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

13. Purée Maison

Purée Maison — креативное агентство, специализирующееся на коммуникационной стратегии, и его характерный веб-сайт полон восхитительных анимаций (рекомендуем осмотреться (откроется в новой вкладке)). Мы особенно любим эту сюрреалистическую страницу 404, которая каким-то образом идеально передает боль от столкновения с цифровой стеной.

14. Pixar

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

15. Студия 20th Century Studios

Не можете найти нужный фильм? Студия 20th Century Studios (ранее 20th Century Fox) после ребрендинга предлагает отличный способ вдохновить вас, когда вы ошибаетесь в URL-адресе; на странице 404 появляется кадр из культового фильма с содержательным заголовком и подборкой других фильмов, которые вы, возможно, захотите посмотреть. Мы заметили отрывки из фильмов «Эдвард руки-ножницы», «Месть ботаников» и «Наполеон Динамит» и других (посмотрите на страницу 404 (откроется в новой вкладке), чтобы узнать, какой из них вы получите).

16. Cloud Sigma

Cloud Sigma — это облачный сервер и служба облачного хостинга, работающая в США, Европе и Азиатско-Тихоокеанском регионе. Хотя гибкие облачные серверы полезны, они не совсем забавны, поэтому мы предполагаем, что компания приложила дополнительные усилия, чтобы добавить немного юмора на свою насмешливую страницу с ошибкой 404 (откроется в новой вкладке). Мы задаемся вопросом, сколько времени пройдет, прежде чем этот услужливый младший разработчик будет переманен конкурентами.

17. BluePath

Еще один веб-сайт, использующий юмор на странице с ошибкой 404, — это базирующаяся в Атланте консалтинговая фирма по стратегии данных BluePath. На странице 404 (открывается в новой вкладке) показана карта Атланты с точкой на другой стороне страницы, указывающей на то, что посетитель «уходит далеко от карты». В чрезвычайно слабой связи карта также включает основанную на данных информацию, показывающую зарегистрированные преступления в этом районе. «Почему? Потому что это преступление, для которого вы нас еще не наняли!» Ох уж эти чокнутые аналитики данных.

18. Куало

(открывается в новой вкладке)

Веб-хостинговая компания Kualo работает уже более 15 лет — вечность в Интернете — и ее страница 404 возвращает нас в прошлое, предлагая посетителям игру Space Invaders на тему Куало. . Это не идеально. Ключевая стратегия, состоящая в том, чтобы отстреливать внешние края флота, чтобы замедлить спуск захватчиков, поначалу не работает. Но это весело, и вы можете получить скидку на хостинг, если вам удастся набрать более 1000 баллов. Сыграйте в игру Куало здесь (откроется в новой вкладке).

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

Как говорит Хлоя Золлингер из Pointe: «Попадание на страницу с ошибкой 404 чаще всего разочаровывает пользователя сайта. Мы понимаем, насколько важен пользовательский опыт на веб-странице. Чтобы улучшить впечатление наших посетителей, наша команда посвятила себя созданию интерактивного игра на нашей странице 404».

19. Стив Ламберт

Нью-йоркский художник Стив Ламберт описывает это как «самую неловкую страницу с кодом 404, которая не найдена в Интернете», и знаете, он вполне может быть прав. . В нем есть мучительная часть для камеры (открывается в новой вкладке), которая просто продолжается и продолжается. Мы бросаем вызов вам, чтобы дойти до конца его видео, не сжав ни одной части тела.

20. Lazy Oaf

(Изображение предоставлено: Lazy Oaf)

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

21. Виктория Спайсер

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

22. Figma

Несмотря на то, что у нас есть копия Illustrator CC, и мы можем играть с опорными точками и кривыми Безье буквально в любое время, мы все еще очарованы страницей 404 Figma. Негабаритный текст 404 отображается в векторах, которые вы можете изменить по своему усмотрению. Попробуйте сами (откроется в новой вкладке).

23. Airbnb

(открывается в новой вкладке)

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

24. Hot Dot Production

Компания Hot Dot Productions применила слоган «где дизайн встречается с технологией» к своей впечатляющей странице 404, на которой представлены три числа, состоящие из сотен крошечных точек, которые меняют направление или расходятся в ответ на действия посетителя. движения мыши. Серьезно круто. Поэкспериментируйте с этим сами здесь (откроется в новой вкладке).

25. GitHub

(открывается в новой вкладке)

От веб-сайта, посвященного управлению версиями кода, можно ожидать некоторого технического волшебства. Страница 404 (открывается в новой вкладке) предназначена для фанатов другого типа с простой пародией на «Звездные войны», усиленной умным эффектом параллакса при движении мыши. GitHub также имеет хорошую страницу 500 (открывается в новой вкладке), когда сервер ломается.

26. Оранжевая коза

(Изображение предоставлено: Оранжевая коза)

(открывается в новой вкладке)

Так что вы не по адресу. Теперь, как мы выберемся из этого рассола? Агентство веб-дизайна Orange Goat находит время, чтобы помочь пользователю с забавной блок-схемой, которая спрашивает их, как они попали на страницу 404 (открывается в новой вкладке) и что они ищут. Затем он предлагает некоторые предложения для следующего шага. Это делает для дружественного, юмористического знакомства с агентством.

27. MailChimp

(открывается в новой вкладке)

Страница ошибки Mailchimp (открывается в новой вкладке) содержит наивные иллюстрации, вокруг которых строится брендинг MailChimp. И в самом деле, что может сказать «я пропал» лучше, чем осел с головой в норе?

28. Обувь Volta

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

29. Брет Виктор

(открывается в новой вкладке)

Страница 404 ученого-компьютерщика Брета Виктора (открывается в новой вкладке), вдохновленная, конечно же, культовой картиной Рене Магритта «Предательство образов», сталкивает зрителя с некоторыми сложные философские вопросы. Если это не страница, то что? Что представляет собой «страница»? Можно ли сказать, что это вещь, которая действительно существует? Что это за «это», на что ссылается эта очевидная не-страница? Что-нибудь действительно реально? Заставляет задуматься, нет?

30.

IMDb

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

31. Bit.ly

(Изображение предоставлено Bitly)

Достижение страницы 404 может быть разочаровывающим, поэтому страница 404 службы сокращения ссылок Bit.ly (открывается в новой вкладке) предлагает отнестись к ней спокойно. Он использует простое изображение человека, медитирующего в попытке восстановить равновесие, и дает полезное напоминание о том, что ссылки вводятся с учетом регистра.

32. Tripadvisor

(Изображение предоставлено Tripadvisor)

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

33. DropBox

(открывается в новой вкладке)

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

34. Blizzard Entertainment

(Изображение предоставлено Blizzard Entertainment)

(открывается в новой вкладке)

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

Статьи по теме:

  • Лучшие пасхальные яйца Google: наслаждайтесь скрытой стороной Google
  • Познакомьтесь с теорией UX
  • 5 советов для успешного исследования и тестирования UX

Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

*Читайте 5 бесплатных статей в месяц без подписки

Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

Рут несколько лет работала заместителем редактора Creative Bloq, а также работала или писала почти для всех бывших и нынешних печатных изданий сайта, от Computer Arts до ImagineFX. Теперь она целыми днями пишет обзоры матрасов и походных ботинок в качестве редактора по туризму и оздоровлению на T3.com, но в свободное время продолжает писать о дизайне на внештатной основе.

20+ потрясающих примеров страниц 404 (2022)

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

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

Посадка на «страницу не найдена» может реально свести посетителей с ума.

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

Содержание

  • Что такое страница 404 и зачем она нужна?
  • 1. Bluegg — Игра слов
  • 2. Дрифт — встраивайте причудливые видео
  • 3. 9Gag — Включить абсурдные активы
  • 4. Маховик — Минималистичный и тонкий юмор​
  • 5. Slack — смешно, потому что странно
  • 6. Дэн Вуджер. Иногда достаточно милой иллюстрации.
  • 7. Team Coco — Глупые гифки
  • 8. Comedy Central — истеричный, но фирменный
  • 9. NMFH — черный юмор в лучшем виде
  • 10. HBO – используйте внутренние шутки​
  • 11. The New Yorker – Воспользуйтесь преимуществами того, что уже работает​
  • 12. Blizzard — Удивите свою аудиторию
  • 13. eharmony — Отнеси тему к своему сервису
  • 14. Distilled — Акценты забавны
  • 15. Emailcenter — сделайте его личным
  • 16. IMDB — Быть смешным требует времени и усилий
  • 17. Orangecoat — добавьте визуальные диаграммы
  • 18. Github — шутки
  • 19. CSS-трюки — меньше да больше смеха
  • 20. Mashable – Забавный взгляд на потерянное
  • 21. Taco Bell — Еще один глупый смех
  • 22. Стив Ламберт — Признайте неловкость
  • 23. SHOCK — Шаблон страницы 404 для продажи

Что такое страница 404 и зачем она нужна?

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

Со временем страницы могут быть удалены или перемещены на новый URL-адрес без постоянного перенаправления. Если пользователь пытается получить доступ к этой ссылке, он отправляется на «страницу 404», которая информирует его о том, что ссылка, по которой он пытается получить доступ, не работает.

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

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

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

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

Вот 23 отличных примера хорошо выполненных 404 страниц.

1. Блюгг — Игра слов

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

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

2. Дрифт — Встраивайте причудливые видео

Элемент неожиданности является ключом к успешному предложению новых 404-х.

Дрифт добавил некачественное селфи-видео Dj Khaled, видимо потерявшегося в море. Они перевернули ситуацию с ног на голову, показав, что все могло быть гораздо хуже — посетитель мог потеряться в море, как ди-джей.

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

3. 9Gag — Включить абсурдные активы

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

4. Маховик — Минимальный и тонкий юмор

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

5. Slack — это смешно, потому что странно

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

6.
Дэн Вуджер — Иногда достаточно милой иллюстрации

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

Вуджер ловко связывает посетителя со своим портфолио строкой «Вероятно, вы искали мою иллюстрацию…»

Несмотря на то, что сайт Конана О’Брайена явно содержит некоторые ошибки и показывает чистый HTML, он не перестает удивлять, используя серию гифок, чтобы пролить свет на затруднительное положение Энди и Конана.

8. Comedy Central — истеричный, но фирменный

Comedy Central был достаточно умен, чтобы отобразить несколько персонажей из своих шоу и приписать каждому из них цитату, связанную с 404 страницей. Например, Тревор Ноа из The Daily Show появляется с растерянным лицом и цитатой, относящейся к сегменту «Момент дзен» из его шоу.

9. NMFH — Черный юмор в лучшем виде

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

10. HBO — использование внутренних шуток

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

11. Житель Нью-Йорка – Воспользуйтесь тем, что уже работает

Пример New Yorker показывает, как взять и без того забавный актив бренда, связанный с потерей, и разместить его на странице 404. Мультфильм из выпуска 2011 года, на котором изображена мышь с GPS — идеальный мультфильм для использования на странице «страница не найдена».

12. Blizzard — Удивите свою аудиторию

Вот еще один дизайн страницы 404, оригинальный и неожиданный. У Blizzard Entertainment есть разбитое окно, меню, которое, кажется, упало, и обвинение: «Благодарю (поздравляю). Вы его сломали».

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

13. eharmony — Связать тему с вашим сервисом

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

14. Дистиллированный — забавные акценты

На странице 404

Distilled есть комичная британская беседа, наполненная такими фразами, как «старый приятель» и «взорван». Они называют свой 404 «Четыреста четвертое сообщение об ошибке», что само по себе забавно.

Хотя акценты в настоящее время являются спорным вопросом в комедии (что могут подтвердить создатели «Симпсонов»), они по-прежнему чертовски забавны. К счастью, шикарный английский акцент по-прежнему является общепринятой мишенью для смеха.

Distilled сами британцы, что делает всю страницу еще более глупой. Это напомнило мне о наброске «Четыре йоркширца» Монти Пайтона, который всегда приводит меня в ярость.

15. Центр электронной почты — сделайте его личным

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

16. IMDB — Быть смешным требует времени и усилий

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

17. Оранжевое пальто — добавление визуальных карт

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

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

18. Github — шутки

 Аудитория Github — разработчики-гики. Их вдохновленная «Звездными войнами» сцена с талисманом Octocat и цитатой «Это не та веб-страница, которую вы ищете» является подходящим посланием для их аудитории. Обратите также внимание на то, как размещение панели поиска в центре обеспечивает отличное решение для навигации с этой страницы.

19. CSS-трюки — меньше да больше смеха

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

20. Mashable — Забавный взгляд на потерянное

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

21. Taco Bell — Еще один глупый смех

Taco Bell известен как бренд, умеющий пошутить в социальных сетях. Их страница 404 также вызывает смех с ее анимацией тако и глупым текстом: «СТРАНИЦА, КОТОРУЮ ВЫ ИСКАЛИ, НЕ СУЩЕСТВУЕТ (если только вы не искали страницу с анимацией тако, спотыкающегося и буквально проливающего бобы. Если это случае, он точно существует, и вы его точно нашли.)’

22. Стив Ламберт — Признайте неловкость

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

23. ШОК — Шаблон страницы 404 для продажи

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

ШОК минимальная страница скоро появится, которая имеет 6 стилей фона на любой вкус.

Заключение

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

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