High Fidelity Prototypes

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.

Medium Fidelity Prototypes and User Feedback

Building off of the work I completed last week, I wanted to start actualizing what this story could look like in digital form. Having just put all my ideas onto paper through the paper prototypes, my next goal was to put all of my effort into refining the look of the story. Since the paper prototypes were extremely low fidelity, I wanted some concepts that were middle of the road instead of shooting for full finished products right now. I also wanted to take these medium fidelity prototypes and show them to the people I trust that I could get into contact with right now to see what kinds of changes they would make.

Currently, I have made medium fidelity prototypes of the desktop home screen, each animation that would occur through the desktop home screen, and the desktop version of what Chapter 1 could look like based off my sketches.

Current desktop homepage

Above is the current look of what the homepage would be. This went through multiple stages and variations before landing on this look thanks to user feedback. The users I had access to for feedback were basically anyone I could grab a hold on through texts and virtual chats, but I was able to secure some answers in these hectic times. My issue with the original design was the lack of depth since it was just text on a black background basically. In my testing phase, I mulled over the idea of the stripes behind the main title and which colors to use for a cohesive design.

First completed attempt at desktop homepage

As seen in the first attempt I created which was what was originally shown to my users, the most common complaint was that the melting colors behind the subtitle “Bad Luck’s Birth” was too busy and muddled the words. There was also a universal disliking of the original colors behind each chapter name since some were easier to see than others and the tint of the yellow becomes different depending on which color is behind it. After I placed the stripes behind the title though, with some adjustment to the brightness of the yellow, the ball started rolling to where the current design is. I removed the melting colors behind the subtitle and replaced it with a solid white to match each of the chapter titles. I also gave each chapter name a simple outline around them to have each stand out and be unique from each other. The cool colors used for these outlines was also a suggestion from users in order to keep the color theme cohesive. Once those were fixed, all I had to do was add the drop shadow on the main title to keep it from melting into the yellow stripes and I had landed on my current design.

From the current design, I then tackled the Shannon heads I wanted to animate hovering over each chapter once a user’s cursor was hovering over it. This simply came from finding a crisp, serious picture of Shannon’s actor, cutting it out and then adding my desired effects to achieve the stylized look I wanted. I also added some graffiti to the picture using different brushes in order to achieve the different faces I had drawn out in my paper prototypes.

These animations were universally received positively, with only some asking if the face was the main character and if the faces drawn onto Shannon were indicative of the stories.

The last thing I wanted to complete within this phase was a sample of what the stories themself could look like. All of the previous designs and animations were completed within Photoshop, but the story designs I wanted to do in InDesign for a more clean writing layout.

First draft of desktop chapter design

For this design, it was difficult trying to convey a sense of emotion through a still image, but this is definitely the design I am aiming to get as much user feedback on as possible. From the feedback I have already gotten, I have started improving and enhancing the layout of the design. Generally, my users had a positive reaction to its simplicity. The pictures are placed with the gap in between them to mimic how they would scroll up with the user’s scroll. The words are placed the way they are because I would want that section of the screen to be a canvas for expressive, varied text. I displayed that currently with the different font sizes and placements, but this would potentially go much further for the actual website.

The users liked the pops of color in the photos I created along with the color choices overall for the border and the text. The frame colors will each match the colors of the outlines I placed around the chapter titles on the homepage. This is to keep each chapter obviously different for the user as well as to keep the use of pink away from being obnoxious. A criticism I heard frequently was that the buttons on the bottom of the page seemed too clunky with the 3D effect so I will be making those flat in the next iteration. I also received a suggestion to possibly highlight the big, emphasized words in the story with the same sort of outline each of the chapter titles has so I will see how that looks in further testing.

My biggest takeaways from creating the medium fidelity prototypes and getting user feedback was that I need to trust that “less is more.” When I create these kinds of designs on my own, I frequently get lost in how busy and experimental the designs should be. I just keep going and going, trying new things until sometimes I lose track of what my original goal even was. For example, when creating the chapter designs, I racked my brain, trying to figure out how to give the story text some depth. I stared at the simple, pink text on the textured black background and was not feeling satisfied. I never want my designs to look amateurish, but once I showed the design to some people, they really liked the subtle hue of pink I chose and loved how easy it was to read on the black. I never would have seen it from this point of view, but now, thanks to the feedback, I am reinvigorated to tackle the rest of the screens I want to create. I just need to remember that every great design exercises some form of enthusiasm and restraint.

Paper Prototyping A Web Story

