top of page

D-32

GAME DESIGN

TYPE
game design
interface design
(4) group project
 
ROLE 
illustrator, concept creator, UI designer
 
SKILLS 
sketching, ideation, storyboarding, researching. drawing/rendering
 
TOOLS 
photoshop, after effects, JAVA
 
TIME 
fall 2015
2 weeks
 

D-32 is an interactive RPG survival game created through handdrawn and manipulated images that take a unique spin on the typical post-apocalyptic game genre. Here, the player takes on the role of a dispatcher who can only communicate through a radio device with the two protagonists of the story. Through interconnecting choices and a multilinear path, the player must help the characters get to safety. 

 

screenshots of images in game

ROLE

In this project, my main role was to create the illustrations in the UI and creating the UI itself--both design and the actual rendering, I also did the storyboarding for many of the scenes shown on the screen and worked with my group members in creating a strong and compelling storyline. I worked heavily in the concept and ideation of the whole project as well.

PROCESS

initial concept

Our initial project requirements were to make an interactive multi-linear narrative. We decided to expand on the idea and make an interactive game out of it. Our initial concept was actually very different from the current game right now--it started out as an interactive fairytale in a storybook-style format. However, even after developing both the storyboards and the UI, we found that we kept running into cliches and conceptual issues. Although we tried to fix it, it was not working out for us and from what i've learned in previous classes was not to get too married to an idea that just wasn't working.

storyline of original interactive narrative idea

 

initial storyboarding ideas

I suggested an idea spin-off of a survival game very different from our original idea to help us get out of the rut created by our initial idea and although it was hard to leave a concept we already put time in, it was ultimately the better choice. 

axure wireframing

idea pitch for new concept (discussion + sketches)

storyline development

The storyline was heavily team-based and I learned that by working cooperatively and trying to find compromises, we could develop a stronger narrative. I think it is really important to hear out other peoples' ideas as everyone has different experiences in their lives and can offer something to the story that one person may pass by.

pathing of narrative and disscussion on whiteboards

cleaned up final version of pathing narrative

After figuring out the pathing system for the narrative, we faced the daunting task of writing the script. Writing this part made us really think how we wanted to present our game; was the player going to have a more commanding voice and lead the characters like puppets? Or were we going to add dimension and allow the characters to react to the players decisions? Choosing the latter made it much more difficult to write but ultimately made it more believable. 

shared google document where we could all work on the scripts' first iteration before the final edit by another team member

storyboarding

After establishing the story, we moved onto storyboarding which another team member and I took over for. While creating these storyboards, we had to keep in mind the perspective of how the images were going to appear to the dispatcher. Our concept was that the console device would take random snapshots that the dispatcher would control (via AI for now) or that the protagonists would use to take photos with.

storyboarding scenes to draw through sketching (total :36 seperate images)

console (UI design)

I created several different iterations of the console, based on my original idea and the input of other team members. I learned a lot about researching from my team member as she suggested and helped me look at old radios to take ideas from, Although we wanted to have our console animated as well, we knew it was not as important as getting to work all done--after all, we could always tweak it later. 

different iterations of the console before settling on our final version

To create a good console, we kept in mind that people generally read left to right, which is why we ultimately decided to switch the side of the buttons so people would read the text first before moving onto the possible answers. We made sure that our story concept fit with the UI as well by making it dirty and grudgy to fit the story's mood. Finally, we took out the clock as it had no purpose in the console and changed it into a radio dial which was supposed to be interactive to change channels.

illustrations

finally it was the long and arduous task of drawing all the images. I learned a lot about time management here since I only had three days to finish 18 images on top of it being finals week. I wanted to create quality but I had to sacrifice some of the details in order to finish it on time. This strengthened my management skills and helped me choose what was important, and what was not.  

drawing in photoshop with folders to organize each drawing

gif of a scenes' process drawn in photoshop

after all the images were drawn, another team member made them into gifs and another member who did the coding put the images in. After final debugging and finally figuring out how to make the code work (one of the gifs was broken and had to be replaced), we finally finished.

FINAL THOUGHTS

I thouroughly enjoyed working on this project, despite it being stressful and challenging and I feel that I have learned more than just UI and illustration but also teamwork, time management and problem solving, I learned how to not get 'married to an idea' that is not giving results. Sometimes, it's good to look outside the box if the first idea isn't really working out.

back to 

top

 

 

 

bottom of page