WebValley Studio

ТОП-125 примеров самых крутых 404 страниц на сайте: от креативных и смешных до корпоративных и игровых

Зачем нужна 404 страница на сайте, какие задачи решает и почему так важно уделить ей внимание. Давайте разбираться ;)))

Зачем нужна страница 404 ошибки на сайте

404 Error (ошибка) или Not Found открывается, когда пользователь переходит на несуществующую страницу. Причины могут быть разные:
● Он ввел некорректный адрес;
● Страница переехала, удалена, и такой ссылки больше нет.

Важно при разработке сайта не оставлять страницу 404 без внимания!

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

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

Нельзя оставлять вот так:
404 not found что это такое и как его убрать
404 page not found что это значит
404 еррор

Системные 404-страницы

Какие задачи поможет решить страница ошибки

Разработка странички 404 может решить ряд проблем:
● Объяснить пользователю, что произошло;
● Перенаправить его на главную или основные разделы сайта;
● Поднять настроение пользователя;
● Показать заботу о нем;
● Произвести впечатление и продемонстрировать, на что вы способны;
● Упростить поиск, например, разместив навигационное меню;
● Повысить продажи, разместив блок популярное или акции в ошибке интернет-магазина;
● Запомниться!

Как оформить 404 страницу

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

Страница-игра

Для разработчиков игр будет актуально разместить на этой страничке мини игру. Пользователь точно залипнет надолго :))
404 ошибка на сайте
Romainbrasier — оригинальная страница веб-разработчика, на которой можно зависнуть с аналогом знаменитой игры lemmings.

Страница ошибки для интернет-магазина

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

Удобное меню на странице ошибки

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

Креативная или юмористическая 404 страница

Для креативного агентства можно придумать интересную анимацию и продемонстрировать пользователям свои навыки:
Hatchedlondon — креативное агентство подошло нестандартно к 404 странице.
А ещё можно с юмором оформить страничку ошибки, как, например, сыроварня Fromage Abondance:
еррор 404
Fromage Abondance — модная корова в тренде, как и продукция сыроварни.

404 страница в корпоративном стиле

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

Что написать на странице ошибки

Пользователь закрывает сайт, когда попадает на страницу ошибки, поскольку часто просто не понятно, где ты оказался: «А я точно ещё на этом сайте?», «А может это вирус?», «Сайт не работает?»

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

Не пишите стандартные фразы «Error», «Not Found», «Ошибка 404».
Переведите фразы на человеческий понятный язык:
● Извините, страница не найдена;
● Эта страница удалена, но на нашем сайте еще много интересного;
● Упс! Что-то пошло не так, этой страницы не существует;
● Вы попали на несуществующую страницу;
● Любой ваш вариант, понятный пользователю.

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

Примеры оригинальных и гениальных 404 страниц

Предлагаем подборку самых необычных оформлений 404-й.

Discord App

Улетная технология от дискорд — квантовый робот-хомяк за работой :)) Выглядит так, как будто мы случайно увидели закулисье в работе сайта.
нот фаунд 404

Beach Park

Оригинальная 404 страничка с плавающей в луже акулой:

Designzillas

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

Bench

404, сообщающая о том, что страницы не существует, как и снежного человека. Или нет?..

Pirate Code

Задумчивый динозавр заблудился в тумане. Дополнительно комичности придает надпись «Пейдж нот фаунд», написанная по-русски:

Weemss

Ресурс предлагает войти или зарегистрироваться, чтобы спасти хотя бы одну пони, превращающуюся в зомби:

Vebk

Оригинальная страничка 404 в стиле ретро:
404 ошибка на сайте

Slack

Яркий сказочный мир ожил на странице 404:

Rabota Gk-Rte

Оригинальное решение с таймером обратного отсчета до столкновения задержит на странице как минимум на 45 сек :))
ошибка 404 что делать

Kick Point

Креативное решение от компании Kick Point, занимающейся маркетинговыми исследованиями. «Мы искали, но не нашли, что вы ищите. Как насчет того, чтобы вместо этого провести тематическое исследование?»

