Содержание

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

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

Сегодня, ко дню вебмастера, мы подготовили подборку интересных четырестачетвертых страниц.

На этом сайте можно найти интерфейс Commodore 64.


Похоже, вам не стоило сюда заходить.


Попробуйте поймать кота 🙂


Студия дизайна делится забавными гифками про собак.


А эта страничка ушла в поход… и не вернулась.


Очень атмосферная интерактивная 404-ая страница.


Веб-страница ищет HTML своей жизни. Желательно без ошибок и вредных привычек.


Спасите несчастных леммингов!


Классический мем на сайте 9GAG.


Красивая иллюстрация броуновского движения от Hot Dot.


А этой страницы на сайте Mikandi нет, как и одежды у этой прекрасной леди.


Вам попалась страница 404? Решайте, кого уволить за такое свинство.


Синий экран смерти от Willismonds.


А эту страницу съели пациенты клиники. Очень сожалеем 🙁


Диаграмма Венна на сайте magnt.com.


Дыра в интернете на сайте CSS Tricks.


Поздравляем. Вы сломали наш сайт.


Некоторые сайты предлагают целую блок-схему действий для тех, кто попал на 404.


Здесь можно поиграть в пакмана.


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


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


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


Всё минималистично и главное — ссылка на релевантный материал.


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


Вот про экран с ошибкой от GitHub вы точно знаете, а как насчёт не менее известного Docker? Расстроенный кит смотрит на утонувший корабль, параллельно размышляя о ваших проектах.


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


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

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


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


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


Один из наиболее популярных сервисов общения между членами одной компании тоже вошёл в эту подборку. Ребята хорошо потрудились над созданием интересной и анимированной страницы ошибки 404 с небольшими элементами интерактивности (можно трогать кур и свинок). Также во время отсутствия активности на странице всё становится серым.


На странице 404 сайта Музея Сотворения Мира (там всё по Библии) отчётливо видно, что junior и senior не могут найти менеджера проекта. А вообще классно сделали: силуэт с отсутствующей стадией эволюции в центре отражает отношение создателей сайта к этой теории возникновения жизни. Кроме того, «that link is missing» можно перевести так: «связывающее звено отсутствует». Тут как в русском с фразой «я плачу» — либо платишь (за софт), либо плачешь (из-за багов).


Если вы думали, что новозеландцы не в восторге только от шуток про «Властелина Колец», то теперь вы знаете, что каждый раз, когда вы видите карту без Новой Зеландии, где-то в Шире плачет один хоббит. Собственно, на этом и решили акцентировать внимание новозеландцы на сайте правительства.


Самоиронией может похвастаться не только правительство Новой Зеландии. В Делавэре решили поиграть и с картой, и с названием. Хотя карта просто для красоты.


Мы тоже не исключение 🙂 Возможно, вы уже замечали, что мы, как и сайты выше, имеем собственную страницу 404.

Реклама на Tproger: найдем для вас разработчиков нужного стека и уровня.

Подробнее

Реклама на tproger.ru

Загрузка

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

Сижу в интернете, ищу товар. Ура, нашел нужный в результатах поиска! Перехожу по ссылке — появляется окно с цифрами «404» и кучей технических подробностей.

Абра-кадабра!

Ребята, мне не нужны ваши инструкции и составлять заявку я не хочу. Я хочу купить то, что присмотрел… Прощайте!

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

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

Давайте посмотрим, что получилось!

Присоединяйтесь к нашему Telegram-каналу!

  • Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
  • Для этого вам необходимо подписаться на наш канал.

Разберем лучшие страницы 404-ошибки

Адамас. Магазин ювелирных украшений

Страница 404 «Адамас»

Особенности
  • Пользователю по-прежнему доступны главное меню сайта и каталог изделий;
  • есть сообщение, что что-то пошло не так;
  • сайт предлагает перейти в раздел со статьями и коллекциями;
  • кроме главного меню, пользователю доступны все ссылки из футера.
Личное мнение

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

DNS. Интернет-магазин цифровой и бытовой техники

Страница 404 DNS

Особенности
  • Графическая составляющая страницы прямо показывает, что мы на сайте DNS;
  • есть кнопка с CTA «Перейти на главную«: это лучше просто ссылки;
  • страница подгружает адреса магазинов вашего города.
Личное мнение

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

Garry Print. Магазин одежды с принтами

Страница 404 Garry Print

Особенности
  • Первое, на что обращаешь внимание, — информация о 50 % скидках;
  • предлагаются три пути выхода с этой страницы: на главную, в каталог и на страницу создания своей крутой одежды;
  • пользователям по-прежнему доступно главное меню, футер и поисковая строка для уточнения их запросов.
Личное мнение

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

Еще чуть-чуть, и я снова с вами!

Kokoc.com. Продвижение сайтов

Страница 404 Kokoc.com

Особенности
  • Трудно не заметить вертикальную «404» на странице;
  • пользователю доступно главное меню;
  • он может перейти на главную страницу, изучить услуги компании и ее кейсы;
  • форма захвата готова помочь пользователю… стать клиентом компании. Неожиданно (нет)!
Личное мнение

Только не говорите, что не увидели здесь аллюзию на фильм «Изгой» с Томом Хэнксом в главной роли. Мы никогда не забудем тебя, Уилсон!

Не время унывать. Нам с тобой еще сайты продвигать!

Infiniti. Автомобильный салон

Страница 404 Infiniti

Особенности
  • Один из тех случаев, когда заветные «404» не указаны в тексте соответствующей страницы;
  • пользователю доступны главное меню и футер сайта;
  • кроме того, он может пользоваться быстрыми ссылками и найти дилера, посмотреть все модели Infiniti, написать представителям компании и почитать о бренде.
