>

WEB DESIGN FEATURE

33 brilliantly designed 404 error

pages
Jul 10, 2014 16:11 pm
>Comments (http://www.creativebloq.com/web-design/best-404-pages-812505#disqus_thread)

Tw
url=http://www.creativebloq.com
812505&text=33%20brilliantly%20design
1.1k 281
Like

Clicking on a broken link is a pain, but a witty and welldesigned error page at least sweetens the pill. Here are the
most original and imaginative designs to inspire you.
The404pageisastandardresponsecodeinHTTPtellingtheuser,in
effect,thatthey'veclickedonabrokenlink.
It'straditionallybeenanimmensesourceoffrustrationbutinrecent
years,designershavetakenupthechallengeofdesigningbespoke404
pagesthatatleastsweetenthepilloffindingyou'reinthewrongplace.

EVENT PROMOTION

(http://bit.ly/generateconfny15)
Weusecookiesonthiswebsite.Byusingthissite,youagreethat
wemaystoreandaccesscookiesonyourdevice.Findoutmore
andsetyourpreferenceshere
(http://www.futureplc.com/cookiespolicy/)

Whendonereallywell,theybecomeminiambassadorsforthewebsite
itself,beingsharedonTwitterandblogsasanexampleofthesiteor
service'skeennessforcustomerserviceanduniqueapproachtodesign.
The33wepresentherehaveachievedallthisandmore,sotakealook
andbeinspiredtocreateyourownbespoke404pages!

>

01. Nouveller (http://nouveller.com/404)

> Don't forget the magic word!

Ifyou'reafanofJurassicPark,thenyou'lllovethisbrilliant404pageby
webdesignagencyNouveller.Asthepageloads,youarequickly
presentedwiththeCentralParkControlConsole,whichneeds
rebooting.Asmallgreencursorflashes,awaitinginstruction,and
promptlyrespondswith'accessdenied'towhateverisinput.Remember
tosaythemagicword!Genius.

>

02. Hot Dot Production

(http://hotdot.pro/en/404/)

> Hot Dog's 404 page is seriously addictive

HotDotProductionshasappliedit's'wheredesignmeetstechnology'
taglinetoitsimpressive404page,whichfeaturesthethreenumbers
madeupofhundredsoftinydotsthatchangedirectioninresponseto
mousemovements.Seriouslycool.

>

03. Bluegg (http://bluegg.co.uk/404)

> This noisy chap provides a hilarious notification that you're in the wrong

place

The404pageofcreativeanddigitaldesignagencyissimple,butso
effective.Uponloading,you'regreetedbyagoat,wholetsoutthemost
almightyhighpitchedscream,alertingyouthatthepagedoesn'texist.
Theinnerchildinusemergedandwemustadmittoplayingthis
repeatedly,whilecryingalittlewithlaughter.Bravo,guys.

>

04. Lego
(http://www.lego.com/404notfound)

Ingeneral,Legocandonowronginoureyes,andwelovethiscutelittle
tableauforitswebsite's404page,whichprovesthatyoudon'tneedalot
oftechnicalsoundingtexttogetyourerrormessageacross.

>

05. Magnt (http://magnt.com/404/)

Magntenablesyoutocreateabusinesscardthemedwebpagein
minutes.Itsclever404pagedemonstratesbothakeensenseofwit,and
aclearcalltoactiontotakeyouwhereyouneedtobe.

06. GitHub (http://github.com/404)

>

(http://github.com/404)
CodingwebsiteGitHubisthehomeofgeeks,andwhatbetterwayto
appealtogeeksthanasimpleStarWarsparodywithparallaxeffect
whenyoumoveyourmouse?GitHubalsohasanice500page
(http://github.com/500)forwhentheserverbreaks.

>

07. CSS Ninjas

(http://www.cssninjas.com/404)
(http://www.cssninjas.com/404)
Anotherexampleofthewebdesignworld'sloveofninjas,this404page
featuresanicesimpleillustrationthatreflectsthesite'sgeneral
approachtodesign.

>

08. Daniel Karcher Film Design Studios

(http://www.bluedaniel.com/404)
(http://www.bluedaniel.com/404)
Thissitemakesexcellentuseofanimationincludingsound,andits404
pageemploysabeautifullyrenderedsubwaystationcompletewith
emptytrainthatrollsin.Aswithmanyoftheexampleshere,thepage
divergesfromtheoverallsiteaesthetictogreateffect.

>

09. MailChimp
(http://www.mailchimp.com/404)
(http://www.mailchimp.com/404)

ThedesignersatultrahipemailnewsletterserviceMailChimphave
usedlateralthinkinghereandcomeupwithabananaanalogyfora
brokenlink.Thestyleofthe404pagefitstherestofthesitedesign
nicely,reflectingthesamelightheartedapproachthatmakesan
otherwiseboringtaskintosomethingfunandendearing.

>

10. Hakim El Hattab

(http://hakim.se/experiments/html5/404/netmag.h
(http://hakim.se/experiments/html5/404/netmag.html)
A404pagedesignedfor.netmagazine,thistimebyHakinElHattab
(http://hakim.se/),thisHTML5(http://www.creativebloq.com/web
designtips/examplesofhtml51233547)experimentfeaturescreepy
eyesthatfollowyourcursoraroundthepagewithoccasionalblinking
andnarrowingoftheiris.Brilliantlyexecutedandnicelyinteractive.

>

11. Tin Sanity

(http://www.tinsanity.net/404.shtml)
(http://www.tinsanity.net/404.shtml)
TinSanityfeaturesanincredibleanimation,involvingadancingcup
andstraw,thatscreamsitswayacrossthepagearoundthetext:"You
justgot404'd".Thescreamingisaccentuatedwithadrumrollandfunky
basssoundtrack,allofwhichleavesanexcellentimpression(although
thewebsiteitselfiscurrentlyempty).

>

12. Audiko (http://www.audiko.net/404)

(http://www.audiko.net/404)

Thefreeringtonemakingservice's404pagefeaturesabeautifully
renderedillustrationofLondon,includingtheobligatoryredbusand
telephonebox,aswellasBigBen'sTower,SherlockHolmesandahint
ofTowerBridge.Thesite'sworthavisitjustfortheartwork!

>

13. Blik Wall Decals

(http://www.whatisblik.com/404)
(http://www.whatisblik.com/404)
This404pageforBlik,theworld'sfirstremovablewallgraphic
company,isslightlydisturbing,featuringasitdoesababywieldinga
bloodsoakedchainsaw.Butthisillustrationstyledoesreflecttherestof
thesite'saesthetics,soit'sinkeepingevenifitisalittlecreepy.

>

14. Home Star Runner

(http://www.homestarrunner.com/random_garbage_
(http://www.homestarrunner.com/random_garbage_text)
Audiocanbeveryeffectivewhencombinedwithvisualsonawebpage,
especiallyaswe'restillintheearlydaysofreliableaudioinapage.This
errorpageforHomeStarRunner,whichfeaturesamusingcharacters,
downloads,andgames,shouts"404'd"atyouwhenyoufirstarriveon
thepage.Andthehanddrawnillustrationfitstherestofthesitewellin
termsofstyleandtheme.

>

15. Duoh! (http://www.duoh.com/404)

(http://www.duoh.com/404)

DuohisthecollaborativepartnershipbetweenillustratorVeerlePieters
(http://veerle.duoh.com/)andpartnerGeertLeyseele
(http://twitter.com/gleyseele).Theirbusinessisbasedonstrongdesign
principles,andsoyou'dexpectawellrealised404pageandtheydon't
disappoint.Incharacteristicbrightcoloursandnegativespace,thispage
looksandfeelsinkeepingwiththerestofthesite.

>

16. Robert Sherman

(http://www.personal.psu.edu/rws5156/404/)
(http://www.personal.psu.edu/rws5156/404/)
ThisexperimentbygraphicdesignstudentRobertSherman
(http://www.personal.psu.edu/rws5156/index.html)pretendstobean
interactivebombdiffusinggame,butattheendofitallitmakesno
differencewhichwireyouchoose.Agoodidea,albeitalittleanticlimatic
whenyougettothepunchline.

>

17. Bit.ly (http://bit.ly/404040404)

(http://bit.ly/404040404)
LinkshorteningserviceBit.lyneedsaspecialURLforits404pageas
bit.ly.com/404hasalreadybeenusedasashortenedlink!Thepage
itselffeaturesacutelittlecreaturebobbingupanddowninan
interactiveseathatrespondstoyourmousemovements.

>

18. ApartmentHomeLiving
(http://www.apartmenthomeliving.com/404.html)
(http://www.apartmenthomeliving.com/404.html)

Thislettingagentwebsite's404pagefeaturesastrangeinteriorshot
withafadingsheepsittingonthelavatory.Creativeandwackyatthe
sametime,it'sagreat(ifabstract)exampleofhowtodoitwell.

>

19. DropBox (http://getdropbox.com/404)

(http://getdropbox.com/404)
DropBoxhasaverysimplebuteffective404pagefeaturinganEscher
esqueimpossiblebox.Youcantakethisatfacevalue,orseeitas
signifyingtheinsideoutnatureofhavingnavigatedtoanonexistent
page.Anicesimplehanddrawnillustrationthatgetsthemessage
acrosswell.

>

20. Wufoo (http://www.wufoo.com/404/)

(http://www.wufoo.com/404/)
FormbuildingtoolWufoo's404pageisasimplestaticaffairthatuses
thebrandingeffectivelytoconveythemessage.Agoodexampleofa
cleanapproachtohandlingerrors.

>

21. Mike Kus (http://mikekus.com/404)

(http://mikekus.com/404)
LeadingdesignerandillustratorMikeKus(http://mikekus.com/)'s404
pageusestheclassicSpaceInvadersasamotifforhis404page.Hehas
previouslyadoptedsimilarlyretroTVstaticfortheerrorpagewithan
animatedGIFsetasthebackgroundgraphic.

>

22. THCNET
(http://thcnet.net/zork/index.php)

(http://thcnet.net/zork/index.php)
Somesitesincludeentiregamesorstoriesaspartoftheir404page.
Thisinteractiveadventuregameworksalongthelinesoftheoriginal
Hitchhiker'sGuideToTheGalaxytextadventure
(http://en.wikipedia.org/wiki/The_Hitchhiker's_Guide_to_the_Galaxy_(video_game)),
andinvitesyoutoplaybyenteringinstructionsatthecursor.

>

23. Dailymotion Cloud

(http://www.dmcloud.net/404)
(http://www.dmcloud.net/404)
Thisinteractive404pagemakeaniceplayonthenameofthesitewith
animatedrainandclouds.Theeffectissimpleyeteffective,andisoneof
thebetterexamplesofasignbeingusedasavisualmetaphor.

>

24. Walk with You

(http://www.walkwithyou.me/404)
Thissimpleillustrativedesignforasitepromotinglifecoachinguses
existingassetsfromtheoverallsitedesign,includingthewaterfall,to
conveythe404message.Boldtypographymakesthispageworkwell.

>

25. LimpFish
(http://www.limpfish.com/404)
(http://www.limpfish.com/404)
Oneofthebestexamplesofanewspapermetaphor,DaveBarton's
personalsitemanagestoinjectalittlehumourintoitserrormessage.

>

26. Starbucks
(http://www.starbucks.com/static/error/index.html
(http://www.starbucks.com/static/error/index.html)
Starbucks,likeHeinz,makesgooduseofitsprimaryproductto
illustratethe404message.Inthisinstancethetelltalessignsofa
missingcoffeecupareusedtotellthestory.

>

27. Huwshimi (http://huwshimi.com/404/)

(http://huwshimi.com/404/)
Someofthenicest404pagesaren'tinteractiveatalltheysimply
featurebeautifulillustrationthatactsasanicesurprisewhenyou've
arrivedatadeadlink.ThisexamplefromSydneybasedinterface
designerHuwshimifeaturesasimpleyeteffectivesketchthattellsa
storywhileconveyingthe404message.

>

28. BlackMoon Design

(http://blackmoondev.com/404)
(http://blackmoondev.com/404)
Thispixelartstyled404pageforBlackMoonDesign
(http://blackmoondev.com/),agamesandpixelartstudioinPoland,
madeussmile.Adesignagency's404pageisawindowontheirworld,
andsomethingasoriginalandentertainingasthisbodeswellfor
prospectiveclients.

>

29. Blizzard Entertainment

(http://us.blizzard.com/en-us/notfound.html)
(http://us.blizzard.com/enus/notfound.html)
VideogamedeveloperBlizzardtakesanoriginalapproachtoits404
pagethatfitsinwithitsgeneralstyle,usingbrokenglassasametaphor
forthebrokenlink.Whatmakesthisexamplestandoutistheclean
designaestheticbeneaththeglass.

>

30. NPR
(http://www.npr.org/templates/story/story.php?
storyId=404)
TheUS'sNationalPublicRadiowebsite's404pagepresentsanamusing
wikistylelistofmissingpeopleorthings,fromAmeliaEarharttoyour
luggage.
Words:SamHamptonSmith(http://www.hamptonsmith.com/)and
theCreativeBloqstaff

>

31. CSS-Tricks (http://csstricks.com/thispagedoesntexist)

Thesuperbtips,tutorialsandadviceblogCSSTricksislovedbyallin
thewebdesigncommunitybecausedespiteitsdrysubjectmatter,it
managestoexcudeenthusiasm,humourandpersonality.Andthis
cheeky404pageisanexcellentexampleofthat.

>

32. Hootsuite
(http://hootsuite.com/404notfound)
Hootsuiteisprovinganessentialtooltomanywhoworkontheweb
notleastusatCreativeBloq,wherewemakegooduseofthesocial
mediamanagementsystemforbrandmanagement.Whatcouldbea
visuallydullfunctionalappisbroughttolifebytheuseoftheowl
mascot,whichisattheforefrontofthiswitty404page.

>

33. iStockphoto
(http://www.istockphoto.com/503)
iStockphotoisanonline,royaltyfree,internationalmicrostockimage
providerthat'srisentoprominencepartlybecauseitunderstandsits
users.Thiscuteifslightlygruesomecartoonwillputasmileonyour
faceifyouevergetstuckwhilenavigatingitsmassivesite.
Haveyouseenanygoodexamplesof404pages?Letusknowinthe
commentsbelow!
Words:TomMay
(https://plus.google.com/u/0/118198909833539344668?rel=author)
TomMayisassociateeditoratCreativeBloq.

Tags: Webdesign(/tag/webdesign), Illustration(/tag/illustration),

Inspiration(/tag/inspiration), netmag(/tag/netmag), Feature(/tag/feature)

Advertising (/Advertising)

About Us (/About-Us)

Contact (/Contact)

FutureisAOP&PPADigitalPublisheroftheYearandBMAMediaCompanyoftheYear.
ThissiteispartofFutureplc,aninternationalmediagroupandleadingdigitalpublisher.Weproducecontentacrossfourcoreareas:
Technology

Entertainment

Music

Top

Creative

TechRadar(http://www.techradar.com/)
GamesRadar+(http://www.gamesradar.com/)
MusicRadar(http://www.musicradar.com/)
CreativeBloq(http://www.creativebloq.com/)
MaximumPC(http://www.maximumpc.com/)
PCGamer(http://www.pcgamer.com/uk/)
Mac|Life(http://www.maclife.com/) KotakuUK(http://www.kotaku.co.uk/)
T3(http://www.t3.com/)
DigitalCameraWorld(http://www.digitalcameraworld.com/)
GizmodoUK(http://www.gizmodo.co.uk/)
LifehackerUK(http://www.lifehacker.co.uk/)

AboutFuture(http://www.futureplc.com/home/aboutus/)

Jobs(http://www.yourfuturejob.com/)

Advertising(http://www.futureplc.com/advertisingsolutions/)

PrivacyPolicy(http://www.futureplc.com/privacypolicy/)

PR(http://www.futureplc.com/home/news/)

DigitalFuture(http://www.digitalfuture.com/)

CookiesPolicy(http://www.futureplc.com/cookiespolicy/)

Terms&Conditions(http://www.futureplc.com/termsconditions/)

InvestorRelations(http://www.futureplc.com/home/investors/)

Subscriptions(http://www.myfavouritemagazines.co.uk/)

ContactFuture(http://www.futureplc.com/home/contactus/)

FuturePublishingLimited,QuayHouse,TheAmbury,BathBA11UA.Allrightsreserved.EnglandandWalescompanyregistrationnumber
2008885.