Madwell

Анимированный костер развели на странице ошибки Madwell:
ошибка нттр 404

Rails Ware

Не подружились — тематическая страничка 404 от Rails Ware.
прикольные страницы 404

Love Beets

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

Sketch

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

Max Style

Стильная и минималистичная ошибка 404.
примеры страниц 404

Vintage

Потерявшийся олень нервно оглядывается на страничке 404.

Kleo

Креативная страничка ошибки, на которой персонажи заблудились в темноте:
сайт с ошибкой 404

Blizzard Entertainment

Потерявшийся во вьюге персонаж ждет спасательный отряд:
сайт с ошибкой 404 ссылка

Pixar

На страничке 404 от студии Pixar пользователю предлагают не реветь, как знаменитый персонаж мультфильма:
страница 404 что это

Planeta Kino

Хьюстон, у нас проблемы — знаменитая фраза на странице ошибки сети кинотеатров «Планета Кино».
тильда ошибка 404

Orangecoat

Оригинальное решение для страницы 404 в виде опроса с пошаговым ведением к решению проблемы.
эрор 404

SumatoSoft

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

IMDb

Простая, но интересная страница ошибки от известной базы кинематографа — рандомно показывает фразы, например на скриншоте фраза из Властелина колец: «Всегда помни, Фродо, страница пытается вернуться к своему хозяину. Она хочет быть найденной».
404 страница дизайн

Hotdot

Красивая анимация на страничке ошибки.

Airbnb

Упс. Забавная страничка ошибки и казус в виде упавшего мороженого.
дизайн 404 страницы

Iloveicons

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

MailChimp

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

Lpgenerator

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

Cloud Sigma

Забавная страничка 404: «О нет, вы наткнулись на нашего младшего разработчика. Наш программист проводит время на диване, но младший программист находит время покодить))»
кастомная страница 404

GoDaddy

Функциональная страничка ошибки от популярного регистратора GoDaddy.
красивая 404 страница html

eBay

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

Evernote

Оригинальная страничка от популярного сервиса системы организации рабочего процесса.
красивая страница 404 html скачать

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

Минималистично и функционально. Отличная страница 404.
красивые 404 страницы

DayCloud Studios

Залипательная страничка ошибки, где при перемещении курсора можно посылать лучи лазера из глаз кота))

Примеры смешных и креативных 404 страниц

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

Insurance Experiments

Веселая страничка от компании проводящей страховые эксперименты.
404 ошибка на сайте

Tproger

Забавное видео поднимет настроение потерявшимся на сайте пользователям.
404 ошибка на сайте

Geekbrains

На 404й можно встретить три разных варианта видео с озадаченными героями известных фильмов. Помимо кнопки «Вернуться на сайт» пользователю также предлагают сообщить об ошибке.

ITcluster

Прикольная страница ошибки от ITcluster:

Hakim.se

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

Incore

Забавная страничка ошибки как бы предостерегает пользователя, что он нарвался на неприятности и лучше вернуться в безопасное место))
404 ошибка на сайте

limpfish

Разыскивается страница. Оригинальный подход в оформлении 404-й в виде объявления о розыске.
404 ошибка на сайте

Hugoware

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

Tony Babel

Необычная страница ошибки от Tony Babel. "Вы забрели на земли мертвецов".
ошибка 404 оформление

Markus Magnusson

Страничка 404 о пещерном человеке и электричестве))
ошибка 404 оформление

Push World

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

Clorox

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

Waza

На 404 от WAZA потерялись фламинго. Страничка заставляет улыбнуться и немного на ней зависнуть))

Алексей Бычков

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

Примеры 404 страниц в корпоративном стиле

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

Puree Maison

Интересный персонаж блинчик-колобок преследует посетителя на страницах сайта, в том числе и на Page Not Found.

Hungry Boys

Улыбка — элемент логотипа компании, в перевернутом виде показывает недовольство отсутствием страницы:
примеры оформления 404 страницы

Phive

Потеряв 404 гр жира, жизнерадостный скачущий прелоадер упал без сил