For the past few weeks, I have been planning on how I would create a Drive side story based on the character Shannon from the original film. This has led to many brainstorming sessions on the topic, drawing out how exactly I would want the story formatted and what exactly the story itself would talk about. If you have read my previous blogs on this journey, you have seen that I have decided on a three chapter structure told through a website. The viewer would be greeted by a simple homepage once they enter, offering three pathways: chapter 1 which is the 80’s, chapter 2 which is the 90’s and chapter 3 which is the 2000’s. The whole time I was creating the story, I had a visual of how I would want it to look in my head, but I had never put those thoughts onto paper. I knew visualizing these ideas, even in a rough manner, would be important to fully ideating this story so I chose for my next step to be paper prototypes of the site.

Once I chose to do paper prototypes for how my website would look and flow, some may stop and ask “why this method?” From the outside looking in, making paper versions of phone screens and doodling on them may seem trivial, but it is actually a fantastic way to test out a lot of ideas in an efficient manner. Graeme Fulton speaks about the usefulness of paper prototyping in the article “Stop Talking and Start Sketching: A Guide to Paper Prototyping.” Fulton says, “The purpose of low-fidelity paper prototyping is not to impress users with beautiful drawings and designs, but to gain insight and direction for your product, quickly. Therefore, it’s best used to get feedback on high-level concepts, such as the layout and flow of your app” (Fulton, 2018). Paper prototyping allowed me to get my ideas down visually and then test how others liked the flow of the story without investing tons of time into fully visually fleshing out my ideas.

Above is the paper prototypes for the homepage of the site. The first picture of the gallery would be the homepage that viewers would enter into without being touched at all. It has the title of the story in big, pink letters on a textured black background. Under it would be the links to each of the three chapters the viewer can select. I decided to split them up and not force the viewer to go through all three chapters in order because the story itself does not necessarily have to be experienced one after another to be enjoyed since they are somewhat isolated stories. I also wanted the user to have freedom on which chapter they would want to possibly revisit once they complete the story. The faces in the prototype are of Shannon in different states, each specific to what is happening in the chapter’s story. These would pop up once the user scrolls their mouse over the chapter link, and I would want slight animation of the head moving.

This would be the home page design for the site on mobile. Generally, I wanted to keep the design of the web page as close to the mobile design as possible so each version shares many similarities. The only real difference with this is the absence of the animated faces that would pop up. The only solution I can think of to incorporate them here would be for them to float next to the chapter titles instead of needing the visitor to hover their cursor or finger over the title.

For each of the chapters’ website designs, I wanted a common, simple way for the user to experience the story which they can get used to while experiencing the story. The story itself would be the main difference when reading each story, but I also included some minor changes to help the user differentiate between the three. For example, I placed the images in different locations for all three chapters so there is a subtle indication of which chapter you are on. I also think it would be interesting if the title animated itself differently for each chapter. I already planned for the text to move into frame with the scroll of the computer, but different animation styles for each would be another indicator. There will also be audio effects playing throughout the experience, matching what is happening in the story. For example, in the 80’s path, as Shannon gets ready to go to the film set, the user would hear the sounds of Shannon getting ready and packing his things. Once Shannon arrives to set, the user would hear the chatter of the people on set, cars driving by, equipment being moved. Along with different visuals, I want each chapter to stand out auditorily as well.

As written on the bottom of the web prototypes, at the bottom of each story there will be a box that fades in prompting the user to either press the home button to head back to the home page or press the back or forward arrow to head to a different chapter. I would aim to have all of these features within the mobile version of the story with the exception of the unique frame placement. There would also possibly need to be a change in the animations used for the text since some may not work in the smaller size of a mobile phone.

The idea as of right now would be to have a beginning image and then an ending image for each story chapter. Each image would have slight animation in the same vein as animated comic story with some depth of field animation and slight limb movements. As also stated in the web design prototypes, I would want the style of the website to match that of the film’s marketing so every background should be textured black like the homepage with pink text and frames on top. The details of how exactly everything would truly look in the end will be tested further in higher fidelity prototyping later on, but these ideas would be the foundation of how I would want the website to flow.


References

Coleman, Ben. “How to Make Paper Prototypes.” SitePoint, 28 Oct. 2017, http://www.sitepoint.com/how-to-make-paper-prototypes/.

Fulton, Graeme. “Stop Talking and Start Sketching: A Guide to Paper Prototyping.” Marvel Blog, 12 June 2018, blog.marvelapp.com/stop-talking-start-sketching-guide-paper-prototyping/.

How Users Experience Shannon

The next step in my journey to create a side story for the character Shannon from 2011’s Drive is to ideate what exactly the user would be doing once they enter the website. The whole story was going to be told through a simple scroll with added visuals and sounds to help deepen the experience further than a normal text paragraph. I wanted the page to come alive with animation and audio they stay true to the style Drive carried, yet was unique from what the film was. I decided to flesh this out by using user flowcharts.

