Final Project


Link to comic:

The final project has been a time-consuming yet fulfilling one! NM3228 has got to be my favourite module this semester and possibly my entire NUS life (well this is only my 3rd semester but oh well). It’s the first time I’m willing to spend so much time and effort doing my assignments but still remain happy after that =p

Participation For this project, I was in charge of developing the website as well as collating the developmental document with the assistance of my group mates. Initially, we considered co-creating the creatives, but we ultimately appointed 1 person to be the artist to avoid any potential clash in art styles, which might affect the visual unity of the final prototype. 20 pages worth of content for the developmental document seemed daunting at first, but after I started to really think about the substance of our work and justifying everything in words, I realised that if I could, I could easily churn out more than 20 pages for the report… Just kidding, 20 is enough =p I’m extremely grateful to my group mates for giving me pointers along the way and helping to vet through the documents and dreamweaver drafts without fail 🙂

Problems Encountered Web-developing was the biggest problem I encountered in this project as I had no prior experience in Adobe Dreamweaver before taking NM3228. I am extremely thankful for the Dreamweaver ‘crash courses’ that my tutor, Jing, has scheduled during tutorials. Upgrading from Adobe CS6 to Adobe CC generated the most problems in my course of work. My laptop, that originally had Adobe CS6, had to be sent for repair in the middle of the project, disrupting my flow of work. I also lost all my data from the reformatting of my computer, and I had to upgrade from Adobe CS6 to Adobe CC. There are several differences between the two versions, (e.g. the usage of “Layout” and “Draw AP Div” was taught in class but the features were removed in Adobe CC) which I had to get used to from scratch in the limited amount of time I had. Luckily, I managed to solve most of the web-developing problems by learning from online tutorials and constantly experimenting with the software.

Lessons Gained When in doubt, google! I was faced with countless obstacles while developing the website due to my lack of experience in Adobe Dreamweaver, but the useful tutorials that I found online helped me piece everything (images, audio, animations, etc.) into a complete work. At the same time, I have acquired valuable web-developing skills that can be used for future works.

Transferable Knowledge and Skills I am intending to pursue other Interactive Media Design modules in the upcoming semesters. My newly acquired skills from Adobe Illustrator, Dreamweaver and Photoshop (learnt them all from scratch through this module) will definitely be transferable to those modules. The skills will also be extremely beneficial to my part-time job as a social media content manager, since it is often expected of me to come up with creatives for clients.

Teamwork Despite some differences in views along the way, I am glad that everything worked out well in the end. I am very satisfied with final prototype and this work would not have been a success without my wonderful group mates, who have contributed a lot in their own ways.


Assignment 4

My mac had to die on me at such a random timing…  According to the service centre, the hard disk has to be replaced and all data will be lost. I’m relieved that all my school stuff are saved in Dropbox, including this assignment, if not… Oh well I should just save everything into Dropbox next time.

Anyway, I had to do the rest of the assignment using the computers in school. Unfortunately they didn’t have the font I used in my comic (and I can’t download them because the admin password is required), so I couldn’t really do much in terms of changing the visuals. I really wish I could have done the hover effect for the choices “Run away?” + “Apologise” and “Forget it!” + “I’ve had enough!” though (make the images change colour upon mouse hover).

Develop a multi-linear visual story in a form of web-based sequential art piece based on your Assignment 3.

1. In order to fold back the 2nd choice, 2nd option to the common ending (as seen in the image below), I put arrows to link the words “Hey Hey Hey Hey…” to have readers scroll back up. However, my classmates said that it looked weird.



Okay it does look quite weird.


2. Don’t know where to scroll towards due to the large panels


I originally put thought bubbles to indicate the 2 choices, but I thought it would be clearer and neater to have them in separate pages.


3. Somewhat confusing story line
So is the girl having a dream or not? Does the boy exist in real life? Do they suffer from some kind of memory problems? Are they mentally sound?

I have decided to leverage on this confusion since the title “Remembering/Forgetting” has a bit of ambiguity to it anyway.

Below are the screenshots of my final submission. It’s the entire web comic zoomed-out with all the panels to give you an overview:


The first page of the web comic leads to the first set of choices for the viewer


Choice 1, option 1: Run away


Choice 1, option 2: Apologise


Both options (“Run away?” or “Apologise?”) fold back to this page, where viewers are met with another choice.


Choice 2, option 2: “I’ve had enough!”


Choice 2, option 2: Forget it

Both options (“Forget it!” or “I’ve had enough!”) fold back to the same ending.

The comic was originally in a single page, but I separated them into several pages to ensure that the viewer will not face the problem of not knowing where to scroll to. Also, having several pages allows me to create suspense at the end of each page.


The viewer has to click on either “Run away?” or “Apologise?” to proceed.


The “Next” button turns from white to yellow upon mouse-hover


My story:
There are 2 characters in my story, a boy and a girl.

