Gerçek Web Sitelerinden 40 Clever 404 Hata Sayfası

Başarılı bir web sitesi çalıştırmak, bozuk sayfalar veya yavaş performans gibi hatalara karşı tetikte kalmak anlamına gelir. Ancak bazen kaçınamayacağınız sorunlar olabilir ve 404 hataları da bunlardan biridir.

404, bir kullanıcı web sitenizde mevcut olmayan bir sayfa istediğinde oluşur ve bu nedenle, kullanıcıların doğru yere dönmelerini isteyen bir 404 hata sayfası atar. Web sitenizin asla kapanmamasını sağlamak için ne kadar kaynak ayırdığınız önemli değil… Her zaman kullanıcıların buraya gelme olasılığı vardır.

Rahatsız edici ama hayatın bir gerçeği. Ve ziyaretçilerin var olmayan bir sayfaya geldiklerinde tepkileri, "adım adım atmak" ile "akıllarını tamamen kaybetmek" arasında değişebilir.

İkincisi hakkında yapabileceğiniz hiçbir şey olmasa da, yaratıcı hata 404 mesajı alarak işleri biraz daha az acı verici hale getirebilirsiniz. Bu, web sitenizin ziyaretçilerinin aksi halde sinir bozucu bir durumda gülümsemelerini sağlamak için harikalar yaratabilir.

Web sitenizin tasarım akışını sağlamak için bu gönderi, favori web sitesi hata sayfalarımızdan bazılarını gösterecek. Umarım, kendi 404 mesajınızı canlandırmak için birkaç fikir edinebilirsiniz.

404 Hatası nedir?

404 hatası, erişmeye çalıştığınız web sitesinin sunucuda bulunamadığı anlamına gelen standart bir HTTP hata mesajı kodudur. Bu, istemci tarafında bir hatadır, yani ya web sayfası kaldırılmış veya taşınmış ve URL buna göre değiştirilmemiştir ya da kişi URL'yi yanlış yazmış.

