The version of DetroitHockey.Net launched in September of 2005 had been in development for over a year but the design had stayed pretty much the same throughout the process.
All advertising banners were removed from the site, so I was able to go with a smaller header section that still featured the wordmark and site logo prominently. I wanted the header to be useful, so links to the different subsections of DH.N were added at the top, as well as a welcome message for users who are already logged in.
The navigation was inspired by ESPN.com and the items in that column were grouped to abide by the “Rule of Seven.” Aside from appearance, the navigation did not change.
The featured story was given more space at the top of the page and I added the ability for three sub-features to be displayed below it. The sub-features could be articles or polls. This allowed me to simply add an extra article when there was no active poll, while the previous version of the site would just waste that space.
The most recent non-feature stories are listed in a “Headlines” box, similar to the previous version of the site. If any ongoing feature sections are active, they are also listed there.
The “Last Game” section was retained in the right-hand column, while the “Week in View” schedule from the previous version was replaced with a “Monthly Schedule” section that was built in Flash and tied directly into the site’s schedule database to allow users to browse the schedule from the home page. The schedule was moved to the right-hand column from below the featured story, making it more visible.
The “Community Forums” section was updated to show the five most recent topics, rather than just one, along with a listing of which users were online.
The site was built to expand to the user’s full browser width, which can be problematic on pages with large amounts of text but I thought the benefits outweighed the risk.
Along with the new site design came a new set of site logos.
I started by changing the primary “shield logo” design slightly, replacing the “cartoonish” crossed sticks with a more “vintage” style. It simplified the look of the logo and made it seem more professional.
I then updated the wordmark, simply changing the font to a variant of Copperplate Gothic. My main goal in doing this was to replace the rounded serifs in the wordmark, again creating something cleaner and less cartoonish.
With the wordmark updated, the site’s secondary logo was out of place so I abandoned it and intended not to have a secondary logo. As I continued work on the site, I felt the need for a version of the logo that included the site’s name, so I developed a new secondary logo. Like how the original logo set was based off of historical Detroit hockey logos, the secondary logo was based off of a past logo of the Chicago Black Hawks, which featured the early version of their “Indian head” logo inside a circle with the text “Black Hawks” arched across the top and “Chicago” along the bottom.
The DH.N secondary logo features the word “Detroit” across the top, with “Hockey.Net” across the bottom. On either side of the circle are the numbers “19” and “96”, designating the 1996 year that the site was founded. In the middle of the circle is an old English “DH” logo, standing for “Detroit Hockey.”
After creating the secondary logo, I realized that I didn’t want to simply use the wordmark below the primary logo on merchandise, as I had before, so I combined the secondary and the primary logos to create a “promotional” logo. This is based on the secondary logo with the “DH” removed and replaced by the primary mark.
All of the logos were in use in some promotional places before the version of the site that they were created for was launched.
The above text and images were copied directly from my original portfolio as I imported it over to the blog. It was not updated for re-publishing.