Россия+7 (495) 960-65-87

Подборка креативных страниц 404 ошибки

Россия+7 (495) 960-65-87
Шрифт:
0 13070

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

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

В качестве бонуса в конце статьи вы также найдете советы по оформлению страницы 404.

Purée Maison

Purée Maison – французское креативное агентство, специализирующееся на коммуникационных стратегиях. Персонаж со страницы ошибки 404 нарисован в фирменном стиле сайта и также встречается на страницах загрузки.

Pixar

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

На странице ошибки 404 мультипликационной студии Pixar Печаль из мультфильма «Головоломка» приняла ошибку слишком близко к сердцу. Хороший пример тематической страницы: персонаж известен многим, кто знаком с творчеством компании.

Marvel

Страница не найдена. Даже глаз Уату не видит ваш запрос.

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

Matteo Vandelli

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

20th Century Fox

То, на что вы смотрите, могло уже быть перемещено. Если вы, конечно, не ищете «Офисное пространство».

Киностудия 20th Century Fox вместо страницы с ошибкой 404 выдает кадры из своих фильмов, среди которых «Эдвард Руки-ножницы», «Офисное пространство», «Месть полудурков», «Наполеон Динамит» и другие. Забавно, что на момент написания статьи при попытке кликнуть по тексту пользователя перебрасывало на другую, менее креативную страницу ошибки 404.

Cloud Sigma

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

Cloud Sigma – облачное хранилище. На странице – немного юмора и кнопка, ведущая на Главную.

BluePath

Раз вы попали на эту страницу, наслаждайтесь картой, которую мы для вас составили. На ней показаны все преступления, совершенные в Атланте за пару лет. Зачем? Да потому что то, что вы нас еще не наняли, – преступление!

Другой сайт, страница которого сделана с юмором, – сайт компании BluePath, работающей с Big Data. На странице 404 – карта Атланты с точками, обозначающими преступления, совершенные в городе за 2 года. А все потому, что вовремя не начать сотрудничать с BluePath – преступление.

The Useless Web Index

На странице реестра самых бесполезных сайтов интернета несколько опоссумов ищут потерявшуюся страницу и никак не могут ее найти.

Kualo

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

Веб-хостинг Kualo на рынке уже 15 лет, бесконечность по меркам интернета. Их страница ошибки 404 – отсылка в прошлое. Те, кто наткнулся на нее, могут поиграть в Space Invaders, лучшую аркадную игру по версии Книги рекордов Гиннесса и основоположницу всех современных аркад.

Waaark

Упс, что-то пошло не так.

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

Steve Lambert

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

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

Figma

Надпись «404» можно растягивать за опорные точки. Расслабляет.

Airbnb

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

Hot Dot Production

Слоган веб-разработчик Hot Dot Production «Где дизайн встречается с технологией» хорошо отражен на его странице ошибки 404. Три цифры составлены из сотен маленьких точек, которые меняют направление или расходятся в разные стороны в зависимости от движений мышки.

GitHub

Страница Github нацелена на гиков-фанатов серии «Звездные войны».

Помимо 404 у GitHub еще есть креативная страница с 500 ошибкой.

CSS Ninja

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

MailChimp

Мы потеряли эту страницу. Мы посмотрели везде, но так и не нашли то, что вы ищете. Давайте найдем для вас место получше.

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

Emirates

Страница ошибки 404 от Emirates выполнена в фирменном стиле компании. Один из менеджеров компании Томас Панек утверждает, что упор на ней сделан на UX-дизайн: компания провела исследование и вычислила, на какие страницы пользователи обычно переходят после 404. Так на странице появились 4 кнопки для перехода на поиск рейсов, управление бронью, вход в аккаунт и главную страницу.

Audiko

Audiko – сервис для создания рингтонов. На странице ошибки 404 – иллюстрация Лондона с его традиционными красным автобусом, телефонной будкой, Биг Беном, Шерлоком Холмсом и Тауэрским мостом. А чтобы не потеряться, по центру расположен поиск рингтонов и ссылка на домашнюю страницу.

IMDb

На 404 странице главного западного сайта о кинематографе можно найти измененные цитаты из кинофильмов, в которые вставлено слово «страница». Например, «Я отсутствующая страница Джека» из Бойцовского клуба или «Что на странице?!» из фильма «Семь».

Зайдите и проверьте, цитата из какого фильма попадется вам.

NPR

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

Blizzard Entertainment

