CMNS Redesign (HTML & CSS)

by Aisya Aziz

Original website:

This page, from my point of view, does not follow the accessibility rules as much, but overall, has a well designed layout. Some examples of he accessibility rules that the page have left out was the "alt" tag on each picture and it uses a text picture to navigate to other pages. (For example, "the Upcoming Events"). However, I like how the designer uses a lot of gradients in the background; it gives the feeling of smoothness to the page. On the other hand, the page has a lot of links (in the form of writings) thus, causing the page to be less readable - and users could not find what they want real fast. The designer tried dividing them into 3 categories, the main menu (on the sidebar), the hot topics and resources. But, even so, in the side menu, there are many links and they could not get what they want fast. I only realized that the side menu is expandable after the 5th time I viewed the page. In the "Hot Topics" section, the designer tried to differentiate each line by using alternate row background colors - however, the shades were so light causing the whole section and each line to be less stand out.

Redesigned website:

The main changes I made is that I redesigned the side menu to look more obvious - that it is a side menu. I purposely used black in order to differentiate the main menu with the normal contents of the web page. Besides that, I changed the alternate row color - instead of light pink, I used a more obvious color, yellow - the color gives a better contrast. Apart from that, I changed the position of the college name, the search engine and the date. The college name, from my point of view, should be the first thing the user should see, hence, it should be at the header of the page. Plus, with the search engine a little lower, the user would be able to peek at the page first - rather than immediately searching for the information he needed. I added a scroll bar to the Hot Topics section, too. This is in order to ease the users to view the list of hot topics, rather than having to scroll the whole page. To add more smoothness to the page, I added a round border on the footer and at the bottom of the content - just so that it will feel less edgy and also to differentiate between the footer and the content.

Side Note
Just a side note, if I could restructure the whole page, I would change the side menu - categorize them into big categories (probably general information, education, jobs and alumni) and put them on the upper menu rather than a side menu. There are too many links in the 'menu' and they are usually the main thing users would want to look into, thus, it should be more visible and easier to navigate through.