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


2 thoughts on “Assignment 3

  1. […] and new-found friends! I also managed to work on, receive feedback, fine-tune and finally submit my web comic assignment after so many arduous […]

  2. […] Task: Develop a multi-linear visual story in a form of web-based sequential art piece based on your Assignment 3. […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: