404 Error Website Page
A 404 error is the site can’t find the page you are looking for, and most of the time, they are just typed and look computer-generated, but 404 error page are a fun way to show your creative side and show your skills as a web designer. Link to site: 404 (millersville.edu)
-
HTML/CSS, Illustration, 2D Animation
-
Atom, Adobe Illustrator, Adobe Photoshop
Process
Inspiration
Before I could start thinking about how I could make my own 404 page, I decided to research and look at other 404 pages to see how they added personality to their 404 pages. I made a mood board to guide me on my 404 page to look.
Rough Sketches
It was knowing that I wanted my 404 page to be fun. I decided to do a 404 page that references a movie or a popular character and has a pun related to the error code. So, I made a few sketches to help me figure out which one was the best direction.
Refine Sketch
When I finished my rough sketch, I knew that my strongest one was the Star Wars theme 404 page. So, I refined my sketch of Yoda and cleaned up the linework of the illustration.
Illustration
Then I made the line art in illustrator to get a nice clean line. Then I did the shading of the illustration in photoshop to give the drawing a more three-dimensional look. Then after I got done with the illustration, I just had to code the website and make the animation happen with CSS animations.
Coding
The site's coding is primarily focused on CSS and using CSS animation to make everything move. The illustration is set in a keyframe which I tell it to move from point A to point B with, and then with the text, I have the text moving but also have the first set of text disappearing and the second set of text to replace that at a rapid pace, so it looks like it is glitching. Link to site: 404 (millersville.edu)