Картинка ошибка 404 – 50 прикольных страниц ошибки 404

1ps.ru

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

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

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

Что касается неопытного пользователя, то он, увидев страницу где написано «ошибка» да в подарок к этому ещё и какие-то непонятные цифры, с вероятностью 99,[9]% в панике закроет страницу, браузер, выключит компьютер, вытащит вилку компьютера из розетки, отключит электричество в щитке, соберёт накопленное, сделает пластическую операцию, поменяет имя и переедет на другую планету.

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

Вот пример стандартной страницы ошибки 404:

Скучно, непонятно, скучно.

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

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

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

17.

Студия Олега Чулакова(???). Сайт необычный. А вот этот поток сознания можете считать либо шуткой либо бредом. И не поймешь недокреативили или перекреативили.

16.

Далее уже поднадоевшие образы «пацанчиков с периферии»

15.

А тут пацакчики. К сожалению, не нашел сайт, где это чудо размещается.

14.

На сайте turbomilk.ru решили не «прибивать» подвал к низу странички, однако страница об ошибке у них забавная

13.

Дизайнер Евгений Филатов на своем сайте придается ностальгическим воспоминаниям. Сейчас не очень часто смотрю телевизор, но раньше помню эти полоски по понедельникам. Так же здесь вы можете откалибровать свой монитор.

12.

На lure.com.ua мы видим того самого пользователя и разжёванную инструкцию.

11.

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

10.

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

9.

А вот отсыл к истокам сетевого сленга.

8.

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

7.

На хабре с обновлением дизайна обновилась и 404 страница. С неё можно попасть на другие ресурсы хабра.

6.

Тут даже неловко стало:

5.

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

4.

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

3.

Многие строительные компании берут на 404 страницу образ гастарбайтеров. У нас в рейтинге таких страниц целых две. Чаще всего на таких сайтах заезжанные Равшан, Джамшут и «Насяльника». Но тут вот интересно. И со звуком.Целый фильм

2.

Нет страницы? Не беда! Поиграй в пэкмана.

1.

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

Вне конкурса работы студии ClickON:

Квартиры->дома->стройка->кран

Компания продает 3D принтеры, а их 404 страницу охраняет вот такой крутой человечек со световым мечом:

Творите.

www.clickon.ru

Как сделать из страницы 404 что-то полезное и интересное: 30 примеров

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

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

Рассмотрим наиболее удачные примеры.

• Автоматический редирект на главную страницу сайта через 4 секунды.

• Предложение перейти на главную страницу.
• Есть ссылка на страницу «Собаки Amazon»:

• Предложение перейти на главную страницу.
• Ссылки на сервисы компании.

• Уместный сарказм.
• Возможности перейти во все разделы со страницы.

• Возможность перейти на главную страницу.
• Доступ к разделам компании со страницы (круглая красная кнопка в верхнем правом углу).
• Подписка на новости компании.

• Креативное оформление – молодая красивая девушка с призывом в духе sex sells.
• Доступ ко всем разделам сайта из футера (его видно при прокрутке вниз).
• Изображение и призыв к действию меняется каждый раз при обновлении страницы 404:

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

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

• Возможность возвратиться на предыдущую страницу, перейти в ленту новостей или перейти в справочную информацию.

• Графическое оформление в духе компьютерных игр конца 90-ых.
• Анимация на странице – в прорези двери справа появляются красные глаза.
• Доступ из страницы ко всем разделам сайта.

• Оказывается адрес неверно введенной страницы.
• Оригинальный сопроводительный текст.
• Доступ из страницы к основным разделам сайта.

• Ссылка на акции в теле страницы.
• Возможность воспользоваться поиском по сайту или выбрать книгу из каталога.

• Оригинальный сопроводительный текст.
• Доступ к самым интересным разделам сайта студии.

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

• Оригинальный сопроводительный текст.
• Доступ к каталогу товаров.
• Возможность посмотреть все акции и спецпредложения «Озона».

• Нетривиально оформленные ссылки на разделы каталога электроники.
• Кликабельный логотип «Сотмаркет» для перехода на главную страницу сайта.

• Описание причин проблемы.
• Ссылка на главную страницу сайта.
• Возможность поиска нужной страницы по сайту.

• Оригинальный текст со смайликом.
• Ссылки на основные услуги банка «Тинькофф».

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

• Возможность воспользоваться поиском 🙂
• Ссылки на сервисы «Яндекса».
• Ссылка на установку переключателя раскладки клавиатуры Punto Switcher.
• Рекламные объявления (!) на странице 404.

• Позитивная картинка со смыслом.
• Возможность воспользоваться поиском.
• В описании страницы предлагается способ решения проблемы.

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

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

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

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

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

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

• Запоминающаяся картинка-мем с Grumpy Cat.
• В описании страницы способы решения проблемы выполнены гиперссылками.
• За присланный на почту скриншот страницы 404 обещают подарок.