For what I was trying to achieve with these flowcharts, I decided to go with a “product design” layout. As stated by Liza Mock in her article “The Comprehensive Guide to Flowcharts”, she states that a product design flowchart, “…lays out how your product will work and what processes will be included. This is where you decide what it will look like, how processes will flow, what actions trigger what processes and so on” (Mock, 2018). This seemed to be the most helpful form of designing how the user would experience Shannon’s story so I created three different flowcharts describing exactly that.

Drive 80s path

The entirety of the side story will be split into three main sections of Shannon’s life: the 80’s, the 90’s, and the 2000’s. As described in the film, a pivotal event in Shannon’s life occurs in each of these decades which leads to the arc in Drive. Above is the flowchart for the 80’s path. Since these were very simple charts and did not require much differentiation in order to understand, I segmented important areas with colors instead of the conventional shapes usually used. The purple indicates the beginning and end, the blue are normal events, the yellow is where a decision is made, the red is a “wrong” decision to attribute for all possible outcomes and green is corrections for the error. All three paths are similar in design chart-wise, but the story within the charts vary greatly.

For the 80’s path, the story focuses primarily on Shannon and Bernie’s first meeting on the set of one of Bernie’s action films he said he produced during the 80’s. Bernie states in the film that he and Shannon first met while Shannon was a stunt coordinator on one of Bernie’s films. In this path, I want to focus on showing a brash, overconfident, young Shannon who seems to be too much for Bernie. Bernie would talk down to Shannon, but in a calm, stern manner. The user would hear the chatter of the film set as they read what is happening. Items being moved across set, cars being driven nearby, all being heard while also shown through dynamic, yet simple animations on the screen. This branch would end with a visual of Shannon getting denied of a handshake by Bernie after Bernie actually comes to start liking Shannon after he realizes he could be useful. Each decade’s branch would end with a button redirecting the user back to the homepage so they can select any of the other decades they missed.

Drives 90s path

In the same kind of structure, the image above is the flowchart for the 90’s chapter. This story focuses on how Shannon sustained the injury that we see him dealing without throughout the original film. Through a conversation shared between Shannon, Nino, and Bernie, Nino asks how Shannon’s leg is doing and Shannon responds saying he had “paid his debt.” Later on, Bernie talks with Driver and says that Shannon had his pelvis broken by some of Nino’s “friends” because they were sick of Shannon’s constant overcharging. The story would begin with Shannon being lazy and sleeping in his garage when all of a sudden he is jolted awake by Nino’s friends knocking on the doors of the garage. I would want this chapter to feel very anxious, as if we are in the room along with Shannon, finding out why the gangsters are coming along with him. This would end with Shannon not being able to escape from his debt and being bloodied, sitting against a car just as he does at the end of the original film as the gangsters leave.

Drive 2000s path

Above is the flowchart for the final chapter of the side story, the 2000’s. This centers around Shannon meeting a younger version of Driver, the protagonist of the original film. When Shannon has his one on one conversation with Irene, he mentions how he met Driver “five or six years ago” (from the date the movie takes place which is in 2011). He says Driver just came and knocked on the door of Shannon’s garage asking for a job. Shannon then tested him to see how well he really knew cars, but when Driver impressed, Shannon hired him on the spot even though he paid him terribly. The chapter would start with Shannon working on a car in the garage late at night when he sees a young boy approaching from the darkness. He drops everything and monitors whoever is coming. He realizes it is just a young teenager and proceeds to test him and hire him. This final chapter would put the bow on top of Shannon’s character as being a seemingly genuine man. Throughout the original film, we hear frequently that Shannon is known for his “bad luck”, but with how he interacts with Driver and Irene, we know he is kind.

While the other two chapters focus more on his sleazy, greedy side, this final chapter would show the kind side of Shannon where he does just want to help a young boy in the end. After reading the whole story, I aim for the user to see how multi-faceted and complex of a character Shannon is. He was never written to be the focal point of the audience’s attention, but I hope to shine a spotlight on how integral Shannon is in the world of Drive and how deep of a backstory he has even though he is just a side character.

 

References

“Drive.” IMDb, IMDb.com, 15 Sept. 2011, http://www.imdb.com/title/tt0780504/.

Mock, Liza. “The Comprehensive Guide Process Flow Diagrams & Process Flowcharts.” Gliffy, Gliffy Inc., 11 Jan. 2018, http://www.gliffy.com/blog/the-comprehensive-guide-to-flowcharts.

Ideating the Drive Side Story

