During my senior year at Bainbridge High School (BHS), it was announced that the school administration would be looking at upgrading our website. Due to IT costs, they were considering outsourcing the design, development, and hosting to a third party. My Digital Design teacher, Ms. Rose, asked me to create an in-house design mockup to show to the committee in the hopes that they might ask students to create a design instead. It would make our website a bit more personal, and had the potential to save the district a ton of money. I was given less than 24 hours to create a proposal mockup to present as an alternative to the company's design.

Design Decisions

I wanted to keep the same general structure of the old website, while introducing newer innovations and streamlining the design. It would need to be able to work with a variety of colors depending on the school (for example, while the high school might use white, gold, and blue, Woodward Middle School would use white, green, and brown).

Image Header

One of the main changes was a rotating image header. Before, a random image was chosen and displayed on each page load -- the feature was a favorite among the community, and themed pictures were put up for events such as Thanksgiving, Winter Break, etc. I expanded on this idea and used the Nivo Slider jQuery plugin to display all the images in a rotating banner.

Footer

Another significant change was the footer -- instead of just having a copyright, I added in some of the most visited links for easier access. I also inserted some other sections that as a team we felt weren't getting enough traffic, such as the "Clubs" and "Outside of School" pages. By putting these links in the footer, I ensured they weren't intruding on the core content while still having increased visibility.

Mockup

You can view the proposal mockup here. It isn't as clean as I'd like, but given the time constraints not everything could be pixel perfect! Areas of improvement include header padding, colors, tab width, and main content / sidebar styling. The actual content portion of the website is rather plain by design since the teachers liked to add their own "flair", but it could still be improved.

Old Design

Although a working copy no longer exists, this is a leftover thumbnail of the old design - apologies for the small size!

Ultimate Outcome

Despite overwhelmingly positive feedback from the community, the committee decided to outsource the design and development of the website. I graduated before the switch occurred.