Код 404 – это код ответа сервера, сообщающий об отсутствии страницы по введенному в адресную строку URL. Чтобы о кривом адресе был в курсе не только веб-сервер, но и пользователь, на каждом (по крайне мере, уважающем себя) сайте есть для этого специальная страница. Ее наличие – это обязательное техническое требование, входящее в любой чек-лист по продвижению сайта в поисковиках. Вебмастера ее так и называют – «404-страница».
С развитием интернета, в частности, визуальных инструментов, позволяющих помимо текста показывать и графику, и анимацию, 404 стала не просто техническим компонентом, а одним из наиболее значимых с точки зрения дизайна и навигации элементом сайта.
Неудержимый полет фантазии дизайнеров задал целый тренд на нестандартное и креативное оформление 404. При этом, помимо заигрывания с эстетическими чувствами пользователей, страница начала выполнять и практическую функцию. Теперь она нередко перенаправляет пользователя на главную сайта, страницу-хаб или вовсе предлагает целый навигационный блок для перехода в важнейшие разделы сайта.
Интернет пестрит самыми разнообразными 404. Крупные корпорации брендируют ее в соответствии со своим фирменным стилем, часть из них умудряется размещать на ней скрытую или явную рекламу собственных продуктов. Некоторые просто стремятся сделать 404 интересной и яркой, как своеобразный бонус для пользователя, который не смог найти то, что ему было нужно.
Условно разделить креативные 404 можно на несколько групп:
- Просто визуально красивые. Крутая авторская графика, фоновые фото.
- Корпоративно-идентичные. Знакомящие нас с символикой компании, раскрывающие общий посыл бизнеса.
- Тематические. Чаще всего содержат самоиронию компании и ненавязчивое представление бизнеса.
- Эмоциональные. Котятки, собачки, любые изображения, повышающие настроение. Психология в помощь.
- Юморные. Забавные изображения или текст.
- Интерактивно-игровые. Воспроизводящие простенькие по механике игрушки, чаще всего знакомые олдам еще по восьмибитным приставкам и аркадным автоматам.
Муки выбора
Мы честно не один час потратили на составление этого топа. Баталии разгорелись нешуточные – несколько взрослых и эмоционально стабильных людей с 5-10-летним опытом работы в интернет-маркетинге оживленно спорили, защищая своих фаворитов.
Так или иначе, топ составили. Он не рейтинговый, мы просто выбрали из всего отсмотренного то, что нам безоговорочно зашло. И да, он на 100% зависел от наших личных предпочтений и не имеет ничего общего с объективным подходом.
Служба доставки еды «Достаевский»
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2Ff370977ecf15b505771382ad7171774bfff1b874.png&w=1920&q=100)
Почему хорошо: Во-первых, сразу понятно по 404, что это сайт заказа еды. А во-вторых, на странице есть навигация, контактные данные, доступ к корзине. Даже если вы «промазали», вам не придется пробираться обратно по сайту в поисках каталога.
Страхование домашних животных Embrace Pet Insurance
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F1da019b08199c9032863b2e5d73d2e70b823a850.png&w=1920&q=100)
Почему хорошо: Помимо самого песеля, неплохо обыграна старая шутка про съеденную собакой тетрадь с домашним заданием («Упс, наша собака съела эту страницу»). Ну, и дизайн можно похвалить за минимализм и приятное исполнение.
Pikabu
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F4906b629f520c6eeca1466c62c8c5cd1fd2447eb.png&w=1920&q=100)
Почему хорошо: Сайт Pikabu – признанный «киллер» эффективности офисных работников и одна из главных головных болей работодателей. 404 сайта обыгрывает типичную для пользователей ситуацию – работа не сделана, а работник весело проводит время на Pikabu и поедает хот-дог. Здесь, конечно, этого не видно, но страница не только хорошо нарисована, но и анимирована.
Федерация фигурного катания на коньках России
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F14de0defd4760d994683ee0e41ef492f9a6d1878.png&w=1920&q=100)
Почему хорошо: Тут, кажется, все понятно и без слов. Очень здорово в контексте главного изображения смотрится и логотип генерального спонсора.
Веб-агентство Love Beets
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F93f3f474ab54f99d5362aa355e9aeb5d3ddfcb5c.png&w=1920&q=100)
Почему хорошо: Иконки соцсетей – не редкость на 404, но здесь дизайном здорово обыгран «свекольный» нейминг (beet с англ. «свекла»).
Официальный сайт графического редактора Sketch
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2Fb8b2d205064070ad2ad724dea9fcf06fa9c81ced.png&w=1920&q=100)
Почему хорошо: Страница анимирована, обыгрывает тему похищения инопланетянами и приглашает проследовать на главную. Отсылку к «Секретным материалам» заценят фанаты сериала.
Заказ рефератов и курсовых Multi Work
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2Feacb9a99ab11c7b4f68e306f49d4dac6ea19be93.png&w=1920&q=100)
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2Fd4072f8da8fa450f4d7816a47ac93ec9f17a263b.png&w=1920&q=100)
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F21d730ca4fda2ec2ab162fbf459f496c099d6857.png&w=1920&q=100)
Почему хорошо: Наглость – второе счастье. Здесь 404 выполнена как полноценный продающий лендинг. И кстати, весьма на уровне. Интересно, какая у него конверсия?
Хостинг-оператор Kualo
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F849fd29a695577347aca250bcd4a2ccf05d9cb2f.png&w=1920&q=100)
Почему хорошо: Во время написания этого материала автор залип на 40 минут на этой странице. Причина – отлично стилизованная игра Space Invaders. Креативно и визуально приятно. Наше почтение.
Агрегатор отзывов Flamp
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2Fe728457dfd540a320704feb001e35a4062e01cf0.png&w=1920&q=100)
Почему хорошо: 404 страница, оформленная как типичный отзыв. Отражение тематики сайта даже в мелочах – просто и доходчиво.
Французские веб-разработчики Romian Braiser
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F74d497fc797fd755eb2c6ecb640efaed669475e2.png&w=1920&q=100)
Почему хорошо: Еще одна игрушка, сочетающая милоту и ультражесткость. Все просто: вам нужно, кликая мышкой, спасать леммингов от неминуемой гибели. Выиграть нельзя, но игра окончится, как только вы упустите 404 маленьких камикадзе. Залипательный геймплей и отличная пиксельная рисовка.
Дизайн-студия 99Designs
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F05e247a0f42cc96ff95de3a5d02fe67df92db0a9.png&w=1920&q=100)
Почему хорошо: Просто классно нарисованный кибер-пес. Чистые эмоции.
Инструменты корпоративного тайм-менеджмента Clockwise
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2Faff89fe9533e5ebaaf6dc91b747e77b72ca7c28a.png&w=1920&q=100)
Почему хорошо: Отличная визуализация бизнеса и ненавязчивое предложение пробного периода пользования услугами компании.
KFC
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F8fca36121cfb952b2a6cb78d46613409cf73dac5.png&w=1920&q=100)
Почему хорошо: Просто и со вкусом. Страница перенаправляет в целевые обе основные аудитории компании: завсегдатаев ресторанов быстрого питания и обжор-домоседов.
Веб-разработчики Amphibian
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F8d84fdb9ad5b5c6a72e893c1d56773b7c459567e.png&w=1920&q=100)
Почему хорошо: Дизайн отлично вписывается в общую комиксно-лягушачью стилистику компании. Ну и на редкость играбельный футбольчик в лучших традициях флэш-игр начала нулевых. Естественно, тоже лягушачий.
Графический редактор VistaCreate
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2Fd0977e9ca32c62d18d9d0fa1adb994b72ef38a79.png&w=1920&q=100)
Почему хорошо: Стильно, с юмором, присутствует анимация. Эстетично, одним словом.
Разработчики шаблонов для Word Press CSS-Tricks
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F4f25c8e38fee0d9fd3434752d0f8d7a47b50dbff.png&w=1920&q=100)
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F4fd1525527fc7b7068176eaadb4fd3afb4ab6031.png&w=1920&q=100)
Почему хорошо: Страница на 100% соответствует тематике бизнеса, а само решение выглядит очень стильно.
Студия Артемия Лебедева
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F61d2ab7667c48adbad00a0e3303c6133ccb45795.png&w=1920&q=100)
Почему хорошо: Ни одного графического элемента (кроме логотипа) на странице студии графического дизайна. Очень стильно и абсолютно в духе гражданина Лебедева.
Автомобильный журнал «За рулем»
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2F613ecd3cbabf1195154552f20c9af15fa31478c8.png&w=1920&q=100)
Почему хорошо: Отлично прослеживается тематика издания.
Интернет-магазин «Читай-город»
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2Fd11e6a7a5140fb4dac7900aef4d1d757109b4546.png&w=1920&q=100)
Почему хорошо: Приятная страничка в корпоративных цветах, очень хорошо подано предложение магазина.
Разработчики игр Blizzard
![](/_next/image?url=https%3A%2F%2Fadmin.itb-company.com%2Fstorage%2F2024%2F03%2F05%2Ffa946edade79598d858001542aef287c3c6f643c.png&w=1920&q=100)
Почему хорошо: Мы специально пишем белиберду в URL, чтобы показать, как именно работает 404 страница. А вот известные игроделы Blizzard как раз этот момент и обыграли, выдав подобный набор букв за речь этого анимированного мурлока. Мило и креативно.
Вдохновляйтесь и творите!
404 не обязательно должна быть произведением искусства. С точки зрения сухой технической необходимости хватит просто ее наличия. Но настоящая индивидуальность кроется как раз в мелочах. Почему бы не проявить себя творчески?
А какая 404 из нашего топа зашла вам? Делитесь мнением и ссылками на ваши любимые 404 в комментариях!
Отличная статья!