Assignment 1 Web Template (Version 4)

I've been doing 3208 all day, but I'm finally done (for now) (:

Julian commented that the top left corner of my previous design was hollow, so I tried to fill it up by repeating the title of my blog. In order to minimise distraction, I flipped the words (so that they are less readable and look more like graphics/design) and lowered their opacity. I only included the "Works" page for this update, but all pages will have the same design.

Hope this is ok.

Presentation 2 (Part 3)

I am not sure if the rest of us need to find clips as examples, but I don't know how to "show panning/tilting/etc" otherwise... Here're my answers:

III. Define what are “pan, tilt‐up, tilt‐down, zoom, close up; extreme close‐up; wide‐angle; high‐angle; fisheye, and telephoto”
 Show us how to pan, tilt‐up, tilt‐down, zoom, close up; extreme close‐up; wide‐angle; high‐angle; fisheye, and telephoto. Discuss the suitability, meaning and purpose.

Pan: Twilight saga, New Moon - http://www.youtube.com/watch?v=5fmk7ucnbI0 (0:41-1:26)

Panning is the horizontal movement of the camera, which scans the subject on a vertical axis.

I remember watching this scene in the cinemas and felt extremely giddy watching it. Although it shows the passage of time (as the scenery changes but Bella is still sitting at the same place), the pan is too repetitive and rather fast, which makes it boring though giddy at the same time.


Tilting: Up - http://www.youtube.com/watch?v=pkqzFUhGPJg (0:46-0:48)

Tilting is the vertical version of panning, tilt-up means that the camera tilts from bottom up. tilt-down means from top to bottom.

The tilt-up in Up is suitable as it mimics the viewers looking up at the house as it is flying. Tilt-down will be in the opposite direction, and can be used to show someone looking down at something. I afraid I can't find any examples offhand ):


Zoom: For the way I live (MTV) - http://www.youtube.com/watch?v=ccvJvowKdK8 (5:14-5:42)

Zoom is changing the focal length of the camera to make the subject appear further or closer from the viewer.

The camera zooms in on the singer from a mid shot to an extreme close up. It zooms out and pans after 5:42. This lets the viewer feel as if the singer moved closer to him or her, which complements the repeating lyrics of “Honey I'll try... for you I'll try”, as if the singer moves closer in trying to persuade the viewer that she is trying to change the way she lives.


Close-up: For the way I live (MTV) - http://www.youtube.com/watch?v=ccvJvowKdK8 (5:34)

A close-up shot frames a certain feature of a subject, and the feature takes up the whole frame. For example, at 5:34, only the singer's face is in the frame.

In this music video, the close-up is a passing stage to the extreme close-up, which meaning/purpose is as explained next. Usually close-up can be used to break the monotony of long/mid shots.


Extreme close-up: For the way I live (MTV) - http://www.youtube.com/watch?v=ccvJvowKdK8 (5:42)

An extreme close-up only frames a fraction of a feature of a subject. At 5:42, only the singer's pupil can be seen.

The extreme close-up of the pupil capitalizes on the saying that one's eyes are the windows to his or her soul. Hence the close-up shows that the singer is sincere and willing to bare her soul in persuading the listener that she hopes to make a change.


Wide-angle: Hero trailer - http://www.youtube.com/watch?v=0yyBtdVVjLA (1:39-1:45)

Wide-angle enables wide fields of view. It can be used to set a scene (e.g. during the introduction of a movie) as it has a wider frame.

The wide angle sets the scene where the two swordsmen fight. Viewers can see their skill in navigating the wide river/lake. Without the wide angle, viewers may mistake them as fighting on a small river, near to the banks instead, which undermines the swordsmen's skill. The other scene allows viewers to see the majestic palace and the strong army of the king.


High-angle: Hero trailer - http://www.youtube.com/watch?v=0yyBtdVVjLA (2:10)

High-angle is when the camera is set above the eye level. It usually makes the subject look small and vulnerable.

In this video, high-angle is used to make the subject look vulnerable as she is under attack.


Fisheye: Fisheye Test - http://www.youtube.com/watch?v=-WPRVv_9f8U

Fisheye is a type of wide-angle with hemispherical distortion. Most people use fisheye for aesthetic purposes. It is also used by photographers and videographers who want to get action shots as close to their subjects as possible while capturing the context.

In this example, fisheye is used for the latter purpose to film the skateboarder while capturing the background (street, houses, cars, etc.).


Telephoto: Anima shot - http://www.youtube.com/watch?v=Gk7vCq2I4nQ (0:30-0:41)

Telephoto lens is a kind of long-focus lens where the physical length of the lens is shorter than the focal length. It is similar to zoom as it allows one to make subjects that are far appear close. This is particularly useful when one cannot be close to the subject, such as in the above video, which films animals in a zoo (telephoto is used as we cannot go up close to film them).

Presentation 2 (Part 2)

II. What are the types of video transition?
 Please list 5 different video transition effects (see the Adobe Premiere menu). When should these transition effects be used? What are the meaning attached to each transition effect?

Meanings attached to transitions determine when they should be used.

1. Cross Dissolve
It is used to indicate a long time passing between two frames. It can also be used to slow the pace of a video, or indicate a change of location. Slow cross dissolves can create layered video effects.

2. Dip to Black
It is used to indicate time passing between the two frames, longer than a straight cut, but shorter than cross dissolve. It also signals the beginning and end of scenes.

3. Dip to White
It is used similarly as dip to black, but indicates a jump to a different time, e.g. flashbacks or dreams.

4. Linear Wipe
It is mainly used for transitions from split screens, where one of the screens replace the other as the full screen via a linear wipe. Wipes also show a change of location or viewpoint.

5. Straight Cut
The most common transition, as it changes scene without distracting the viewer.


 Please find 5 clips which illustrate when these five effects are used, and their meaning/ purpose [The meaning of the direction: From left to right [the good guy], from right to left [the bad guy], an example from tonight’s lecture]. If you cut the clips from your DVD, please put these clips in your A2 folder i.e., in addition to your answers you write in the blog.
(tips: you can find videos from YouTube; you can also cut your own movies).
Individual and Group

1. Cross Dissolve
- Oceans 13: http://www.youtube.com/watch?v=FCvckCdHag8 (0:49-1:39)
- Sorry that I loved you (MTV): http://www.youtube.com/watch?v=PUrBhh4c-CU (3:18-3:31)

Oceans 13 used a prolonged cross dissolve to show different events happening at the same time. This is different from the conventional use of cross dissolve to show time lapse, and the conventional use of split screen to show events happening simultaneously. Although the frames overlap, making the images unclear, it is still rather easy to know what is happening.

Oceans 13 is different from the music video, where cross dissolve is used to show flashback (3:18-3:31) as well as for aesthetic purposes (throughout the video).


2. Dip to Black - Harry Potter and the Deathly Hallows Trailer: http://www.youtube.com/watch?v=_EC2tmFVNNE (0:00-0:29)

The dip to black effect indicates a change of scene, as well as slows down the pace (as opposed to straight cuts) of the trailer to create suspense.


3. Dip to White - For the way I live (MTV): http://www.youtube.com/watch?v=ccvJvowKdK8 (4:36-5:13)

The dip to white effect is used to cut up short segments of the clip, making it look more like flashes of white than a transition. This is use to portray the dancer being helplessly trapped in the way she lives (with the mirrors forming an enclosure around her), as time passes. The quick transitions depict the quick passage of time, which may not be in sequence, since dip to white (and not black) is used to show jumps in time.


4. Linear Wipe - Editing techniques: http://www.youtube.com/watch?v=zQLpwDPeu10 (1:28-1:32)

I could not think of any clips that use linear wipe offhand, but I found this video on video editing that uses linear editing to transit from full screen to split screen. As this video suggests, split screen is common when showing two people on a phone conversation, such as those in drama serials. Hence apart from a straight cut, linear wipe can be a useful transition to show another party joining/leaving a conversation.


5. Straight cut - Harry Potter and the Deathly Hallows Trailer: http://www.youtube.com/watch?v=_EC2tmFVNNE (0:30-2:30)

Apart from the first 30 seconds, most of the trailer are transited with straight cuts, as this quickens the pace of the trailer, making it more exciting to watch. The faster pace also complements the high-action drama of the movie.

Presentation 2 (Part 1)

I have decided to post the part on Cheryl Ho's video first because the answers are getting way too long. Somehow I think presentation questions are more time consuming than working on our assignments :/

I. Please watch Cheryl Ho’s video (a previous year student’s work):
http://www.youtube.com/watch?v=cULOFcZ93Ug
 Point out the part(s) that applies Ken Burns Effect.

NUS campus map, 0:11-0:13
the Stairs, 0:21-0:35
the Food (subway, munchie monkey cafe), 0:43-0:47
the Stress, 0:58-1:09
Social, 1:21-1:29
Second, 1:32-1:41


 Which part(s) of using Ken Burn Effect you think are (is) good?
The stairs is good as the panning reflect the long flight of stairs she has to climb.

The part about her friends is also good as she pans from a friend to another, which gives each friend more emphasis as opposed to using a still photograph with a few friends together. As a result, viewers perceive more emphasis on each person's friendship with her, and not just a group of friends hanging out together.


 Evaluate this video from other aspects (sound, photo, script, transition and so on). Which are (is) good and which can to be improved?

What is good:
She uses photographs with headings such as “stairs” and “stress” instead of subtitles, which is less conventional and interesting. The different sections of the clip are distinguished clearly, with clear transitions, so viewers will not be confused. The music is light-hearted and appropriate, and so is the clearly audible voiceover.

To be improved:
There were a few different types of fonts used. I feel that less fonts can be used for consistency.

The spinning cube transition for the stairs is less conventional and may seem a bit amateurish. The ripple effect at the end of the clip (1:41) brings us back to the present (and not Cheryl's past 2 years in NUS). The effect is less conventional and also a bit amateurish as opposed to dip to black.

Assignment 1 Web Template (Improved Again)

Julian said my color for the previous design was ok, but he suggested using a theme, as the branch would look out of place otherwise. Hence, I have decided to "hang" my contents on the branches.

The strings that hang the contents will be more realistic when I draw them in Illustrator. Also, I may try to find a better effect so that my works (the graphics) look like Polaroid photos.

I decided to use a handwritten font to make the "Polaroids" more realistic. Also, I used a "handwritten" circle to indicate the page the viewer is at. However, the website title is in another font as I thought it will differentiate the title and make it look more like a logo, perhaps. The title is also placed at the top of the page as I don't want to "hang" too many contents on the branches.

I have also replaced "thumbnails| roughs| etc" with only "thumbnails" and two arrows. The gray arrow indicates an inactive link. This is because there is not enough space to write "thumbnails| roughs| etc" in full.

As my photograph is landscape, I decided to use a plain black background to extend the photograph, so as to not interfere with the design.

Here is my new design. Hope it is better.

Assignment 1 Website Template Improved

From the critique session, I realized that I should not have changed the positions of the navigation buttons, as I should have ensured consistency. Actually, I thought I saw some websites with home pages that have navigation buttons on different places from their content pages, but I guess I'll take the feedback and change accordingly.

Also, my classmate mentioned that the white background for the contents looks amateurish, and suggested I make it fade out instead. I had actually considered doing so, but I think the text will still be difficult to read on a patterned background (yellowTwigs).

Thus I decided to just cut out the main branch and base my template on that. (I decided that the branches are more interesting, and hence I am not using redWall.)

Here is my improved design:

I decided not to have a home page as I cannot find a suitable layout for both the home page and the content page. If the text and navigation buttons are nicely spread out on the home page, the contents will be squeezed on the content pages. If the content pages look nice, there will be an empty space on the home page. As a result, I decided that my "home page" will be the "about" page, where viewers can read more about me before they proceed to viewing my works.

I have also decided to let the sub-menu of the different assignments appear only when the viewer clicks on the "works" page, as the navigation bar will be cluttered otherwise.

The color theme for my website is analogous, i.e. no contrast, so as to let my works (of different colors) stand out. I have also done away with the white background and used one with an analogous color instead.

Also, only the contents (in the dark yellow box) can be scrolled. I will add a bit more background at the bottom of the content page so that it does not cut off abruptly (since I am trying to squeeze the template on an A3 paper first, to ask for opinions of this new layout).

Yup, anyone who drops by feel free to comment :)

Assignment 1 Website Template

I have come up with 2 templates for assignment 1. As I was browsing CSS Zen Garden, at Julian’s recommendation, I realized that photographs were used for some of the good designs. Thus I decided to follow suit and use my photographs as the background for my portfolio website.

 I chose these photographs as they do not contain too many details that distract the viewer from my contents. They also guide my layout, especially for the first design (which I call yellowTwigs), as the tree branches divide the page nicely according to the rule of thirds.

Thus my layouts generally follow the rule of thirds and elements of the pages are placed according to the photographs’ composition.

Here are the rest of my design elements:

The fonts are mostly sans-serif to make it easier to read on the web. The only exception is Stencil for the “redWall” design, as I thought Stencil would make the design look as if someone really did stencil on the wall. However, Stencil is difficult to read, so I used Colaborate for the rest of the text. Fonts are largely kept the same to give a sense of consistency.

As for color, I used those that are similar to the photographs, again, to create a sense of consistency. Black and white is also used as they are rather neutral colors and do not clash with the photograph colors.

For the content portion of yellowTwigs, I did not change the color of visited links, as visited links use a dark brown that will be hard to see against the black background. (I don’t want to change the color dark brown as it matches the photograph.) I also think there is less need to indicate visited links as the content is short (only the sketches and a few lines of description) and viewers can simply click on the links repeatedly and in any order they wish.

I also did not include rollovers as I feel that the rollovers should be the same color as the heading of the contents and yellow will be too light against the white background. Moreover, viewers may expect the links to change color after they have visited the link, which brings me back to my previous problem of deciding on the color for visited links. Hence, I decided to do away with rollovers and used font size as an indication instead.

For the content portion of redWall, I decided to use black text on white background as I felt that it will be difficult to read on a red background. To ensure consistency, I used the same red color as the background for the rollovers. Red is used since it stands out against the white background. As a result, I kept the size of the selected link consistent with the rest. However, I did not change the colors for visited links, for the same reason that the content is short and viewers may repeatedly click on the links if they wish.

For navigation, subcategories (i.e. thumbnails, roughs, etc.) are only provided on the page of the work itself, as I felt that it will be too much information otherwise, and the subcategories are less important. Also, there is probably no need for subcategories, as I could have combined the thumbnails etc. on the same page, if not to prevent too much scrolling.

Presentation 1 (Part 2): WOFF

What is WOFF?

WOFF stands for Web Open Font Format. It is created from a collaboration of three font designers. The font format is a repackaging of OpenType or TrueType font data, as it is compressed, and it does not offer any new behaviour.

Advantages of WOFF

WOFF uses lossless compression, which makes it faster to download without affecting quality, as compared to converting specially designed fonts to graphics, then uploading them onto a website.

Tags are also attached to WOFF, so the designers can be tracked, which gives them credit for the font.

Disadvantages of WOFF

Internet Explorer has trouble displaying WOFF, and extra steps in coding have to be taken for it to display properly, which is inconvenient.

If the WOFF fonts are hard to read, users will not have the option of using a better substitute.

Websites with WOFF and how WOFF is used

Site 1: http://lostworldsfairs.com/atlantis/

Site 2: http://ie.microsoft.com/testdrive/Graphics/WebFonts/Default.html

For both websites, WOFF is used to enhance the web design aesthetically. For the website 1, the different fonts enhance the graphics through typography. Although website 2 is a demo of WOFF, it shows that different fonts can be used to indicate different sections of a webpage, and thus WOFF provides more options for doing so.

Presentation 1 (Part 1): CSS

Ok, "tomorrow" has become yesterday, but I'm uploading the answers now. Have been busy with the presentation. I can't really bear to look at codes and I found it extremely difficult to find a website without CSS. I wondered how come my groupmate Sheng found three, until I realised they were all old websites and I could search for the same. Googling "websites without CSS" simply didn't work. Oh well, I hope I can have a clearer head for the rest of the sem! Can't afford to lose sight of the big picture (that has always been my problem).


Please click on the links and View -> Source to see the codes if needed. I'm afraid screenshots will be too small and difficult to present here. Alt + Tab is probably better? :)

NM2208 Theories

Site 1: http://veerle.duoh.com/

Figure and ground:

~ The white text on the gray background provides good color contrast which makes the text easy to read. The gray background also allows the colorful graphics to stand out.

~ The background is also free of details, so it does not distract the viewer from the text and graphics.

Proximity/Similarity:

Similar headings and their related content are designed similarly and placed near each other, so it is easy for the viewer to distinguish different content.

Principles of Interaction:

The design controls attention by applying the following principles of interaction -

~ There is an adequate balance of space, as the white space provides framing room for different content, but at the same time the size (e.g. font size) of the content is not compromised.

~ As for value, the white text is easy to read against the darker gray background.

~ The design is neat, which allows viewers to scroll down the page (scanning pattern) without distracting elements.

~ The headings are also large enough to be identified as such.

~ The content are all rectangular in shape

Harmony: http://veerle.duoh.com/belgiangraphicdesign

~ The main colors for this website are gray and white, which are well-contrasted and balanced.

~ The website also mainly follows the Golden Ratio and the rule of thirds, except the page on Belgian Graphic Design, which divides the page into 4. Nevertheless, the design is still neat.

How CSS is implemented

CSS is implemented in a separate file. It is used to provide a consistent look, such as the same layout and color scheme, for the website. (View the source of the website and click on /css/master.css.)

Site 2: http://mintdigital.com/

Figure and ground: http://mintdigital.com/blog

~ The black text on the white background provides good color contrast which makes the text easy to read. The white background also allows the colorful photographs to stand out.

~ The background is also free of details, so it does not distract the viewer from the text and graphics.

Proximity/Similarity:

Similar headings and their related content are designed similarly and placed near each other, so it is easy for the viewer to distinguish different content.

Continuity: http://mintdigital.com/about/history

Some pages (e.g. the one on methodology) uses a dotted arrow as a divider between the heading and the content. The dotted arrow uses continuity as we perceive it the same way as an underline. Hence continuity allows a more interesting divider to be used (arrow instead of the conventional underline).

Principles of Interaction:

The design controls attention by applying the following principles of interaction -

~ The design is minimalistic with a lot of white space. This allows the text to be read easily.

~ As for value, the black text is easy to read against the white background.

~ Generally the design is neat, which allows viewers to scroll down the page (scanning pattern) without distracting elements.

~ The headings are also large enough to be identified as such.

~ The content are generally rectangular in shape

For the home page, viewers can click on “portfolio, people, contact, blog” below the company logo. The order for this is left to right (since people usually read from left to right).

However, there is no particular control of attention for the “mind map”. This is not necessary bad design, however, as the designers may feel that for people who have time to explore their website, everything related is equally important, and hence there is no need to impose an order on the viewer.

Harmony: http://mintdigital.com/about/hemlock

~ The main colors for this website are black and white, as well as shades of green and blue (for the company logo. This allows the word “mint” in “mintdigital” to stand out).

~ Since the website is mainly black and white, there is less of “warm versus cool”. However, subheadings with warm colors stand out more against the cool colors of “mint” in the company logo.

~ The website also mainly follows the Golden Ratio and the rule of thirds.

How CSS is implemented

CSS is implemented in the source of the website. It is used to provide a consistent look, such as the same layout and color scheme, for the website.

CSS is also used to provide different versions of the website for different platforms (e.g. print and web). (Click on Print Preview of the home page and you will see that the 2 versions are vastly different.)

Site 3: http://web.archive.org/web/19961219201710/http://www.music.com/

Figure and ground:

~ The black text on the white background provides good color contrast which makes the text easy to read. The white background also allows the graphics to stand out.

~ The background is also free of details, so it does not distract the viewer from the text and graphics.

Proximity/Similarity:

Similar headings and their related content are designed similarly and placed near each other, so it is easy for the viewer to distinguish different content.

Principles of Interaction:

The design controls attention by applying the following principles of interaction -

~ The design is minimalistic with a lot of white space. This allows the text to be read easily.

~ As for value, the black text is easy to read against the white background.

~ Generally the design is neat, which allows viewers to scroll down the page (scanning pattern) without distracting elements.

~ The headings are also large enough to be identified as such.

~ The content are generally rectangular in shape

Harmony:

~ The main colors for this website are black and white, which is well-contrasted

~ The website however, does not follow the Golden Ratio and the rule of thirds. It is simply left-aligned

What makes them good?

For a website without CSS, the design is appropriate as it applies NM2208 principles and facilitates easy reading. However, by today's standards, the design is rather unsophisticated as we are used to websites with pretty graphics and effects such as rollovers.

Advantages of CSS

CSS makes it easy to change the look throughout the website. For example, if you want to change the design of a website from a theme which consists of blue and white to red and green for a Christmas theme, we can simply alter a few codes from the CSS to change the main color scheme.

Although HTML can provide a consistent look, it is tedious to use the HTML repeatedly across every page of a website. CSS makes it convenient and efficient to maintain a consistent look.

CSS also makes it easy to come up with different styles for different platforms, e.g. website 2.

New Sem!

Yup I'm using this blog (previously known as NM2208 Visual Communications) for NM3208, the "continuation" of NM2208..

I know this module is going to be intensive, and I feel it already, although it is just Week 1. Hope I survive! :S

*Presentation questions to be uploaded tomorrow.