A little hiccup
A page that uses bright colours, humour and animation – and you can view it on CodePen
404 pages give the opportunity to be creative, humorous and to grab attention, but they should also provide function – for example, site navigation, search and context awareness where possible to funnel users back into the site. In this example, we’re making use of a call to action to encourage users to purchase the 300th issue of net magazine itself.
For this 404 page, I felt the design should have a touch of the 90s (since this was when the magazine was first launched) with bold vivid colours, but it should also reflect a more contemporary aesthetic.
I wanted to make use of unique cheerful animations with a lot of bouncy movement on the two main focal points – the error response and the CTA – to give a sense of positivity, fun and celebration. SVGs and Greensock’s GSAP are a perfect combination for this. Check out my prototype animation for this on CodePen - http://bit.ly/2xLWi5S.
(1) The full navigation bar with search should be retained to enable users to navigate back into the site, minimising the risk of losing them. (2) This initial SVG animation bounces in to grab the user’s attention and feedback to them that there was an issue. Specifically stating 404 as the error is not enticing, whereas using casual language can give the page more personality. (3) In this SVG animation, we make use of champagne glasses toasting in celebration of the release of the 300th edition of the magazine. Adding an interactive click/tap state to this could be a nice touch to cause the toast animation to play through again. (4) This is the CTA attempting to entice users to buy the magazine, linking off to My Favourite Magazines’ subscription page. (5) Links to other popular, latest or context-aware articles should be displayed, to help retain users to the site. Context awareness could be utilised by extracting keywords from the initial URL string.
3 2 4 5 1