I used to have separate sections of this site dedicated to my portfolio and my code samples. After awhile, I realized that how I was displaying code samples was wrong, and I applied that logic to my portfolio as well. As such, my portfolio is now a part of my blog, shared with this category.
I launched FantasyHockeySim.com as a spinoff of DetroitHockey.Net last summer and the visual elements of it were a rush job. Getting the site out the door was my priority, so I stole design elements for FHS from DH.N and put together a logo that didn’t say “fantasy hockey” at all.
Awhile ago I ranted about the Detroit Red Wings’ “Hockeytown” logo and how the only way it said “Hockeytown” was literally, with the text splashed across it. I’d done the same thing with the FantasyHockeySim.com logo, as crossed sticks said “hockey” but the only way it said “fantasy hockey” was via the FHS acronym across the front. Even then, it looked more like the logo for a high school hockey team than for simulated fantasy hockey software.
While stuck on a development project, I decided to take a crack at a new FHS logo.
Because I like shield-based logos far too much, my first pass centered around different shields. Eventually I put together one that I really liked the look of and started building alternate logos around it.
I showed the “final” set (the shield logo and “promotional” versions featuring additional text) around and realized I hadn’t solved the problem I was trying to handle in the first place. The logos still only said “fantasy hockey” literally, and even then it was only the promotional ones.
I stepped back from it and didn’t think about it for awhile until an idea came to me during my drive into work a couple weeks later.
Representing hockey in a logo is easy. Sticks, pucks, all sorts of imagery is available. How do you represent “simulation” though? Well, simulation means computers and code and, even to a layman, X/HTML’s angle brackets are recognizable as code. So I wrapped a pair of crossed hockey sticks in angle brackets and went from there.
The first issue I hit with the logo was that the crossed sticks looked a bit like an X, so I changed their position and added lines representing tape to the blades. After that, I decided to give up on my attempt at a monochrome logo, changing the color of the angle brackets to help separate them from the sticks (with the added effect of appearing as syntax coloring).
As I worked on a primary version of the logo, I also created an alternate version and a “promotional” version. The promotional logo features the “bracket” logo inside a roundel containing the “Simulated Fantasy Hockey” descriptor and the site name while the alternate is simplified version of that, without the text.
The biggest issue with the alternate and promotional logos was making sure the broken inner circle of the roundel didn’t appear like it was supposed to be attached to the angle brackets. To handle that, I shrank down the width of that inner circle and made the break in it wider. Changing the color of the brackets completed the effect.
The FHS site still needs a redesign to get away from borrowing so much from DH.N but at least now the logo is original and descriptive.
Two years ago I entered a design featuring a griffin silhouette on a shield as the primary logo, with the jersey in “vintage” white, blue, and red. The shoulder logo was a roundel with an interlocking GR logo the team had previously used. Last year I tweaked the logo to make the griffin’s wing a little cleaner, switched up the shoulder logos, changed the number font, and updated the colors to go along with the Griffins’ color change, but the striping pattern stayed the same.
This year I thought for certain that I was going to enter another red jersey, so I started with my previous design. I swapped out the “vintage” colors and simplified the striping pattern. Rather than black numbers with a white outline, I went with white numbers outlined in black as they would be more legible. I kept the player’s jersey number in the collar webbing because, as I’ve said before, I loved that feature of their old alternate jersey. I also brought back the shoulder logo from my original entry as a 20th Season patch no longer made sense. Finally, I broke down and put the Winged Wheel logo of the Detroit Red Wings on one shoulder, as the Griffins do that on their standard jerseys to denote their parent club, no matter how much I dislike the practice.
I felt like that design was too simple, though, so I continued evolving the design. For the second generation, I switched the order of the sleeve colors and removed the shoulder yoke. I wanted the Griffins’ jersey to have an homage to the alternate colored sleeves of the Red Wings’ white jersey. I also brought back the black numbers outlined in white as I figured for a one-shot jersey, legibility is less of a concern (in fact, the Griffins wore dark red numbers on a dark blue jersey for one game two seasons ago).
Unfotunately, I thought that looked far too close to the design of the Texas Stars. While the Griffins selected a design two seasons ago that was basically a color swapped Iowa Wild jersey, I wasn’t comfortable submitting something like that.
As such, I decided to fully embrace the alternate-colored sleeves. I made the jersey body red with a black stripe bounded by white and the sleeves black with a red stripe and white outline. I also changed up the shoulder logo, replacing the interlocking GR with the griffin silhouette I used on the crest as I didn’t want to re-use one of the team’s existing marks, even modified.
At this point, I thought that I had my final design. I started showing it to a handful of people and near-universally the feedback was that they wanted to see a black version. Of course, I had started out trying to make a red jersey, so at first I ignored this. Eventually I hit the point where I had to listen to what my informal focus group was saying and did a switch of the colors. While a quick Twitter poll showed 53% of fans would have preferred a red jersey, 100% of people who saw both the red and black jerseys picked the black one. As such, the black one was my final design.
There are some coincidental homages in this design. The Grand Rapids Owls, an International Hockey League team in the late 1970s, wore jerseys with red sleeves that had black stripes outlined in white. Additionally, the Red Wings sold “fashion” jerseys (alternate jerseys that were never actually worn in-game) that had a black body with a red stripe at the waist, red sleeves with a black stripe, and numbers that match this design. The stripes did not include a white outline.
The Griffins explicitly stated that they wanted a dark jersey from this year’s contest. I imagine that’s because of the AHL’s new rule that will see light jerseys worn at home until Christmas and dark jerseys after that. Previously there had been some flexibility with regards to alternates but I’d guess that’s out the window with these new rules.
At any rate, just for fun, I created a white version of my submission.
As I mentioned, the primary logo is carried over directly from last season’s submission, aside from the color switch. This is a logo full of homages. The shape of the shield is that of the DetroitHockey.Net logo as a reference to my previous work. The feathers on the griffin’s wing are those of the Winged Wheel. The griffin’s tail is that of the original Grand Rapids logo.
The shoulder logo went through a number of revisions as I sorted out what color it would be placed on, how much detail should be included, and what element would be inside the roundel.
While I think that having a silhouetted griffin on both the crest and the shoulder is a bit repetitive, I see the different uses to be somewhat like how the Tampa Bay Lightning have a lightning bolt on both the crest and the shoulder.
As I’ve said every year, I don’t expect to win this contest. This year is interesting because ten finalists will be determined by fan vote and then the Griffins staff will decide. Additionally, this year submissions do not have to follow a standardized template. If I had to guess, the vote will skew towards submissions that look like they come out of a video game, as they come across as the most impressive. Whether or not those are actually the best designs will have to be seen.
Update: After posting this I noticed that the shoulder logos are incorrectly depicted on the view of the back of the jersey. They should be switched so that the Winged Wheel is on the right shoulder and the roundel is on the left, as they appear in the view of the front of the jersey. I’m not going to update the graphics, just use your imagination a little.
With the fantasy side of the site gone and no longer reliant on the rarely-used DH.N Community Forums, I reworked DetroitHockey.Net to remove the forums. I also pulled out my custom blog software and replaced it with WordPress.
The idea behind going to WordPress was that, while I enjoyed writing my own blog software, it left me somewhat behind the times as far as what the site was capable of. It’s a wheel I don’t want to reinvent, so instead I learned how to tap into native functionality of WordPress to do the things I wanted to do.
With the loss of the forums and the continued simplification of the site content, I was able to go with a more streamlined design. The header features the site logo (I launched with the 20th Season logo in place but it will revert when that season ends), an advertisement, and one navigation bar. This is in contrast to the old version of the site, which had a logo, three navigation menus, a login menu, an ad, and a set of links to forum discussions.
I also took the opportunity to implement the sub-navigation menu system that I developed for FantasyHockeySim.com.
The home page features seven recent headlines from the WordPress-driven news section, an embedded Twitter feed (replacing a custom developed version of the feed display), the score of the most recent Red Wings’ game, and a calendar showing the current month’s schedule (with games denoted by opponent logo).
The individual article pages use a modified version of the WordPress Twenty-sixteen theme, wrapped in the DetroitHockey.Net template.
The only other page that was heavily modified was the DH.N Contributors page, which pulls from the WordPress user system.
This version of the site is intended to be transitional, with further revisions coming after seeing how the forum-less site is used.
FantasyHockeySim.com went live last Thursday. The site plays host to a couple simulated fantasy hockey leagues using the FHLSim software. Through FHS, league members can manage their teams in real-time, as opposed to all kinds of manual data entry that is required by FHLSim out of the box.
And if that sounds familiar, it might be because up until FantasyHockeySim.com launched, all of that was a part of DetroitHockey.Net. FHS is simply that functionality spun off into its own site.
One of the leagues that had been hosted at DH.N, the National Hockey Association, is the official league of SportsLogos.Net. And some of its members were not happy about having to be members of a Red Wings site to do their fantasy hockey. So I decided to move things to a neutral site.
With the fantasy hockey side of things no longer reliant on DetroitHockey.Net infrastructure, this would also allow me to update the two sites more easily.
Originally, the site was going to be called FHLSite, as that’s what I had referred to my software as when it was a part of DH.N. I had a hard time coming up with a logo for that, though, so I changed the name to FantasyHockeySim.com, abbreviated FHS.
For the logo, I took the shield from DH.N’s primary logo and changed the colors to gray and blue, then put the letters FHS over the top of it. A pair of crossed hockey sticks – the sticks from the DH.N logo, appear behind the shield.
The basic site design was ported over directly from DetroitHockey.Net but the header and footer were updated. For the main site and each league, the basic elements of the template are the same, with branding images and an accent color swapped out to provide uniqueness. The main site is a blue-gray while the DFHL is red and the NHA is a dark blue.
The biggest change was the replacement of the DH.N Community Forums as a communication hub and an identity provider. DH.N’s Invision Power Board installation is integrated into the entire site, which included the fantasy hockey side of things. It would not be available upon moving to a new domain.
I decided to create a team on Slack and build a login system around it. I’ll write more about this in a future post on lessons learned about the Slack API, but the short version is that their OAuth workflow and API combined to allow me to have users with accounts on the FHS Slack team log in to the main FHS site and see their unread message counts, effectively replicating the functionality of the forums.
The end result is something curious, where I’ve launched a new site but created virtually no new functionality. I think it’s a good starting point, though.
So when they unveiled the logo celebrating the team’s final season at Joe Louis Arena, it should come as no surprise that I was unhappy with it.
The primary problem I have with this is that the only way it says “Joe Louis Arena” is literally. Much like my complaint about the Hockeytown logo. Even then, they didn’t use the arena’s actual name but the nickname of “The Joe.”
The main elements of the logo are a big block of text, a Stanley Cup silhouette, and four stars representing Stanley Cup Championships. Visually, this feels more like a logo celebrating those championships than the arena that hosted the team when they were won.
The Joe isn’t all of that interesting of a building but at least try to represent it visually.
I threw together a rough drawing of the direction I’d like to have seen them go (and I emphasize “rough”).
The primary element of this design is a drawing of the exterior of Joe Louis Arena. It’s not a beautiful building by any means but it is recognizable and as such it makes sense to use it in the logo.
I kept the “Farewell Season” text across the top of the logo and the Winged Wheel at the bottom. The four stars are kept, two on each side of the Wings’ logo. A ribbon is added across the bottom of the arena rendering containing the remaining text from the original logo. The bounding shape is changed because I think it works better as a patch.
The only element removed is the Stanley Cup silhouette, which I don’t think is necessary.
So change the shape, change the colors, change any of the other elements… Just include Joe Louis Arena. That’s what the logo is supposed to be for. Show it, don’t just say it.
EDIT 2/15: I got some feedback that the bounding shape is unnecessary because it reduces the impact of the arena’s distinctive shape and I agree. I mocked up a version that uses the drawing of the arena, the ribbon, and the Winged Wheel without losing any of the important elements. Even the four stars are kept.
Since then I’ve disliked the Griffins’ 20th Season logo, their new primary logo, and their new jerseys. Over the last year it has become painfully clear that I don’t have the same design aesthetic as the Griffins’ front office.
On top of that (and as I’ve said before), I don’t love the idea of the contest. While it’s billed as a fan design contest, many of the winners have been design enthusiasts who are not fans of the Griffins. If Griffins fans aren’t winning, you’re essentially just asking for free design work.
So why submit a concept if I don’t think I have a chance of winning and don’t quite believe in the idea? That’s the question I’m struggling to answer. I did it anyway, though, so I’m detailing it here.
It’s immediately noticeable that this is an evolution of the design I submitted last year. The striping pattern, logos, and numbers are all very similar to the 2014 design and the nameplate is identical.
As the Griffins changed their color scheme for this season, the design has been updated to reflect that change, though I kept the “vintage” palette. Off-white, dark grey as a faded black, and a rust-like red. Out of curiosity, I did give a non-vintage color set a shot and it absolutely screamed 1970s Cleveland Barons so I abandoned it. I will say that going with this color scheme could be a risk as the team doesn’t have helmet/pants/gloves to match it.
With the 2014 design, I came up with a whole set of jerseys but submitted the white one. This time I went with a red jersey with black trim. The Griffins used to have a white home jersey, a blue road jersey, and a red alternate. Now they have a white home jersey, a black road jersey, and a black alternate. I thought having a red jersey rather than just another white or black one was important so I ran with that as the primary color. Additionally, playing up the color black helps keep the jersey from looking like a Red Wings clone.
The striping pattern has been very slightly modified from my original design. The shoulder yoke, wrist stripes, and hem stripe are all black with a white outline and then a black outline. The two outlines are 50% thicker than they were. The shoulder yoke is slightly smaller to account for that.
Additionally, last year I couldn’t decide how to render what was supposed to be a straight stripe, given that the jersey template featured curved lines in places that would be straight in three dimensions. That time I went with a curved line to match, this year I called a straight line a straight line.
The number font changed from a modified version of the Chicago Blackhawks’ (which I deemed to be too wide [due to the modification, not the standard font]) to that of the New York Islanders. I decided to go with black numbers as another way to differentiate the red jersey from Detroit’s and put a white outline around the numbers to make the black more visible on dark red.
Speaking of the number, I also carried over the placement of the jersey number in the collar webbing, my favorite feature from the Griffins’ now-retired red alternate jersey.
The logo – as it was in last year’s submission – is a griffin silhouette inside a shield. The griffin stands on two legs with its claws reaching out to the front. I kept the homage to the Griffins’ original logo in place, as this griffins’ tail is the same as that of the newly-replaced Grand Rapids mark. The only change to the logo is the wing, which I was never happy with.
While I liked the fact that the original wing was raised high, the proportions and shape felt wrong. As such, the new wing is closer to the griffin’s back, larger but sleeker. This also allows a second homage, as the wing’s feathers are in the same shape as the wing on the Red Wings’ logo.
The shoulder logos were significantly harder to decide on than the jersey crest. Shortly after I submitted last year’s concept, I came up with a version of its shoulder logo that added some outlines to the text to give it more depth. For this year, I started with that design and swapped the colors around.
The first debate I had with myself was whether or not to use a Red Wings shoulder patch, as the Griffins’ actual jerseys do and both of last year’s winners did. Wanting to keep the vintage feel, I put together a patch design that was the Winged Wheel in vintage colors inside a shield in a shape that is often (mis-) attributed to the Detroit Cougars of the 1920s.
I then thought about the fact that this is the Griffins’ 20th anniversary season and that it should really be commemorated on the jersey, as it is on all three of the sweaters in their standard set. I replicated the shoulder patch from the team’s home and road jerseys and recolored it to match this jersey design. I also modified the anniversary mark to use the interlocking GR logo rather than either the old or current Griffins’ primary, as I didn’t think they fit with the griffin silhouette crest of my jersey. To give the GR logo some added heft in the anniversary logo, I surrounded it with a kind of “keystone” effect.
With that done, I decided that I wanted to balance out the roundel on the left shoulder with one on the right. This also gave me the opportunity to play with something that always bothers me about minor-league team jerseys: The seemingly-random appearance of another team’s logo. I started by creating a true roundel based on the design of the Griffins’ 20th season logo. I added text to the circle reading “Detroit Red Wings” across the top and “Primary Affiliate” across the bottom, giving reason for the slapping of a Detroit logo on a Griffins jersey. Inside the circle I went not with the Winged Wheel but with the Old English D, as I felt it fit both the circle and the overall feel of the jersey better. The D is outlined in black, a modification I wouldn’t have wanted to make to the Winged Wheel anyway.
As I said, I don’t think this design will win the contest. I don’t think they’ll pick another griffin silhouette so soon after picking one last year. I don’t think they’ll go with a design that they don’t have matching pants and helmets for (for the record, I imagine a black helmet and black pants [well, vintage black] for this set). Also, I think that there are some really… off parts of the 20th season patch but I copied those elements directly from the Griffins so I kept them in.
I don’t know. We’ll see.
One last note, here’s that Barons-esque standard red/white/black design:
Recently, Jenny decided to pull her development blog – Code, Crafts, and Craic – off of Blogger and onto the NextJen site. I ended up coming up with a type treatment that ties Code, Crafts, and Craic into the NextJen branding.
The important question to answer first was whether Code, Crafts, and Craic was becoming the NextJen blog or whether the NextJen blog was called Code, Crafts, and Craic. It may sound similar but it’s a matter of which brand is more important. Jenny decided that the blog would be keeping it’s name and focus, it was just moving inside the NextJen web property.
With that decided, we knew that the focus was on making the existing name look like NextJen, rather than tacking the existing name onto NextJen.
We started with the “NextJen” type treatment and applied it to the words “code,” “crafts,” and “craic.” The word “and” is dropped in the empty space between “crafts” and “craic” but the commas in the name are left implied by line breaks. The three Cs are aligned to the left but the block of text that forms is centered over the text “The NextJen Mobile Blog.”
The aerials that appear over the tittle of the J in the NextJen logo are repeated over the O in code, modified to fit the O better. The aerials are derivative in both logos but it provides an extra bit of visual continuity tying them together.
I wrote a piece for the “Fix it Friday” feature over at SportsLogos.Net but they decided not to run it, so I’m posting it here.
The idea of that feature is to take the uniform set of a sports team and point out what’s wrong with it, then propose an alternative. My focus was the new alternate jersey of the NHL’s New York Islanders. What follows is slightly edited from my original text, as I don’t need to follow the same format here as I would there.
The New York Islanders unveiled their new alternate jersey two weeks ago. A departure from their blue and orange standard set, the alternate is black and white, mimicking the color scheme of their new landlords, the Brooklyn Nets.
Though statements at the unveiling of this jersey say otherwise, the new Islanders jersey doesn’t tie into the team’s history at all. It could be any team’s jersey. It doesn’t tie into a history of four consecutive Stanley Cups, even with four stripes to represent those wins. It doesn’t share anything with the modernization of that set worn in the late 1990s into the Reebok Edge era. It (thankfully) doesn’t evoke memories of their previous departure from the norm: the Fishstick jerseys.
And – again, despite what team executive say – it’s not supposed to.
While this doesn’t in any way say “Islanders,” it screams “Brooklyn” (at least the Brooklyn brand that the Barclays Centre team is trying to build). Minimalist and a little retro, with rounded fonts.
As such, there are two ways to look at this. Is it a successful New York Islanders jersey? Not in the slightest. Is it a successful Brooklyn hockey jersey? Based on the brand they’re trying to build there, I think so. That said, there are still issues with it.
The minimalist version of the Islanders’ current primary logo – stripped down to just the connected “NY” – works well as an alternate logo for the team, as it did on their Stadium Series jerseys. Additionally the “B-with-stripes” alternate logo that appears on a tag at the hem of the jersey looks good, as does the BKLYN logo on the helmet that makes use of the Y from the primary.
The inclusion of a white hem stripe at the waist of the jersey, breaking up what would otherwise be an all-black body, is a big factor towards making the color choices work for me. Those stripes also being used at the cuffs of the sleeves is a good bit of consistency.
Similarly, the contrasting-color collar helps break things up, though, as I’ll get to below, I don’t think it’s quite enough.
The thing that supposedly ties these Brooklyn-themed jerseys back to the New York Islanders franchise is also the thing that was most poorly executed. Four stripes, one representing each of the team’s Stanley Cup Championships. These stripes appear on each arm and on each sock, but they’re far too thin to appear very visible during game play. They get lost. Even when modeled on a white background, they appear more like a musical staff than anything athletic.
Speaking of tying into the past, on a black-and-white jersey the use of orange for the four stripes in the crest logo is jarring. The blue and orange Brooklyn shoulder patch on a black background also has this problem, as do the helmet logo and the hem tag logo.
The hem tag logo is something else I take issue with. Not the logo itself, which I mentioned liking, but the placement. Those hem tags won’t be visible on the ice, they’re just included for the fans wearing them in the concourse.
Finally, I’’m not sold on the number font. It’’s unique across the NHL but it feels very overbearing. It’s a big, bulky font – with just a little bit of rounding that feels like a throw-in.
The sleeve and sock stripes are made thicker, making them more visible. A white shoulder yoke is added, breaking up the solid black look and giving the blue an orange shoulder patch something to pop off of. A white stripe is added to the side of the pants and the “B” logo is moved to the bottom of that stripe, replacing the redundant “NY” logo. Orange is swapped out for white. A more rounded font is used for the numbers.
There’s no undoing the revolutionary change that is going to black and white for the Islanders. What we can do is clean up some of the mistakes they made in the process. Bolder stripes, rounder numbers, and removal of jarring colors gets us that. It ends up with a retro-modern look that the Brooklyn organization seems to have been going for.
The 25th season of the DetroitHockey.Net Fantasy Hockey League coincides with the 20th season of the main site itself (possible because DFHL seasons don’t typically last and entire year), so I’ve been working on a lot of commemorative logos of late.
The logo, like DH.N’s 20th season logo, is based on the “promotional” version of the league logo, though the modifications are less severe.
The text of the league name has been slightly condensed to leave more space at the bottom of the circle. In that space is the league’s primary logo, larger than the DetroitHockey.Net logo that normally takes that spot. Inside the circle, where the league logo normally would be, is the text “25th” in a block font. The “25” is red with a white and black outline while the “th” is solid black, tucked partially inside the opening of the 5.
A waving banner goes across the circle, sticking out on each side. The banner goes under the circle and over the league logo and the “25” text. Inside the banner is the word “season,” placed directly under the aforementioned “25th.”
The entire thing uses the “vintage” red, white, and black colors that I’ve used so much. I’ve been trying to get away from them but for some reason I think the DFHL logo looks really good in that scheme. Probably the amount of red.
Today marks DetroitHockey.Net’s nineteenth birthday and over at the site, I’ve unveiled the 20th Season logo.
The logo is based on the “promotional” DetroitHockey.Net logo featuring the site’s shied logo inside a roundel. This roundel is broken by a bar featuring the years 1996 and 2016. The top half of the roundel says “DetroitHockey.Net” in a more condensed type treatment than the base logo. With the year of establishment already in the logo, the bottom half of the roundel includes the text “Twentieth Season.”
Like DH.N’s previous anniversary logos, this one was designed as if it were a jersey patch for a sports team. Unlike the previous ones, this one is also intended to match the existing logos of DetroitHockey.Net’s identity.