HTML+&+CSS,+Jennifer+Gorski

**HTML & CSS Homework Assignment**
Jennifer Gorski

Revised
The College of Computer, Mathematical, and Natural Science's website focuses on simplicity and, overall, is a successful design for a website. Since it was created by Octavo Designs, an award winning graphic design firm, it is obvious that a lot of thought was put into this layout to ensure the site’s success. The page consists of a header, body, and footer with the body containing the majority of the information. The body is designed with three columns, a left navigation bar, center area containing the page's information, and a right area containing additional resources. This three column layout is very standard and complements peoples mental models, which is important for a university's website. For this reason, my redesign utilizes the original page's structure and focuses on improving the navigation and readability of the site.

Upon visiting the CMNS website, I noticed that there is not enough contrast on the page to distinguish the different areas. The color and font is the same throughout the page and the line separations are light and difficult to see. This lack of contrast makes the text hard to read and hard to distinguish different areas. To fix this problem, I first changed the Hot Topics to a serif font. This lets the user know this is the content being presented on this page, and the other links are supplements to the website. I also used a darker gradient for the Hot Topics title bar which brings the users eye from the header straight to the main content area. To separate the lines, I used a light gray in the background instead of the cream color originally used. Not only is this easier to see, it complements the site’s color palette. To separate the links in the left navigation bar, I used a black gradient instead of their original blue. The original line was also hard to see and the use of black throughout helps the user’s eye move around the page and find key areas. I experimented with using different font colors, however, the constant blue helps to distinguish that everything is a link. To help the user navigate through these links, the background changes to light gray when the user hovers over a link. In the Hot Topics area, I used a light gray gradient, again to give importance to this area, but this also suggests a button. Most people assume that the left navigation is a clickable area, but usually the body isn’t full of links. By suggesting a button, it helps the user recognize that each line is a link to more information. Finally, I made minor adjustments to spacing and font size to aid in readability and complement the changes made throughout the page.