Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
ТОП-165+ примеров самых крутых 404 страниц на сайте: от креативных и смешных до корпоративных и игровых
Зачем нужна 404 страница на сайте, какие задачи решает и почему так важно уделить ей внимание. Давайте разбираться ;)))
Оглавление
- Зачем нужна страница 404 ошибки на сайте
- Как оформить 404 страницу
- Что написать на странице ошибки
- Примеры оригинальных и гениальных 404 страниц
- Смешные и креативные 404 страницы
- 404 страница в корпоративном стиле
- Тематические Not Found странички
- Домашние любимцы на 404 страницах
- Красивые иллюстрированные 404
- Игровые 404-е страницы
- Страницы-фиаско
- Страницы 404 студентов курса PRO-web
Зачем нужна страница 404 ошибки на сайте
404 Error (ошибка) или Not Found открывается, когда пользователь переходит на несуществующую страницу. Причины могут быть разные:
Важно при разработке сайта не оставлять страницу 404 без внимания!
Во-первых, 404 страница играет большую роль в конверсии сайта. При грамотной разработке, посетитель останется на сайте — перейдет в нужный раздел, или просто подвиснет на интересной и нестандартной 404-ой.
Во-вторых, не каждый пользователь понимает значение этой ошибки и, увидев стандартное сообщение, испугается, решит, что сайт сломался, и покинет его.
Нельзя оставлять вот так:
- Он ввел некорректный адрес;
- Страница переехала, удалена, и такой ссылки больше нет.
Важно при разработке сайта не оставлять страницу 404 без внимания!
Во-первых, 404 страница играет большую роль в конверсии сайта. При грамотной разработке, посетитель останется на сайте — перейдет в нужный раздел, или просто подвиснет на интересной и нестандартной 404-ой.
Во-вторых, не каждый пользователь понимает значение этой ошибки и, увидев стандартное сообщение, испугается, решит, что сайт сломался, и покинет его.
Нельзя оставлять вот так:
Системные 404-страницы
Какие задачи поможет решить страница ошибки
Разработка странички 404 может решить ряд проблем:
- Объяснить пользователю, что произошло;
- Перенаправить его на главную или основные разделы сайта;
- Поднять настроение пользователя;
- Показать заботу о нем;
- Произвести впечатление и продемонстрировать, на что вы способны;
- Упростить поиск, например, разместив навигационное меню;
- Повысить продажи, разместив блок популярное или акции в ошибке интернет-магазина;
- Запомниться!
Как оформить 404 страницу
Есть разные способы оформления данной страницы. Вы можете создать 404-ю в юмористическом стиле, или в корпоративном, сделать ее максимально простой или креативной, а можете создать полезную страничку с навигацией. Решать вам и бизнесу, с которым вы работаете.
Страница-игра
Для разработчиков игр будет актуально разместить на этой страничке мини игру. Пользователь точно залипнет надолго :))
Romainbrasier — оригинальная страница веб‑разработчика, на которой можно зависнуть с аналогом знаменитой игры lemmings.
Страница ошибки для интернет-магазина
Для интернет-магазина актуальным будет блок «популярное», «смотрите ещё», «акции». Такая страничка подскажет пользователю, что он не потерялся и все еще на сайте, и предложит продолжить покупки:
Adidas — минималистичная 404-я от Adidas — хороший пример оформления страницы для интернет‑магазинов. Предложите совершить покупку или воспользоваться поиском.
Удобное меню на странице ошибки
Для крупного ресурса, такого как многостраничный сайт, фотосток и подобных, будет актуально разместить навигационное меню по основным разделам:
Adobe — страница ошибки от Adobe выполнена в приятном лаконичном дизайне и содержит много полезных ссылок, которые могут понадобиться пользователю на сайте.
Креативная или юмористическая 404 страница
Для креативного агентства можно придумать интересную анимацию и продемонстрировать пользователям свои навыки:
Hatchedlondon — креативное агентство подошло нестандартно к 404 странице.
А ещё можно с юмором оформить страничку ошибки, как, например, сыроварня Fromage Abondance:
Fromage Abondance — модная корова в тренде, как и продукция сыроварни.
404 страница в корпоративном стиле
Часто отличное решение — просто создать страничку в корпоративном стиле, чтобы пользователь понимал, что он все еще находится на том же самом сайте. Например, разместить элемент корпоративного стиля и бренда или просто создать тематическое настроение:
Moosend — корова на странице ошибки — яркий персонаж айдентики компании.
Profflex — тематическая страница ошибки от компании-производителя монтажной пены.
Что написать на странице ошибки
Пользователь закрывает сайт, когда попадает на страницу ошибки, поскольку часто просто не понятно, где ты оказался: «А я точно ещё на этом сайте?», «А может это вирус?», «Сайт не работает?»
Важно успокоить и дать понять, что ничего страшного не случилось, и вы по-прежнему находитесь на сайте.
Не пишите стандартные фразы «Error», «Not Found», «Ошибка 404».
Переведите фразы на человеческий понятный язык:
Обязательно предложите решение, что делать дальше: вернуться на главную, в каталог, разместите соответствующие кнопки.
Важно успокоить и дать понять, что ничего страшного не случилось, и вы по-прежнему находитесь на сайте.
Не пишите стандартные фразы «Error», «Not Found», «Ошибка 404».
Переведите фразы на человеческий понятный язык:
- Извините, страница не найдена;
- Эта страница удалена, но на нашем сайте еще много интересного;
- Упс! Что-то пошло не так, этой страницы не существует;
- Вы попали на несуществующую страницу;
- Любой ваш вариант, понятный пользователю.
Обязательно предложите решение, что делать дальше: вернуться на главную, в каталог, разместите соответствующие кнопки.
Примеры оригинальных и гениальных 404 страниц
Предлагаем подборку самых необычных оформлений 404-й.
Discord App
Улетная технология от дискорд — квантовый робот-хомяк за работой :)) Выглядит так, как будто мы случайно увидели закулисье в работе сайта.
Beach Park
Оригинальная 404 страничка с плавающей в луже акулой:
Designzillas
Необычная страничка 404, где проскроллив вниз, вы можете посмотреть, как в темном страшном лесу вылупляется дракон:
Bench
404, сообщающая о том, что страницы не существует, как и снежного человека. Или нет?..
Pirate Code
Задумчивый динозавр заблудился в тумане. Дополнительно комичности придает надпись «Пейдж нот фаунд», написанная по-русски:
Weemss
Ресурс предлагает войти или зарегистрироваться, чтобы спасти хотя бы одну пони, превращающуюся в зомби:
Vebk
Оригинальная страничка 404 в стиле ретро:
Slack
Яркий сказочный мир ожил на странице 404:
Rabota Gk-Rte
Оригинальное решение с таймером обратного отсчета до столкновения задержит на странице как минимум на 45 сек :))
Kick Point
Креативное решение от компании Kick Point, занимающейся маркетинговыми исследованиями. «Мы искали, но не нашли, что вы ищите. Как насчет того, чтобы вместо этого провести тематическое исследование?»
Madwell
Анимированный костер развели на странице ошибки Madwell:
Rails Ware
Не подружились — тематическая страничка 404 от Rails Ware.
Love Beets
Уникальная тематическая страничка ошибки фермы по выращиванию овощей. Интерактивные редиски помогут вам попасть в соцсеть компании.
Sketch
НЛО укажет верный путь, а навигационное меню поможет удобно переместиться в нужное направление.
Max Style
Стильная и минималистичная ошибка 404.
Vintage
Потерявшийся олень нервно оглядывается на страничке 404.
Kleo
Креативная страничка ошибки, на которой персонажи заблудились в темноте:
Blizzard Entertainment
Потерявшийся во вьюге персонаж ждет спасательный отряд:
Pixar
На страничке 404 от студии Pixar пользователю предлагают не реветь, как знаменитый персонаж мультфильма:
Planeta Kino
Хьюстон, у нас проблемы — знаменитая фраза на странице ошибки сети кинотеатров «Планета Кино».
Orangecoat
Оригинальное решение для страницы 404 в виде опроса с пошаговым ведением к решению проблемы.
SumatoSoft
Оригинальная иллюстрация с похищением инопланетянами коровы на странице ошибки. Помимо прикольного изображения тут хорошо проработан текст: «Похоже, страницы, которую вы ищете, больше нет. Вы можете расстраиваться или вместо этого: познакомиться с нами поближе, изучить наше портфолио, написать нам».
IMDb
Простая, но интересная страница ошибки от известной базы кинематографа — рандомно показывает фразы, например на скриншоте фраза из Властелина колец: «Всегда помни, Фродо, страница пытается вернуться к своему хозяину. Она хочет быть найденной».
Hotdot
Красивая анимация на страничке ошибки.
Airbnb
Упс. Забавная страничка ошибки и казус в виде упавшего мороженого.
Iloveicons
Для любителей ночных приключений оригинальная страничка ошибки от сервиса по подбору иконок.
MailChimp
Сервис по рассылке подошел оригинально к созданию 404 страницы, изобразив любопытного ослика, заглядывающего в дыру в поиске нужной страницы.
Lpgenerator
Хороший пример навигации на страничке ошибки и интересная иллюстрация.
Cloud Sigma
Забавная страничка 404: «О нет, вы наткнулись на нашего младшего разработчика. Наш программист проводит время на диване, но младший программист находит время покодить))»
GoDaddy
Функциональная страничка ошибки от популярного регистратора GoDaddy.
eBay
Отличный пример хорошей странички для интернет-магазина с возможностью продолжить покупки или обратиться в техподдержку.
Evernote
Оригинальная страничка от популярного сервиса системы организации рабочего процесса.
Студия Артемия Лебедева
Минималистично и функционально. Отличная страница 404.
DayCloud Studios
Залипательная страничка ошибки, где при перемещении курсора можно посылать лучи лазера из глаз кота))
Ghost Page
Ошибка 404 с милым привидением, которое следит за движением мыши
404 Error page
Испуганные глаза: мы заблудились? Как? Почему?! Дизайн классно обыгрывает эмоции пользователя в момент посещения несуществующей странички.
Примеры смешных и креативных 404 страниц
Чтобы снять напряжение и негатив пользователя из-за несуществующей страницы, добавьте в оформление юмористические нотки.
Insurance Experiments
Веселая страничка от компании проводящей страховые эксперименты.
Tproger
Забавное видео поднимет настроение потерявшимся на сайте пользователям.
Geekbrains
На 404й можно встретить три разных варианта видео с озадаченными героями известных фильмов. Помимо кнопки «Вернуться на сайт» пользователю также предлагают сообщить об ошибке.
ITcluster
Прикольная страница ошибки от ITcluster:
Hakim.se
Необычная страница ошибки, которая пугает и забавляет одновременно
Incore
Забавная страничка ошибки как бы предостерегает пользователя, что он нарвался на неприятности и лучше вернуться в безопасное место))
limpfish
Разыскивается страница. Оригинальный подход в оформлении 404-й в виде объявления о розыске.
Hugoware
Необычная страничка с черной дырой, которая засасывает пункты меню. При этом логотип остается кликабельным (если поймаешь)))
Tony Babel
Необычная страница ошибки от Tony Babel. "Вы забрели на земли мертвецов".
Markus Magnusson
Страничка 404 о пещерном человеке и электричестве))
Push World
Яркая юмористическая страничка точно заставит улыбнуться пользователя и не покинуть сайт.
Clorox
Забавная страничка ошибки производителя чистящих средств. Посетителю показывается одна из трех неловких ситуаций. Также на 404-й можно выбрать, куда пойти: в каталог, на главную или оформить подписку.
Waza
На 404 от WAZA потерялись фламинго. Страничка заставляет улыбнуться и немного на ней зависнуть))
Алексей Бычков
Страничка ошибки магазина товаров для взрослых наглядно демонстрирует фиаско.
Framer
Серия 404-х от студии Framer
Кинопоиск
Этот потерянный взгляд и беззвучное ШТА? на лице Хана Сола, передают весь спектр чувств пользователя, забредшего на несуществующую страничку.
Билайн
Дальше живут драконы =) Докликать до края света — это реально стоило того, чтобы увидеть эту 404-ю, которая объединяет юмор, креатив и прикольную пасхалку.
404 - Glitched out
404я с трендовой анимацией — глитч-эффект. Она усиливает впечатление от того, что возник какой-то глюк на сайте. Но с таким дизайном нужно быть осторожнее: вы должны быть уверены, что ваши пользователи достаточно продвинутые, чтобы понять, что происходит и выкупить иронию, иначе вы рискуете, что пользователь закроет сайт и больше никогда его не посетит, решив, что там вирус.
Примеры 404 страниц в корпоративном стиле
Для серьезных компаний подойдут строгие 404 страницы, оформленные в корпоративном стиле. Но если в брендинге организации присутствует герой-маскот, то можно обыграть интересные сюжеты с его участием.
Puree Maison
Интересный персонаж блинчик-колобок преследует посетителя на страницах сайта, в том числе и на Page Not Found.
Hungry Boys
Улыбка — элемент логотипа компании, в перевернутом виде показывает недовольство отсутствием страницы:
Phive
Потеряв 404 гр жира, жизнерадостный скачущий прелоадер упал без сил
A propos du cancer
На странице ошибки потерявшийся пациент медицинского учреждения. Удачный пример спокойных тонов, аккуратной анимации и хорошей навигации.
Nagyi Titka
Минималистично и аккуратно. Персонаж бренда — милая бабуля с пирожками. Располагает к себе и сообщает об ошибке.
Panoraven
Страница потерялась и ее усердно ищет по следам :)) персонаж сервиса.
Yelp
Еще один сыщик-пес ищет потерянную страницу, а вы пока можете воспользоваться удобным поиском:
Marvel
Страничка ошибки от Marvel представлена в нескольких вариантах с различными персонажами. Хороший пример оригинальной страницы в стиле компании с удобным навигационным меню.
Lego
На странице ошибки компания Lego предлагает посетителям вернуться на сайт или сыграть в игру.
The New Yorker
Удобная навигация на страничке 404, оформленная в корпоративном стиле от известного нью-йоркского издания.
Chillhouse
Страничка ошибки в стиле бренда компании
Ikea
Страничка компании икеа оформлена в минимализме и с акцентом на продукт.
Zendesk
Лаконичная и позитивная 404-я не пугает посетителя, а наоборот, представляет его как одного из немногих счастливчиков)))
Xbox
Крутой пример того, что 404 страничка в корпоративном стиле не обязательно должна быть строгой и официальной. Xbox замутили целую серию 404 страниц по мотивам игр на базе консоли. Узнаваемые персонажи и юмористические надписи расслабляют пользователя, поднимают настроение, включают исследовательский дух, который близок геймерам: «Вау, я только что нашёл пасхалку»! При этом в дизайне сохранён фирменный стиль компании, что делает страничку узнаваемой.
Примеры тематических Not Found страничек
Идея таких страниц в том, что они отражают направление деятельности компании.
E-co
Короткое замыкание на странице ошибки производителя источников питания сообщает о том, что что-то пошло не так.
Slodych
Вкусная страничка 404 от кондитерской Слодыч.
Woodst
Тематическая страничка ошибки агентства графического дизайна. «Вы свернули не туда. Не волнуйтесь, это случается со всеми. Посмотрим, сможем ли мы направить вас в правильном направлении».
Specialized
Компания продает велосипеды и снаряжение, поэтому велосипедист здесь не случайно.
CSS-tricks
Тематическая страничка, вскрывающая код сайта от портала CSS-tricks:
Fork cms
Страничка 404 выполнена в стиле дизайна сайта — морской тематике.
Figma
Оригинальная страничка графического сервиса Figma выполнена в минималистичном стиле, но не так проста. Можно надолго залипнуть, перемещая точки кривых на цифрах.
Telltale
Страница ошибки от разработчиков игр соответствует тематике компании.
Docker
Страница ошибки в стилистике компании.
Bestclinic
Страница ошибки в стиле медицинской клиники. Компания предлагает скидку потерявшемуся клиенту. Отличное решение для получения новых лидов.
Саянская фольга
Что должно быть на сайте саянской фольги? Правильно — испорченная фольга)) Страничка 404 от креативного агентства uplab.
Банк «Тинькофф»
Именно такой должна быть страничка банка: в корпоративном стиле, минималистичная, информативная, c удобной навигацией.
Алексей Бычков
Символично — нет страницы, нет машины. Ошибка от креативного дизайнера Алексея Бычкова.
МУ-СОР
На сайте, посвященном глобальной проблеме отходов и мусора, на 404й пользователю предлагается рассортировать гору мусора по соответствующим контейнерам: стекло, пластик, дерево и бумага, металл и электроника, еда. Самые ответственные пользователи, под этой горой мусора найдут кнопку для возврата на главную
Pylones
Милая 404-я на сайте компании, занимающейся дизайном и художественной росписью кухонной утвари, сумок и аксессуаров. Стаканчик остался не расписанным, и готов расплакаться в любую секунду. Жми скорей «на главную», не заставляй стаканчик грустить!
Домашние любимцы на 404 страницах
Собачки и кошечки всегда вызывают положительные эмоции и умиления у аудитории, это беспроигрышный вариант для милой 404 странички ;))
Html6
Сердитый кот сообщает, что вы ошиблись адресом.
Buzz Feed
Милый котик машет хвостом и предлагает перейти на другую страничку.
Life Daily
Хороший пример навигации на страничке ошибки. И, конечно же, котик :))
Kayako
Милый кот в оттенках сайта задремал на страничке 404.
Help Scout
Что-то точно пошло не так и стая собак норовит убежать. Иллюстрированная 404 в тематике сайта, где можно найти много различных анимаций.
Marketo
Милый мопс грустит на страничке ошибки.
99designs
Собака-терминатор на страничке ошибки.
The Software House
Недовольный кот сообщает о 404 ошибке на сайте компании разработчиков.
Amazon
Милые собачки от Амазон на страничке 404. Каждый раз новый пес со своей кличкой)) Я насчитала 50+, прежде, чем ушла)))
Spotify
Оригинальная страничка от компании по созданию плейлистов для животных. Похоже они недовольны, что ты попал на ошибку))
Примеры красивых иллюстрированных 404
Использование иллюстраций — хороший способ разнообразить оформление 404 страницы.
Branded 7
Страничка 404 в стиле работ онлайн-галереи от компании Branded7:
Bright Scout
Тематика путешествий во времени, реализованная через плоскую иллюстрацию в зеленых тонах, повторяющую дизайн сайта.
TRAVEL MAPS APP
День сменяет ночь на странице ошибки.
Leadmachine
Креативная страница ошибки — выдает пользователю советы рандомно.
Text ru
Забавная 404 от сервиса для копирайтеров.
BrandCrowd
Красивая иллюстрация и оригинальное послание на странице 404: «Дважды проверьте свой URL!»
Игровые 404 страницы
Примеры оформления 404 страницы, которые не только помогают снять напряжение пользователя, но и весело провести время.
Kualo
Космические захватчики — страничка точно понравится посетителям.
Pointe Pest
Заморить жуков можно на веселой страничке 404 от Pointe Pest.
Canva
Для любителей головоломок креативная страничка ошибки от сервиса Canva.
Amphibian
Лягушачий футбол! Занятная страница ошибки на сайте Amphibian.
OLX
Сыграй в крестики-нолики на 404 странице доски объявлений OLX.
Read cv
Прикольная реализация игровой 404, где можно перетаскивать и сортировать эмоджи:
Страницы-фиаско
Такой вариант оформления говорит пользователю, что произошел какой-то факап.
FSRussia
Провальное выступление фигуристки на 404 странице Федерации фигурного катания.
Sibirix
Упавший робот на странице ошибки.
Straight North
Компания, специализирующаяся на SEO и PPC рекламе сообщает об ошибке с оригинальным призывом кликнуть еще раз.
Crello
Космонавт на лавке — что-то точно пошло не так.
Страницы 404 студентов курса PRO Web
Подборка 404 страниц, выполненных студентами в рамках курса по веб‑дизайну от Алексея Гамова и команды WebValley Studio PRO Web.
Необычная и нежная страничка для проекта бьюти-коворкинга от Алеси Алешко:
Необычная и нежная страничка для проекта бьюти-коворкинга от Алеси Алешко:
Страничка 404 для школы танцев от Екатерины Никифоровой:
Страничка 404 для концепта по редизайну сайта знаменитого бренда Ray Ban от Наталии Фроловой:
Шутливая страничка 404 для бюро архитектуры от Жанны Давыдовой:
Вкусная ошибка для мясокомбината от Анны Карабановой:
Страничка ошибки в корпоративном стиле компании по аренде экскаваторов от Алены Чаплинской:
Брутальная страница 404 для барбершопа от Оксаны Лаптевой:
Оптимистичная надпись на странице ошибки студии интерьеров от Надежды Кувшинниковой:
Креативная страничка ошибки для свадебного организатора от Татьяны Зверевой:
Информативная страница ошибки для компании по аренде элитных автомобилей в Европе от Валентины Ивлицкой:
Оптимистичная страница 404 компании по организации плавания с касатками и китами от Натальи Санниковой:
Шутливая страничка ошибки для клининговой компании от Татьяны Васильевой:
Оригинальная и мотивирующая :)) Cтраничка 404 для школы танцев от Екатерины Зверевой:
Навигационное меню на странице 404 свадебного фотографа от Леси Пашкевич:
Креативная страничка рок-фестиваля от Евгения Климова:
Лаконичная 404-страница с пустым гардеробом от Евгения Климова:
Стильная 404 курса по инвестициям от Евгении Зверевой:
Шутливая страничка ошибки сайта для детского фотографа от Натальи Куцак:
Страница ошибки для винодельни от Натальи Симуновой:
Шутливая фраза на страничке ошибки сайта турагентства от Анны Латыповой:
404я на сайте стилиста от Ольги Калмыковой:
Умиротворяющая природа и тишина леса на 404й коттеджного поселка от Юлии Голодок:
Страничка ошибки турфирмы от Ольги Вечёрко:
Пример использования брендинга в оформлении 404 на сайте онлайн-курсов от Кондратьевой Ольги:
Ошибка 404 на сайте автомобильной тематики — не заблудись в тумане — от Кондратьевой Ольги:
Позитивный дизайн и шаловливые дети на 404й для детской школы танцев от Юлии Ивановой:
Функциональная страница ошибки со слайдером на сайте студии дизайна интерьеров от Юлии Ивановой. Здесь вы точно задержитесь:
Ошибка 404 для сайта по продаже свечей ручной работы от Ксении Шураковой:
Веселая страничка с тонущим автомобилем на сайте автомойки от Марии Чаговец:
Лаконичный дизайн 404й для строительной компании от Татьяны Тарасевич:
Страничка 404 с каталогом на сайте по продаже авто из США от Марии Чаговец:
Весёлая ошибка на сайте ветклиники от Екатерины Егоровой:
Стильный минимализм на странице ошибки от Ирины Гасымовой:
Опасный зверь ждет тебя на 404й сайта турфирмы от Юлии Калимуллиной:
Какую страницу ошибки выбрать, решать вам. Но помните, что нужно не просто блеснуть креативностью и показать какой вы крутой дизайнер. Важно проявить заботу о пользователе, чтобы у него сформировалось положительное впечатление от взаимодействия с сайтом, даже если он забрел не туда.
Автор статьи
Мария Дрокина
UI-дизайнер
04.09.2022
Доверьте разработку сайта профессионалам!
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!
Подпишись, чтобы быть в курсе!
Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
Смотрите также
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.