A propos du cancer

На странице ошибки потерявшийся пациент медицинского учреждения. Удачный пример спокойных тонов, аккуратной анимации и хорошей навигации.

Nagyi Titka

Минималистично и аккуратно. Персонаж бренда — милая бабуля с пирожками. Располагает к себе и сообщает об ошибке.
сайт ошибка 404 прикол

Panoraven

Страница потерялась и ее усердно ищет по следам :)) персонаж сервиса.
сайт с ошибкой 404 прикол перейти

Yelp

Еще один сыщик-пес ищет потерянную страницу, а вы пока можете воспользоваться удобным поиском:
смешные страницы 404

Marvel

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

Lego

На странице ошибки компания Lego предлагает посетителям вернуться на сайт или сыграть в игру.
шаблон ошибки 404

The New Yorker

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

Chillhouse

Страничка ошибки в стиле бренда компании
404 ошибка на сайте

Ikea

Страничка компании икеа оформлена в минимализме и с акцентом на продукт.
текст страницы 404

Zendesk

Лаконичная и позитивная 404-я не пугает посетителя, а наоборот, представляет его как одного из немногих счастливчиков)))
текст ошибки 404
Готовы создать сайт прямо сейчас. А вы?

Примеры тематических Not Found страничек

Идея таких страниц в том, что они отражают направление деятельности компании.

E-co

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

Slodych

Вкусная страничка 404 от кондитерской Слодыч.
текст для страницы 404

Woodst

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

Specialized

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

CSS-tricks

Тематическая страничка, вскрывающая код сайта от портала CSS-tricks:
404 ошибка на сайте

Fork cms

Страничка 404 выполнена в стиле дизайна сайта — морской тематике.
страница 404 примеры

Figma

Оригинальная страничка графического сервиса Figma выполнена в минималистичном стиле, но не так проста. Можно надолго залипнуть, перемещая точки кривых на цифрах.

Telltale

Страница ошибки от разработчиков игр соответствует тематике компании.
страница 404 пример

Docker

Страница ошибки в стилистике компании.
404 ошибка на сайте

Bestclinic

Страница ошибки в стиле медицинской клиники. Компания предлагает скидку потерявшемуся клиенту. Отличное решение для получения новых лидов.
404 ошибка на сайте

Саянская фольга

Что должно быть на сайте саянской фольги? Правильно — испорченная фольга)) Страничка 404 от креативного агентства uplab.
страница 404 для сайта

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

Именно такой должна быть страничка банка: в корпоративном стиле, минималистичная, информативная, c удобной навигацией.
страница 404 seo

Алексей Бычков

Символично — нет страницы, нет машины. Ошибка от креативного дизайнера Алексея Бычкова.
404 ошибка на сайте

МУ-СОР

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

Домашние любимцы на 404 страницах

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

Html6

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

Buzz Feed

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

Life Daily

Хороший пример навигации на страничке ошибки. И, конечно же, котик :))
создание страницы 404

Kayako

Милый кот в оттенках сайта задремал на страничке 404.
создание 404 ошибка

Help Scout

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

Marketo

Милый мопс грустит на страничке ошибки.
сайт с ошибкой 404 пример

99designs

Собака-терминатор на страничке ошибки.
примеры страницы 404

The Software House

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

Amazon

Милые собачки от Амазон на страничке 404. Каждый раз новый пес со своей кличкой)) Я насчитала 50+, прежде, чем ушла)))

Spotify

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

Примеры красивых иллюстрированных 404

Использование иллюстраций — хороший способ разнообразить оформление 404 страницы.

Branded 7

Страничка 404 в стиле работ онлайн-галереи от компании Branded7:
ошибка 404 шаблоны

Bright Scout

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

TRAVEL MAPS APP

День сменяет ночь на странице ошибки.

Leadmachine

Креативная страница ошибки — выдает пользователю советы рандомно.

Text ru

Забавная 404 от сервиса для копирайтеров.
ошибка 404 текст

BrandCrowd

