Assignment 1

Title: Designing for a Web Media
Medium: HTML + CSS

Theme: Revamp the Media Development Lab (MDL) website.

Description:

• 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).

Procedure:

• Look and analyse at the existing systems (the content, the design elements etc). Please find the existing design in your folder.
  • To analyse, please go to \\cnm\web3208\NUS_NET\A1\MDLExistingWeb\ (Please beware it is a backslash \, not a forwardslash /).
  • To browse it online, then go to http://web3208.visualcomms.com\NUS_NET\A1\MDLExistingWeb\ (Please beware it is a forwardslash /, not a backwardslash \).
• Identify elements/contents need to be modified.
• Discuss several themes with your teammate, and make some roughs for the layout, and what you want to put.
• Please be careful that we are not allowed to modify the header and footer. This is the corporate rule from NUS. The rest of the content can be modified (e.g. all html files).
• Follow the final rough that you finally decide, and create a CSS file to match this rough.
• Upload the css, and test these pages live
  • To upload, please go to \\cnm\web3208\NUS_NET, where NUS_NET is your user id (e.g. u6050432). Please beware it is a backslash \, not a forwardslash /.
  • Create a folder name it as modified
  • To test, go to http://web3208.visualcomms.com\NUS_NET\A1\modified
• Choose a free DNS, and give a good and easy-to-remember name
• Present your design in class by elaborating the design elements your team have applied (the project will be marked based on these elements and how these elements interact to make your design look professional)and how it matches your theme. Please point out these elements as many as possible and how they help the website to achieve the professional look. Also elaborate on the enhancement your team have made. The total time for presentation for a team is 12-15 mins.

Right. It is a group project and when i visited the website, the first thought that came to my mind was :"Everything is very Windows 95".

I have a little bit of experience in playing around with html (mainly via blogs) but looking at the source code of the websites made my jaw drop all the way to China. It is messy and the codes are all over the place. In addition we had to use CSS to transform the website. I sat down and stoned. Suddenly this year's CNY becomes CSSNY.

I set out to learn CSS from scratch. I really did, just for this assignment. Not only learning CSS was proving to be a huge challenge, making sense of the website's html code and making it CSS friendly is another HUGE challenge.

However, i am proud to say that i have conqured that all, countless amount of hair and energy were lost on frustrations(at the ever-crushing dreamweaver to the huge mess of a html code). I finally managed to come up with the template using CSS for revamping the whole website.

We decided to keep it simple, with main tags at the top and side tags at the right hand side. There is minimal graphics except for headings and the index page. The background was kept white, the font size and color was slighly altered from the even-a-blind-man-can-see sized font to a smaller but still readable font.

Elements of our design in a few words: Clean, organized and concise.

Our revamped website : http://web3208.visualcomms.com/u0600988/A1/modified/
The original website : http://www.fas.nus.edu.sg/MDL/

Just to give a general idea, here are a couple of the main changes.

The old website

The New design

The old menu bar

The New menu bar.