The design has since changed.
Beginning in late 2004 and ending in early 2005, I began a massive site-wide redesign for the Honors Program at the Metropolitan State College of Denver. I had worked on updating the site before this period, and I noticed a number of flaws in the site, most notably in the extreme lack of content. In redesigning the site, I attempted to keep much of the feel of the prior site, but also design it so that more content could be easily added in when necessary.
Original and Redesigned Home Pages
The front page of the site is the one that most resembles the previous design. In the old design, two frames are created: the left frame with the links and the Honors Program Logo, and the right frame with content. I decided to forego any frames whatsoever, as frames can lead to complications and rendering issues, especially with older browsers or on smaller computer monitors.
The main change I made is with the links along the left side. In the old page design, the links were themselves images, which changed to an arrow when the mouse was moved over them. Although a very subtle effect, this made it extremely difficult to add in any new links on the front page, as one would have to create a new image when doing so. I instead used plain text links, using CSS to create the color change mouseover effects. This makes it very simple to add in new links along the main page, as well as remove any outdated links.
Original and Redesigned Interior Pages
This comparison is indicative of the new design for the website. The old site keeps the two frames, and the same five links along the left side. I instead used an Honors Program Banner along the left side, keeping it narrow enough so as to have an adequate amount of space for content. The large left frame of the old design allowed only a minimal amount of space for content, and this is corrected in the new site design.
In leiu of the links along the left, I instead created a navigation box along the top of each page, something I replicate for all other interior pages of the site. The top breadcrumb links also allow the visitors to easily see where they are within the site's structure, and provides a quick way to return to the site's homepage.
Original and Redesigned Profile Pages
The most dramatic change to the site is what is shown here. Previously, much of the actual content, such as Professor profiles and course information, was contained inside pop-up boxes that utilized JavaScript in order to launch. These boxes were always set at the same fixed size, and so the amount of content within them was severely limited. Furthermore, the boxes required the use of Javascript in order to run. This approach, although it made for interesting site design, has its flaws. Some users turn off JavaScript within their browsers, and this would have the effect of disabling the site for these users.
Instead of using only a little box, I created a separate page for each piece of information. In the screenshots above, this shows a full page for each Professor. In doing so, I tie the individual information into the site design much better, and this gives me the room needed to place the content of the page into a manageable order that is far easier to view and read. This also allows me the ability to create direct links from this page to others. Additionally, since the size limitations of the small pop-up are removed, I can now provide additional content for each Professor or Course, improving the overall content of the site (one of my goals).
Return to Web Design Portfolio