Blog Post

Retro Portfolio: DetroitHockey.Net Redesign

In September 2002, became DetroitHockey.Net. DetroitHockey.Net continued to use the same page layout as By November of that year, I had decided that DetroitHockey.Net needed a fresh start and its own page design. I used one of my favorite past designs as a starting point and created a new look for the site.

The first thing I did was re-institute a three-column layout. The navigation moved to a box on the left-hand side of the page above a skyscraper advertising banner. The remaining columns remained the same, with the exception of page “modules” that were enclosed in their own borders.

Each module performed a specific function (listed headlines, displayed a poll, displayed that week’s schedule, etc.) and could be swapped in and out of each page based on what information was appropriate on the page. The same information had been present in the previous version of the site but the modular design allowed me to reuse code more effeciently.

To try and create a unique look to the header of the page, I built a banner that included diagonal lines that disappeared under parts of advertising banners.

I recolored the site to replace the dark color scheme with a lighter one but I could not decide exactly which color set to use. I had made three mockups of my design using different color patterns. One was promarily red, one grey, and one white. I personally preferred the grey version but almost everyone else I tested the design with liked the red one more. As a result, I developed a “skin” feature and used all three.

A mock-up of the November 2002 DetroitHockey.Net redesign, featuring content from several years later.
A mock-up of the November 2002 DetroitHockey.Net redesign, featuring content from several years later.

The site was redesigned again in August 2003 but these skins were kept as options along with the new ones.

The above text and image were copied directly from my original portfolio as I imported it over to the blog.  It was not updated for re-publishing.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.