• Заголовок страницы мотивирует простить владельцев сайта за попадание на нее.
• Есть гиперссылка на страницу поддержки. Все серьезно.

• Скажу просто – на этой странице прекрасно ВСЁ!
• Что за существо сидит рядом с парнем?

• Более удачный образ, чем Печаль из мультика «Головоломка» для страницы 404 трудно представить.
• Заголовок страницы «Оооо… Не плачь». Трудно сдержаться, глядя на изображение.
• Описание страницы написано будто от лица Радости из того же мультфильма:

«Этот всего лишь ошибка 404!

То, что ты ищешь, могло затеряться в долгосрочной памяти».

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

1. Мгновенный переход на главную страницу: в этом случае человек не поймет, что он ввел неверный адрес или перешел по неработающей ссылке, и может повторить неверный ввод.
2. Внешний вид страницы

• с нечитаемыми символами:

• со стандартной и малоинформативной надписью:

• дзен-вариант страницы 404 (такой, например, у Школы-студии МХАТ):

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

texterra.ru

опупенное оформление + 10 примеров

Все, кто хоть раз пользовался интернетом, попадали на страницу “ошибка 404”. И наверняка, видя её у себя на экране, просто брали и уходили с этого сайта.

Особо настойчивые пытались разобраться в ссылке и понять что в ней не так. Но из этого скорее всего тоже ничего хорошего не выходило.

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

Почему она появляется

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

Теперь давайте определимся, почему же посетитель сайте может видеть такую ошибку. А все происходит потому что:

1. Ссылающаяся сторона совершила ошибку при указывании информации на Вас;
2. Пользователь неправильно ввёл ссылку;
3. Страница (ссылка) была удалена;
4. Страница (ссылка) была изменена.

Ещё раз, если Ваш сайт состоит из 10+ страниц, то скорее всего у Вас уже есть эта ошибка и Вы о ней просто не знаете.

И для поиска битых ссылок, как минимум, в рамках сайта можете воспользоваться бесплатной программой Xenu. Делает всё быстро и легко.

Чем грозит

Как Вы поняли, от этого не уйти. Такие коллапсы будут, если не по Вашей вине, то по вине клиентов.

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

А если Ваша страница не будет следовать дальнейшим рекомендациям, то посетители будут:

1. Уходить с сайта;
2. Расстраиваться, что не нашли нужную информацию;
3. Понижать свой уровень доверия к Вам.

И всё это ведёт не просто к отсутствию дополнительных денег, а к убыткам и потерям. Что я могу представить только в плохом сне.

НАС УЖЕ БОЛЕЕ 29 000 чел.
ВКЛЮЧАЙТЕСЬ

Как Сделать такую страницу

Если Вы задались вопросом как сделать страницу ошибки 404, то хочу Вас поздравить, она у Вас уже есть (кроме landing page).

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

404 для сайта — это такая же страница, как самая обычная другая страница Вашего сайта.

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

И просто в любое место с новой строки вписать — ErrorDocument 404 http://ВАШ_САЙТ/404.php

Данная ссылка будет являться указанием пути к файлу, который будет показывать Ваш сайт при возникновении ошибки.

Больше ничего не надо, всё очень просто! И если вдруг не хотите расширение .php, то можете сделать .html, в глобальном смысле разницы нет.

Цеплять и продавать

Начнем с того, что дизайн страницы 404 должен быть. И он должен быть в стиле общего оформления сайта.

В остальном он может преследовать разные задачи. Для этого давайте рассмотрим разные варианты и чем они хороши.

Просто и красиво

Можно сделать ставку на оформление — на дизайн в виде креативного изображения с оригинальной надписью.

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

Обязательное условие — это наличие кнопки возврата на домашнюю страницу. Вот вам примеры такого исполнения:

Ссылки на основные разделы

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

При этом дизайн также важен как и в первом случае. Делайте уклон на оригинальность и юмор.

Попробуй ещё раз/поиск

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

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

Реклама продукта

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

Причём показать Ваш продукт можно даже когда он искал что-то другое. В идеале, не просто показать, но и сделать специальное предложение на него.

Интерактив

Чтобы клиент чуть больше провёл на Вашем сайте, и чуть больше повзаимодействовал с ним, можно на данной странице создать “интерактив”, с которым он может что-то поделать, потаскать, покликать, посмотреть или даже поиграть.

Форма захвата

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

Поэтому чтобы его не терять, и чтобы он к вам ещё раз вернулся — нужно взять его контактные данные и добавить в свою e-mail рассылку.

Главное создать настолько вкусное предложение, от которого сложно будет отказаться и подчеркнуть ярким дизайном.

Это наш вариант страницы, на который Вы можете легко попасть введя in-scale.ru/любыеслова. Самое интересное, что такого рода ошибок почти нет на просторах интернета.

Поэтому рекомендую сделать акцент именно на этом, если ваш бизнес подразумевает e-mail маркетинг.

Коротко о главном

