Примеры 404 страницы. Правильная страница ошибки

Страница 404 (Page not found) то есть «страница не найдена» (несуществующая). Эта страница должна быть непросто привлекательна внешне, но и оптимизирована для удобства пользователей.

Страница 404

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

Правильная страница 404

Правильная 404 страница должна нести дополнительную информацию:

  • ссылка на главную;
  • возврат к предыдущей странице;
  • ссылка на поиск по сайту.

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

Готовые примеры 404 страницы

Делать её самостоятельно необязательно (хотя желательно быть уникальным). Благо у нас есть замечательный Codepen, где есть уже готовые примеры страницы 404. Я сделал выборку наиболее правильных решений и в то же время с красивым оформлением.

Любое решение можно изменить под дизайн своего сайта, согласитесь, для не разбирающегося в css и html пользователя это намного легче чем писать её с нуля, самостоятельно и дешевле чем заказывать услуги фрилансеров (точнее совсем бесплатно).

Страницы 404 из Codepen

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

See the Pen 404 Page by Saransh Sinha (@saransh) on CodePen.

 

Тоже неплохой вариант для тематического сайта. Страница оформлена в векторном стиле и имеет кнопки на поиск и главную.

See the Pen Daily_UI #008 - 404 page by Pavel Laptev (@PavelLaptev) on CodePen.

 

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

See the Pen Fargo 404 by Nathaniel Watson (@nw) on CodePen.

 

Этот пример 404 страницы имеет строку поиска по сайту и есть достаточно места для полезной информации.

See the Pen 404 Coffee by Rachel Beser (@raybeezdesign) on CodePen.

 

Пример этого решения сразу вызывает массу идей для её оформления. Например если логотип вашего сайта имеет какой-то персонаж, то им можно заменить привидение поясняющее суть попадания сюда и связь с администрацией.

See the Pen 404 Page by Riad Kikate (@heyriad) on CodePen.

 

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

See the Pen 404 Page Not Found by Vadim Huck (@M4TERIAL) on CodePen.

 

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

See the Pen Tuts+ 404 by Envato Tuts+ (@tutsplus) on CodePen.

 

Яркая анимированная страница, которая впишется практически в любой сайт.

See the Pen 404 Page SVG animation by Sépion (@Sepion) on CodePen.

 

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

See the Pen 404 Page by Arne Turpyn (@turpoint) on CodePen.

 

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

Создание сайта

Комментарии 2

  1. Славик
    Славик (сказал) от 2016-06-18
    У меня раньше на блоге была самая обычная стандартная страница при ошибке 404 но совсем недавно я решил сделать ее более красивой, чтобы пользователь видел что то радужное, а не просто стандартное сообщение. Мне кажется что после такого нововведения мой блог стал намного лучше да и пользователям нравится, были отзывы..
    1. Mr. EdЯn Онлайн
      Mr. EdЯn (ответил) от 2016-06-19
      Было бы интересно увидеть Вашу новую страницу ошибки для личной коллекции )
Присоединиться к обсуждению

Поделиться мнением