Компания-создатель игр World of Warcraft и Diablo обвиняет пользователя в том, что страница «сломалась». Ущерб действительно налицо: хедер навигации «упал», а экран разбит.

TProger

На странице 404 портала о разработке TProger есть все: объявление об ошибке, забавные видео (каждый раз новые) и ссылки на другие страницы.

Crello

Страницу сервиса для создания дизайнов Crello украли голуби. Действительно, теперь остается только вернуться на предыдущую страницу или сразу перейти к созданию дизайна.

Hakim.se

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

Android

Android предлагает пользователю вернуться на сайт либо поиграть в игру: помочь сладостям попасть в нужную трубу.

Sumatosoft

Авторы страницы Sumatosoft намекают на то, что страницу украли инопланетяне. Но не стоит расстраиваться: вы все еще можете перейти на домашнюю страницу, просмотреть кейсы или написать компании.

Ma meilleur cuite

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

Французский блог об алкоголе Ma meilleur cuite предлагает сыграть в игру Pacman, выполненную в стилистике сайта.

Romainbraser

На странице сайта разработчика Romainbraser можно сыграть в аналог популярной игры Lemmings.

Fox

На 404 странице студии Fox пользователей ждет Стьюи из Гриффинов. Кнопка «Get Together» ведет на главную страницу.

Discord

Оказывается, мессенджер Discord приводят в действие квантовые хомяки-роботы. Узнать об этом можно, только попав на страницу ошибки 404.

Slack

На странице 404 ошибки корпоративного мессенджера Slack – отсылка к небольшой MMO-игре Glitch (от англ. глюк), созданной одним из основателей программы.

Canva

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

Amphibian

На портале с комиксами Amphibian можно сыграть в лягушачий футбол.

Советы от экспертов

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

Петр Пархоменко, CreativePeopleПетр Пархоменко, арт-директор CreativePeople

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

Задачи кастомной страницы 404:

  • уведомить об ошибке в дружелюбной форме. Не забывайте про тональность коммуникации (ToV, Tone of Voice): ошибка произошла не по вине пользователя, успокойте его, просто скажите, что контент не найден;
  • объяснить причину. Например, что страница была удалена либо что вы недавно обновили структуру сайта;
  • предложить решение, чтобы оставить посетителя на сайте.

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

Если причина возникновения ошибки неизвестна, можно предложить типовые решения: предоставить возможность перейти на работающие страницы, показать основную навигацию, дать ссылки на популярные разделы. Например, для ecommerce-сайтов имеет смысл предложить перейти в каталог товаров или дать ссылки на самые популярные. Главное – не оставить посетителя наедине с проблемой. Хорошие примеры реализации этих идей – Squarespace и IFTTT.

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

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

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

  • CreativePeople – сюрреалистичная фирменная иллюстрация поддерживает наш стиль, а отсылка к уровню в игре предлагает в неформальном стиле решение проблемы.
  • Andrea Areni – хорошая визуализация ошибки, напоминающая помехи на телеэкране. Круто, технологично, непонятно.
  • Gymbox – а тут просто удивляют посетителя, смешат его. Все-таки 404-я ошибка – не какая-то трагедия.

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

Однако стоит помнить, что все-таки лучше, чтобы пользователь вообще не попадал на страницу 404 ошибки.

Ошибка 404Константин Кислейко, руководитель отдела дизайна AGIMA

Я уже давно не встречал 404 страницу в реальной жизни.

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

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

Источник: Creative Bloq