Страница ошибки всегда вызывает негатив, поэтому его нужно развернуть в нужную нам сторону.

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

Тут и встаёт вопрос, что нужно Вашему посетителю в тот момент, когда он попал на эту страницу и как его плавно перевести на то, что хотите от него Вы.

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

in-scale.ru

QA Platform Blog — Искусство ошибаться: 32 примера достойных 404 страниц

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

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

Какие еще плюсы может принести такой подход к оформлению ошибок?
Вот перечень большинства из них:

• Обеспечивает позитивное настроение ваших пользователей
• Ваш сайт становится запоминающимся
• Если сделать навигационное меню – это сильно упростит поиск посетителям
• Шанс показать, на что вы способны
• Показывает посетителю, что вы заботитесь о нем
• Производит впечатление
• Дает возможность поделиться с друзьями

Мы подобрали варианты, когда разработчики сайта ответственно подошли к вопросу.

404-е ошибки отечественного производства

1. www.sombrero.su/404/
Буэнос диас! Очень креативный подход и превосходная реализация на сайте мексиканской кухни.

2. www.profflex.ru/404/
Для чего еще может пригодиться монтажная пена? Конечно, для оформления страницы ошибки.

3. www.designstudy.ru/404/
Очень тематичная иллюстрация – мазки кистей для школы дизайна. Однозначно заслуживает внимания.

4. http://habrahabr.ru/showme404/
Интерактивная солнечная система с юмором и навигацией по сайту. Хабр, как всегда, в своем стиле.

5. http://designfire.ru/404/
Такой страницы нет, как нет и её освещения – приходиться зажигать спичку. Отличный дизайн ошибки, для сайта «с огоньком».

6. http://cpeople.ru/404/
Минимализм выполненный в современном стиле. Еще одна страница в копилку интересных решений.

7. www.motocms.ru/404/
Красиво и со вкусом. Такие страницы вызывают только позитивные эмоции, несмотря на ошибку.

8. www.defa.ru/#404
Стильная страница с высокой содержательностью.

9. www.inclouds.ru/404/
Выполнено в лучших традициях современного дизайна, и что не менее важно, соблюдена общая стилистика сайта.

10. http://turbomilk.ru/404sdfwert
Просто и с юмором. Да и дизайнер поработал на пять с плюсом.

11. http://ifolderlinks.ru/404/
Креативно и остроумно. А также доходчиво и понятно.

404-е ошибки зарубежных сайтов

12. www.bluedaniel.com/404/
Это однозначно шедевр. Станция 404 выше всяких похвал.

13. www.dmcloud.net/404/
Приятная анимированная страничка, хоть и содержание ее дождливо и зябко.

14. www.ipolecat.com/404
Забрел в тупик. Очень символично для рассматриваемой нами темы.

15. http://tix02.be/en/404
Современный дизайн с элементами всеми любимого интрактива – просто прекрасно.

16. http://veerle.duoh.com/404
Красочно и необычно, как раз подходит для такого сайта. Отдельно хочу отметить исполнение навигации.

17. www.bluefountainmedia.com/404/
Вака-вака! Всеми известный PACMAN ждет вас на «ненайденной» странице.

18. http://magnt.com/404/
Элегантно и информативно. Хороший пример, как можно оформлять страницу 404.

19. http://www.titleist.com/404
Забавный вариант странички, с толпой людей ищущих мяч для гольфа.

20. http://trackmaven.com/404
Анимированная история о вырванной страничке книги. Завораживает и заставляет следить за летящими листами.

21. www.edukate.com/404
Похоже, вы сошли с курса… и одинокий корабль в ночи. Отличная задумка и ее реализация.

22. www.randco.com/404
Дизайнер постарался и на славу. Так и хочется осмотреть сайт.

23. www.fork-cms.com/404notfound
Страница канула в морскую пучину. Отличное дизайнерское решение.

24. www.fullscreen.com/404
Модное фото со стильным дизайном – можно использовать как залог успеха.

25. http://saltcitybuilds.com/404
Выполнено в лучших традициях современного дизайна, а еще не забыли анимировать навигацию.

26. http://us.blizzard.com/en-us/error.html
Создатели игр решили отличиться и поздравляют нас с поломкой сайта. Нескучно и круто.

27. http://huwshimi.com/404/
Еще одно отличное сочетание юмора и красоты исполнения. Ниндзя украл эту страницу!

28. http://molo.me/404
Забавная анимация и приятная картинка производят хорошее впечатление.

29. http://hotdot.pro/en/404/
Интерактивные завораживающие цифры не дают оторваться. Выглядит круто.

30. http://mailchimp.com/404/
Что-то есть в этой замороженной обезьяне окутанной льдом.

31. http://becherovka.com/error
Данная страница пропитана элитным алкоголем и обвораживает древностью. Очень элегантное исполнение.

32. http://hakim.se/404
Тебя не должно быть здесь. Оцените задумку – разбудите глаза.

Материал подготовил Юрков Кирилл

blog.qapl.ru