Original Website(from WayBack machine)
Re-designed Website
Re-designed Website 2

I decided to redesign this website because of several reasons. First of all, when I looked at its source code, I noticed that they used the TABLE element in order to place different elements in various places. Therefore, I wanted to change this "old concept" and use absolute positioning to try to organize elements. Secondly, when looking at the original website, I didn't know if they were trying to look professional or friendly. The design seemed like it was trying to borderline in between both, and I wanted to create two completely different themed webpages. This is because the audience for this page is both for students and faculty members.

For the first redesigned webpage, I tried to make it look professional. This is because, since the Neurobiology major is a hard major to get into, the website should live up to that standard. I didn't want to put any bright colors, but tone it down with gray-scaled colors. I made the banners with GIMP to add onto the professional look. I utilized the text-shadow effect that we have learned in chapter 7, and also use image as bullet points, like we learned in chapter 6. I've noticed that black text on white background might hurt the reader's eyes because of the drastic contrast. Therefore, I picked one of the colors from the banner (dark gray color) to use it as the color for the text. To not waste a lot of white space, I tried to position the whole thing in the middle.

For the second redesigned webpage, I wanted to make it seem friendly to users. Although the faculty members would visit, the website is mainly for prospective and current students in the major. Therefore, to suit the college students, I wanted to make it look happy and friendly. I made the background image with GIMP and used light yellow color to brighten up the tone of the webpage. To play along with the friendliness, I used a font called Walter Turncoat. I also utilized the box shadow effect, opacity, and round corner boxes, as we have learned in chapter 6. The navigation bar is also fixed, for better accesibility for the users. The images on the right are there to spike interest in readers, and I put the caption and the source for reference.

I made sure all the links had despcriptions, and the favorites icon is displayed. The links, when hovering over them, changes color so the user can tell it's hyperlinked.

Overall, this assignment made me utilize all of my html skills I have learned so far, even trying to validate my stylesheets and html. It took me a very long time to figure everything out, trying to make images, look up codes that I don't have a clue on how to do, and trying to tweak the websites to make them presentable. However, it was really a fun assignment since I can see how much I have improved by comparing my previous assignments to this one.

P.S: I attempted to do the extra credit. :)

Copyright © Sammy Chung