Личное мнение

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

Konsoleta. Интернет-магазин белья и купальников

Страница 404 Konsoleta

Особенности
  • Наконец-то кто-то открыто пишет, что появление 404 страницы — ВНЕЗАПНО, и делает это в такой милой форме;
  • пользователю доступны категории каталога, главное меню сайта и виджет обратной связи;
  • тут даже порекомендуют хорошие трусы.
Личное мнение

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

Zlatoust Watch. Интернет-магазин часов

Страница 404 Zlatoust Watch

Особенности
  • Пользователю доступны главное меню и футер сайта;
  • интересно, что оформление 404 страницы здесь абсолютно монохромное;
  • можно перейти по ссылке и почитать историю завода, раз уж вы попали сюда.
Личное мнение

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

Лабиринт. Интернет-магазин книг

Страница 404 «Лабиринт»

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

Являюсь многолетним клиентом «Лабиринта» и не перестаю радоваться дружелюбию его сайта. А скидка в 40 % (см. под логотипом) всегда подпитывает любовь читателей к интернет-магазину.

Мебельный континент. Интернет-магазин мебели

Страница 404 «Мебельный континент»

Особенности
  • Пользователям остаются доступны главное меню и футер сайта;
  • на странице 404 есть графический элемент, указывающий на тематику сайта;
  • в сопроводительном тексте, увы, нет ни одной гиперссылки.
Личное мнение

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

  • пользователь в этот момент мог искать не товар;
  • «снят с публикации» — странная формулировка. Товара вообще нет или он отсутствует только на сайте?

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

Как увеличить конверсию сайта: 30 рабочих способов

MED-магазин. Товары для красоты, здоровья и спорта

Страница 404 «MED-магазин»

Особенности
  • Пользователям по-прежнему доступны главное меню и каталог товаров;
  • 404 страница продает, потому что обещает 5 % скидки на товары по промокоду 404;
  • в тексте также интересуются, что пользователь не смог найти на сайте — вот это забота о покупателе!
Личное мнение

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

Мир охоты. Сеть магазинов

Страница 404 «Мир охоты»

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

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

Много сна. Товары для ночного отдыха

Страница 404 «Много сна»

Особенности
  • Пользователю не доступны навигационные элементы сайта — главное меню и футер
  • ;
  • вариант решения — переход на главную страницу — оформлен в качестве кнопки
  • ;
  • есть товарные рекомендации.
Личное мнение

То, что есть указание скидок на товарах в рекомендациях и количество отзывов на каждый — бесспорно, хорошо. Но на каком основании они формируются? Правильно: на рандомном!

Музмарт. Интернет-магазин музыкальных инструментов

Страница 404 «Музмарт»

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

Если запрошенная страница не найдена, предложите пути решения, а не просто ссылки. И, пожалуйста, не ломайте музыкальные инструменты. К слову, все неверно введенные адреса сайта преобразует в вид https://muzmart.com/404.

PETSHOPRU. Товары для животных

Страница 404 PETSHOPRU

Особенности
  • Пользователю по-прежнему доступно главное меню сайта;
  • причем доступно дважды — предлагают еще раз обратить внимание на ссылки по аксессуарам для животных;
  • в решении проблемы предлагается перейти в каталог.
Личное мнение

Котик играет с клубком на сайте товаров для животных (посмотрите по ссылке — это не просто картинка, а анимация). Если это не милота, то что милота?!

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

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

Спортмастер. Интернет-магазин спортивных товаров

Страница 404 «Спортмастер»

Особенности
  • Пользователи по-прежнему видят главное меню сайта;
  • со страницы 404 можно посмотреть каталог товаров и воспользоваться поисковой строкой;
  • система предлагает перейти со страницы 404 на главную.
  • графическая составляющая соответствует тематике сайта по внешнему виду и странице 404 по эмоциональной составляющей;
  • графическое оформление категорий товаров фокусирует на себя внимание пользователей.
Личное мнение

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

Wildberries. Маркетплейс разнообразных товаров

Страница 404 Wildberries

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

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

Все инструменты.ру. Инструменты для строительства и ремонта

Страница 404 «Все инструменты.ру»

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

Личное мнение

Вы тоже заметили кнопки «Сказать спасибо» и «Пожаловаться» с правой стороны. Мне почему-то хочется сказать спасибо за такое оформление 404-й. Увидев то, что будет дальше, вы поймете, почему.

Copyblogger. Зарубежный блог по контент-маркетингу

Страница 404 Copyblogger

Особенности
  • Пользователю по-прежнему доступно главное меню и футер сайта (они не влезли в скриншот, потому что мы хотели показать вам главное)
  • страница оформлена как стандартная статья блога;
  • такого количество текста именно для 404 страницы еще нужно поискать;
  • можно подписаться на рассылку по контент-маркетингу и тренинг по маркетингу (полная версия 404 страницы по ссылке вверху). %&&$$&**#&&$$$ on this server

    Но есть 404 страница еще страшнее…

    В теории решения изобретательских задач идеальной считается сущность, которой нет, но ее функция выполняется. Так вот: в разработке сайтов нет хуже страницы 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, а также эксклюзивные специальные предложения прямо на ваш почтовый ящик!

    Свяжитесь со мной, чтобы сообщить о новостях и предложениях от других брендов Future. Получайте электронные письма от нас от имени наших надежных партнеров или спонсоров.

    Рут несколько лет работала заместителем редактора 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. The New Yorker – Воспользуйтесь тем, что уже работает

    Пример 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.

    Ищете свежий контент?

    Получайте статьи и идеи из нашего еженедельного информационного бюллетеня.

Автор записи

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *