Çarpıcı 403 Sayfa Oluşturmak için 8 CSS ve JS Parçacığı

Web tasarımcıları, hataları fırsata çevirmeye alıştı. Ortak, en yaygın olarak bulunan (ve şaşırtıcı bir şekilde tanınabilen) HTTP durum kodu 404'ün, diğer bir adıyla “Bulunamadı”nın, geliştiriciler tarafından projeye fayda sağlamaya zorlandığı bir sır değil. Geçmişte kullanıcıları korkuttu, genel izlenimi yok etti ve geliştiriciler için bir kabustu. Herkes bir kez ve herkes için ortadan kaybolmasını istedi.

Bugün, bir web sitesinin önemli bir detayıdır. WordPress'in bunun için özel olarak atanmış bir şablonu bile vardır. “404 sayfası”, kullanıcı deneyiminin ayrılmaz bir unsurudur. Çoğu durumda, sadece güzel bir tasarıma değil, aynı zamanda bir web sitesinin tüm estetiğine katkıda bulunmayı amaçlayan bir temaya da sahiptir.

İyi düşünülmüş tasarım, etkileşimler ve hatta animasyonların yanı sıra, kaybolan kullanıcıların tekrar yola çıkmalarına yardımcı olan faydalı bağlantılar ve kaçamaklar içerir. Ancak web tasarımındaki “404” hatası, gerçek dünyadaki Hipsters gibidir: Hala salak gözlükleri, “vintage” gömlekleri ve sakallarıyla gözümüze çarpıyorlar ama bizim için yeni değiller. “403” hatasına gelince, bu farklı bir hikaye. Bir sonraki akrabası kadar popüler değil, ama yine de oluyor ve mavi ayda bir değil.

Yalnızca arka plan için, HTTP durum kodu 403, diğer adıyla “403 Yasak”, sayfaya erişim izninizin olmadığı anlamına gelir. Nedenler, uygun olmayan klasör izinleriyle başlayıp, banal oturum açma kimlik bilgileri gereksinimiyle sona ererek değişebilir. Bununla birlikte, temel kural, herhangi bir hatanın iyileştirmeleri etkilemek için bir fırsat olduğunu belirtir. Öyleyse neden “403 sayfa”yı, “404 sayfası” ile aynı görevi görecek bir yere çevirmiyorsunuz?

Bu tür bir hata için bir düzine muhteşem yorum düşünelim. Sadece bir ilham kaynağı olarak değil, aynı zamanda kullanıma hazır çözümler kaynağı olarak da hizmet ederler.

Geçemezsiniz

"Geçmeyeceksin" - bir keresinde kurgusal dünyanın en güçlü beyaz sakallı büyücülerinden biri tarafından söylendi (umarım tüm Dumbledore hayranları bunun için beni affeder). Gri Gandalf'ın son cümlesi (Gri'ye dikkat edin, Beyaz değil) buradaki bağlama tam olarak uyuyor. Ve Noah Rodenbeek, A van Hagen ve Jhey bunu pratikte gösteriyor. Kod parçacıklarına “Hobbit” romanının ruhu ve cazibesi aşılanmıştır. İlk iki sanatçı Gandalf'ı ekibiyle yeniden yaratırken, ikincisi olay yerine işaret etti, ancak oldukça başarılı.

HODOR 403

Yukarıda yer alan kurgu romanlardaki motifler size yetmiyorsa, Yasio'nun bu kod parçasına göz atmalısınız. Sürpriz-sürpriz, ilhamını George RR Martin'in fantastik roman serisinden aldı. HODOR 403 adlı bir çalışma buldu. Çoğunluk için bu çözümün açıklayıcı olduğuna inanıyorum. Geri kalanı için, HBO'ya geçmenizi ve bu kurgusal karakterin bu tür bir hatayla neden mükemmel bir şekilde gittiğini kendiniz görmenizi öneririm.

İllüstrasyon ve Animasyon Kullanımı