Part 1
The comic starts with the boy reminiscing about his past, remembering a time where he accidentally injured someone with his soccer ball. However, he has forgotten what he did at that time (viewers are to choose between “Run away?” or “Apologise?”). He also fails to remember who he injured because by the time he reached the place where the accident was, the victim (the girl) has disappeared.

Part 2
All the above scenes becomes a scene in the girl’s dream. The girl has also forgotten what happened after she was injured by the ball because she suffered from a concussion. Whether this dream is in fact a reality is up to the viewer’s interpretation. The ambiguity somehow relates to the assignment’s title “Remembering/Forgetting” doesn’t it =p

The comic progresses with the girl getting hit by a soccer ball yet again (how unlucky).  Viewers can help her choose between the options “Forget it?” or “I’ve had enough!”. Whatever option is chosen, the girl will eventually meet the boy.

The story concludes with the girl saying:

“Wait… This can’t be true. Aren’t you the man in my dreams?” *Deva ju* =p


Assignment 3

Create a linear visual story for display on a web browser and using Scott McCloud’s mad scientist approach to create a continuous flow of storytelling experience. The title, a lonely track (or trek?), can be interpreted literary or metaphorically, and you are constrained within 10-20 panels to tell a meaningful short story. Take advantage of the browser’s strength to enhance your audience immersive experience.

My web comic:

My comic talks about a boy and a girl who suffer from their own set of problems and feel unloved and lonely as a result.

I adopted a zig-zag approach (top-down -> left-right -> top-down -> left-right) to my web comic.

In this web comic, I attempt to establish a connection between the 2 main characters (the unloved boy and the unknown girl) by making use of:
1. Direction of the comic (downward-scrolling)
2. Words (“I’m just the kid that no one likes” vs “I’m just the kid that no one knows”)

The stories of both characters are told in a downward-scrolling direction so that there is a sense of coherence and relation between the two.

Screen Shot 2014-10-10 at 2.58.21 am

The comic starts off with a boy who feels that he is disliked by every one.

Screen Shot 2014-10-10 at 4.52.55 am

I later introduce another character, this time a girl who feels that she is unknown to the world.


I wanted to make a clear distinction between the boy and the girl’s stories, and this is done so by separating their stories (vertical scrolling) with a horizontal-scrolling set of panels.


This is the entire horizontal strip that the viewer is supposed to scroll through from left to right.


I showed my draft to several friends so that I can see how they scroll through the comic and whether they are able to scroll in the correct direction. My original draft had each panel filling up almost the whole page, and some did not manage to scroll in the correct direction as a result.


Screen Shot 2014-10-10 at 3.16.04 am

Some people did not know that they had to scroll rightwards. This problem was solved after I zoomed out the entire page such that part of the next frame could be seen. To ensure that the direction of the comic will be more obvious to the viewer, I decided to resize (smaller) all the images for my final draft.


Screen Shot 2014-10-10 at 2.58.45 am

Now that the images are smaller, it is more apparent to the viewers that they have to read and scroll rightwards.


I originally set all the frames to “relative position” in Dreamweaver because I wanted the frames to be centralised. However, I found out that due to the horizontal-scrolling frames, the vertical-scrolling frames will shift to incorrect positions (as seen in the gif below), so I changed the vertical-scrolling portion for the girl to “absolute position” instead.





While the title “A Lonely Trek” seems rather depressing, I decided to end off the story in a more positive note. As mentioned in my web comic, the rainbow always comes after a storm. It doesn’t hurt to be more hopeful. Don’t you agree? 🙂


Heres an image of my final web comic! Click to get an idea of how the web version might look like (it might take a while to load).

A Lonely Trek

Assignment 2 – Final

Here’s my final version for assignment 2!

A2_Yap Yoke Ling

This comic highlights, in a light-hearted approach, why some Singaporeans find it hard to find jobs. To highlight the increasing frustration of the subject, I have incorporated a gradual change in colours throughout the 6 panels where he is searching for a job online.

Class Exercise 6

At Work Inside Our Detention Centres: A Guard’s Story

1) Identify the different techniques used (as discussed in McCloud’s reading) in at work inside our detention.
2) Identify the ways in which some techniques are unique in web media, which are not applicable to print media.

The following points are what we’ve discussed in lecture:

– The comic is not limited by space, giving a sense of infinity.

If the above were to be printed, the reader might read the frames as a whole, although it is meant to be read from the top.

The effect would be difficult to achieve if it is in a printed book (unless the comic is folded such that it reveals only the top part first).


– Frameless; big space between each image – connotation of isolation

– Pacing of the reading

– There are several images of houses in the comic and they are not bounded by frames. This makes it less grounded and gives an impression that the house is rootless

– Leverages on scrolling property in a webpage

– There are different sizes for different frames

– A small selection of tools are used; but is still able to enhance the storytelling aspect of the work.