myco_paulo_hw4

CMNS Redesign Homework by Myco Paulo

Original: @http://www.cmns.umd.edu/

Copy: @http://terpconnect.umd.edu/~mpaulo/CMSC434/html_hw/index.html

Redesign: @http://terpconnect.umd.edu/~mpaulo/CMSC434/html_hw/index2.html

Description:

The main body of the CMNS website is divided into three columns. In the original design, it was hard to distinguish the different groups, because they all had similar backgrounds. The column on the left uses a white background with a shadow effect, the middle column uses an alternating yellow and white background, and the column on the right uses a white to light gray gradient. In my redesign, I changed the background color of the left and right columns to dark gray. This, I think effectively groups these three columns and once the page loads, the viewer can easily tell that there are three separate columns.

Because I changed the background color of the left and right columns, I also had to change the color of the text and links inside them. I used the color white because it goes well against a dark background. When you hover over a link, the text color changes to light gray. I did this so that users can easily tell when their mouse is over a link. When they see the text color change, they can immediately tell that their mouse cursor is over a link.

In the middle column, I decided to get rid of the gradient background because I think it’s visually unappealing. I just made the title “Hot Topic” bold and underlines so users can tell it’s a title and not one of the links. I also increased the spacing between the links so they’re not clustered. Lastly, I added a yellow border at the bottom to balance the yellow border at the top.