A lit­tle hic­cup

A page that uses bright colours, hu­mour and an­i­ma­tion – and you can view it on CodePen

net magazine - - DESIGN CHALLENGE -

404 pages give the op­por­tu­nity to be cre­ative, hu­mor­ous and to grab at­ten­tion, but they should also pro­vide func­tion – for ex­am­ple, site nav­i­ga­tion, search and con­text aware­ness where pos­si­ble to fun­nel users back into the site. In this ex­am­ple, we’re mak­ing use of a call to ac­tion to en­cour­age users to pur­chase the 300th is­sue of net mag­a­zine it­self.

For this 404 page, I felt the de­sign should have a touch of the 90s (since this was when the mag­a­zine was first launched) with bold vivid colours, but it should also re­flect a more con­tem­po­rary aes­thetic.

I wanted to make use of unique cheer­ful an­i­ma­tions with a lot of bouncy move­ment on the two main fo­cal points – the er­ror re­sponse and the CTA – to give a sense of pos­i­tiv­ity, fun and cel­e­bra­tion. SVGs and Greensock’s GSAP are a perfect com­bi­na­tion for this. Check out my pro­to­type an­i­ma­tion for this on CodePen - http://bit.ly/2xLWi5S.

Close up

(1) The full nav­i­ga­tion bar with search should be re­tained to en­able users to nav­i­gate back into the site, min­imis­ing the risk of los­ing them. (2) This ini­tial SVG an­i­ma­tion bounces in to grab the user’s at­ten­tion and feed­back to them that there was an is­sue. Specif­i­cally stat­ing 404 as the er­ror is not en­tic­ing, whereas us­ing ca­sual lan­guage can give the page more per­son­al­ity. (3) In this SVG an­i­ma­tion, we make use of cham­pagne glasses toast­ing in cel­e­bra­tion of the re­lease of the 300th edi­tion of the mag­a­zine. Adding an in­ter­ac­tive click/tap state to this could be a nice touch to cause the toast an­i­ma­tion to play through again. (4) This is the CTA at­tempt­ing to en­tice users to buy the mag­a­zine, link­ing off to My Favourite Mag­a­zines’ sub­scrip­tion page. (5) Links to other pop­u­lar, lat­est or con­text-aware ar­ti­cles should be dis­played, to help re­tain users to the site. Con­text aware­ness could be utilised by ex­tract­ing key­words from the ini­tial URL string.

3 2 4 5 1

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.