cmns_clone_revised_amajedi

Clone | Revised

(Note: developed using Chrome)

Before I begin explaining the revisions, I would like to say that the CMNS website, in my opinion, is very well organized. The three column layout with a header and footer is very much a web standard and naturally draws the visiters attention to the middle where the topics are outlined. The left hand side navigation menu is also typical of most other websites which allows the visitor to quickly identify what it is and use it to get to where they want to go. I'll start here...

The first revision I made after duplicating the original website was spacing the left-hand side navigation menu items further apart. I felt the links were too close together which made them hard to quickly scan. I figure this is probably the most important area of the webpage since vistors want to quickly navigate to their intended destination and the original designers pushed the items together to allow the expanding sections not to run off the page, they should have spaced the elements further apart and changed the site functionality such that when an area is expanded, the page grows respectively to match the added length of the subcategory. Beyond just spacing, I added a suble hover over effect along with a nudge to the right upon hover to highlight which menu item the cursor is over. I figure this will promote better readability since the human eye is better at noticing both a change in color as well as a change in alignment.

I also centered the "Hot Topics" title along with reducing the height of the background header, this is mostly a preference however I think it contributes to readability and looks a little nicer. Also, added gradients to the background of each list element here along with a slightly darker hover over gradient along with a vertical yellow marker to further distinguish the active element.

I moved the search box and button down from the UMD banner down to the college name banner to associate the search to within this site rather than a global umd search. Along with this change I removed the date, I think it's unnecessary. Moving the search bar down also has the added benefit of allowing the nice red colors that contrast between the header and the background to stand out even more.

Since this is a university webpage, most of my changes were implemented to improve readability over improving stylistic characteristics, although I think the original page is beautifully designed and does a good job staying consistent with the design of www.umd.edu.

By: Amir Majedi