Listemizdeki diğer çözümler, “403”ün yasak bir alanı simgelediği fikrinden hareketle yönlendirildi, böylece hareketli ve statik CSS illüstrasyonları, yani bu fikir akılda tutularak yeniden oluşturuldu.

Error 403 – Forbidden by Aimie, peri masalından klasik bir sahneyi tasvir ediyor. Karanlık saatlerde öne çıkan animasyonlu yarasalar, cadı evi, çıplak ağaçlar ve ürkütücü tipografi burada kesinlikle işe yarıyor.

Dylan tarafından 403 Yasak ve Görsel Besteci tarafından 403 Yasak, bazı benzersiz ortaçağ cazibesine sahiptir. “Kapıları Kapatın”: Projeler, yani bu çağrışımları çağrıştırıyor. İlki, gözlerinizin önünde kapanan klasik ahşap koruma kapısına sahiptir; ikincisi de bir bekçi kapısı konusuna gider ve yasak işareti ortaya çıkaran dişli ve zincirli bir mekanizmayı tasvir eder.

Arturo Wibawa'nın yasak bölge vizyonu, günümüzde Saray Müzesi olarak da bilinen ünlü Çin 'Mor Yasak Şehir'in muhteşem, son derece ayrıntılı ve hatta kısmen animasyonlu CSS illüstrasyonuyla sunulmaktadır.

Seni izliyor

403 Forbidden Page by Mariana, yöne duyarlı efekt sayesinde fare imlecinizi her yerde takip eden tuhaf canavar benzeri bir karakterle işaretlenir. Sürekli izleniyormuş hissi uyandırıyor. Ayrıca ilerlemeye izin vermeyen süslü bir peri muhafızını da taklit eder. Maskotun “tehditkar” görünümüne rağmen proje eğlenceli geliyor.

Kalıcı ol

Gabriele Corti ayrıca bir "403" hata sayfası vizyonu da sunuyor. "Süreklilik bir anahtardır" projesi, başlangıçta erişimi reddetme ve doğru kullanıcı eyleminden sonra erişim izni verme sürecinin tamamını tasvir eder. Doğru eylemler, bir anahtar deliğine bir anahtar sokmayı gerektirir. Yine de, bu kavramı, oturum açma ve parola girme gibi bazı gelişmiş eylemler için her zaman bir temel olarak kullanabilirsiniz.

Basit Tutmak

403 by lsgrrd, kesinlikle var olma hakkı olan bir “403 Sayfasına” aşırı basitleştirilmiş bir bakış. Minimal ama doğrudan konuya. Bilgisayar alanına özgü tekno havayı yayan belirli bir dijital kaliteye sahiptir. Sondaki yanıp sönen imleç, dijital tipografi ile paralel olarak harika bir etki yaratır. Çözüm temiz, zarif ve anlaşılır.

Sen listede misin?

Koleksiyonumuzu Cassidy Williams'ın yaptığı proje ile sonlandıracağız. Burada belirtilen çoğunluğun aksine, bu çözüm, herhangi bir popüler gece kulübündeki tipik durumu gösteren gerçek dünyadan bir metafordur. Fedai, bu kod parçacığının kalbi ve ruhudur. Karakter, her şeyin gerçekçi görünmesi için kısmen canlandırıldı.

Kullanıcıları Etkilemek için Başka Bir Fırsat

Doğrusunu söylemek gerekirse “403 Hatası”, “404 Hatası” kadar yaygın olmadığı gibi, popüler ve tanınabilir de değildir. Bununla birlikte, hala var ve zaman zaman ortaya çıkıyor. Bu, bir web sitesinde tüm kullanıcı deneyimini bozabilecek bir delik oluşturur. Bu nedenle, fırsatı değerlendirin ve onu projenin geçerli bir parçası haline getirin. Şüphesiz bazı yeni ziyaretçiler kazanacak ve eskilerini kaybetmenizi önleyecektir.