(Нет голосов)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Сколько ссылок помогут продвинуть молодой сайт
    Павел Андрейчук
    37
    комментариев
    0
    читателей
    Полный профиль
    Павел Андрейчук - Дело в том, что вряд ли в ваших платных "качественных" кейсах найдётся хоть пару % действительно новой и полезной информации которой бы не было на общедоступных источниках.
    Сайт на WordPress: за и против
    Мира Смурков
    1
    комментарий
    0
    читателей
    Полный профиль
    Мира Смурков - Людмила, я согласен с большинством комментаторов. Вы хоть один полноценный магазин сделали на этих движках? Woocommerce это система с супер возможностями. И к ней есть дополнительные модули, с функционалом, который вряд ли появиться на Битрикс. А самому это программировать - сотни тысяч рублей на разработку. А приведя в пример сложности с robots.txt и Sitemap вы ставите под вопрос вашу компетенцию в понимании Интернет-бизнеса и веб-разработки в целом. Во-первых это такие мелочи, а во-вторых это все делается на вордпресса за 2 минуты, и опять же с возможностями многократно превышающими Битрикс.
    Обзор популярных CMS: плюсы и минусы
    Андрей Литвиненко
    2
    комментария
    0
    читателей
    Полный профиль
    Андрей Литвиненко - + там где нужно прописать каноникал, там где нужно поставить мета тег ноиндекс (т.к. Гугл не всегда следует правилам robots.txt) ну и то что выше, к техническим сео возможнлстям можно еще отнести легкое и хотя бы полуавтоматическое добавление микроразметки по сайту, увы "из коробки" такого функционала нет ни в одной cms, все на допиливаниях
    Google обошел Яндекс по популярности в России в 2018 году: исследование SEO Auditor
    Рамблер
    1
    комментарий
    0
    читателей
    Полный профиль
    Рамблер - Вот вроде отечественный - это сказано верно.. «Я́ндекс» — российская транснациональная компания, зарегистрированная в Нидерландах. Так говорится в Википедии. И с хрена ли ОТЕЧЕСТВЕННЫЙ поисковик зарегистрирован в Европе? И где платится основная часть налогов? Ну-ууу, точно не в России. И если запахнет жаренным, то был Яндекс и нет Яндекса!
    8 методик в SEO, от которых давно пора отказаться
    Евгений Сметанин
    12
    комментариев
    0
    читателей
    Полный профиль
    Евгений Сметанин - Факторов вообще очень много, согласитесь, вы будете использовать максимальное их количество, особенно, если в ТОПе засели агрегаторы с сумасшедшими ПФ. В таких случаях, вхождение ключа в домен для маленького профильного сайта, сыграет свою положительную роль. Конечно же, если контент на страницах хорошего качества. У меня есть несколько успешных кейсов на эту тему. На сайте продают несколько видов товаров, а выстреливает в ТОП тот, название которого присутствует в доменном имени. Как корабль назовешь, так он и поплывет, верно?))
    Инструкция: настраиваем цели Яндекс.Метрики через Google Tag Manager
    Roman Gorkunenko
    1
    комментарий
    0
    читателей
    Полный профиль
    Roman Gorkunenko - Здравствуйте. Подскажите, пожалуйста, можно с айпи метрики вытащить среднюю стоимость клика по утм меткам? В метрике есть такой шаблон tags_u_t_m, но он не совместим с меткой директа, у них разные префиксы.
    Google Data Studio: делаем красивые отчеты по контекстной рекламе для клиентов
    Сергей
    1
    комментарий
    0
    читателей
    Полный профиль
    Сергей - Добрый день! Спасибо за статью, полезный материал! Могли бы подробнее расписать, как настроить вывод Гугл Таблиц с привязкой к отчетному периоду? Заранее спасибо!
    Аудит структуры интернет-магазина мебели от «Ашманов и партнеры»
    Дмитрий
    11
    комментариев
    0
    читателей
    Полный профиль
    Дмитрий - Сергей, а вы допускаете, что вся ваша жизнь - seo-миф?
    Как выбрать подрядчика для продвижения сайта: 7 уровней воронки поиска
    aashutosh
    1
    комментарий
    0
    читателей
    Полный профиль
    aashutosh - data science training institute in noida- Webtrackker Technology (8802820025) providing Data Science Training in Noida. Get ✓ 40 Hours Learning training✓ 70 Hrs Projects ✓ 24 X 7 Support ✓ Job Assistance. WEBTRACKKER TECHNOLOGY (P) LTD. C - 67, sector- 63, Noida, India. E-47 Sector 3, Noida, India. +91 - 8802820025 0120-433-0760 +91 - 8810252423 012 - 04204716 EMAIL:info@webtrackker.com webtrackker.com/Best-Data-Science-Training-Institute-in-Noida.php
    Как построить качественный ссылочный профиль на основе конкурентов
    Ирина
    2
    комментария
    0
    читателей
    Полный профиль
    Ирина - Давно сотрудничаю с megaindex.com и считаю данный сервис одним из лучших в сео сегменте рунета да и не только рунета. Пользуюсь их инструментами для аналитики своих работ и выявлению своих и чужих ошибок. Да и ссылочный профиль, как и говорится в данной статье сделать гораздо проще и правильней при помощи как раз мегаиндекса. Добавлю еще что инструмент для поиска конкурентов у мегаиндекса очень удобный и простой в применении.
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    345
    Комментариев
    262
    Комментариев
    247
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    101
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    80
    Комментариев
    77
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    59
    Комментариев
    57
    Комментариев
    55

    Отправьте отзыв!
    Отправьте отзыв!