8 Cuplikan CSS & JS untuk Membuat 403 Halaman yang Menakjubkan

Desainer web telah terbiasa mengubah kesalahan menjadi peluang. Bukan rahasia lagi bahwa kode status HTTP 404, alias "Tidak Ditemukan" yang paling umum (dan secara mengejutkan dapat dikenali) dipaksa oleh pengembang untuk membawa manfaat bagi proyek. Di masa lalu itu menakuti pengguna, menghancurkan kesan keseluruhan dan merupakan mimpi buruk bagi pengembang. Semua orang ingin itu menghilang sekali dan untuk selamanya.

Hari ini, ini adalah detail penting dari sebuah situs web. WordPress bahkan memiliki template khusus untuk itu. "Halaman 404" adalah elemen integral dari pengalaman pengguna. Dalam sebagian besar kasus, ia tidak hanya memiliki desain yang indah tetapi juga tema yang bertujuan untuk berkontribusi pada keseluruhan estetika situs web.

Seiring dengan desain, interaksi, dan bahkan animasi yang dipikirkan dengan matang, ini mencakup tautan dan liburan berguna yang membantu pengguna yang hilang untuk kembali ke jalurnya. Namun, kesalahan "404" dalam desain web seperti Hipsters di dunia nyata: Mereka masih menarik perhatian kita dengan kacamata norak mereka, kemeja "vintage" dan janggut tetapi itu bukan hal baru bagi kita. Adapun kesalahan "403", itu cerita yang berbeda. Ini tidak sepopuler kerabat terdekatnya, tapi tetap saja, itu terjadi dan tidak sekali dalam bulan biru.

Sekadar latar belakang, kode status HTTP 403 alias “403 Forbidden” berarti Anda tidak memiliki izin untuk mengakses halaman tersebut. Alasan dapat bervariasi, dimulai dengan izin folder yang tidak sesuai dan diakhiri dengan persyaratan kredensial login yang dangkal. Namun demikian, aturan praktis menyatakan bahwa kesalahan apa pun adalah peluang untuk melakukan perbaikan. Jadi mengapa tidak mengubah "403 halaman" dummy menjadi tempat yang akan melayani tugas yang sama dengan "404 halaman"?

Mari kita pertimbangkan selusin pengambilan yang bagus untuk jenis kesalahan ini. Mereka tidak hanya berfungsi sebagai sumber inspirasi tetapi juga sumber solusi siap pakai.

Kamu tidak boleh lewat

"Kamu tidak akan lulus" – pernah dikatakan oleh salah satu penyihir berjanggut putih paling kuat di dunia fiksi (saya harap semua penggemar Dumbledore memaafkan saya untuk ini). Ungkapan terakhir Gandalf si Kelabu (perhatikan Abu-abu, bukan Putih) sangat cocok dengan konteks di sini. Dan Noah Rodenbeek, A van Hagen dan Jhey menunjukkan ini dalam praktik. Cuplikan kode mereka diresapi dengan semangat dan pesona novel "The Hobbit". Sementara dua seniman pertama menciptakan Gandalf dengan stafnya, yang terakhir hanya mengisyaratkan adegan itu, namun cukup berhasil.

HODOR 403

Jika motif dari novel fiksi yang ditampilkan di atas tidak cukup untuk Anda, maka Anda harus memperhatikan cuplikan kode dari Yasio ini. Kejutan-kejutan, ia mendapat inspirasi dari novel fantasi seri George RR Martin. Dia telah datang dengan sebuah karya yang disebut HODOR 403. Saya percaya untuk mayoritas di luar sana solusi ini cukup jelas. Selebihnya, saya sarankan beralih ke HBO dan lihat sendiri mengapa karakter fiksi ini cocok dengan jenis kesalahan ini.

Penggunaan Ilustrasi dan Animasi

Solusi lain dalam daftar kami dipandu oleh gagasan bahwa “403” melambangkan area terlarang sehingga ilustrasi CSS animasi dan statis dibuat ulang dengan ide ini.

Error 403 – Forbidden by Aimie menggambarkan adegan klasik dari dongeng. Kelelawar animasi, rumah penyihir, pepohonan gundul, dan tipografi menyeramkan yang ditampilkan di jam-jam kegelapan pasti berhasil di sini.

403 Forbidden by Dylan dan 403 Forbidden by Visual Composer memiliki daya pikat abad pertengahan yang unik. "Tutup Gerbang": Proyek-proyek itu membangkitkan asosiasi-asosiasi ini. Yang pertama menampilkan pintu gerbang penjaga kayu klasik yang menutup di depan mata Anda; yang kedua juga membahas topik gerbang penjaga dan menggambarkan mekanisme dengan roda gigi dan rantai yang mengungkapkan tanda terlarang.

Visi Arturo Wibawa tentang daerah terlarang disajikan melalui ilustrasi CSS yang luar biasa, sangat detail dan bahkan sebagian animasi dari 'Kota Terlarang Ungu' Tiongkok yang terkenal, alias Museum Istana saat ini.

Ini Menonton Anda

403 Halaman Terlarang oleh Mariana ditandai dengan karakter aneh seperti monster yang, berkat efek sadar arah, mengikuti kursor mouse Anda ke mana-mana. Itu menciptakan kembali perasaan diawasi sepanjang waktu. Itu juga meniru penjaga peri mewah yang tidak memungkinkan bergerak maju. Proyek ini terasa menyenangkan terlepas dari tampilan maskot yang "mengancam".

Jadilah Persisten

Gabriele Corti juga menawarkan tampilan halaman kesalahan "403". Proyek "Kegigihan adalah kunci" -nya menggambarkan seluruh proses awalnya menolak akses dan memberikannya setelah tindakan pengguna yang tepat. Tindakan yang benar menyiratkan memasukkan kunci ke dalam lubang kunci Namun demikian, Anda selalu dapat menggunakan konsep ini sebagai dasar untuk beberapa tindakan lanjutan seperti memasukkan login dan kata sandi.

Tetap Sederhana

403 oleh lsgrrd adalah pandangan yang terlalu disederhanakan dari "Halaman 403" yang tentu saja memiliki hak untuk eksis. Ini minimal tapi langsung ke intinya. Ini memiliki kualitas digital tertentu yang memancarkan getaran techno yang melekat pada lingkungan komputer. Kursor yang berkedip di bagian akhir bersamaan dengan tipografi digital menghasilkan efek yang fantastis. Solusinya bersih, elegan dan lugas.

Apakah Anda ada dalam Daftar?

Kami akan mengakhiri koleksi kami dengan proyek yang dibuat oleh Cassidy Williams. Tidak seperti mayoritas yang ditampilkan di sini, solusi ini adalah metafora dari dunia nyata yang menggambarkan situasi khas di klub malam populer mana pun. Penjaga adalah jantung dan jiwa dari cuplikan kode ini. Karakter itu bahkan sebagian dianimasikan untuk membuat semuanya terlihat hidup.

Peluang Lain untuk Melibatkan Pengguna

Sejujurnya, "Kesalahan 403" tidak seluas "Kesalahan 404", juga tidak sepopuler dan mudah dikenali. Namun demikian, itu masih ada dan terjadi dari waktu ke waktu. Itu menciptakan lubang di situs web yang dapat merusak seluruh pengalaman pengguna. Jadi, ambil kesempatan dan ubah menjadi bagian yang valid dari proyek. Ini pasti akan memenangkan beberapa pengunjung baru dan akan mencegah Anda kehilangan yang lama.