After weeks and weeks of progress crafting a digital side story for the film Drive, the development of high fidelity prototypes for all of the planned screens has come to a close. Building upon the medium fidelity prototypes and user feedback from last week, there was much tweaking of what I had previously created, but these are now much closer to what I had pictured during the ideation phase.
Above are the final title pages for both the desktop and mobile versions of the story. In my previous blog, I had only worked on the desktop version, but one main thing I learned from this work was that much of my original designs translated well to their mobile counterpart. The main difference from the medium fidelity prototypes is the change in the subtitle fonts. Some of the feedback I received about the original designs were that I overused the Drive font in the title pages. I agreed with this sentiment after reevaluating my work so I decided on a more bold font that I felt fit within the Drive aesthetic.
One aspect of my previous prototypes that gained mostly positive feedback are the hover-over animations for each chapter title on the desktop version. Users enjoyed the style and energy the animations brought so these remained relatively untouched. I wanted to find a way to integrate these into the mobile versions, but I could not find a way to logically use them without it seeming forced. Through each of these screens, each chapter title is clickable in order to reach the newly developed chapter transition screens.
A new idea that also came from user feedback was separate screens that lead into each chapter. Above are all the desktop and mobile versions, each using a darker shot from the film that has to do with the upcoming story being told. For these, I wanted to use white frames so they could change into the specific colored frames that each chapter has. Another idea I implemented from user feedback was the use of a small watermark on each screen. I ended up using this across every screen except for the main titles.
Each chapter will follow the same basic design, but with small differences to make each visually unique. The picture at the top shows chapter one which is symbolized by the blue frames and pictures scrolling by on the left side of the screen. The middle picture is of chapter two, paired with a green frame and pictures on the right. The bottom picture is of the final chapter, using a purple frame and pictures scrolling by in the center of the frame. I wanted a minimalistic style overall for the entire story, but other than different pictures and different navigation, I wanted something to make the chapters obviously unique for a user. The yellow navigation buttons are used to either proceed to the next chapter, go back to the previous chapter, or go back to the home/title screen. Users did not like how I previously made these buttons more three dimensional so I went with a clean, flat look for the final prototype.
The words on screen would move with the user’s scroll along with the pictures. As seen in the prototypes, the pictures move past the frame at the top, but none of the pictures or words will move past the bottom of their respective, colored frames. This is to avoid any clash with the main navigation buttons or the watermark. Anything above the bottom of the frame is free range. Like I stated in my previous post, I want the pictures and words to be expressive, changing colors and shapes with the story itself. For these prototypes, I symbolized that sentiment by using different colors and fonts for the words and minimally colored black and white photos for the imagery.
The same ideas will carry over into the mobile versions of the story. There were some limitations I had to work with, but I was able to keep most of my design the same. The biggest difference is the inability to position the photos differently. The only way I could think of to combat this issue is shrinking the photos, but I feel that lessens the shots if they are made too small to appreciate. Instead I decided to follow the conventions I established for my desktop imagery and apply it to my words. For each chapter, they will have their words placed differently to give the same style visually that I achieved on the desktop. Chapter 1 reads left to right, chapter 2 is right to left, and then the final chapter will be centered.
After creating multiple phases of prototypes and implementing different ideation techniques to finally reach this point, I learned so much about what it takes to design for an internet-based story. Having previously worked in other fields, fleshing out these design ideas and working with different colleagues proved to me how intricate this can be. The skills and knowledge I gained in graphic design and filmmaking did help, but I had to think in all new ways to even assemble non-responsive prototypes like I did. This was a whole new world for me, and I would love for more stories to be told in this manor in the future.