For this assignment, we have to form a group of 3 to create a story book. This assignment tests our development for visual narration skills.

I teamed up with Wei Chun and WanTing for this assignment.

The original theme is “God created fly and forgot why”. However, we decided to do away with this theme and come up with one that we are comfortable with.

Here are the requirements:
- Design and prepare minimum 12 pages booklet for children (Ages 6-9)
- Book size 7 by 8.5 inches
- Don't use more than 900 words for copy (story)
- Pay attention to layout and information flow
- Use appropriate type and colors
- Prepare design document

And we have to:
1. Write a story based on the theme (keep the story simple)
2. Play with type and layout
3. Use clip art and photographs
4. Try to use type and layout to structure the information
5. Prepare design document
6. Pay attention to consistence

The objectives are:
– Proper usage of type and content organization
– Developing skills in defining visual treatment specifications
– Understanding the process and importance of creating design document


For our group, we have come up with 2 story lines. One is titled “A Bee’s Tale” while the other is named “Dragon Boy”.

For “A Bee’s Tale”, there is a Baby Bee called Bee Bee which is very curious about the surroundings. He wishes he could venture outside his beehive to explore the world.

One day, his parents decided to let him go out and collect nectar at a nearby flowerbed. Before he goes, his parents warned him about the dangerous 8-legged creature called Spidey. So, off Bee Bee goes.

However, instead of collecting nectar, he decided to explore around. As he flew, he saw an interesting thing and flew closer. Little did he know it is the spider web and home of Spidey.
He got stuck in the web and realized Spidey was approaching. He regretted not listening to his parents’ advice.

Spidey was about to eat Bee Bee when a loud “STOP!” came of outwhere. Bee Bee’s parents to the rescue!

Spidey and Bee Bee’s parents had a big fight and they finally defeated Spidey.

After Bee Bee got out of the web, he apologized to his parents and promised to listen to them forever.

Actually, for this story, the thought process flowed quite smoothly. The ideas for each frame just keep on coming. When we approached out tutor for a consultation, he advised us to think of extra frames as to how does Bee Bee’s parents know their son is missing and what are their responses.

For “Dragon Boy”, there is this boy who is lying on the bed, thinking about the dragon story his mum just told him.

Suddenly, there is a rumbling sound outside his window and he saw a huge eyeball. He went to take a look and lo behold, there is a dragon out there.

Both of them became friends and the dragon took the boy out for a ride. Then he reaches the dragon’s home. He made friends with the dragon’s pals and he was having so much fun there.

However, happy times are not forever. The dragon has to bring the boy back and the boy was very upset.

When the boy reached home, he asked the dragon to visit him again.

Actually, these are all dreamt up by the boy.

During the critique session, the class was a bit amused by the ending of “Dragon Boy”. The overall comment was that both our stories lack a punch and we need to include a more significant twist in our story. There also need to be a moral for our story so children can learn some thing from it.

After much consideration, we decided to continue “A Bee’s Tale” since it is much easier to draw and there is a more obvious moral behind our story compared to “Dragon Boy”.

Question 4. For a not-so-good website, present the findings to the class by explaining why it is not good, and propose improvement as many as you can (Present using power point with time limit of 3-4min.)

For the not-so-good website, I chose the University of Kansas.

Below are my explanations as to why this is not a good website:

•No unity
- Name of university on one side, whole chunk of information on the other
•No color harmony
- Orange (distrust, sadness) and blue (depression) competing for attention
- No color contrast
•Proximity
- Words are grouped too closely
•No symmetrical balance
- Blue half occupies slightly more space
- Information all on right side
•No emphasis
- Where is the point of focus?
•No flow/continuity
- Name straightaway branches out to information

Here are my proposed improvements:



Firstly, I suggest using a single color scheme for the background so there is unity throughout. This shade of blue is suitable as it represents wisdom and intelligence.

Secondly, I simplify the hyperlinks by only putting in the important ones. The others will be found at the top so there will be continuity. The links will have drop-down menus so it does not give the website a messy feel.

