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

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

Сегодня мы рассмотрим несколько привлекательных примеров 404 страницы.

404 страница, стилизованная под помехи

Скачать

404 страница с плачущим ребенком

Скачать

404 страница, оформленная под синий экран смерти

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

Скачать

404 страница с анимацией — черная дыра

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

Скачать

404 страница с анимацией глаз — зеленый монстр

Скачать

404 страница с SVG анимацией — обезьяна

Скачать

404 страница — игра Fallout

Скачать

Похожие статьи:

Комментарии ()

obninsksite.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

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

Блуждая по Сети, вы иногда натыкаетесь на сообщения об ошибке «page not found». Часто эти «не найденные» 404 страницы ошибок не представляют никакого интереса. Неудовлетворенный таким результатом, посетитель может покинуть сайт. Поскольку ошибки в написании адреса допускаются довольно часто, а сайты не идеальны (например ошибка из-за битой ссылки)  – очевиден факт того, что они теряют своих посетителей. Лучшие примеры страниц 404 наводят на мысль о создании эффективной Error Page, которая должна быть спроектирована и настроена индивидуально под сайт.

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

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

Screaming Frog ( screamingfrog.co.uk/404/)

Okostroy ( okostroy.ru/404/)

Hey Zap ( heyzap.com/404 )

Fusion Charts ( fusioncharts.com/404/)

Med-Altai ( med-altai.ru/404/)

Bully Entertainment ( bullyentertainment.com/404notfound/)

Mini Handball (www.minihandball.pl/ 404 )

Banks (banks.az/404 )

Purple Travel ( purpletravel.co.uk/abc/)

Funkyimg ( http://funkyimg.com/404 )

Colibris ( http://colibris.ua/404/)

Smart Touch ( smarttouch.me/en/page-not-found )

Gift Rocket  (http://www.giftrocket.com/ 404)

Made with Envy (http://madewithenvy.com/404 )

Space Angry Birds  (http://www.angrybirds.com/404er )

11×11

Fitbit (http://www.fitbit.com/404 )

Sandalikidet (http://sandalikidet.ru/404error/)

Black Wave Creative  (blackwave.net/ 404 )

Оvsyannikoff  ( http://ovsyannikoff.ru/404 )

2013.404fest ( http://2013.404fest.ru/404/)

Kyan ( http://kyan.com/404 )

Coex (https://www.coex.cz/404)

Soline (http://www.soline.ru/ 404 )

seo-design.net

Несколько бесплатных и адаптивных HTML страниц с 404 ошибкой

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

Так же рекомендую к просмотру следующее:

Адаптивная страница 404 с размыты и тёмным фоном

Демо Ι Скачать

Светлая страница 404 ошибки с адаптивным дизайном — Ohh

Демо Ι Скачать

Бесплатная и адаптивная страница с ошибкой с персонажем

Демо Ι Скачать

Адаптивная 404 страница для сайта — Poses

Демо Ι Скачать

Голубая и стильная страница с ошибкой 404 в HTML

Демо Ι Скачать

404 адаптивная HTML страница с геометрическим фоном

Демо Ι Скачать

Тёмно — фиолетовая страница 404 в HTML

Демо Ι Скачать

Белая и минималистическая страница 404

Демо Ι Скачать

Деревянная страница с 404 ошибкой в HTML

Демо Ι Скачать

Минималистическая и серая страница с ошибкой в HTML

Демо Ι Скачать

Не плохая и адаптивная страница с ошибкой с разноцветными цифрами

Демо Ι Скачать

Страница с ошибкой 404 с голубым фоном и жёлтыми цифрами

Демо Ι Скачать

Не плохая и простая HTML страница 404 с адаптивным дизайном

Демо Ι Скачать

beloweb.ru

25 красивых сайтов с красивой анимацией при прокрутке страницы

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

Рекомендую к просмотру прошлые подборки:

www.loomideck.com

www.sortieenmer.com

beloweb.ru

Оформляем красиво страницу 404-ой ошибки

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

• Правильно писать адрес
• Свои извинения за сложившуюся ситуацию
• Объяснение факту случившегося и важности перехода на главную / др. страницы

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

Для сайта с коммерческим предложением подчеркните:

• Рациональный подход к делу и разумную стратегию
• Заявленную креативность своих дизайнеров
• Исключительность и особенность своего бренда
• Подлинное качество сервисов и продуктов
• Готовности предложить нестандартные идеи и пути их решения

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

Ooops! Похоже нет того, что искал – страница не нашлась. Но если подумать: ничего ведь на самом деле и быть не может. В принципе. Концепция игры разума в процессе получения сенсорных ощущений от чего-либо. В конечном счёте, любовь – это все что вам нужно

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

Важна идея! — пример красивого оформления 404-й ошибки сайта

По оформлению страницы:

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

По настройке страницы:

После создания, файл страницы (например 404.html) разместите на сервере, сконфигурировав файл .htaccess. Для случая, когда сайт на Apache вверху файла .htaccess размещаем директиву ErrorDocument 404 /404.html (файл – в корне сайта) или ErrorDocument 404 http://www.site.ru/404/ (файл – не в корне сайта)

Убедитесь, что страница не индексируется поисковиками (возвращается правильный http статус ошибки). Запретить индексацию можно в robots.txt, дописав строчку  Disallow: /404.html.

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

Варианты 404 страницы — идеи оформления

Bark Box

Компания реализует продукцию для домашних питомцев: «Это же шампунь для собак…»

Pando

404: Page not found — почти наверняка это он виноват

Mitra

На 404-ой странице веб-агентства, парой персонажей представлена команда профессионалов

Валенки водка

Страница 404 отечественного бренда: алкогольный сайт VALENKI™

Sumato Soft

Похоже, нет такой страницы. Можете продолжить горевать, а можете:

• Познакомиться с нами
• Посмотреть работы
• Написать нам

Комплето

У маркетинговой группы «Комплето» 404-я собрана из элементов оформления главной и внутренних страниц 

Story and Hear

У онлайн видео-школы, тематичная 404-я страница с зацикленным видео (coub video)

Born Group

Оопс, выглядит как будто-то все пошло не так, раз ты здесь очутился. На верный путь вернут эти ссылки: портфолио, сервисы, о нас

Coffeemate

404 на продающем кофейном сайте: Похоже, кто-то не выпил свой утренний кофе…

Stugoo

404 страница на любителя чудовищ из space тематики… была съедена Юникроном. Трансформер: Я вас сюда заманил. Эффектная Ghost-кнопка: Никто на заманит Мегатрона!

Imaginovation 

Страница 404-й ошибки вида Lost in Space… Возвращайся на главную

Lander 

Символичная страница ошибки Landing page платформы: «Наша ракета сбилась с курса»

Pixelemu

Мы поискали запрошенную страницу, но нашлась только уточка для ванной

Checkmate

Мультяшая страница ошибки 404: даже Дора не может найти эту страницу. Возвращаемся домой

Piccsy 

Вы куда-то не туда забрели, но иллюстрации R. Klonek стоит посмотреть 

Yougov 

Персонаж  аналитической компании YouGov озадачен ошибкой: 404 страница не найдена

Fish Finger 

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

We Heart It 

Оппс! Приземление возле движущейся цели. Похоже страница сменила адрес или более не существует. Не падайте духом и возвращайтесь на сайт

Supremo

Агентство веб-разработки решило позабавить заказчиков. На странице с ошибкой 404 случилась… ну явная неудача. Предлагают связаться к ними

Quartzy

Эксперимент не удался — 404 страница ошибки от научно-маркетинговых исследователей

seo-design.net