Day 8 - 404 Page

Today’s task is to create a 404 Error Page. I started out by looking into the history of this and why it’s called “404”. I found that the initial 4 is to represent an error in the code, the 0 signifies that there is an error in the syntax, and the final 4 specifies further depending on the subsequent numbers following.

Errors like these typically mean that the user has entered in the wrong URL, the page does not exist, or it was moved, deleted, or forbidden. Mysterious.

The meaning behind 404 assisted my design process by giving me some direction on what text to add and what kind of image and/or actions to include on the page.

Ultimately, I decided that a graphic would be good to include—potentially eases frustration. Also, I wanted to include action buttons that helped the user choose the next step and alleviate this pain point of not finding the page they are looking for. Additionally, I thought adding a short explanation in text would give the user some insight as to how to correct the error if possible.

Here is what I came up with:

The image above shows an initial sketch and some general guidance for the design. The wireframe in the center depicts the intended layout showing text in dark gray boxes, action buttons in medium gray rectangles, and images as a box with an “x” through it. The final design is shown on the right. It features some action options, explanation of what went wrong via text, and a lighthearted image to depict that something is amiss.