Thirdly, I suggest they use a pyramid-shaped structure for their website. Therefore, the viewer could easily comprehend the website i.e. the name of university at the top and it branches out to the necessary links at the bottom so it has a more structured look.

Question 3. Among the five websites given please choose one good design and one ‘not so good design’. Please explain why it is good and bad.

Good design:


For the good design, I chose the University of Louisiana.

First of all, I like the outlook as it is aligned center of the web page which allows me to a clear view of everything. I do not have to scroll up and down to get the information that I want which is a very tedious process.

Secondly, it uses only one main color which is red. It is only used sparingly so the viewer will not feel tired if he views the website for a long time. I also like the white background as it gives me a clean and simple feel.

Thirdly, the wordings are in red and white color which makes a good contrast. Therefore, I can see clearly where to get information.

The whole website is also framed up so it has a neat and tidy look. My vision is fully concentrated in the middle and not divided all over the place.

Bad design:


For the bad design, I chose the University of Kansas.

At first glance, it is weird to have 2 dark tones used together in a webpage. Dark orange and dark blue are used here. These 2 colors are like competing against each other to attract the viewer’s attention. From an earlier lecture, this shade of orange represents distrust and sadness while this shade of blue stands for depression. Therefore, it is strange that an institution use these 2 colors to represent them.

Secondly, the blue portion occupies slightly more space than the orange. It gives an imbalance feel to me. Moreover, all the information is at the right side while there is only the name of the institution at the left. It gives a much heavier feel on the right side.

Thirdly, there isn’t any emphasis for me. I do not know where I should navigate to. There isn’t any point of focus for me.

Lastly, there isn’t any unity and flow as the name of the university is placed on the left side and then it suddenly branches out to all the links on the right. Personally, I prefer a pyramid-shaped structure so I could follow the information from top to down.

Question 2. Explain the five websites assigned whether they have the above design elements and have properly used these elements and other design elements such as color (i.e. balance, scheme, etc.), gestalt principles (continuity, proximity, etc), economy, etc (i.e. how the design and the usability interact).

We had a guest lecturer for our lecture last week. According to Julian, he was one of the really good designer. Well, he didn't really give us much insight into good website design. Instead, he 's like promoting his own company. We (3 bad boys) even joked with Julian that next time the guest lecturer must first send him the slides for him to vet through.

For this assignment, I have to familiarize myself with the advantages and disadvantages of new media design. I also have to propose solutions to the bad design.

Here are the questions I have to answer and my proposed solutions:

Question 1. Explain these terms (design elements terms) in 2 (two) sentences.

Unity: It describes the relationship between the individual elements and the whole of a composition. It determines whether the different elements combine well enough to achieve a wholeness and harmony feel.

Asymmetrical Balance: It is a situation whereby the weight of a composition is not equally distributed around a central focus. It requires the organizing of objects with different sizes in such a way that they achieve a balance with their visual weights.

Symmetrical Balance: It is a situation whereby the weight of a composition is equally distributed around a central vertical or horizontal focus. It has an identical feel on both sides of the focus.

Dominant: It is the object given the most visual weight. It brings the eyes’ focus to the foreground of that design at the first glance.

Subdominant: It is the object given the secondary emphasis. It brings the eyes’ attention to the middle ground of that design.

Contrast: It compares the degree of conflict of the visual elements that exists in a chosen design. It is achieved by setting the point of emphasis against the background.

Repetition: It requires the use of repeated patterns to achieve a timed movement.

Flow: It gives a sense of movement to the composition.

Emphasis: It refers to the point of focus in a composition. It is the location in the composition that attracts the most attention from the viewer.

Proximity: It is concerned with how close the elements are placed in relation to each other in the composition.

For Assignment 6, we have to form a group of 2 and select one good and one bad design. They could be from poster, magazine advertisement or information brochure.

Then, we have to analyze both designs and build a case to support our opinion based on the visual principles that we have learnt.

I teamed up with Gerald and we chose 2 movie posters to analyze. Here are our analysis:

For the good design, we chose...

Finding Nemo


•Figure & Ground
- Contrast between figure and background
- Figure smaller than background

