Assignment 2 (I)

After the tedious and hectic week before revamping the MDL website, this week is an individual project that require us to take pictures, at least 7, to tell a story. Just when I thought I am over CSS, this week's medium is through the use of web images. The theme this week is 'A Day in the University/NUS'.

So I got down to brainstorm my storyline and what would best tell my day/journey in NUS. It is kinda boring to use the typical CCAs, academia, and friends concept. So I decided to do something with Wanyu, Margaret and Rahman. We wanted to do something that could link all 4 of our assignments together. We would personify the characters of the famous childhood fairytale 'Wizard of Oz'. The initial plan was to have me acting as the brain searching Scarecrow.

After a few days of running around school and taking pictures, I realised that my images are quite different from the rests. Hence I decided to tweak my story abit. So basically my story goes about with me in the library. I wanted the caption for the images to rhyme alittle and have a link from start till end. So here are what I have in mind.

Life in NUS is like a library.

The library is like a jungle.

You struggle to survive.

You either succeed or die trying.

In the jungle, you leave remnants of yourself behind.

You get lost and...

... You get enlightened.

At the end of the day, it is nothing but a void.

Basically the days in NUS might seem bleak and alone when you are in it (hence the dark yellow colour to the pictures and also each photo only has one person being in the focus.) but you realised that you are not alone and your presence is felt by many and you leave imprints of yourself where ever you are and what ever you do with your days in NUS (hence the green little bag that is found lying around in the pictures). At the end of your journey, you will realise that all these conquest of knowledge is nothing but pointless.

One of the restrictions for this week's assignment is to not exceed 180KB. Therefore pardon the bad resolution but overall I still think the pictures are visually pleasing and consistent. Comments were that the rhyme is good and the pictures are well taken and consistent.

Here is a screen capture of how the first version looked like.

Overall I am quite happy with the look of my pictures. One of the comments was that the pictures are well taken and consistent looking. So I guess the only thing I would change would be the website layout for the pictures. Maybe I will use something more interactive than the one I used before.

Stay tuned!

Assignment 1: MDL website FINAL

For this week, we are supposed to modify an existing website. And the website is, the Media Development Laboratory website, MDL.

Here are some screen captures of how the website looks like.










Overall, we thought the website looked quite boring and uninviting. The website lacked interactivity and is aesthetically unattractive. So we decided to modify it and make it more interesting and interactive.

Since this particular assignment involves the use of CSS and dreamweaver, I am glad that it is a group assignment because I have no idea how to use CSS/Dreamweaver at all haha. But I hope to change that by the end of this assignment.


There are some restrictions for this assignment as well. Here are the instructions for the website assignment.


Use Principles of Visual Communications (i.e., Design Principle) to modify the existing website. Create a theme for your own design (any theme you like). Define the typefaces used, the color, the grid and other design elements applied in CSS. Design the graphics (images) to suit your theme. Upload your design on the server. Give your design a brief name (using DNS).


So since lacked the technical skills necessary for this assignment, I was very much involved in creating the visuals and designs for it while the rest search for and apply java scripts and codes and etc.


Starting with the main page, as a team, we concluded that the original main page was quite cluttered looking and the page is too black to attract attention. So we decided to make the page brighter and have the focus on the name of the website than anything else. We removed the redundant information of it's working hours and made the images smaller to fit the film strip. The two film strips form a V shape and this places the focus on the MDL title more. To make the page more coherent, we decided on a consistent theme to use the splatters for all the pages. I placed the words in this manner because a user's eyes usually falls on the top left corner of the webpage and that is where the film strip is. The film strip will lead the eyes onto the M letter and users can read from there the word attached to it and following the M, the eyes will lead downward to D and then to L. This makes the entire website more pleasing to the eyes and made it easier to comprehend it. The splatter at the back also enhances the focus on the words.


The images used is also relevant to the purpose of the website and we reduced the number of images to reduce clutter.
For the next page, as you can see other than reorganising the information onto this page and reusing the images, we made this page more interactive. We used a CSS style/transcript that enabled users to place their cursers on the MDL blue box and an image of the MDL entrance would be seen. This increased user participation and interactivity. As you can see also, the use of the splatter is consistent and non invasive, in a way that it does not interfere with the information on the page and it not only emphasis on the word, purpose of the webpage, but also beautify the page. And as you can see with the following pages, we used almost the same layout to make the entire website look more cohesive.

For the Contact Us page, we used the same layout and but this time round, instead of placing the information beside the pictures, we decided that it would much more aesthetically pleasing if the information are placed below the pictures instead. This is in accordance to the eye movements of a user as well where the eyes would naturally move downwards when they see the pictures. We also did not use the use of CAPs to type the information because we thought it seemed difficult to read the text. The use of an opaque grey box behind the text places focus on the information and also coincides with our black/white/grey theme of the website.
For the Audio and video pages, we used the same slider concept to make it more cohesive and not confuse users by constantly changing the interaction interface. The information are clearly placed in the sliders. The Audio Digitizing title at the top left corner of the page balances the webpage better with all the content at the bottom. The information and image heavy bottom is balanced with the title and splatter at the top. We also made the graphics more consistent with the content of the page. For example with the audio digitizing pages, we used the standard sound waves at the bottom and for the video pages we used the film strip. The use of blue and orange also coincides with the standard NUS color.





For the equipments for loans page, we used another interactive transcript that allows users to view the images of the equipments available. The original site lacked this ability to view images and information on the same page. The page layout is also done and placed this way to balance the page too.

Last but not least, the fonts used are san serif fonts this increase readability on the web for the user.

In conclusion, we are very happy with the new website and if there are more time and knowledge on using CSS and also lesser restrictions such as the inability to remove the menu bar on top, then we would be able to do more and make the website more interesting.