Retro Portfolio: DetroitHockey.Net Redesign

The August 2003 redesign of DetroitHockey.Net was mostly unnecessary but I did it anyway. I had never really liked the “edgier” design I tried to do in the November 2002 redesign and wanted to go back to a more traditional style for the site. As well, I thought that too many images were used in the November 2002 design and wanted to develop a layout that was less graphically-intensive.

I modeled the new design after a newsletter layout. So that I could keep the existing templates as part of the site’s “skin” package, I left the three-column layout of the body completely intact and focused on the header and footer. I increased the size of the header to give more room for the site’s logo and the wordmark, hoping that the increased branding effort would keep visitors returning to the site.

The banner advertisements were moved above the wordmark, keeping them out of the way and keeping the site’s title closer to the body of the page.

Just because I could, I developed one red, one grey, and one white version of the design, so that the new design as well as the old design would have three available versions.

Oddly enough, the old version of the site, which I disliked because it wasn’t “traditional” enough, became known as the “traditional” template while the new design became the “newsletter” template.

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

Retro Portfolio:

By August 2003 I had already gotten tired of the original design for that was developed in May of that year. I had never really liked the first design but I had yet to come up with a better one, so I worked out this design.

There were two drastic changes. The first saw the navigation moved to a set of tabs above the page content. This wasn’t the first time I had used a tabbed navigation on a site but for the first time I used the tabs to indicate what part of the site the user was currently browsing.

The second major change was the use of inline frames to control the size of the content. Looking back I realize that the use of the rarely-supported iframe was a bad idea but it seemed like a good solution at the time.

The two-column design survived from the original layout, with the left column containing randomly-selected thumbnail images of sites I had worked on (or sub-navigation, in the case of the “portfolio” section) and the right column containing the content.

A thumbnail view of the home page.
A thumbnail view of the home page.

To solve the problem of having no pre-existing graphical elements to use, I developed a personal logo for use on the site.

The logo consists of simple elements. A skewed elipse in white, outlined in blue and then grey, sits behind text spelling out my initials. The text is in lower case, colored dark grey with a blue stroke.

The original "CJR" logo, my initials in lower-case inside a skewed oval.
The original “CJR” logo, my initials in lower-case inside a skewed oval.

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.

Retro Portfolio: Redesign Support

I was working as a student at Michigan State University’s Division of University Relations when the campus-wide project to rebuild MSU’s website occurred. Because University Relations was involved in the redesign, I had the opportunity to work with the designers that built the new site.

I did not design the site, nor did I build the final product, but during the conecpt stages I helped one of the designers build out her concept from a Photoshop file to a working web page.

I would have liked to have the opportunity to do more work on the site but there were designers available for that and there was no need for me to play any more than a supporting role.

I was able to do back-end support work for the development of the site, creating a content management system for sharing the information that would later be loaded on to the site.

The system stored multiple versions of each page, allowing the site’s editors to roll back to prevous versions if needed. As pages were completed, they could be marked as “complete” and moved to a new section where the site designers could get the content and add it to the site.

Along with this, the content manager kept track of the statistics related to the site. It reported the number of pages that were approved, the number of total pages, and the number of pages in each section of the site.

The content manager was also built in only a matter of days and modified on the fly, as the need for it wasn’t discovered until the last minute.

It was one of my favorite projects to work on, as I was basically told “This is what we need, we don’t care how you do it but make it happen.”

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

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.

Retro Portfolio: Redesign

After was converted from a static site to a database-driven format, I decided to commemorate the changes with a site-wide redesign. Looking back, I believe this was a horrible idea as the design I was using at the time was one of the better ones I’ve ever put together.

I went with a darker design than I had previously been using on, with the page background set to a grey textured image and black borders surrounding the content. The page was broken into two columns – rather than the three that I had used before and have used since – with the navigation in a bar across the top of the page and repeated in the page footer.