In my previous blog post, I spoke about how I rewatched the movie Drive from 2011 and decided to analyze it in its entirety so I could create an interesting side story based off its original content. When the film came out, there was no real hype or buzz surrounding its release, so in some ways it’s just came and went. With the world that was created though, I would love to see certain characters revisited in some way. From this idea, I decided to ideate a way to revisit one of the film’s most important yet mysterious characters, Shannon.

After finishing my map of the script and events of the film, I further focused my attention on specifically information given about Shannon. This includes both things he said about his own past, actions he does which say something about his character, and things others say about him. To achieve this, I fully analyzed my map and wrote down everything I needed before tackling what exactly this new story should be about.

For several days, I went back and forth brainstorming what exactly Shannon’s story should focus on. I am aiming to tell this story within the structure of a guided website where a viewer scrolls and clicks through the story, and this became a big hurdle in trying to ideate the story itself. I am so used to telling stories within the film medium that thinking of ideas built for a scroll was difficult, but after a few days, I think I came up with some solid ideas. I wanted something that would flesh out some of the things brought up about Shannon in the original film, but showed the backstory of some of his personality traits as well.

Screen Shot 2020-03-28 at 2.14.05 PMshannon 2

I ended up deciding on a story told with mostly stylized text and singular images depicting three pivotal moments described in the original film. Each moment takes place in a different decade with the first moment being in the 80s which is Shannon meeting Bernie for the first time on the set of one of Bernie’s films. Bernie tells Driver that he met Shannon in the 80s when Bernie was a producer on action movies and Shannon was the stunt coordinator who gathered stunt cars for Bernie. I also really wanted to have a moment in this portion which depicts Bernie denying Shannon of a handshake just like he did in the original movie. This could show some banter between the two, Shannon being more young and spry, albeit more cocky, while Bernie is showing more of his past gangster side.

The second moment would be from the 90s where Shannon “pays his debt” and has his pelvis broken by Nino’s friends as mentioned in an exchange between Shannon and Nino in the original movie. Bernie says later in the film that Shannon was hurt because Nino’s friends got sick of his usual overcharging so this could possibly start with Shannon trying to negotiate with someone, doing his usual type of persuasion before Nino’s friends come and beat him up. I thought it could possibly be for drunk driving and crashing one of the cars he overcharged Nino for. In this scene, I want to hit home how Shannon notoriously has “not a lot of luck” so one of Nino’s friends should mention this during the beat down. I also think it would be interesting if possible Shannon’s debt was originally going to be paid by his finger being smashed or broken, but then Shannon talks too much like he usually is scolded for in the film and they decide to add on breaking his pelvis for having a big mouth.

The final scene would be in the 2000s where Shannon meets a young Driver for the first time. In the film, Shannon says Driver showed up to his garage “about 5 to 6 years ago” and he ended up hiring him on the spot after he saw Driver had fantastic car knowledge. This would be a great scene to show Shannon’s greed. Shannon already says he paid Driver terribly in the beginning, but maybe right before Driver shows up, Shannon is on the phone with someone trying to make a deal for something, eventually succeeding and making a lot of money before giving Driver chump change. This would also be a great scene to end on because Shannon deep down does seem to be a good person who sees the best in people so we end the collection of stories with him supporting a down-on-his-luck Driver before the events of the film.

Screen Shot 2020-03-28 at 2.14.48 PM

The main focus of this story would be to flesh out Shannon some more and give the viewer a little bit more information on the important events that make up the Shannon we know. I think a bit of mystery is important to how Shannon is so there would need to be some balance. I think these events give a nice, wide spread of all the different stages and aspects of what this character is while still leaving some connecting tissue up to the imagination.

The Deconstruction of “Drive”

The movie Drive, released in 2011 and directed by Nicolas Winding Refn, is one of my personal favorite films of all time. Birthed from a tearful car ride shared between the director and the lead actor, Ryan Gosling, one night after a subpar meeting, this film thrives within its simplicity. Sometimes coming off as a piece of folklore with its straightforward themes and characters, everything comes together to create a tight, fast-paced action story filled with more style than many other movies could even dream of having.

I had never previously studied or deeply analyzed the film scene by scene so I decided why not. This turned into a downward spiral of pausing, rewinding and taking notes for hours upon hours, but it gave me all new types of appreciation for what Winding Refn and Gosling had created. Naturally with any simple, shorter film I love, I would be fascinated with how a sequel or side story in the same universe would go. This sounds like a great idea on the surface since Drive has so many backstories for characters we have yet to get the full story on, but Winding Refn has never been the type to re-hash his work. Within the films he has directed, he only has created sequels for one film, his debut film Pusher. While stuck inside for days on end, I thought it would be interesting to try and create a side story for Drive myself, which is what spurred my deep dive into the movie’s story. There were a few threads I could have tugged on so deciding which one had the most potential was my next big task.

