404: We have a problem
HTTP 404 is used in computer network communications, to indicate that the browser was able to communicate with a given server, but the server could not find what was requested. In other words, you are lost.
Thanks to our quarterly Product Engineering Week, I had a chance to come back to my project of making vector illustrations for Homeday. This time, I wanted to create a few options for the 404 page.
404 error pages are a great opportunity to show some humor in an otherwise serious setting. It’s a chance to mitigate the disappointment of finding yourself in the wrong place. A user never triggers a 404 error on purpose, so it can become a hidden gem in an ordinary website — an undercover brand ambassador of sorts.
404 can play with the theme of the website or the visual identity. It can simply surprise the viewer. Or, in the case of Slack, it’s a chance to use that discarded project you worked so hard to create. Slack’s 404 is a level from the defunct MMO, Glitch, created by Flickr and Slack co-founder Stewart Butterfield. Glitch was a friendly game, concentrated on collaboration and collection. All of its visual assets as well as the code are currently in the public domain.
While the Chrome no-internet dinosaur game is not exactly a 404 page, it fulfills a similar role. Cute dino softens the blow of irritation. You can play the game here, even if you do have internet.
Here are some other examples of clever 404 pages:
Homeday, where art thou?
While there isn’t anything particularly wrong with this page, it could use some spicing up. First of all, the image could correspond more to the message. It is also a full page visual, which means a longer loading time. I imagine a person that lands on this page will most likely read the error messages and leave without waiting for the image to load, which makes it irrelevant. One solution for this problem is a lighter vector image.
I’m a big fan of white space. At any given time the viewer should be presented with the minimum of choices to make. In this case, you can come back or request help.
The minimalist approach gives more prominence to the text and the way it interacts with the image. It solves the problem of low contrast between text and image in the original 404 page.
If you’re interested my work, here are my previous Medium articles:
