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.