Drive Mind Map

What I ended up creating was a map of the film’s entire story architecture. This took around 3 hours of analysis to actually complete, but I really did not want to leave anything out. In terms of how I wanted to create it, I originally was going to do a branching path type of layout, but as I continued writing, the shape came out to be more of a mind map. I continued on this path because I thought it would be pretty natural of a read for a viewer psychologically. As Nick Babich writes in his article “An Introductory Guide To Information Architecture” about how cognitive psychology is used to design effective information visuals. One of the facets he finds important is visual hierarchy. He says, “One of the essential points to consider for architects is scanning patterns — before reading a page, people scan it to get a sense of interest.” He goes on to mention how the F and Z scan patterns are most used so I made sure that even if my visual isn’t directly a branching path like I originally intended, I wanted it to follow on of these patterns. I ended up creating it in a F pattern, making it read like how anyone would read a novel.

shannon

After going through and picking apart every single line spoken in the film, I found some interesting loose threads throughout. For example, the character of Nino has a sparse backstory so I could tackle what he was like as he was raising up the ranks of Los Angeles’s crime scene. I could talk about Bernie’s past as a gangster before he became an action film producer and met Shannon. I could have even been more direct and create a backstory for Driver, possibly touching on his time before he met Shannon and he was given the garage job. These were all interesting prospects, but the most interesting to me is Shannon. Throughout the film, the viewer gets hints and teases of what Shannon’s past looked like. We learn he is greedy and loud, but genuinely means the best. A theme surrounding him is how he has “bad luck” and thats why he is always in a position of asking for money. There is also a scene near the beginning of the film where Nino asks how Shannon’s bad leg is and Shannon responds saying he “paid his debt”, which caused my switch to flip. I highlighted it on the map to make sure any viewers noticed it and that I could remember exactly where it happened because I want that to be the center of the story I create. A side story about Shannon’s beginnings and the favor he asked which led to his body being broken as payment.

I still need to flesh out the idea exactly, but I know I want the focal point to be this debt that he paid and his relationship with Bernie leading up to when he first met Driver. I think there are a lot of possibilities in what could be included, but since this story is so short form, I needed to make sure my few story beats really hit home. My next blog post will illustrate exactly what the plans are for the story and how my early plans for how I will be telling this story in the end.

 

References

Babich, Nick. “An Introductory Guide To Information Architecture: Adobe XD Ideas.” Ideas, 12 Jan. 2020, xd.adobe.com/ideas/process/information-architecture/introductory-guide-to-information-architecture/.

“Drive.” IMDb, IMDb.com, 15 Sept. 2011, http://www.imdb.com/title/tt0780504/.

“Nicolas Winding Refn.” IMDb, IMDb.com, http://www.imdb.com/name/nm0716347/?ref_=nv_sr_srsg_3.

App Ideation

“Errand Runner” App Presentation

To practice my ideation skills, I tasked myself with thinking of a new app that I had never seen before that I believed would benefit my current lifestyle. My favorite apps currently are ones that integrate perfectly into how I live my life. For example, I have book and music apps that fit perfectly into when I am on my morning commute as well as a social media app like Twitter which helps me kill time when need be. Apps for me should become second nature: completely associated with a certain part of your life to where they meld into your routine or way of life. In the career I have chosen as a video editor, I frequently am confined within the walls of my room in a flow state, working on an edit for a project or a new design in Photoshop. There have been many time where I am working, but I wish I could quickly go out and grab something from a store I want, but I am too held up by work. What if there was an app that allowed me to get in contact with someone nearby who would happily pick up and deliver whatever I wanted? This idea was exactly what caused my imagination to run wild.

“Errand Runner” is the name of this app idea, a place where a customer can get in contact with a runner within a certain distance of them to complete a myriad of different tasks, from picking up a snack at a deli to grabbing you a new package of socks at Target. The only limit to the tasks that can be completed by runners on this app is what the runner is willing to do and how much the customer is willing to spend.

Once I had set the basic structure of what I wanted the gist of the app to be, I settled on two ideation techniques which allowed my mind to run wild: wishing and brain dumping. I felt like the basis of the app was solid and could apply to many quick-living, hard-working people’s lives, but the specifics would be what I needed to flesh out. This app lives and dies on whether or not people can receive what they want to receive the way they want it and on time, so using wishing I tried to address as many complaints I could think of under a 10 minute time limit. This shorter time limit fueled me to not overthink any question, but go purely off instincts. After finishing, I realized I touched on what many people’s gut reactions and responses to an app like this would be so I moved on to brain dumping. In this phase, I wanted to touch on any loose mental threads I had in terms of how the app would work. Here, I touched on the maximum distance a customer and runner can be apart from each other before they cannot match, whether or not this should be a subscription service or a pay-as-needed service, and more questions I wanted to mull over.