The wordmark (“” in the Concielian font) stretched across the top of the page beside an image of the Detroit Red Wings’ logo (or the 2002 Stanley Cup logo in the weeks following Detroit’s Stanley Cup Championship). Other graphical elements of the site included images of the “Believe” patch worn on Red Wings jerseys during the 1997-98 season in honor of Vladimir Konstantinov and Sergei Mnatsakonov and of a red, white and blue ribbon in memory of those lost in the 9-11 attacks on New York and Washington. In what was probably overkill, those images appeared on every page of the site.

A view of the home page as seen after the transition to DetroitHockey.Net.
A view of the home page as seen after the transition to DetroitHockey.Net.

When became DetroitHockey.Net in September 2002, a DetroitHockey.Net wordmark replaced the text in the page header, with the DetroitHockey.Net shield logo replacing Red Wings logo in the banner. Everything else on the site remained the same until the November 2002 redesign of DetroitHockey.Net.

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.

Retro Portfolio: Redesign

The May 2001 redesign of was intended to brighten the site and decrease the load time for each page.

Before this redesign, used a layout with much darker colors and many more graphics. Load times were too high in relation to the content that was being provided.

I developed a layout that used reds and white in place of the greys and black that were used on the previous version of the site. I also converted items such as the navigation and some page headers to text, when they had previously been images.

A thumbnail view of the home page in May 2001.
A thumbnail view of the home page in May 2001.

The design was successful but I later replaced it when I grew bored with the design. Looking back, it was probably one of my better designs for the site. My November 2002 redesign of DetroitHockey.Net was highly influenced by this layout.

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.

Branding a Fake Hockey Team

I’ve been into simulated fantasy hockey for a long time and am currently in a league run through the forums at SportsLogos.Net, the NHA.

Being attached to SportsLogos.Net, the NHA takes its team branding very seriously.  Though not technically required, each team is expected to have a unique and appropriate name and logo, as well as one for their farm team.

I joined the league for its first season (called Season Zero over there because we threw it out as a learning experience after it was done), with my Detroit-based team called the Michigan Sentinels.  After Season Four I called it quits, then returned for Season Seven, inheriting a different team.

As the Detroit market was once again available, I moved the Pocono Pirates and brought back the Michigan Sentinels.  The problem is that the old Sentinels were now the Sudbury Spartans and were still using the original Sentinels’ logo, so I needed to come up with a new graphic identity that represented the same team name but didn’t look like the Spartans.

The original Sentinels’ logo was simply a tweaked version of the logo for NFL Europe’s Cologne Centurions, recolored (red, white, gold and black) and slightly streamlined.  The primary jerseys were based on Team Canada 2002 while the two alternates were more retro, the home alternate featuring “Michigan” diagonally across the front and the road featuring the state name in a deliberately “collegiate” vertical arch.


To get away from the previous identity, I decided to draw more attention to “Michigan” than “Sentinels” in the new one.  The primary logo features a block-M (though not the same one as the University of Michigan uses) placed inside a shield that could evoke the idea of a Sentinel.  The color scheme is simplified, dropping gold entirely and changing to a more muted, “vintage” version of the remaining colors.  The jerseys borrowed elements from many places, coming out looking like a modified version of those worn by the Chicago Blackhawks.  An alternate featuring the state name diagonally across the front was carried on.


After one season, I made a simple tweak to the shape of the shield, changing it to match the updated shield logo of DetroitHockey.Net while thickening the borders to make it a little more visually stronger.  I also added a roundel-style alternate logo to the right shoulder featuring the words “Michigan Sentinels Hockey Club” and “Detroit, MI” around the outline of the state of Michigan.


As an aside, I feel like posts like this one should replace the “Portfolio” section of my site, much like my “Code Sample” blog category replaced a part of the site dedicated to that topic.  I keep debating it.  This might be the first in a new format.  We’ll see.

On DetroitHockey.Net’s April Fools Joke

Yesterday I went through with the fairly-uninspired April Fools Day joke of having DetroitHockey.Net become “ColoradoHockey.Net” for a few hours, with the site and its Twitter account apparently having been hacked by fans of the Red Wings’ formerly-bitter rivals, the Colorado Avalanche.

