Brandon+Britto+HTML+CSS

=Brandon Britto=

[|clone] [|redesign]

Reasons for redesign:
To start, I didn't really change anything about the layout because I felt like the CMNS webpage already had a good design. The information was well sectioned off so that your eyes could easily move from column to column and even though all the information was visible at one time it didn't feel cluttered. One thing I didn't like about the page was how all of the information is centered which, depending on the resolution of your screen, would leave a lot of visible negative space on the screen. But for anyone who has visited any other .umd webpage, almost all of them are like this so I chose to leave it this way for the sake of consistency.

For the changes I made, they were mainly for visibility and usability. Starting at the top I thought the date was a little hard to see so I changed the color from gay to white, so it would contrast better with the black background, and also increased the font size and weight. For the links on the left navigation column, I thought the links were a little too close if you were using a touch pad or something else that wasn't as accurate as a mouse. But at the same time I liked the look of the original spacing as opposed to increased spacing. So ultimately I chose to make the whole row clickable instead of just the link name and made the row highlight when you hover over it to increase awareness of what the user is actually clicking.

Next, in the section for "hot topics" I increased the contrast of the backgrounds that were supposed to help differentiate the links. I felt like the old colors that were used were just barely noticeable and while spacing did a lot to differentiate the links, this method really draws the attention to a specific link. I was also trying to make the new color as visible as I could without making it overwhelming, but it was hard finding the right "yellow" to go there. Here I also made the entire link row clickable instead of just the text. Next in the right row, I pushed the events gif down a bit and added some actual events under it. The purpose of this was to make events its own section and not just part of the resources header, thus eliminating some of the negative space and making the left and right columns a little more symmetrical in-terms of content. Lastly in the footer, when I first opened this page on my netbook this information was practically illegible. So I increased the font size to make it more visible and readable on different screen sizes.