•Proximity
- Surrounding fishes are closely assembled

•Similarity
- Surrounding similar-looking fishes are grouped together

•Continuity
- Other fishes are swimming away from the point of focus i.e. Nemo

For the bad design, we chose...

3:10 To Yuma


•Bad Figure & Background
- Figure is larger than background
- No contrast

• No Continuity
- Words all over the poster
- Too many points of focus i.e. words, cowboy and incoming train

•No Similarity
- Some words are bold, some different fonts

After watching the others' presentation, I discovered that our bad poster is not that bad actually. Except for the wordings which are all over the place, the design is not that bad. The tutor confirmed my doubts. I will try to look for one really bad poster. So watch this space!

This week lecture touches on the Gestalt principles which work on the law of perception. It's also known as law of simplicity which breaks down information into its simplest form which are easier to identify and remember.

We humans tend to remember images by patterns which can be formed by grouping visual information based on certain prinicples namely: proximity, similarity, continuity etc... Good use of Gestalt will be easily understood by the viewer while poor use will result in viewer ignoring the images.

For the classroom exercise, I have to create 3 images to demonstrate any 3 Gestalt principles. I chose parallelism, proximity and similarity.

Here are my sketches:

During the lecture, the concept of understanding the representation of colours and how does they have an effect on people was introduced to us. It's amazing how colours have an impact on our lives.

One point that I noted from the lecture was the use of colour contrast and colour harmony. In order to make the picture stand out, I have to make sure that pure colours do not compete against each other for the audience's attention. Also, our eyes seek balance so the correct complement of colours would be more smoothing.

Colour psychology also plays an important part in delivering different messages to the audience. For example, different shades of red have different representations ranging from love to war.

Oooh here comes the main point... *Drum rolls*...

Assignment 5... which is to personalize my notebook...

Before the lecture, I thought of "how about I come up with some designs for the poster on love?" Phew, luckily I didn't do so. Maybe being too hardworking is not necessary sometimes.

Anyway, back to the assignment. I have to choose a theme that is most personal to me. It should be a positive thought, my take on how to make the world a better place.

Julian wanted us to choose 2 words and come out with 2 sketches based on these 2 words. For me, I decided on "poverty" and "war".

Here is my first design on "poverty". Actually my idea is to stop poverty. For the exterior, it shows a young skinny boy sitting in one corner, alone. I hope to show the plight of people in impoverished countries, living in undesirables condition and not having adequate food supply.

However, a hand stretches out, wanting to help the poor boy. I used bright yellow colour to emphasize that the helping hand brings hope and warmth to the boy. It brightens up the poor boy's world. I made use of the lens flare effect in Photoshop to achieve the inspirational effect. Outside the yellow scope, it is pitch black signifying depression and despair for the boy.



For the interior, bright yellow again is the base colour. I've put in the words "Stop Poverty", driving the message home to people. Another helping hand is drawn to encourage the audience to do their part in helping people from poor countries.




*More drum rolls*... Tadaaaa... Here's my 2nd design on "war".

Actually, I got this idea from the recent crackdown and killing of the monks in Myanmar. It's really a shocking move by the junta.

Ok, back to my design. The background colour for my design is a shade of red called pure magenta red (in Photoshop). From last week's lecture, this colour (hopefully I chose the right colour) represents blood, war and violence, sacrifice and bravery.

And the chinese word that I used is "sha" meaning killing. All the wars, protests and demonstrations have taken away so many precious lives. So many brave souls have sacrificed their causes just to uphold their beliefs. It's time to end all wars.

I've made an effect such that there is some light behind the "sha", hoping to create the message of "there's always light at the end of the tunnel". There's always hope and new opportunities even when despair surrounds you.



As for the interior, I added the words "End Wars" and the chinese words "bu sha" meaning stop killing. Again, there's the light effect, to give hope to everyone. I also gave the chinese words an irregular edge so it won't feel so rigid.



I presented the "Stop Poverty" during the tutorial. One of the comments I received was to change the font of the words as they look too cow-boyish. Esther also mentioned that (bright) yellow colour is like those who have the authority/power like God. So probably I should adjust the gradient of yellow to a darker shade. I should also emphasize the shining effect to show that the hand is really going to help the boy.