Çoğunlukla, sunucunuzu özelleştirilmiş bir 404 hata sayfası oluşturacak şekilde yapılandırabilirsiniz. (HubSpot müşterisiyseniz, HubSpot'ta 404 sayfanızı nasıl özelleştireceğinizi öğrenmek için buraya tıklayın.)

Bazı özelleştirilmiş 404 hata sayfaları, bir kahraman resmi, esprili açıklama, site haritası, arama formu veya temel iletişim bilgilerini içerir.

En İyi 404 Web Sayfası Örnekleri

Yıllar geçtikçe, web siteleri ziyaretçileri bir 404 hatası hakkında bilgilendirmek ve onları doğru yere yönlendirmek için farklı yollar buldu, bazıları basit, bazıları yaratıcı ve bazıları eğlenceli bir şekilde. Bazı yaratıcı 404 sayfalarına bakarak başlayalım, sonra karşılaşan herkesi memnun edecek bazı komik örneklere göz atalım.

Sayfa Bulunamadı: Creative 404 Hata Sayfaları

1. kavrulmuş mısır

Bir 404 sayfası bir web sitesinden kolayca çıkarken, Pipcorn'un hata sayfası, sitenin geri kalanıyla mükemmel bir şekilde uyum sağlar. Güzel bir animasyonlu arka plan, ziyaretçileri web sitesinde arama yapmaya yönlendiren samimi bir metin istemi (akıllıca bir kelime oyunuyla tamamlandı) ve "404"te "0" olarak kullanılan bir parça patlamış mısır var.

2. Spotify

Müzik akışı devi Spotify, üslerini akıllı bir 404 sayfasıyla kapladı. Kanye West'in “808s and Heartbreak” albümünden esprili bir kelime oyunu ve rekor bir animasyonla, web sitesi kısaca eğlendiriyor ve ardından ziyaretçileri geldikleri sayfaya geri gönderiyor.

3. içten

404 sayfanızdaki gerilimi azaltmanın basit bir yolu, hızlı bir "Hata!" mesaj — kullanıcıları doğru yere yönlendirirken sitenizin daha cana yakın hissetmesine yardımcı olur. Genially'nin sitesinde, sayfa aynı zamanda eğlenceli bir kopyayla eşleştirilmiş şık bir illüstrasyon da içeriyor.

4. Adobe

Tahmin edeceğiniz gibi Adobe'nin 404 hata sayfası hem kullanışlı hem de görsel olarak hoş. Ziyaretçilerin isteyebilecekleri popüler bağlantıları, bozuk veya kayıp bir sayfa için görsel bir metafor olarak hizmet eden bazı harika dijital sanat eserlerinin yanı sıra listeler. Dürüst olmak gerekirse, web siteleri görsel metaforları daha sık kullanmalıdır.

5. Kloroks

Clorox temizlik ürünlerine ilişkin 404 sayfası, ziyaretçilere bir yanlış adım attıklarını göstermek için üç neşeli fotoğraf arasında dönüyor. Kaybolan kullanıcılara yardım ederken kısa bir keyif anı eklemek için marka bilinci oluşturmanın akıllıca bir kullanımıdır.

6. Duma Kolektifi

Diğer zamanlarda, esprili bir tanıtıma ihtiyacınız olmayabilir - ziyaretçilere adreste sayfa olmadığını söyleyin ve devam etmelerine izin verin. Eğlence danışmanlığı ajansı Duma Collective, hata sayfasıyla tam da bunu yapıyor, ancak küçük bir yetenek için bir arka plan görüntüsü ile tamamlanıyor.

7. Soğutucu

Yetenekten bahsetmişken, kişisel bakım markası Chillhouse, ziyaretçilerini şık bir şekilde yeniden yönlendirmek için ekstra çalışma yaptı. 404 sayfası uygun bir şekilde markalanmıştır ve hatta ziyaretçileri ana sayfaya dönmeden önce birkaç fotoğrafta küçük bir yolculuğa çıkarır.

8. biraz

Yanlış bir Bitly bağlantısı girerseniz, Bitly'nin 404 sayfasına yönlendirilirsiniz. Bunun makul bir miktar olduğunu varsayıyoruz, bu yüzden 404 sayfası doğrudan konuya giriyor. Neyin yanlış gittiğini açıklar ve eğer peşinde oldukları şey buysa, kullanıcıların Bitly ana sayfasını ziyaret etmelerini ister.

9. Ikea

Ikea'nın 404 sayfası da benzer şekilde minimalist ama yine de orada bazı akıllı markaları gizlemeyi başarıyor. Bu örnek, hata sayfalarınızın konuyu anlamak için ayrıntılı olması gerekmediğini, ancak biraz eğlence eklemenin de yanlış bir şey olmadığını gösteriyor.

10. Moxie Tasarım A.Ş.

Elbette, "İnternet'i havaya uçurdu" biraz abartılı olabilir, ancak ziyaretçilere Moxie Design Co.'nun bunun gibi küçük hatalarla kendini fazla ciddiye almadığını söylüyor. Ayrıca, sizi yolunuza göndermek için altta bir arama çubuğu uygun bir şekilde yerleştirilmiştir.

11. McKissack ve McKissack

Ah, klasik "sayfayı kaybettik" numarası. Yine, izleyicilerinizi yabancılaştırmadan 404'ü sunmanın kolay bir yolu. McKissack & McKissack gibi birçok müşteri etkileşimini yöneten bir ajanssanız, sitenizin hata sayfaları da dahil olmak üzere tüm sayfaları için açık ve özlü bir kopya önemlidir.

12. CSS Püf Noktaları

Altında ne olduğunu görmek için bir web sitesinin ambalajını söktüğünüz oldu mu? CSS Tricks'in 404 hata sayfasında aradığı konsept buydu. Bu hem esprili hem de web sitesinin neyle ilgili olduğunu hatırlatıyor: sayfa stilinin akıllı kullanımı.

13. Eski Güzel Oyunlar

Diğer web siteleri için, ön ucu açarsınız ve orada… sadece engin boşluk boşluğu vardır. Bu sayfa, Good Old Games'in yerel video oyunu istemcisi olan GOG Galaxy'ye akıllıca bir referanstır. Neyse ki, ziyaretçilere isterlerse bir hatayı bildirebilecekleri bir yer vermek için küçük bir video oyunu karakteri var.

14. Kanvas

Biraz farklı bir şey için Canva'nın 404 sayfasına bakın. Yalnızca bir hata mesajı değil, aynı zamanda ziyaretçilerin kısa bir eğlence için oynayabilecekleri şık bir kiremit bulmacası içerir. Ziyaretçilerinizin birkaç dakikalığına gevşemesine izin vermenin bir zararı yok, değil mi?

15. Innotech

Canva'nın yaklaşımına benzer şekilde Innotech, 404 sayfasında kısa bir eğlence sağlamak için Pong benzeri bir oyun sunuyor. Muhtemelen böyle bir web sitesini hatırlayacaksınız. Ayrıca, eğlenceli dolambaçlı yol gerçekten etkileyici bir web sitesini tamamlar - cidden, oynamayı bitirdiğinizde ana sayfaya gidin ve hepsini alın.

16. Sayısız

Video ajansı Myriad, eski kasetlerde ve TV'lerde görünen klasik SMPTE renk çubuklarını taklit eden ilginç, marka üzerine 404 sayfalık bir tasarım seçti. Var olmayan bir web sayfasının daha modern sorununu temsil ederken, eski teknolojilere komik bir geri dönüş.

17. KonMari

Popüler temizlik ve organizasyon yöntemleri ve markasıyla tanınan Marie Kondo, web sitesinin 404 sayfasına da benzer bir hava kattı. Kopya, kısa ve esprili bir şekilde, onun toplama felsefesine geri dönüyor - hayranların tanıyacağı küçük ama iyi markalı bir ayrıntı.

18. Marka Kalabalığı

Bu hata sayfasındaki resim yalnızca ayrıntılı ve ilgi çekici olmakla kalmıyor, aynı zamanda kopyası da zekice. Semisonic şarkısı “Closing Time”a yapılan göndermeyi seviyoruz: “Başka bir yere tıklayabilirsiniz ama buraya tıklayamazsınız.”

19. Sıcak Nokta Yapımları

Hot Dot'un hata sayfası, "yeni teknolojilerin ve tasarımın kesişimi" sloganına sadık kalıyor. Sayfa, imlecinizi hareket ettirdiğiniz yere göre yön değiştiren yüzlerce küçük nokta tarafından canlandırılır. Büyüleyici ve ajansın tasarım yeteneklerinin harika bir vitrini.

20. Turuncu Palto

Eğer bir hata mesajı verecekseniz, kullanıcıya yardım ederken neden birkaç saniyeliğine kullanıcıyı eğlendirmiyorsunuz? Dostça bir selamlamanın ardından OrangeCoat, kullanıcıların ilk etapta neden bir hata sayfasına ulaştıklarını anlamalarına gerçekten yardımcı olan bir akış şeması sunar.

21. Ervin ve Smith

Bu 404 sayfası, kullanıcıları tekrar aktif sayfalara yönlendirmekten fazlasını yapar. Bunun yerine, Ervin & Smith'in 404 sayfası, sizi neden bir dijital pazarlama ajansına ihtiyacınız olduğunu ve neden özellikle Ervin & Smith'i seçmeniz gerektiğini, bir iletişim formuyla sınırlı olarak öğrenmeye davet ediyor. Bu ajans, misyonuna uygun olarak herhangi bir sayfanın bir dönüşüm fırsatı olabileceğini gösteriyor.

22. DayCloud Stüdyoları

… veya DayCloud Studios web sitesinde görüldüğü gibi, 404'ünüz sadece bir dakikalığına zaman harcayabileceğiniz bir yer olabilir. İmleci ekranın etrafında hareket ettirmek, bir kedinin gözünden ateşlenen lazerler tarafından aydınlatılan bir 404 mesajını ortaya çıkarır. Çünkü neden olmasın?

23. Üst boşluk

Marka mesajlarını 404 sayfasına akıllıca dahil eden bir web sitesinin bir başka örneği - rehberli meditasyon uygulaması Headspace, kullanıcıları sakinleştirmeye çalışır, bizi derin bir nefes almaya ve ardından ana siteye dönmeye teşvik eder.

24. Wildwood Fırını

Şimdiye kadar bazı web siteleri, sayfalarına akıllı markalı kopyalar yerleştirirken, diğerleri kendi sayfalarında tam gelişmiş çevrimiçi oyunlar barındırdı. Ancak, doğru yönde kısa bir geri itmede yanlış bir şey yoktur. Wildwood Bakery'nin enfes sitesi, işleri kısa ve tatlı (tam anlamıyla) tutar.

Sayfa Bulunamadı: Komik 404 Hata Sayfaları

25. Astuteo

Tasarım ajansı Astuteo'nun 404 sayfası, zarif görseller, mizah ve yardımseverliğin mükemmel bir dengesidir. Minimal düzen, kullanıcılara ihtiyaç duydukları bilgileri başka bir eğlenceli görsel metafor, batan bir kargo gemisi ve kaçan bir figürün yanı sıra verir.

26. LEGO

LEGO'nun 404 hata sayfasında gereken birkaç kelime var - karakterin ifadesi her şeyi netleştiriyor. Ayrıca, LEGO film serisinin hayranları, kopyadaki eğlenceli referansın keyfine varacaklar.

27. Mıknatıs

Bu komik hata mesajında, Magnt, evet, bir şeyi kırmış olabilecekleri - ya da yazamazsınız - gerçeğiyle dalga geçiyor. Görsel, amacını hızlı bir şekilde göstermenin hızlı bir yolu olarak hizmet eder.

28. Simge Bulucu

IconFinder'ın hata sayfası basit ama keyifli. Şirketin cübbe giyen ve yorgun görünen maskotu, kayıp ziyaretçilere sempatik bir baş selamı veriyor. Endişelenmeyin, çünkü site ziyaret edilecek bağlantılarından bazılarını aşağıda listeliyor.

29. Tatlı Rüyalar

Görünüşe göre, uyku yardımı şirketi Sweet Dreams'deki ekip, web sitesinin 404 sayfasına göre çok fazla ürününü almış. Bu sayfa yalnızca mizahi olmakla kalmaz, aynı zamanda sitenin geri kalan ön uç estetiği ve uyumlu bir his için mesajlaşma ile iyi uyum sağlar.

30. GitHub

“Bunlar aradığınız droidler değil” satırı, Obi-Wan Kenobi'nin Star Wars Bölüm IV'teki Stormtroopers üzerindeki Jedi akıl oyununa atıfta bulunuyor ve bu, birisine yanlış bir yol izlediklerini söylemek için kullanılan iyi bilinen bir ifade haline geldi. hareket tarzı. GitHub, 404 hata mesajında ​​bu ünlü satırda oynuyor.

31. Patagonya

Patagonia'nın özel 404 sayfası, markanın havasını mükemmel bir şekilde yakalar, bir frizbi twirlerinin bumerang videosu, “404” ve “aloha”yı birleştiren akıllı bir kelime oyunu ve ürün sayfalarına bağlantılar ile tamamlanır. Yanlış yere düşen ziyaretçileri karşılamanın samimi ve eğlenceli bir yolu.

32. Bulut Sigma

Şuna bir bakın: Cloud Sigma, bazı sahne arkası aksiyonlarına girmemize izin veriyor. 404 hata sayfası, "küçük bir geliştiricinin ana sayfası" gibi görünüyor - bu küçük geliştirici, bir kedi.

33. AMC Tiyatroları

Daha önce bir AMC sinemasına gitmiş olabilirsiniz, ancak umarız web sitelerinin 404 sayfasını hiç görmemişsinizdir. Web sitesi, sizi doğru yere geri göndermeden önce hızlı, eğlenceli ve alakalı bir tek satırdan yararlanır.

34. Bruno

Yaratıcı ajansların harika 404 sayfa oluşturmada harika olması tesadüf değil. 2000 kült komedi klasiği Dude, Where's My Car? Hayır, şirket veya web sitesi ile ilgisi yok, ama kesinlikle kıkırdayacak.

35. NPR

İlk başta, NPR'nin hata sayfası özel bir şey gibi görünmüyor. Ama okumaya devam edin ve Amelia Earhart ve Waldo'dan bir parça gibi kayıp insanlar, yerler ve şeyler hakkındaki harika hikayelerinden bazılarıyla nasıl akıllıca bağlantı kurduklarını göreceksiniz. Bu, kayıp kullanıcıların biraz daha az yalnız hissetmelerini sağlayabilir.

36. Orta

Medium, NPR'nin 404 sayfasına benzer bir yaklaşım benimsiyor ve kaybolma ve bir şeyleri kaybetme hakkında makaleler öneriyor. Vaktiniz varsa bu makalelere göz atın - oldukça iyi okumalar.

37. Ana SayfaStarRunner

Flash animasyonlu bir çizgi diziye ev sahipliği yapan HomeStarRunner.com, yıllar boyunca bir dizi komik 404 hata sayfasına sahipti. En yenisi, çizgi dizideki karakterleri, bölümlerinden birinden çıkmış olabilecek bir sahnede sunuyor. Sayfayı yüklediğinizde sesi açarsanız, yüksek sesle bağıran cümlelerle tanınan Strong Bad karakterinin “404'd!” dediğini duyarsınız.

38. Blizzard Eğlence

İşte son derece şık görünen basit bir fikir: Blizzard Entertainment'ın 404 sayfası, gerçek bir kar fırtınasında kaybolan bir animasyon karakteri ve World of Warcraft hayranlarının takdir edeceği bir mizah içeriyor.

39. Merhaba Büyük Fikir

Pazarlama ve sosyal medya uzmanları arasında hızlı bir gezi Hello Big Idea'nın web sitesi, cesur ve açık sözlü metin stili hakkında bilmeniz gerekenleri size söyleyecektir. Ve elbette, 404 hata sayfası da bir istisna değildir.

40. Merkez Noktası

Bize de oluyor! Bu, site ziyaretçilerimize bazı web sitesi sorunları olduğunu söylemek için koyduğumuz mesajdır. Amacımız, mümkün olduğunca sevimli, empatik ve yardımcı olarak HubSpot'un marka sesine sadık kalmaktı.

404 Hata Sayfasını Keyifli Bir Anına Dönüştürün

Hiç kimse bir 404 sayfaya çıkmak istemez - can sıkıcı ve beklenmedik şeylerdir. Ancak, onlardan gerçekten kaçınamazsınız, bu nedenle web siteniz için geri dönmek için bir 404 sayfaya sahip olmak her zaman iyi bir fikirdir.

Ve kullanıcı deneyimi açısından, 404 sayfanız bir tuğla duvar değil, küçük bir hız tümseği olmalıdır. Doğru tasarım, hüsrana uğramış bir sıçrama ile olası bir dönüşüm arasındaki fark olabilir, o halde neden bunu eğlenceli hale getirmiyorsunuz?

Editörün notu: Bu gönderi ilk olarak Aralık 2015'te yayınlandı ve kapsamlı olması için güncellendi.