When I had finally completed this exercise, I realized how the ideation process allowed me to really fill out my app idea. What started as a small description turned into a multi-faceted plan, all caused by only a few minutes of ideation. I also realized how different ideation techniques can bring about different ways of thinking. The wishing phase felt much more like problem solving while brain dumping was more general idea generating. If you want a fully fleshed out and planned project, I would highly recommend attempting every ideation technique possible so you can see your ideas from every angle you can. You never know which one could lead to a breakthrough.

 

References

Dam, Rikke Friis, and Yu Siang Teo. “Introduction to the Essential Ideation Techniques Which Are the Heart of Design Thinking.” The Interaction Design Foundation, 2019, http://www.interaction-design.org/literature/article/introduction-to-the-essential-ideation-techniques-which-are-the-heart-of-design-thinking.

Frey, Chuck. “The 7 All-Time Greatest Ideation Techniques.” Innovation Management, 7 Jan. 2020, innovationmanagement.se/2013/05/30/the-7-all-time-greatest-ideation-techniques/.

Mazur, Ben. “Five Ideation Techniques to Boost Creativity.” Ignitec, 7 Nov. 2018, http://www.ignitec.com/insights/five-ideation-techniques/.

A Mind Map on Ideas

IMG_3320

To get myself into the groove of ideation and prototyping, I decided to research different form of ideation techniques. Once I began, I realized how many different techniques there actually are so this led me to immediately implement one of the techniques itself: mind maps. Within the mind map, I evaluated all of the different ideation styles I found especially useful so I can reference it again later whenever I needed it.

Image result for mind map

As Rikke Friis Dam and Yu Siang Teo write in their article “Introduction to the Essential Ideation Techniques which are the Heart of Design Thinking”, ideation is fueled by “…combining your conscious and unconscious mind. You combine your rational thoughts with your imagination.” This sense of looseness mixed with rigidity led to how I created the mind map above. I simply grabbed all the different colored markers I could and wrote down the barebones of what I learned. For each color and symbol, whatever my imagination jumped at first was what I did, while I methodically chose which words and phrases from each technique description I found most useful.

Through my research, I found out how useful mind maps themselves could really be. Mind maps are a fantastic way to really draw out and examine ideas or problems in a way that is visually stimulating. This visual aspect, especially for me personally, is what sticks out to me because mere black words on a white page are not enough to fully stick ideas in my brain or trigger maximum creativity. Seeing the bright colors and the icons, drawing the ideas flowing from one to another, emphasizing certain words with different sizes: these are the things that bring visual learners and thinkers to life.

Image result for visual learner

These visual ways of thinking feel fresh and new. These invigorating ways of ideation are written about in the book “Universal Methods of Design.” The authors state that visual ideation techniques like the mind map are techniques, “…that design teams can use to visually brainstorm information in order to disrupt and challenge old patterns of thinking. By using these frameworks, new knowledge and meaning can emerge, with the added benefit that the rigor of the brainstorming session is visually documented within the framework itself” (pg. 22).

When creating this mind map, I also learned of whole new ideation methods that I had never heard of previously. I would guess that many people at my age or older in the same field as me have heard of brainstorming and mind maps before, but something like worst possible idea and wishing were completely new to me. Just from the names of them, I could not get the full grasp of why these techniques would be helpful, but I fully understand now because of experts like Ben Mazur of Ignitec. He wrote about the worst possible idea method in one of his articles, stating it “… reduces or removes the fear of criticism and frees the flow of discussion because bad ideas are easier to find.” Using these brand new methods I have discovered along with tried and true ones like the mind map, I believe that pre-production on future films or writing new script ideas will become much more of a fleshed out process for me than it has been in the past. I am the type of creator to go with their heart first, so being able to find new ways to thoughtfully approach new projects opens up doors for me I previously did not know were there.

References

“08: Brainstorm Graphic Organizers.” Universal Methods of Design, by Bruce Hanington and Bella Martin, Rockport, 2019, pp. 22–23.

Dam, Rikke Friis, and Yu Siang Teo. “Introduction to the Essential Ideation Techniques Which Are the Heart of Design Thinking.” The Interaction Design Foundation, 2019, http://www.interaction-design.org/literature/article/introduction-to-the-essential-ideation-techniques-which-are-the-heart-of-design-thinking.