As for the tutor's comments, he said I should change the words so they have more punch. "Stop Poverty" is like too cliche. Like last week session, he said I should encourage the audience to think more when they see my design. For example, I could show a begger being jailed as begging is illegal in Singapore. I should design something more on the local context that people (preferably Singaporeans?) can relate to. Then the design will be an effective one.

After gathering all the comments, granted if I have the time, I would make the necessary changes. Hopefully.

For Assignment 4, I have to design a poster using one of the words - save, stop or kill to create a theme. And the poster must convey the meaning through the layout (basically applying what I have learnt during the lecture i.e. placement of visual elements, color, texture, balance, text etc.).

For me, I have chosen the word "Save" and my theme is "Save The Freedom of Speech".

Here is the poster that I have designed...



It may seem controversial but I'm just trying to poke a little fun at our system here in Singapore.

I drew a mouth that seems like it is trying to talk. However, it is being caged and surrounded by our ruling party. Thus, I hope to portray that the freedom of speech is being suppressed here. Next I drew a shadow of the ruling party, trying to show that it is always watching over you, the feel of "YOU CAN'T ESCAPE!" Finally, I decided to use a white background with black-colored text so I hope to achieve a clean and simple feel.

During the critique session, there was initial silence as maybe my classmates were too overwhelmed by my politically incorrect poster? However, after some warming up, comments came in fast.

One of my classmates suggested removing the cage and instead putting a plaster on the mouth labeled "Take this away" (something along this line, thanks dude). Sam also suggested to remove the shadow altogether as it seems that it came out of nowhere.

Meanwhile my tutor suggested rearranging the title and text according to a pyramid structure (top light, bottom heavy) as my current one is the opposite of it. I also need to bold my text to make it more readable. He also mentioned one crucial improvement: that is to remove the PAP logo and replace it with a more subtle symbol.

His rationale (his idea should be like this): People already know that the freedom of speech is being suppressed in Singapore. But what can they do? When they see the logo on my poster, they might just turn away and look elsewhere. So if I could replace it with another similar logo and make the audience take a closer look and through this process make them think more and not just look at the poster and walk away, wouldn't it be better? Then it would be a more powerful and impact poster.

Hopefully a little humor won't hurt ya?? So please, can the relevant authorities do not ask me to go drink coffee with them? Thanks!!

PS: Special thanks to Canisius, Chu Yao and my girlfriend for helping me with this assignment. Thanks people!!

For the classroom exercise, I had to get 2 words from Julian and using basic elements (line and dot) to create 2 abstract/semi-abstract representative images that convey the meaning of these 2 words. The images should communicate the meaning of the words through form (basic visual elements). In addition, the images should only use 2 colors.

I got the words: Colorful and...


For colorful, I drew a rainbow with 2 colors, pink and green, hoping Julian can understand. Voila, he understood my sketch without any difficulty. The little sketch on the right is supposedly a peacock but it doesn't really work out.

Odd...


For odd, it's much simpler. I wrote "1, 3, 5, 7". Again, Julian understood it straightaway. As for the circles at the bottom, I was trying to show that there's this guy who can't get along with the other people and he's an oddball.

For the classroom exercise, we had to go out of the classroom to find a subject and capture it in my sketch in a way that it tells a story. I drew a sketch of a guy using his laptop. From the sketch, do you think a) he is going to tap at his laptop or b) is he pointing at someone near him? And why does he look so happy? Did he receive good news through email? Hmmm hopefully that sets people thinking...




For Assignment 3, as the title suggests, I have to tell a story to an audience using not more than 10 pictures. This is to help me understand the techniques of visual representation and to communicate my ideas effectively.

During the classroom exercise, we have to form a group of 2 and create both iconic and indexic representations of an object. Canisius and I decided to draw an Apple iPod. We drew the iPod as the iconic representation and a musical note as the indexic representation. However, Julian suggested that we switched the representations to make it look more suitable.

Hmm the topic sounds like I'm so over myself but actually...