Beware: Video intensive entry!
Part One:
The Ken Burns effect is a popular name for a type of panning and zooming effect used in video production for still imagery. This technique was principally used in historical documentaries where film or video material was not available. Action is given to still photographs by slowly zooming in on subjects of interest and panning from one subject to another. The zooming and panning across photographs gives the feeling of motion, and keeps the viewer visually entertained.
The parts that applied the Ken Burns effect in Cheryl’s video were from 0:12-0:35, 0:44-0:50, 0:58-1:08, 1:15-1:42. I felt that the panning applied at 0:12 was not very effective because the speed was slightly too fast so I was not able to catch the alphabets carefully. Besides it was a diagonal pan which was not the usual panning style, hence viewers might take some time to process the visual material presented before them. Furthermore, the photos for that shot were not very clear due to the bright lighting from the sun. Hence, all the more the speed should be slowed down further for that pan shot. However, I felt that the panning applied at 0:27 was good because the sound clip where Cheryl said “looking up upon that towering flight” matched the panning up the stairs perfectly. Also, at 0:30 the zoom in shot of Cheryl’s face was pretty good because she was the main focus for that frame, and by zooming in for a medium close-up shot, her facial expressions were conveyed clearly to viewers. Finally, I felt that the song was a good choice for the video because it was not too distracting and overpowering to drown her voice out.
Part Two:
Video transitions are used in video editing process, and editing refers to the coordination of 1 shot and the next shot (not just the physical joining of the shots). The importance of editing would be to help us to understand the relationships among the shots in a film, and to understand both the temporal relationships and the spatial relationships. Most video transitions are used to indicate the temporal relationships to show the different omissions of time between shots. Elliptical tools such as dissolve, fade, iris or wipe usually indicate some time omitted between shots e.g. a slow dissolve can indicate a flashback. But straight cuts often indicate that no time has passed between the shots.
The 5 video transition effects available in Adobe Premiere are dissolve, zoom, wipe, map, and iris.
a) Dissolve is whereby the outgoing shot is fading out at precisely the same time (frame-for-frame) that the incoming shot is fading in, thus resulting in a smooth blend between the two, and this indicates a change in time or place or both. A dissolve is like a brief blackout between scenes: the time and place might change but the action continued. The overall objective is for the image or clip to appear to seamlessly transit from one image to the other in a fluid motion.
Dissolve effect applied at 2:58
Dissolve effect applied at 0:32
b) The zoom transition effect like the zoom cinematographic technique is used to emphasize a subject, bringing it into viewer’s attention.
Zoom effect applied at 2.25
c) Wipes differ from dissolves in that they don't blend; they simply move one thing out of the way with another. An example would be clock wipe whereby this wipe technique is often used to mark the passage of time within a story between shots. It is done through sweeping a radius around a central point in the frame and then revealing the next shot which can be spinning hands on a clock or the flipping of a calendar.
Wipe effect applied at 1:26
Wipe effect applied at 0:13, 0:42, 1:30
d) Map is done by selecting or inverting specific channels, and dramatic solarizing effects can be created during the transition.
Map effect applied at 0:43-0:45
e) Like looking through a telescope, an iris puts the focus on the center of the frame, and the edges change toward that center.
Iris effect applied at 0:02
Part Three:
Cinematography is everything that has to do with the camera and it determines how we see what is in the shot. It would include things like camera angle, camera height, camera distance, duration of shot, camera movement, the kind of lenses used and the ways in which they affect what we see, the kind of film stock used and how it is developed, and the speed at which the film is shot.
a) Panning is rotation in a horizontal plane, and it is to select parts of the original filmed composition that seem to be the focus of the shot and make sure that these are scanned. When the important action shifts to a new position in the frame, the scanner will follow it, creating the effect of a "pan" shot. Slow panning is combined with zooming in or out on a single subject, leaving the subject in the same portion of the frame, to emphasize or de-emphasize the subject respectively.
Panning done at 6:05-6:11
b) Unlike panning, tilting is a cinematographic technique whereby the camera is stationary and rotates in a vertical plane. It is about making the camera angle look up or down at the object being filmed instead of being on the same level. Tilt shots are usually more dramatic than straight-angle shots. A downward tilt shot is used to observe action over a large area or to create a psychological impression of inferiority or weakness. Conversely, an upward tilt shot lends an impression of superiority, awe, or size.
Tilt up
Tilt up done at 1:29-1:31
Tilt up done at 8:11
Tilt up done at 8:16
Tilt down
Tilt down done at 1:32
Tilt down done at 8:08-8:10
c) A close-up tightly frames a person or an object so as to display the most detail, but it does not show the subject in the broad context of its surroundings. Moving in to a close-up or away from a close-up is a common type of zooming. Close-ups can be used for distinguishing main characters. Major characters are often given a close-up when they are introduced as a way of indicating their importance.
I like the close-up and extreme close-up that is done in the trailer for Push :)
There are 3 different forms of close-up: medium close-up, close-up, and extreme close-up. For close-up, it shows very little background, and concentrates on either a face, or a specific detail of mise en scène, and everything else is just a blur in the background. Such shots magnify the object and show the importance of things, and this is usually used to show the expression on someone's face. Through the close-up of the subject’s expression, we are being taken into the mind of the character to have a better understanding of the emotions of the character. A close-up of the face can be considered an intimate shot, and film-makers often use this to make us feel extra comfortable or extremely uncomfortable about a character.
Close-up
Close-up done at 0:54-0:56
Close-up done at 0:00 onwards, and 4:28
Extreme close-up as the name suggests, is an extreme version of the close up, generally magnifying beyond what the human eye would experience in reality. An extreme close-up of a face, for instance, would show only the mouth or eyes, with no background detail whatsoever. This is a very artificial shot, and can be used for dramatic effect.
Extreme Close-up
Extreme Close-up done at 0:51-0:52
Extreme Close-up done at 6:27, 7:56, 8:09
Extreme Close-up done at 8:49
d) The relationship between the camera and the object being photographed (i.e. the angle) gives emotional information to an audience, and guides their judgment about the character or object in shot. The more extreme the angle (i.e. the further away it is from eye left), the more symbolic and heavily-loaded is the shot. A high angle shot is usually when the camera is located above the eyeline, and not as extreme as a bird’s eye view. The camera is elevated above the action using a crane to give a general overview. With this type of angle, the camera looks down on the subject and the point of focus often gets engulfed by the setting, becoming part of a wider picture. High angle shots also make the figure or object seem vulnerable or powerless, and are usually used in film to make the moment more dramatic or if there is someone at a high level that the character below is talking to.
High angle done at 7:42-8:07
e) Perspective distortion is a warping or transformation of an object and its surrounding area that differs significantly from what the object would look like with a normal focal length due to the relative scale of nearby and distant features. With wide-angle, the object close to the lens appears abnormally large relative to more distant objects, and distant objects appear abnormally small and hence more distant – distances are extended. Wide-angle distortion is often implemented to emphasize some element of the scene by making it appear larger and spatially removed from the other elements. With telephoto, distant objects look approximately the same size – closer objects are abnormally small, and more distant objects are abnormally large, and hence the viewer cannot discern relative distances between distant objects – distances are being compressed. Telephoto distortion is often used to give the appearance of compressed distance between distant objects.
Wide angle done at 1:58
f) Fisheye achieves extremely wide angles of view by forgoing a rectilinear image, opting instead for a special mapping which gives shots a characteristic convex appearance. It can get the camera as close as possible for action shots whilst also capturing the context.
Assignment 1: Web Portfolio
Saturday, January 29, 2011
I've survived week 3!! Finally I feel like I'm getting a better grasp of HTML/CSS after the long hours of playing around with it. HTML/CSS no longer sound too alien to me anymore! :D
& so the task for Assignment 1 is to design and create a website to serve as a portfolio for my NM2208 assignments. Special attention should be paid mainly to the typography, layout, colour scheme and composition of the website. Also, the website should fit nicely into the 1024 X 768 resolution. The aim of this project is to utilize the advantages of Cascading Style Sheets (CSS) for my website apart from the proper organization of type and content.
Alrighty, so for the web portfolio I had 2 main themes in mind, one was a simple and clean look, and the other I wanted more of a sketchy feel to it. The stuff that I intend to display in my portfolio are: Homepage, Work, About, Contact. My assignments will all fall under Work where I will have my final pieces displayed up together with the work-in-progress pieces.
After much thorough thought process, I have decided that a good website is one that is simple and easy to navigate, and one that is not too cluttered with too many elements to draw the attention away from users. Though keeping things simple is the way to go, there should still be some form of design to make the website visually appealing to the users. Furthermore, reading texts on the screen can be quite a challenge given people’s short attention span, hence, I intend to limit the amount of texts on my website in order not to lose the attention of my users.
& we all know that inspiration doesn't just fall onto your lap one fine day, you got to go out there and source for inspirations. So I did my research by going through several designers’ websites which are available on the Internet in order to source for ideas on the kinds of layout, typography, colour scheme and composition which they had adopted for their websites. The main site I went to get inspiration from was http://www.newwebpick.com. From browsing through these websites, I learnt the importance of having a consistent layout, clear and easy to read texts, the good use of space, and paying attention to finer details to aid easy navigation. Most of the websites found, apply a good use of CSS to standardize the design and style so as to ensure consistency. It is quite rare to find websites that are not using CSS these days. It was also noticed that most websites adhere to the Rule of Third together with a 2 column or 3 column layout. Furthermore, depending on the purpose of the websites, some websites are found to adopt javascript for animation to enhance the interactivity of their websites. Also, designers’ websites employ more graphic design in their layout, with fancier fonts so as to give their websites a creative edge. Generally by default, website headings have fancier and larger font sizes than the text body, and each website often comprise of 2 to 3 different fonts. I believe these factors help in retaining the attention of users.
& after getting down to work on those 2 themes, the following Homepage and main Work page were created using Photoshop to be used for the tutorial critique session.
Design One:
Design Two:
Font Samples:
For the homepage font, I decided to have more fancy-looking cursive fonts for the headings that can match the theme of a design portfolio. Below are my homepage font samples for the headings that do not take into account the main font for the body. Please take note that the size of the fonts below does not represent the actual font size.
For the words written in the body of the website, I have decided to go with a much simpler font design compared to the fonts used as the headings in the homepage. Simple fonts for the body will give the website a much overall neater design, as well as increase the readability of the website.
Personal views on the designs:
Design One:
The figure and ground does not have a very distinct good separation due to the lack of contrast since the entire body of the layout is in white even though the accented neutral colour scheme is being adopted. As such, there is no clear boundary between the navigation area and the content of the body, making it seem as if the navigation area is part of the body. In terms of typography, there seems to be a lack of variety where the design is mainly dominated by 1 font type, other than the homepage which has 2 different font types. Although there are attempts to adhere to the Rule of Third and apply the 3 column grid layout to present the work pieces in thumbnails, the overall presentation seems a little dull and messy due to the lack of colours and bad separation for figure and ground.
Design Two:
Unlike Design 1, there is a good separation for figure and ground in this case where there are clear boundaries between the navigation area and the body through the use of distinct borders and colours. Similar to Design 1, the colour scheme adopted is the accented neutral colour scheme combined with the monochromatic colour scheme to present a calm feeling with tinge of excitement. In terms of typography, variety is observed whereby there is at least 3 different font types dominating, with exception to the homepage which has 4 font types. Again, there are similar attempts made to adhere to the Rule of Third and to apply the 3 column grid layout to present the work pieces in thumbnails. However, the overall presentation is not as dull as Design 1, and much neater as well.
Design Specifications:
FONT:
The fonts used for the homepage headings are Lobster 1.4, and Marcelle Script, with Tangerine as the font for the word “Blog”. Lobster 1.4 and Marcelle Script were selected for the headings because out of all the samples, though they were regular font size, they appeared to be bolded, hence looked the most suitable for headings. Besides, both font types appear quite similar although there are some slight differences, as such, when they are used together it will provide some variety but not entire stark difference. The body font for the entire website will be Times New Roman because it has a professional feel to it compared to the rest of the samples, and it appears to be much more compact in size compared to Arial and Verdana. Therefore, by using Times New Roman, my text body does not seem to stretch too long.
PAGE LAYOUT:
To adopt a good design structure, the navigation area will be separated from the body, and also it will adhere to the Rule of Third, with a 3 column layout. As such, it will be clear where the links are and where the body of content lies. Also, there will be a consistent layout margin throughout the website to provide a breathing space that can help capture and hold the users’ attention by keeping their eyes within the frame. Furthermore, text and images will not overlap with each other so as to add to the readability as well.
COLOUR SCHEME:
For the colour scheme, I have decided to mix both accented neutral colour scheme together with monochromatic colour scheme so as to achieve some gradients in the colours to add to the calming effect, and with tinges of red as well to prevent the layout from becoming too dull. The parts in red will help draw the attention of the users to the particular content in the body.
Problems Encountered So Far:
I experienced some unexpected problems when it came to the layout for Assignment 3 and Assignment 6 because these were image intensive assignments. Handling so many images became a problem because some images were vertical while others were horizontal, and this affected the alignment which in turn affected the layout. Furthermore, having so many images to deal with, I did not know how many images I should fit into a page such that these images will not be too small to be seen or too large such that they take up too many pages. I've thought of using an image slider to make things neater, but still being a HTML noob, I've yet to figure out how to make it work!
Next, I've yet to solve the problem regarding the print friendly version - my images somehow don't seem to appear and I don't know why :(
Ahwell, seems like I need to seek help from Luo Lan soon!
Critique Session:
Surprisingly the comments which I had received were really unexpected. The class actually prefers Design One over Design Two - a total opposite from my own preference! I remember someone using a metaphor saying that Design One is like Mac while Design Two is like Microsoft (hmm...doesn't sound too positive). & there were others who said that Design Two looks more like a certificate while Design One has more style to it. I personally feel that Design One seems a little messy in terms of the layout compared to Design Two. Besides, Design Two has more of a cleaner feel, and has more of a potential to be a professional web portfolio. My gosh, internal conflict of the 21st century! What a dilemma!
Anyway, after getting all the feedback from the class, I've decided to stick to my own preference and choose Design Two, but improve on the points that were raised during the critique session. It was really quite an internal struggle deciding which design to choose. But after having much debate in my own head, I've figured that my portfolio should represent me; it should be something that I like creating and feel proud of to put my works in.
I believe in life there will be many other instances such as this where I would have to decide whether I should be doing things that others prefer, or doing things that I really like. & I guess it all boils down to the individual self. If we're constantly doing things that others prefer, and neglecting our own interest, then life wouldn't be as fulfilling; you wouldn't feel much sense of achievement since you're constantly living for others instead of yourself. What's the point of doing something that you have no passion for? Without much passion for what you're doing, you'll just put in minimal effort which will just produce substandard work. That is not to say that comments from others are useless! They are useful, and we should take every comment seriously and incorporate these ideas from others into our own, to make it an even better piece of work.
& just from this critique session alone, I've learnt to...
*EDITED at a later time...
Okay so it's been a week or so since I've handed in my website to Julian! PHEW, one hurdle down and another 4 more to go!!
Firstly, for any of you who wish to find a workable and easy to implement image slider, you've so got to check these 2 Youtube videos out!! THEY LITERALLY SAVE MY LIFE & SOME BRAINCELLS!! I've been searching for an entire week for an easy and workable image slider but to no avail, everything I found just didn't work which really made me wanna pull my hair out...until I found this 2 Youtube videos! I'm forever thankful for the creator! THANK YOU!!
Here's the 2 videos...
Alright, so now for the finalized version for my website (doubt I'll have the time to edit anymore for the portfolio). Hope y'all will like it because I was really on the verge of throwing my guts up trying to fix the alignment of the print.css versions! Sometimes it worked fine, other times it refused to, which was super annoying and such a nightmare especially with the bugs in the browsers which I have no idea how to fix! Thank goodness it's over now (hopefully)! I don't ever want to be a web designer!
Okay, without further ado, here's the screen shots of the Homepage, as well as the Work page.
Hopefully this 2 screen shots will entice you enough to go check my website out! I'll continue working on my website after this semester to add in the assignments for NM3208, so do drop by often! :)
Here's the link to my web portfolio.
http://3208.thevisualodyssey.com/
*for optimal viewing, please view the website in 1024 X 768 resolution!
ENJOY!
& so the task for Assignment 1 is to design and create a website to serve as a portfolio for my NM2208 assignments. Special attention should be paid mainly to the typography, layout, colour scheme and composition of the website. Also, the website should fit nicely into the 1024 X 768 resolution. The aim of this project is to utilize the advantages of Cascading Style Sheets (CSS) for my website apart from the proper organization of type and content.
Alrighty, so for the web portfolio I had 2 main themes in mind, one was a simple and clean look, and the other I wanted more of a sketchy feel to it. The stuff that I intend to display in my portfolio are: Homepage, Work, About, Contact. My assignments will all fall under Work where I will have my final pieces displayed up together with the work-in-progress pieces.
After much thorough thought process, I have decided that a good website is one that is simple and easy to navigate, and one that is not too cluttered with too many elements to draw the attention away from users. Though keeping things simple is the way to go, there should still be some form of design to make the website visually appealing to the users. Furthermore, reading texts on the screen can be quite a challenge given people’s short attention span, hence, I intend to limit the amount of texts on my website in order not to lose the attention of my users.
& we all know that inspiration doesn't just fall onto your lap one fine day, you got to go out there and source for inspirations. So I did my research by going through several designers’ websites which are available on the Internet in order to source for ideas on the kinds of layout, typography, colour scheme and composition which they had adopted for their websites. The main site I went to get inspiration from was http://www.newwebpick.com. From browsing through these websites, I learnt the importance of having a consistent layout, clear and easy to read texts, the good use of space, and paying attention to finer details to aid easy navigation. Most of the websites found, apply a good use of CSS to standardize the design and style so as to ensure consistency. It is quite rare to find websites that are not using CSS these days. It was also noticed that most websites adhere to the Rule of Third together with a 2 column or 3 column layout. Furthermore, depending on the purpose of the websites, some websites are found to adopt javascript for animation to enhance the interactivity of their websites. Also, designers’ websites employ more graphic design in their layout, with fancier fonts so as to give their websites a creative edge. Generally by default, website headings have fancier and larger font sizes than the text body, and each website often comprise of 2 to 3 different fonts. I believe these factors help in retaining the attention of users.
& after getting down to work on those 2 themes, the following Homepage and main Work page were created using Photoshop to be used for the tutorial critique session.
Design One:
Design Two:
Font Samples:
For the homepage font, I decided to have more fancy-looking cursive fonts for the headings that can match the theme of a design portfolio. Below are my homepage font samples for the headings that do not take into account the main font for the body. Please take note that the size of the fonts below does not represent the actual font size.
For the words written in the body of the website, I have decided to go with a much simpler font design compared to the fonts used as the headings in the homepage. Simple fonts for the body will give the website a much overall neater design, as well as increase the readability of the website.
Personal views on the designs:
Design One:
The figure and ground does not have a very distinct good separation due to the lack of contrast since the entire body of the layout is in white even though the accented neutral colour scheme is being adopted. As such, there is no clear boundary between the navigation area and the content of the body, making it seem as if the navigation area is part of the body. In terms of typography, there seems to be a lack of variety where the design is mainly dominated by 1 font type, other than the homepage which has 2 different font types. Although there are attempts to adhere to the Rule of Third and apply the 3 column grid layout to present the work pieces in thumbnails, the overall presentation seems a little dull and messy due to the lack of colours and bad separation for figure and ground.
Design Two:
Unlike Design 1, there is a good separation for figure and ground in this case where there are clear boundaries between the navigation area and the body through the use of distinct borders and colours. Similar to Design 1, the colour scheme adopted is the accented neutral colour scheme combined with the monochromatic colour scheme to present a calm feeling with tinge of excitement. In terms of typography, variety is observed whereby there is at least 3 different font types dominating, with exception to the homepage which has 4 font types. Again, there are similar attempts made to adhere to the Rule of Third and to apply the 3 column grid layout to present the work pieces in thumbnails. However, the overall presentation is not as dull as Design 1, and much neater as well.
Design Specifications:
FONT:
The fonts used for the homepage headings are Lobster 1.4, and Marcelle Script, with Tangerine as the font for the word “Blog”. Lobster 1.4 and Marcelle Script were selected for the headings because out of all the samples, though they were regular font size, they appeared to be bolded, hence looked the most suitable for headings. Besides, both font types appear quite similar although there are some slight differences, as such, when they are used together it will provide some variety but not entire stark difference. The body font for the entire website will be Times New Roman because it has a professional feel to it compared to the rest of the samples, and it appears to be much more compact in size compared to Arial and Verdana. Therefore, by using Times New Roman, my text body does not seem to stretch too long.
PAGE LAYOUT:
To adopt a good design structure, the navigation area will be separated from the body, and also it will adhere to the Rule of Third, with a 3 column layout. As such, it will be clear where the links are and where the body of content lies. Also, there will be a consistent layout margin throughout the website to provide a breathing space that can help capture and hold the users’ attention by keeping their eyes within the frame. Furthermore, text and images will not overlap with each other so as to add to the readability as well.
COLOUR SCHEME:
For the colour scheme, I have decided to mix both accented neutral colour scheme together with monochromatic colour scheme so as to achieve some gradients in the colours to add to the calming effect, and with tinges of red as well to prevent the layout from becoming too dull. The parts in red will help draw the attention of the users to the particular content in the body.
Problems Encountered So Far:
I experienced some unexpected problems when it came to the layout for Assignment 3 and Assignment 6 because these were image intensive assignments. Handling so many images became a problem because some images were vertical while others were horizontal, and this affected the alignment which in turn affected the layout. Furthermore, having so many images to deal with, I did not know how many images I should fit into a page such that these images will not be too small to be seen or too large such that they take up too many pages. I've thought of using an image slider to make things neater, but still being a HTML noob, I've yet to figure out how to make it work!
Next, I've yet to solve the problem regarding the print friendly version - my images somehow don't seem to appear and I don't know why :(
Ahwell, seems like I need to seek help from Luo Lan soon!
Critique Session:
Surprisingly the comments which I had received were really unexpected. The class actually prefers Design One over Design Two - a total opposite from my own preference! I remember someone using a metaphor saying that Design One is like Mac while Design Two is like Microsoft (hmm...doesn't sound too positive). & there were others who said that Design Two looks more like a certificate while Design One has more style to it. I personally feel that Design One seems a little messy in terms of the layout compared to Design Two. Besides, Design Two has more of a cleaner feel, and has more of a potential to be a professional web portfolio. My gosh, internal conflict of the 21st century! What a dilemma!
Anyway, after getting all the feedback from the class, I've decided to stick to my own preference and choose Design Two, but improve on the points that were raised during the critique session. It was really quite an internal struggle deciding which design to choose. But after having much debate in my own head, I've figured that my portfolio should represent me; it should be something that I like creating and feel proud of to put my works in.
I believe in life there will be many other instances such as this where I would have to decide whether I should be doing things that others prefer, or doing things that I really like. & I guess it all boils down to the individual self. If we're constantly doing things that others prefer, and neglecting our own interest, then life wouldn't be as fulfilling; you wouldn't feel much sense of achievement since you're constantly living for others instead of yourself. What's the point of doing something that you have no passion for? Without much passion for what you're doing, you'll just put in minimal effort which will just produce substandard work. That is not to say that comments from others are useless! They are useful, and we should take every comment seriously and incorporate these ideas from others into our own, to make it an even better piece of work.
& just from this critique session alone, I've learnt to...
*EDITED at a later time...
Okay so it's been a week or so since I've handed in my website to Julian! PHEW, one hurdle down and another 4 more to go!!
Firstly, for any of you who wish to find a workable and easy to implement image slider, you've so got to check these 2 Youtube videos out!! THEY LITERALLY SAVE MY LIFE & SOME BRAINCELLS!! I've been searching for an entire week for an easy and workable image slider but to no avail, everything I found just didn't work which really made me wanna pull my hair out...until I found this 2 Youtube videos! I'm forever thankful for the creator! THANK YOU!!
Here's the 2 videos...
Alright, so now for the finalized version for my website (doubt I'll have the time to edit anymore for the portfolio). Hope y'all will like it because I was really on the verge of throwing my guts up trying to fix the alignment of the print.css versions! Sometimes it worked fine, other times it refused to, which was super annoying and such a nightmare especially with the bugs in the browsers which I have no idea how to fix! Thank goodness it's over now (hopefully)! I don't ever want to be a web designer!
Okay, without further ado, here's the screen shots of the Homepage, as well as the Work page.
Hopefully this 2 screen shots will entice you enough to go check my website out! I'll continue working on my website after this semester to add in the assignments for NM3208, so do drop by often! :)
Here's the link to my web portfolio.
http://3208.thevisualodyssey.com/
*for optimal viewing, please view the website in 1024 X 768 resolution!
ENJOY!
Presentation 1
Monday, January 17, 2011
http://sg.yahoo.com/?p=us
http://www.nus.edu.sg/cors/
http://www.tumblr.com/directory/designers
Yahoo! Singapore (one of my favourite search engines to use) makes use of cool colours such as purple and blue throughout its website. It makes use of analogous colours blue-purple to create a sense of harmony, and these cool colours also allow for easy reading and navigation since they are not too strenuous on the eyes. In terms of layout, Yahoo! Singapore adopts the simple 3 column grid giving it form, structure, and consistency. There is also a layout margin which serves as a breathing space, and this helps to control and hold the attention of the readers since the breathing space available will keep readers’ eyes within the frame. It can be observed that Yahoo! Singapore follows Gestalt’s Principle of Proximity which states that elements placed closed together tend to be perceived as a group. By following the simple 3 column grid to separate each segment using frames in a proximate space, unity occurs and these frames though separate from each other, are now perceived as one group.
Not forgetting our favourite NUS CORS website! It makes use of complementary colours blue and orange throughout its website. The intensity of a warm colour like orange is altered when paired with its complement colour blue which has the effect of visually neutralizing the colour, thus making it less glaring when viewed as a whole. In terms of layout, NUS CORS adopts the simple 3 column grid only to a small extent. It follows more of a 2 column grid than a 3 column grid layout. Similarly, it too has a layout margin which serves as a breathing space to help control and hold the attention of readers by keeping their eyes in the reading frame.
I got to say that the cool thing about Tumblr is that every different category you search for in the directory will have a different background relevant to the category! There are too many categories to choose from to comment on so I will focus on the category ‘Designers’. For the category ‘Designers’ in Tumblr, it makes use of neutral colours as the theme which contain equal parts of each of the three primary colours black, white and gray. Making use of neutral colours, gives off a very minimalist feel which is rather apt for the category on ‘Designers’. Neutral colours also allow for easy reading and navigation around the page. In terms of layout, Tumblr very obviously adopts the simple 3 column grid. Again like the previous 2 websites, Tumblr too has a layout margin allowing for a breathing space to control and hold the attention of readers. Like Yahoo! Singapore, Tumblr adopts Gestalt’s Principle of Proximity whereby the elements placed close together are perceived to be in the same category. Though falling under the same category, but when the frames are viewed individually, it is very obvious that there are obvious distinguishing features which set them apart as each frame consists of a unique individual profile of the blogger.
All 3 websites makes use of CSS. Yahoo! Singapore uses CSS to implement things like fonts, colours like background colour, border colour, links, and background images across the website. While NUS CORS uses CSS to implement things like colours and links, and Tumblr uses CSS to control their style sheet.
A single CSS file can contain positioning, layout, font, colours and style information for an entire website; as such it is a means of separating the content of an html document from the style and layout of that document. Hence the first advantage of using CSS would be that it becomes very easy to change the style of a document without the hassle of opening every single page which requires change and altering them manually. With CSS, all you need to do is to open the CSS file which stores the layout of the site and make the change there. This change will then be reflected throughout every page of the website ensuring consistency, and helps save a lot of time. Therefore, CSS is especially useful for large websites with many pages. The second benefit of CSS is that all of the style and layout is being removed from the html so that the html page size is very much smaller hence reducing the file transfer size and the bandwidth requirements of the server. The third benefit of CSS is that browser compatibility will not be a problem because CSS style sheets will help increase the website’s adaptability and ensure that the website will be viewed the way it was intended to. Lastly, CSS can help solve the issue of making the website available for different media by allowing the same markup page to be presented in different viewing styles.
WOFF stands for Web Open Font Format and it is a standardized font format for use on the web. The first advantage of WOFF would that sites using WOFF would require lesser bandwidth since the font data is compressed. As such they will load much faster. Secondly, WOFF improves the availability of fonts to site designers as many font vendors are unwilling to license their TrueType or OpenType format fonts for use on the web but they will license WOFF format fonts. Finally, both proprietary and free-software browser vendors like the WOFF format, so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats.
Check out these cool sites which is experimenting with WOFF:
http://lostworldsfairs.com/eldorado/
http://lostworldsfairs.com/atlantis/
http://www.nus.edu.sg/cors/
http://www.tumblr.com/directory/designers
Yahoo! Singapore (one of my favourite search engines to use) makes use of cool colours such as purple and blue throughout its website. It makes use of analogous colours blue-purple to create a sense of harmony, and these cool colours also allow for easy reading and navigation since they are not too strenuous on the eyes. In terms of layout, Yahoo! Singapore adopts the simple 3 column grid giving it form, structure, and consistency. There is also a layout margin which serves as a breathing space, and this helps to control and hold the attention of the readers since the breathing space available will keep readers’ eyes within the frame. It can be observed that Yahoo! Singapore follows Gestalt’s Principle of Proximity which states that elements placed closed together tend to be perceived as a group. By following the simple 3 column grid to separate each segment using frames in a proximate space, unity occurs and these frames though separate from each other, are now perceived as one group.
Not forgetting our favourite NUS CORS website! It makes use of complementary colours blue and orange throughout its website. The intensity of a warm colour like orange is altered when paired with its complement colour blue which has the effect of visually neutralizing the colour, thus making it less glaring when viewed as a whole. In terms of layout, NUS CORS adopts the simple 3 column grid only to a small extent. It follows more of a 2 column grid than a 3 column grid layout. Similarly, it too has a layout margin which serves as a breathing space to help control and hold the attention of readers by keeping their eyes in the reading frame.
I got to say that the cool thing about Tumblr is that every different category you search for in the directory will have a different background relevant to the category! There are too many categories to choose from to comment on so I will focus on the category ‘Designers’. For the category ‘Designers’ in Tumblr, it makes use of neutral colours as the theme which contain equal parts of each of the three primary colours black, white and gray. Making use of neutral colours, gives off a very minimalist feel which is rather apt for the category on ‘Designers’. Neutral colours also allow for easy reading and navigation around the page. In terms of layout, Tumblr very obviously adopts the simple 3 column grid. Again like the previous 2 websites, Tumblr too has a layout margin allowing for a breathing space to control and hold the attention of readers. Like Yahoo! Singapore, Tumblr adopts Gestalt’s Principle of Proximity whereby the elements placed close together are perceived to be in the same category. Though falling under the same category, but when the frames are viewed individually, it is very obvious that there are obvious distinguishing features which set them apart as each frame consists of a unique individual profile of the blogger.
All 3 websites makes use of CSS. Yahoo! Singapore uses CSS to implement things like fonts, colours like background colour, border colour, links, and background images across the website. While NUS CORS uses CSS to implement things like colours and links, and Tumblr uses CSS to control their style sheet.
A single CSS file can contain positioning, layout, font, colours and style information for an entire website; as such it is a means of separating the content of an html document from the style and layout of that document. Hence the first advantage of using CSS would be that it becomes very easy to change the style of a document without the hassle of opening every single page which requires change and altering them manually. With CSS, all you need to do is to open the CSS file which stores the layout of the site and make the change there. This change will then be reflected throughout every page of the website ensuring consistency, and helps save a lot of time. Therefore, CSS is especially useful for large websites with many pages. The second benefit of CSS is that all of the style and layout is being removed from the html so that the html page size is very much smaller hence reducing the file transfer size and the bandwidth requirements of the server. The third benefit of CSS is that browser compatibility will not be a problem because CSS style sheets will help increase the website’s adaptability and ensure that the website will be viewed the way it was intended to. Lastly, CSS can help solve the issue of making the website available for different media by allowing the same markup page to be presented in different viewing styles.
WOFF stands for Web Open Font Format and it is a standardized font format for use on the web. The first advantage of WOFF would that sites using WOFF would require lesser bandwidth since the font data is compressed. As such they will load much faster. Secondly, WOFF improves the availability of fonts to site designers as many font vendors are unwilling to license their TrueType or OpenType format fonts for use on the web but they will license WOFF format fonts. Finally, both proprietary and free-software browser vendors like the WOFF format, so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats.
Check out these cool sites which is experimenting with WOFF:
http://lostworldsfairs.com/eldorado/
http://lostworldsfairs.com/atlantis/
the start of a long journey
Wednesday, January 12, 2011
Honestly, after sitting through yesterday's lecture with Julian, I was slightly discouraged from taking NM3208. But after looking through my previous NM2208 blog, the bittersweet memories start flowing back to me. I remembered that before I even took NM2208 a few semesters ago, I've already heard how crazy the workload was going to be, yet I still took it because I know that my passion lies in designing/creating things. I didn't want to let what others have to say about the module affect me, I wanted to experience it myself. Even if it was going to be a mistake, I wanted to make it and learn from it (but no, taking NM2208 was not a mistake). In fact, I've got to say that NM2208 is one of my favourite modules that I ever took, apart from Singapore Film, because these modules teach you skills and not memory work - something which you can take away and apply in the workforce. No doubt these modules were hella tiring (maybe I like to torture myself haha), but seriously at the end of the day no matter how tiring the process was, it is not the pain that you will remember, but the sweet memories and satisfaction you get out of creating works that you can call your own and be proud of. I hope at the end of NM3208, I will be able to say this again (that is if I can even get registered officially into this class first), but I'm pretty sure I'm going to enjoy this module! This very first post is to get the ball rolling and to motivate myself to press on and take a small step each day because when the going gets tough, the tough gets going! I'm gonna be in for a bumpy ride, but so what? Bring it on! :)
Subscribe to:
Posts (Atom)