Frey, Chuck. “The 7 All-Time Greatest Ideation Techniques.” Innovation Management, 7 Jan. 2020, innovationmanagement.se/2013/05/30/the-7-all-time-greatest-ideation-techniques/.

Mazur, Ben. “Five Ideation Techniques to Boost Creativity.” Ignitec, 7 Nov. 2018, http://www.ignitec.com/insights/five-ideation-techniques/.

August Aerials Travel Brochure

August Aerials Brochure FINAL FINAL VERSION2

August Aerials Brochure FINAL FINAL VERSION

For this project, I was tasked with creating a travel brochure for a fictional travel agency. The brochure would be a trifold and I had to create both the inside and the outside of said brochure. For the agency, I had to think of a brand new name, style and logo to market them with. This was a big undertaking, but an exciting one at that. From the beginning, I wanted to use the multitude of photos I took during my Japan trip last summer (which I have used many times in the past for other projects on this website) because I had taken a lot of quality pictures during my week long stay. After deciding which place I wanted to use, it was time to create my agency.

The first thing I tackled design-wise was my logo. In Microsoft OneNote, I drew dozens of different simple, yet bold logos I thought would look nice on the side of a plane or on a uniform. I researched different airline logos and saw many of them were with an abstract shape or just the title of the company, so I decided on a shape. The shape I went with is supposed to be a simple interpretation of some sort of flying vehicle or animal. The red shadows underneath are supposed to depict the speed of travel the company provides, and the cream circle encompassing it all gives a solid base for the logo to stand on. The colors I chose were merely off the top of my head. I love the clean look of green and red together and I wanted the cream to give a warm, inviting sense to the company. The title “August Aerials” was created through much research of different different adjectives to fit with a second word meaning flight or travel. After over an hour of searching, I found “august” which is both my birth month, but also means “inspiring reverence or admiration; of supreme dignity or grandeur.” The alliteration made the title roll off the tongue and all together, it just sounded flashy and confident. I also wanted to portray this within the company font. I felt this style really brought out a suave style I wanted to portray, as well as confidence with the large, arching crosses of the A’s. The logo work was done in Adobe Illustrator while the font work was all done in Adobe InDesign.

When designing the brochure itself, there were a few certain vibes and aspects of Japan I wanted to show. I wanted the overall design to be sleek and cool while also a little worn down. I wanted to show off the younger side of Japan while also acknowledging its history at the same time. Each facet of the design points to all these things in different ways.

The front cover depicts a collage-esque interpretation of the Japan flag, with the white being photos of Japan I took and made black and white in Adobe Photoshop and the crimson circle housing the title of the Japan travel packages being showcased. The “A Japan Quest” font is meant to depict the street art that is popular within Japan’s streets. the “August Aerials Presents” is in the August Aerials font I had chosen, with a small “augustaerials.com” on the bottom for those that want more information. This contrast between the unapologetic graffiti text style and the clean script causes a different, yet cohesive vibe for the piece. Ellen Lupton talks about this kind of style in her website “Thinking with Type.” She says, “Strive for contrast rather than harmony, looking for emphatic differences rather than mushy transitions. Give each ingredient a role to play…” (Lupton). Under the Japan Quest text, I also placed the translation of “A Japan Quest” but in Japanese. This type of subtitling is very popular in fashion brands recently so this with the graffiti font nods to the youth. The pictures themselves also show different aspects of Japanese culture, the top photo being of gaming icon Kirby, showing Japan’s thriving electronic industries. The “Glico running man” sign on the left depicts Japan’s cities and nightlife while the picture on the right of a temple shows its history. The bottom photo is of the famous Shibuya crossing, giving more love to everyday Japan city life. The crimson circle originally was flat in my early designs, but with different re-edits, I decided to give it some depth by making it look three dimensional in InDesign. This made the title really stand out and become an easily identifiable focal point. In their “5 Steps to Visual Success”, Kim Golombisky and Rebecca Hagen’s number one rule is “Establish a clear focal point. A properly proportioned photo and large contrasting headline provide a clear eye entry point into this design’s layout” (pg. 35).

The border for both the inside and outside I created myself in Adobe Illustrator. I based the design of a classical Japanese texture design I found depicting waves so I re-created it using the August Aerials colors.

 

Image result for circular kimono designbackground

 

 

 

 

 

 

Once it was created, I shaped it in InDesign using frames in order to get the look I was going for. The inside of the brochure uses the same fonts for the titles, this time without any stroke. I placed in the “flights as low as $700” to give the brochure more of a real, informational feel since I decided to go more visually heavy for the overall design. the background uses a lighter form of the cream color seen in the August Aerials logo along with a vintage overlay I used to make it seem more like some sort of scroll. To follow the design of my logo, I wanted the picture inside the brochure to have round frames to keep things feeling coherent. I also gave each photo a green ring around them to make them pop more from the background. The fonts stating each place shown in the pictures is the same graffiti style font used in the “A Japan Quest” title. This gave a nice contrast to the worn in background I made. My goal with the pictures was to have very visually different vibes with each one to show how varied the culture of Japan is from city to city.

