Ever land on a webpage that no longer exists? Or click on a broken link? You will get the 404 error page. Or on our site, something else…
The 404 error page indicates that you’ve landed on a URL that doesn’t exist. Very useful. Every website should politely inform you of this fact so you’re not left wondering where the content is. More specifically (as pulled from Wikipedia):
The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server, but the server could not find what was requested.
Since the site’s visitor is still connected to the server, we as web developers are able to direct him or her to an informational page in lieu of the missing content. This can even include a search page to help the visitor find that content. We take great effort to ensure that every aspect of the user experience is considered.
With this in mind, we wanted to offer an extra treat to visitors of our site. The 404 error page looked like a good spot. In fact, using this page as a blank canvas for some creative fun has become rather popular. Time to come up with a good concept!
8/29 Update: Looks like other folks have enjoyed our fun idea as well! Thanks for the Staff Pick at www.404notfound.fr and our inclusion in Inspiration Feed’s 40 Clever Yet Creative 404 Error Designs. We are definitely in good company!
Sketch it out!
After exploring several ideas, we decided to play off the idea that the user is venturing somewhere they shouldn’t be. Perhaps lost in the wilderness… and in danger… from a monster that could crush us rabbits!
Okay, the monster is not that scary. He’s just trying to roast his carrot in peace.
While this was specifically an illustration project, the process is quite similar to any other design project. The key is to get the layout and structure right before getting into the details.
A refined sketch sets my composition.
With a website, we’d start with a structural wireframe to ensure all elements are properly considered before creating the visuals. This is, of course, after we’ve done our research and have a comprehensive understanding of the client’s goals, which dictate the project’s audience, desired functionality, and artistic direction. Our goal? Create something memorable!
With my tight sketch good to go, I begin laying down color. Working completely digitally (with a Wacom Intuos tablet) allows for great flexibility. I can take the shapes I sketched and easily fill them with color. Using global swatches, I am able to change hue and saturation on the fly. The fire too yellow? Just adjust the swatch, and the change is made without having to go through and select the artwork. Seriously, the computer is magic.
Every element is arranged in layers, too, so I can work on specific sections at a time. Need the mountains to be slightly smaller? Select that layer and size them down in two seconds. Certainly beats the time it would take to recreate a whole section with traditional painting (hence the importance of nailing the composition in the refined sketch).
The magic is in the details
With my base layers of color all taken care of, I move to the details: shading, textures, increased contrast, refinements to the shapes – no stone is left unturned. The goal is to get the image as rich and engaging as possible. I also add in the text at this time to complete the layout.
Lastly, we develop it for the web. Since I kept every element in layers, the web development team is able to layer the images on the website. Using more magic, we create a storybook popup depth effect that changes your perspective as you mouse over. It’s all in the details!
Just keep a safe distance.