Красивая иллюстрация и оригинальное послание на странице 404: «Дважды проверьте свой URL!»
ошибка 404 страница

Игровые 404 страницы

Примеры оформления 404 страницы, которые не только помогают снять напряжение пользователя, но и весело провести время.

Kualo

Космические захватчики — страничка точно понравится посетителям.
404 ошибка на сайте

Pointe Pest

Заморить жуков можно на веселой страничке 404 от Pointe Pest.
404 ошибка на сайте

Canva

Для любителей головоломок креативная страничка ошибки от сервиса Canva.
ошибка 404 примеры

Amphibian

Лягушачий футбол! Занятная страница ошибки на сайте Amphibian.
ошибка 404 пример

OLX

Сыграй в крестики-нолики на 404 странице доски объявлений OLX.
описание ошибки 404

Страницы-фиаско

Такой вариант оформления говорит пользователю, что произошел какой-то факап.

FSRussia

Провальное выступление фигуристки на 404 странице Федерации фигурного катания.
ой ошибка 404

Sibirix

Упавший робот на странице ошибки.
нужна ли страница 404

Straight North

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

Crello

Космонавт на лавке — что-то точно пошло не так.
лучшие 404 страницы

Страницы 404 студентов курса PRO Web

Подборка 404 страниц, выполненных студентами в рамках курса по веб‑дизайну от Алексея Гамова и команды WebValley Studio PRO Web.

Необычная и нежная страничка для проекта бьюти-коворкинга от Алеси Алешко:
404 ошибка на сайте
Страничка 404 для школы танцев от Екатерины Никифоровой:
404 ошибка на сайте
Страничка 404 для концепта по редизайну сайта знаменитого бренда Ray Ban от Наталии Фроловой:
404 ошибка на сайте
Шутливая страничка 404 для бюро архитектуры от Жанны Давыдовой:
404 ошибка на сайте
Вкусная ошибка для мясокомбината от Анны Карабановой:
как создать страницу 404 tilda
Страничка ошибки в корпоративном стиле компании по аренде экскаваторов от Алены Чаплинской:
404 ошибка на сайте
Брутальная страница 404 для барбершопа от Оксаны Лаптевой:
404 ошибка на сайте
Оптимистичная надпись на странице ошибки студии интерьеров от Надежды Кувшинниковой:
404 ошибка на сайте
Креативная страничка ошибки для свадебного организатора от Татьяны Зверевой:
как должна выглядеть страница 404
Информативная страница ошибки для компании по аренде элитных автомобилей в Европе от Валентины Ивлицкой:
404 ошибка на сайте
Оптимистичная страница 404 компании по организации плавания с касатками и китами от Натальи Санниковой:
готовые страницы 404
Шутливая страничка ошибки для клининговой компании от Татьяны Васильевой:
404 ошибка на сайте
Оригинальная и мотивирующая :)) Cтраничка 404 для школы танцев от Екатерины Зверевой:
error 404 текст
Навигационное меню на странице 404 свадебного фотографа от Леси Пашкевич:
404 ошибка на сайте
Креативная страничка рок-фестиваля от Евгения Климова:
404 ошибка на сайте
Лаконичная 404-страница с пустым гардеробом от Евгения Климова:
404 примеры страниц
Стильная 404 курса по инвестициям от Евгении Зверевой:
404 ошибка на сайте
Шутливая страничка ошибки сайта для детского фотографа от Натальи Куцак:
404 ошибка примеры
Страница ошибки для винодельни от Натальи Симуновой:
404 ошибка на сайте
Записаться на курс PRO Web
Какую страницу ошибки выбрать, решать вам. Но помните, что нужно не просто блеснуть креативностью и показать какой вы крутой дизайнер. Важно проявить заботу о пользователе, чтобы у него сформировалось положительное впечатление от взаимодействия с сайтом, даже если он забрел не туда.
Автор статьи
Мария Дрокина
UI-дизайнер
05.02.2022
Доверьте разработку сайта профессионалам!
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!

Подпишись, чтобы быть в курсе!

Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.