Assignment 3: Kinetic Typography

Choosing a song

I feel that it is not easy to find a good song. Generally songs are telling the feeling, not a story or a scene. It is difficult to get a visual feeling from a song and lyric. Besides that, I also want to choose a song I like :)

At first I thought about Penny Lane by the Beatles. It is the song that I can visual image the scene. But later i feel that it is still difficult for kinetic typograph. Thus I am thinking of Yellow Submarine. The lyric is quite lovely and imagable. But the song is a bit slow. Beats are not strong.

An other song I am thinking about is Skater Boy by Avril. The lyric is a consecutive story. I have difficulty to choose a part from the lyric. Actually it will be very nice to film the lyric to a video story. I wonder why the MTV is not the same story as the lyric...





In the town where I was born, lived a man who sailed to sea
And he told us of his life, in the land of submarines
So we sailed up to the sun, till we found the sea of green
And we lived beneath the waves, in our yellow submarine
We all live in a yellow submarine, yellow submarine, yellow submarine.
We all live in a yellow submarine, yellow submarine, yellow submarine.

And our friends are all on board, many more of them live next door.
And the band begins to play
We all live in a yellow submarine, yellow submarine, yellow submarine.
We all live in a yellow submarine, yellow submarine, yellow submarine.

As we live a life of peace, everyone of us has all we need.
Sky of blue and sea of green in our yellow submarine.
We all live in a yellow submarine, yellow submarine, yellow submarine.
We all live in a yellow submarine, yellow submarine, yellow submarine.

Presentation 3 -- Script

The Butterfly Effect:

Up:

Script of Assignment 2:

My Life in NUS
Written by Liu Danqing

Photos of DANQING and title of NUS.

DANQING (V.O.)
My name is Danqing. This is my fourth
year of studying and living in NUS.

DANQING goes out of her room.

DANQING (V.O.)
Now let’s start a day in NUS.

DANQING takes lecture and tutorial.

DANQING (V.O.)
Study in NUS is heavy and fulfilling.
Thank of those helpful and kind professors
and tutors who always help me.

Photos of lab, library, study room and benches.

DANQING (V.O.)
After lecture and tutorials, I stay in lab,
or library, or study room, or bench
everywhere in NUS.

Photos of food.

DANQING (V.O.)
Food in NUS is very nice and cheap.

DANQING is hungry. The queues are very long.
The canteen is empty and closed. DANQING is disappointed.

DANQING (V.O.)
But, when you are hungry, the most two
disappointed things are: first, canteen
opens but the queue is too long, it happens
during lunch time every weekday.
Second, no queue, but canteen closed, it’s
a public holiday.

Photos of drama, filming, IHG and Rag.

DANQING (V.O.)
Evening time is always for CCAs. I took
part in drama, video production unit, and
watches Inter hall games, Rag.

DANQING walks back to hall. Her FRIENDS say hello to her.

DANQING (V.O.)
After a day of study and activities, I walk
back to my own room. Leaving in school is
very convenient, as I can walk back. And
most importantly, I have many friends
living next door.

Photo of the moon. DANQING is watching at the moon and feels homesick. DANQING is interrupted by her FRIENDS.

DANQING (V.O.)
Sometimes I look at the moon and miss my
hometown. But, friends always interrupt
my nostalgia.

TITLE CARD: SUPPER~
FRIEND (O.S.)
"Supper~"

TITLE CARD: COMING~
DANQING (O.S.)
"Coming~"

DANQING and her FRIENDS is having supper together. They walk back together, happily.

DANQING (V.O.)
Life is NUS is fulfilling, no time for homesick.
And most importantly, I have friends with me.

DANQING goes back to her room and close the door.
TITLE CARD ON DOOR: GOOD NIGHT

DANQING (V.O.)
That’s a day of my life in NUS. Good night~

Part 3:

Script before production may only have the story line and dialogue.
While script ready for production should include place, time, camera movement, transition, titles, special light, and so on.

Presentation 1

Part 1

Please list 3 good websites which you like and evaluate these websites. Do they apply the Principles of Visual Communications which you have learnt in NM2208 (Color Scheme, layout, Gestalt and so on).

http://www.webshocker.net/pc.asp
http://www.chocri.de/valentinstag/
http://www.uqude.com/

webshocker.net

The website catches my attention mainly because of the cute “Hello world” banner. The size of this banner is bigger than normal webpage banner size. But we can treat the content of the banner (CG) as a part of the website company’s design product.
One interesting point of this website is, one page slips to another page from left or right side of the website. It is a bit like a link list, home, news, about, work and contact are linked together.

Color: The background color of this page is very simple: white and light grey, with dark grey top and bottom line. The color of the title worlds are mainly light blue and orange, which lead attention to the titles.
Layout: From the picture we can see that, the webpage is divided into grids: top, bottom left and bottom right. The division is very clear and balance. The content of top and bottom, as well as bottom left and right, has the similar weight.
Continuity and Similarity: The fonts and colors of the titles and content are similar. The layout of each page is also very similar.

Chocri.de

This website is a chocolate official website. The current theme of the website is Valentine’s Day. My attention was first caught by the theme color, very happy, warm and full of passion.

Color: As I mentioned, the background color is full of passion. Red is the right color of food. Rose red also looks nice with white color and chocolate color.
Layout: The layout of this website is also very clear. The page is divided to grids: top line, follows by top, mid and bottom part. The middle part is divided into 4 parts. The whole felling is vey clear and balance.
Continuity and Similarity: The whole page, except for logo and title of banner, uses the same font. Each part of the page uses the same background color and word color. The styles of the 4 parts in the middle are similar.

Uqude.com

I found out that all the 3 web pages I found has simple and clear layout and simple color scheme. I like this style. There should not be too much information on the main page. But all the information should be placed clearly and logically. User can find the link to the information he/she needs easily.

Color: White and light grey background. White color gives a feeling of clean and clear. White color will not catch much attention, thus leads users’ attention to the content. The colors of the words are mainly dark grey or light blue, which also very simple. The most attention-catches part is the 3 pictures at the middle right part, as they are colorful, stands out from grey and white.
Layout: The middle-bottom part is a bit empty, which looks not that nice. However, this part will not be shown on the screen, unless the user drags down the page.

Do these websites use CSS (Cascading Style Sheet)?

Yes, all of them use CSS.

If yes, how do they implement the CSS across the websites?

I have checked the page source code of these three webpages. All of the code import CSS files. Thus I cannot check the original CSS code in the page source. But from the outlook of the webpages, we can see that the font, background color and content color, as well as paragraph layout may use CSS.

Part 2

What are the advantages of using CSS?

From my understanding, the mainly advantage is divide content and style into two parts. We can make the layout and content using HTML or maybe other language, and then call the CSS code to apply the style.
As the style is created and saved in another file, we can call the same style over and over again and apply the same style to each part of the webpage as we want. The change the style will be very easy as we only need to change once, in the CSS code. We can create any complicated style apart from the main html code, thus will not mass up the code. With CSS, we can apply continuity, unit, and similarity to the website easier.