Summary
A 404 page is used when someone types a website in wrong, or the site no longer exists. In my opinion, the most famous one would be Google’s dinosaur game when someone loses Wi-Fi. For my multi-platform website, a 404 page is what I had to create using Adobe Express and other Adobe programs. The objective of this project was to learn a new program and have a final 404 page that engages the viewer.
Goals
My goal was to learn Adobe Express and see how a design mind can turn a universal website into something more. For the research part of this project, I hoped to learn new ideas and strategies and come up with something I would never have thought of. Since Adobe Express was not the greatest platform to create movement, I hoped to grow my Photoshop skills to make a smooth-moving GIF.
Ideation Exercises
The first ideation exercise was quick post-it notes. This exercise taught us to not be stuck on one idea and to work through multiple possibilities, good or bad. After the timer went off, we went through two more rounds of Post-it notes, and this allowed more unique and crazy ideas to come about. The final ideation exercise was Crazy 8s. Crazy 8s was another quick exercise, but this one allowed more illustrated designs and an expansion on ideas from the post-it note exercise. After finishing the exercises, I worked on rough sketches of my favorite ideas and thought about how to add movement to them.
To show movement, we needed to choose three of our favorite designs and draw 3-framed storyboards for each one. However, at the beginning, I had more than three favorite designs, but I decided to continue and draw out each of their movements. Asking classmates which ones had a clearer narrative made it easier to narrow down my designs to three, and I worked on the final sketches.
Final Design
The final three designs were: a train, SOS turned into 404, and finally, a cactus made of fours with a tumbleweed as the zero. My favorite was the train, and when I had a critique with classmates and my professor, they chose the train as well. To build the 404 pages, we could use any program, and I decided to work on Adobe Illustrator to create the design of the train and then use Adobe Photoshop to make it move.
Work in Adobe Illustrator
Work in Adobe Photoshop
I went through multiple color versions and decided on these bright colors because they were unique and popped off the page better. In Photoshop, I had to erase parts of the train, move slightly to the right, and then repeat until it reached the end of the track. For the smoke, I used a textured background, and with a black mask, I used the marker brush to remove or add more of the background. I decreased the opacity on the marker to create a smoky and transparent view in the sections of the smoke farthest away from the train.
Adobe Express Build
How the MP4 video looks in Adobe Express
With the train completed, I exported it as “save for web (legacy)” and tried to place the GIF on Adobe Express. However, Adobe Express does not accept GIF, and I had to screen-record the GIF moving with QuickTime. Since I recorded in QuickTime, it made the GIF into a movie, but Adobe Express does not accept movies either. I used Adobe Express Converter to turn the movie into an MP4 file. With the recording in the proper format, I was able to easily place the mp4 into Adobe Express and add text around the recording. I decided the text should have the appearance of a children’s book due to its bright and playful colors. With the layout and the movement of the train, it engages the viewer by making their eyes read “Choo Choo” first and then follow the train down the track.
Final Work
https://new.express.adobe.com/published/urn:aaid:sc:VA6C2:b9b6718d-492f-451c-896f-230b265d2f64?promoid=Y69SGM5H&mv=other
URL to see the 404 page on your computer
Video to see how the train moves
Knowledge Gained
In this project, I learned Adobe Express is easy to understand and has some great features, but with a tighter grasp in other Adobe software, it seems to lack the ability to create more personal and unique designs. Though I do see the importance of Adobe Express and how accessible it can be to get the designs out for public view. Creating a smooth-moving GIF takes multiple frames and a lot of time in Adobe Photoshop, but the result is completely worth it. Besides programs, I learned engaging content is not limited to interactive designs and can be a small movement that viewers can watch.
