Art Direction || Project 2 & Art Guide with Output

25.11.2025 - 30.12.2025 || Week 10 - Week 14
Hanson Pea Wei Hao || 0359463
Art Direction || Bachelor of Design (Honours) in Creative Media || Taylor's University
Project 02 & Art Guide with Output 

Lists





Instructions

 

Progress on Art Guide:

While developing our interactive comic, we also produced an Art Guide to keep the project consistent across the team. This document outlines the key rules and visual standards we needed to follow, functioning as a shared reference for everything from concept development to marketing materials. We structured the guide into five sections: Branding & Merchandise, Social Media, Animation Art, Interactive, and Entertainment.

For my part I making for Interactive art guide as I gonna cover the main part which is making all the ui design and creating the interactive comic "alive".  

When designing this page, my goal was to make interaction rules easy to understand at a glance. Rather than relying heavily on text, I focused on visually showing how decisions branch, how feedback is delivered, and how users progress or restart based on their choices. This approach helps everyone quickly grasp the interaction logic without needing long explanations.

I split the layout so the left side explains the decision structure, while the right side focuses on user feedback and responses. Including visual examples helped connect our ideas to real interactive experiences, making the guide more practical and easier to apply when designing future scenes.

Fig 1.1, Interactive Art Guide

Progress Interactive Comic:

To be honest I am very angry for what my teammate making. This is because I should get the final product[All Scene of Comic] and working on figma for the interactive comic 2 week ago. But they decided to give me at the final week and make my work a bit rush. The most angry part is the final product[All Scene of Comic] is look like a draft. 

All the process is going great like final lining and colouring. Not sure what happen in the Shading part, the person who do shading cut our story and remove a lots of scene and make the story become confusing. The most important part is after he add the shade, all the page back to draft. The shading is poorly executed, with inconsistent lighting and flat tonal values that reduce depth and clarity across the panels.

Fig 2.1, "The Final full comic" I think very bad

So after a bit struggle about a crazy idea, I decided to work on it from the based. which is redraw the comic in the limited time, but I still done the figma for this version in case if I cannot done in time.
Fig 2.2, the initial interactive comic

So I reference to one of my favourtie game which is Henry stickmin collection as most of the idea, like the quote and style of selection. I rethink and rewrite all the quote and think about how many story should I add to make the story flow be clean again.

First I find out we don't have a cover for our game. I feeling very weird if the prototype is start from the  first story, so I decided to make a game cover which referene from a lots of mobile game style and create a level selection then then can choose their favourite scene to start.

Fig 2.3, Game cover and Level selection

To make the game selection be more obvious, I create the button with animation.

Fig 2.4, Button with animation

Fig 2.5, Showcase of button Animation[Youtube]

After that I remake and add version for for the all comic scene, to make it more look like my ideation final product. 
 
Fig 2.6, All The scene of comic [AI]

After I have every scene I need, I start working on interaction button and animation in Figma. in the original, they forgot to make the decision part. So I create a special scene for decision which Gust (The duck) into his mind and this about whcih idea should it's work on. And to make the button selection more obvious



Fig 2.7, Decision Part & Button Animation  [Figma]


Fig 2.8, Lining all the animation [Figma]

After I done all the things, I let's yong and felicia to be my tester. For Yong part, he hlep me to confirm all the line is function and no bug. For Felicia part, I working with her animation plan and to confim all the animation work like what her art guide mention and correct all the animation.

In the end, here will be a short show case for the game:

Fig 2.9, Showcase for the interactive comic

Final Outcome

Fig 3.1, Individual Weekly Report till Week 14 [PDF]

Fig 3.2, Final Project Management [PDF]

Prototype of Final gameplay:

Fig 3.3, Final Interactive Comic - Born Distracted [Figma]

Fig 3.4, Art Guide for Born Distracted[PDF]

Fig 3.5, Art Guide for Born Distracted[ Book Style-PDF]

Fig 3.6, Art guide Presentation and interact comic short showcase[Youtube]


Feedbacks

-

Reflections

Looking back on the production of "Born Distracted," I feel a deep sense of pride. Seeing our comic successfully address the Quality Education SDG and receive approval from Mr. Kamal is a major milestone. However, the path to the finish line was much more demanding than I initially anticipated.

My primary responsibility was the planning for bad ending, and planning of UI design and animation. I wanted to ensure the interface was polished and the interactive elements felt fluid. However, as we neared the final stages, I had to step far beyond my original scope. One of my biggest hurdles was managing my time across multiple modules, but the most unexpected challenge was maintaining the integrity of our work when a group member made unilateral, "silly" changes.

I encountered a significant setback when a teammate added shading that unfortunately regressed our "final" look back into a "draft" quality. Furthermore, he also altered the story flow I had worked so hard to establish and to protect the quality of the project, I took it upon myself to 
Restore the Narrative and Visual Remediation. I had to redo the coloring and correct the shading across several scenes to meet the standard I envisioned. other than that I need to reintegrated the story segments that had been deleted to ensure the flow remained impactful.

Despite these frustrations, I am very satisfied with the creative foundation I built. I successfully developed the two path structure that leads to a single, impactful conclusion which is a logic puzzle that was difficult to balance but rewarding to complete. I also pushed myself through the the comic and complex perspective drawings. While these were technically exhausting, they provided excellent practice and significantly improved my skills.

While the extra workload caused by team misalignment was a struggle, it reinforced my commitment to the project. I am incredibly proud of the final interactive comic. It isn’t just a project anymore, it’s a quite good quality piece of work that I am genuinely happy to have shaped from the early bad ending designs, and 
 interactive UI to the final comic.
                                                                                                                                                                                                                                                                                       Back To Lists

Comments

Popular posts from this blog

Game Development || Task 1&2 : Game Design Document & Art Asset Development

Information Design | Exercise