404 / 500 – the making of
If some of you were wondering what a graphic designer actually does at a payment processing company, now is the time to lift the shroud of mystery. Designing a 404/500 error page seems rather trivial (especially in comparison to infographics), but it proved an interesting task.
You could have seen the finished designs in one of the previous posts. I’d like to show you some of the designs that could have been… And why they didn’t make it. In other words: welcome to my sketchbook.
The project’s objectives were simple enough: a 404 page, communicating that the server could not find what was requested, and a 500 page, indicating that the server failed to fulfill the request. It does not mean that such cases are common when it comes to our website. We just felt our company should have its own special 404 and 500 pages.
There was one more element that was obligatory in the design: Mr. Banks. He is our fictional employee of the year, a company mascot. Always smiling, dressed in an immaculate suit and sporting yellow trainees, Mr. Banks has been present on company’s website for some time.
404 has always been connected with the idea of searching. A detective fitted the page perfectly. In this moment it was certain that Mr. Banks will dress up as Sherlock Holmes (the classic deerstalker edition) and hold a looking glass. He didn’t lose the sneakers, though. This draft is more or less what made it to the final version: sans the text (changed) and plus animated bubbles (fancy addition).
500 presented a greater challenge. At first, the sign “we are down for maintenance” brought about visions of a building site:
And thus the cracked wall was created, a few drops of oil were spilled and a large construction board was nailed to the wall. In the long run, however, we have decided that the picture does not convey the correct message. It talks about chaos and disorganization, and such images do not go well with the concept of payment processing.
Another idea was called “blackout”. The server is down for maintenance and all the lights are off, apart from one spotlight shining down on the logo and Mr. Banks. Still, the message was not clear. In the end, we’ve decided to get rid of the darkness, put Banks back in working clothes and keep the immaculate white background.
You can see the final results at our maintance demo site.