8 фрагментов CSS и JS для создания потрясающих страниц 403

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

Сегодня это неотъемлемая часть сайта. В WordPress даже есть специально назначенный для него шаблон. «Страница 404» — неотъемлемый элемент пользовательского опыта. В большинстве случаев он имеет не только красивый дизайн, но и тему, которая призвана внести свой вклад в общую эстетику веб-сайта.

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

Просто для фона код состояния HTTP 403, также известный как «403 Forbidden», означает, что у вас нет разрешения на доступ к странице. Причины могут быть разными, начиная с неподходящих прав доступа к папке и заканчивая банальным требованием учетных данных для входа. Тем не менее, эмпирическое правило гласит, что любая ошибка — это возможность для улучшения. Так почему бы не превратить фиктивную «страницу 403» в место, которое будет выполнять ту же функцию, что и «страница 404»?

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

Ты не должен пройти

«Ты не пройдешь», — сказал однажды один из самых могущественных седобородых волшебников вымышленного мира (надеюсь, простят меня за это все поклонники Дамблдора). Финальная фраза Гэндальфа Серого (заметьте, Серого, а не Белого) здесь идеально вписывается в контекст. И Ноа Роденбек, А ван Хаген и Джей показывают это на практике. Их фрагменты кода пропитаны духом и очарованием романа «Хоббит». Если первые два художника воссоздали Гэндальфа с его посохом, то последний лишь намекнул на сцену, но вполне удачно.

ХОДОР 403

Если мотивов из художественных романов, представленных выше, вам недостаточно, то вам стоит обратить внимание на этот фрагмент кода от Yasio. Сюрприз-сюрприз, он черпал вдохновение из серии фантастических романов Джорджа Мартина. Он придумал работу под названием HODOR 403. Я полагаю, что для большинства это решение говорит само за себя. В остальном я рекомендую переключиться на HBO и лично убедиться, почему этот вымышленный персонаж отлично справляется с ошибкой такого типа.

Использование иллюстрации и анимации

Другие решения в нашем списке руководствовались тем, что «403» символизирует запретную зону, поэтому анимированные и статические CSS-иллюстрации воссоздавались именно с учетом этой идеи.

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

403 Forbidden от Dylan и 403 Forbidden от Visual Composer обладают уникальным средневековым очарованием. «Закрой ворота»: Проекты вызывают именно эти ассоциации. В первом есть классическая деревянная сторожевая дверь, которая закрывается на глазах; второй также относится к теме сторожевых ворот и изображает механизм с зубьями и цепями, открывающий запретный знак.

Видение Артуро Вибавы запретной зоны представлено с помощью чудесной, очень детализированной и даже частично анимированной CSS-иллюстрации знаменитого китайского «Пурпурного Запретного города», известного сегодня как Дворцовый музей.

Он наблюдает за тобой

403 Forbidden Page by Mariana отмечена причудливым похожим на монстра персонажем, который благодаря эффекту определения направления везде следует за курсором мыши. Это воссоздает ощущение того, что за вами все время наблюдают. Он также имитирует причудливого сказочного стража, не позволяющего двигаться вперед. Проект кажется забавным, несмотря на «грозный» вид талисмана.

Будьте настойчивы

Габриэле Корти также предлагает видение страницы ошибки «403». Его проект «Постоянство — это ключ» описывает весь процесс первоначального отказа в доступе и предоставления его после правильного действия пользователя. Правильные действия подразумевают вставление ключа в замочную скважину. Тем не менее, вы всегда можете использовать эту концепцию в качестве основы для некоторых расширенных действий, таких как ввод логина и пароля.

Все просто

403 от lsgrrd — это упрощенная версия «страницы 403», которая, безусловно, имеет право на существование. Это минимально, но прямо в точку. Он имеет определенное цифровое качество, которое источает техно-вибрацию, присущую компьютерной сфере. Мигающий курсор в конце в тандеме с цифровой типографикой производит фантастический эффект. Решение чистое, элегантное и простое.

Вы в списке?

Мы собираемся завершить нашу коллекцию проектом Кэссиди Уильямс. В отличие от большинства представленных здесь, это решение — метафора из реального мира, иллюстрирующая типичную ситуацию в любом популярном ночном клубе. Вышибала — сердце и душа этого фрагмента кода. Персонажа даже частично анимировали, чтобы все выглядело реалистично.

Еще одна возможность привлечь пользователей

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