In the end, this came out far better than I originally had designed it in the preparation phase. With each new edit and set of eyes I had sent the designs to, it got better and better in my eyes. While I am sure some people would want more concrete information in their brochure, I really wanted to focus on how unique Japan is visually and how no matter what someone likes, there is something for you.

 

References

“Chapter 4: Layout Sins.” White Space Is Not Your Enemy: a Beginner’s Guide to Communicating Visually through Graphic, Web & Multimedia Design, by Rebecca Hagen and Kim Golombisky, CRC Press, Taylor & Francis Group, CRC Press Is an Imprint of the Taylor & Francis Group, an Informa Business, 2017, pp. 33–42.

Lupton, Ellen. “Text.” Thinking With Type, 2009, thinkingwithtype.com/.

Gold Video Website Design

Gold Video Wed Design Final

To take my fake video rental company Gold Video a step further, this week I created a website mock up in Adobe InDesign. Above is the desktop version of how I pictured the website looking. In the ideation process, I wanted to stick with the retro, 80s/70s vibe I was going for when creating the logo and the print advertisement. The colors of the site was a huge focus in creating this. I wanted the whole thing to have a similar color scheme while also not being a purely golden splash across the design. Lindsay Kolowich writes about the importance of color schemes in her infographic entitled “The Anatomy of a Winning Website Design”. She writes, “A website having a consistent look and feel in terms of logos, fonts, colours and language will create trust amongst website visitors and help strengthen your brand’s identity.” I aimed to achieve this by only using that appeared in the original logo design of Gold Video. Since I chose to create a company with a color within the name, I wanted that color to obviously be the focal point. Each word incorporates some form of gold, either in the fill or the stroke, and every stroke color is seen somewhere in the company’s logo. The only outlier is the red which I wanted to use since it works with gold so well and fits within the overall vibe of the company still.

I also set an overlay of vintage dust and scratches over the dark gray background I used to enhance the retro feeling. The lines used under the Gold Video header and in the bottom right corner are used to simulate design aesthetics of old.

Gold Video Mobile Design Final

Here is the mobile version of the desktop website I made. This is made with the template of my personal phone, an iPhone 7 Plus. The header and primary navigation are mostly the same as the desktop version, only adjusting words for size to fit the phone screen. I also added another logo on the right side of Gold Video to add some balance to the design. Most of the design theory is the same here, but I did want something substantial to differentiate this design from the first one. As is in both designs, there is the primary navigation which is “Films”, “TV”, and “Games, all leading the user to specific pages devoted to each of those mediums where they can choose what they would like to rent. The secondary navigation is the “Your Bag” and “Log In/Sign Up”, the former being a page where a user can see all the entertainment they have added and wanted to check out to rent and the latter being where a user can enter their account information. The “New!” movies section is all the new movies that have been added to the service and are now available for rental. The “Popular!” section is movies that a majority of other Gold Video users have also added to their bag or rented.

For the mobile version, I wanted to add another section entitled “Recommended!”, where based on a specific users rental history, Gold Video suggests entertainment they will also likely enjoy. The longer format of the mobile version allowed me to add this section with minimum amount of on-screen clutter. For this design, I wanted the least amount of clutter as possible to make the user’s swiping and touching experience an ease. Parham Aarabi suggests a designer to account for these motions, stating “…if you have a user interface control that requires motion (i.e. a slider, a selection list, etc.), keep in mind how a user is holding the phone and that certain motions are generally more natural for the user.”

Once I completed these two designs, I was happy with how they came out. It took some time to create things like the frames for each poster, but it came out exactly how I envisioned it in the preparation phase.

 

References

Aarabi, Parham. “5 Tips for Creating Great Mobile App User Interfaces.” VentureBeat, VentureBeat, 12 Dec. 2018, venturebeat.com/2013/04/08/5-tips-for-creating-great-mobile-app-user-interfaces/.

Kolowich, Lindsay. “The Anatomy of a Winning Website Design [Infographic].” HubSpot Blog, 9 Oct. 2015, blog.hubspot.com/marketing/anatomy-web-design.

McQueary, Alex. “Website Anatomy 101: Web Design Vocabulary You Need to Know.” Wired Impact, 1 Mar. 2019, wiredimpact.com/blog/web-design-vocabulary-101/.