The site’s logo changed, as did the name, avatar, and background of the Twitter account.  For a few hours, Tweets seemingly from a (moronic) Avalanche fan went out sporadically.  Then I “got control” back and it was all over.

It’s hardly a new idea but one part of it that was fun was converting the DetroitHockey.Net identity to the fictional ColoradoHockey.Net.


The first change was to swap DH.N’s red for the maroon of the Colorado Avalanche, then the black and gray for the Avalanche’s blue.  The text was a simple switch, though I debated what year to use as a founding date for ColoradoHockey.Net (I went with 2014 because the persona I’d be using was that of an idiot who didn’t have any historical context).  I couldn’t just switch an Old English D for an Old English C as the reason for using that particular letter is its history with Detroit.  For a suitable replacement, I turned to the stylized C of the Colorado state flag, recolored to match the existing elements.

It was a silly little project but I think this comparison is fun.

DetroitHockey.Net Logo History

I recently did a soft rollout of a tweaked logo for DetroitHockey.Net and was inspired to go back and take a look at the history of the logo for the site and its affiliated projects.

I only have backups of my graphics going back to 2002, at which time the site was still and didn’t actually have a logo.  It had a wordmark, though, simply the site’s name in the Concielian font.


At that time the Fantasy Hockey League did have a logo, though a very simple one.


Those were abandoned in September of 2002 when the site became DetroitHockey.Net and an identity centered around an old English D was created.


The shield is based on an (incorrect) interpretation of the 1926 Detroit Cougars logo, recolored to suit DH.N’s needs.  The sticks are a slightly-modified version of those used in the original logo of the Mighty Ducks of Anaheim (in this version the tape on the sticks has been modified, there was a briefly-used version where it was identical).  The DFHL logo is based on an old NHL alternate logo where the league abbreviation appears over crossed sticks in a shield.

In 2005 the logo was tweaked, with the sticks getting straightened out and the red darkened.  In addtion, a “promotional” logo featuring the site’s name and year of founding was created, based on an old Chicago Black Hawks logo.


In 2006, the logos were switched up again as the DH.N logo became the old English D over a pair of crossed sticks inside a shield while the DFHL logo took the same shape. Both had “promotional” roundel-style logos with the full site name. Very briefly, the DFHL used a white logo with red text and sticks.


By 2013, the fantasy National Hockey Association had been added to DH.N, affiliated with SportsLogos.Net. To show that the NHA was its own entity but still part of DetroitHockey.Net, another roundel style was created.

This latest redesign is an attempt to tweak things to clean them up just a little. Across the board, the red is darker, the text becomes a little more legible and the roundel logos become consistent. The DH.N shield takes on a sleeker shape and is slightly simplified, with the inner grey border dropped. As there’s now more than one fantasy league on DH.N, the DFHL logo switches back to its old shape to distance it from the primary site, with the text matching that of the roundels. The NHA’s roundel matches the DFHL’s, with the league name in the circle and the DH.N logo at the bottom.


This leaves the DFHL with the following as its logo history (with the briefly-used white logo absent):


The primary site’s logo, excluding the version where the tape on the sticks perfectly matched that used by Anaheim, evolved as follows:


I don’t think there’s necessarily anything remarkable about this but it seemed like a good time to document the changes.

Stupid Little Projects

Sometimes it’s the pointless little projects that are surprisingly fun.

I recently upgraded my phone.  I’m not going to lie, at the end the main reason I loved my old Galaxy Nexus wasn’t the technology but the fact that I had a custom case with the DetroitHockey.Net logo on it.  Half the point of the Moto X is that you can customize the device itself, so a case like that is out.

It led me to design a simple DH.N background and I’m really happy with how it turned out.



One of the “vintage” versions of the logo (designed to look old but not actually an old version of the site’s identity) on a vintage red background.  Vintage white stripes to the top and bottom with a bit of vintage black (actually a very dark gray) trim.

A dirt simple little project but it’s something that makes me smile every time I see it. Sometimes that’s enough of a reason to do something.