I made two major design changes to DetroitHockey.Net for the version that launched in October of 2006. The first was to abandon a “fluid” layout in favor of an “elastic” one and the second was to incorporate a horizontal – rather than vertical – navigation bar.
The change to an elastic design was because of difficulty I was having managing pages with wide content in the fluid design. The fluid design was intended for the 800×600 resolution and, while it could go larger, did not do so elegantly. I decided to move to a roughly 900 pixel wide layout that would only expand if the user changed the font size, to give me specific sizes to work with.
The horizontal navigation bar was incorporated to free up space on the left side of the page and to make use of space in a bar that was already there.
Other design changes included an attempt to use less black on the site, replacing it with dark grey in several places.
The header was redesigned to be larger, with the solid red field replaced by an image of red hockey jersey mesh. A white stripe with black trim was added and the wordmark was placed inside it. The site logo, which was redesigned along with the rest of the site, appeared larger but in the same position as on the old version of the site.
I also developed new logos for the site to go along with the new design.
The alternate logo came first and was developed to mimic an existing logo, as all of DetroitHockey.Net’s previous logos had been. It was based on an alternate logo of the Grand Rapids Griffins that featured the letters “GRG” In a shield with crossed sticks behind it.
The first version of the alternate logo was identical to the Griffins’ logo except with the letters and colors switched. The sticks were removed for the second version and the shield shape changed after that.
With the alternate logo seemingly finished, I started playing around with other ideas that I had previously skipped over. I decided to try a “reimagining” of the site’s primary logo, moving the crossed sticks to the inside of a shield (of the same shape as the new alternate logo) and changing the position of the old English D.
I was happy with the result but the two new logos didn’t fit with the new site design, which had been based around the old logo set. I modified the shape of the shield to be somewhat more traditional, which made them fit better with the site.
I also created a “promotional” version of each logo, which features the logo inside a circle with the name of the site and “Established 1996” in a red outer circle around it.
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.
