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.
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.
I’ve ranted on DetroitHockey.Net (and related environs) in the past about my dislike of the “Hockeytown” name by the Detroit Red Wings. I think it was a cheesy slogan that would have been gone after a year had the Wings not happened to win the Stanley Cup that year.
And the logo… What an awful mess.
I was complaining about the logo to Jenny a few days ago and she had a simple response: “So fix it.”
First, I’ll explain why I don’t like the existing logo.
There are three elements to this logo. It starts with the Red Wings’ actual logo, then the word “Hockeytown” is thrown over it in a font that looks like cracked stone (maybe it’s supposed to be cracked ice?), finally the team’s year of establishment is added in smaller text.
As I’ve said in a couple conversations while I’ve been working on my concept, the reason this logo says “Hockeytown” is that it literally says “Hockeytown.”
The “Hockeytown” wordmark doesn’t stand on its own. The font is dated, its choice is confusing. On top of that, it’s used to obscure the Red Wings’ logo, the only thing that ties in to Detroit, the city the logo is supposedly representing.
It could say Baseballtown or Footballtown or be used over any team’s logo and carry the same weight. Example:
It works just as well with the logo of the rival Colorado Avalanche as it does for the Red Wings. I’ve already been told I’m going to be punched for doing that, too.
So I wanted to create something that said Detroit, Red Wings, and hockey without needing the word “Hockeytown” to do so.
I love shield logos so it should be no surprise that I use a shield as the base. That shield is set atop a pair of crossed hockey sticks, pretty much a universal symbol for “hockey” (one that I’ve used repeatedly in other projects). In the bottom part of the shield is the Red Wings’ logo on a red background.
That red background becomes the skyline of Detroit moving upward. In the “sky” portion of the shield is the wheel part of the Red Wings’ “Winged Wheel” logo in a very light grey, while “Established 1926” appears arched across the top of the shield.
Over the middle of the shield is the word “Hockeytown” in a block font.
One bit of stealth symbolism that shows I was thinking too much: There are seven pieces of tape on each stick representing the seven Stanley Cup Championships Detroit has captured as of the time they started using the “Hockeytown” name.
I don’t love this logo. The text looks awkward to me, I’m just not going to take the time to get it right. It also looks familiar, like I might be borrowing elements from something I’ve seen and can’t recall. I know there are shield logos with a skyline in them, for example. Also, the shape of the shield matches the one used in the Griffins’ 20th anniversary logo because I already had it drawn.
That said, I think it hits all the notes I was trying to. The team logo says “Red Wings” (obviously), the skyline says “Detroit,” and the sticks say “hockey.” Yeah, you could swap out another team’s logo and another city’s skyline but that’s a bigger change than what I did to make Denver “Hockeytown” above.
I think the real test is that it stands on its own with the “Hockeytown” text removed.
Removing the text and enlarging the team logo gives you a logo that says all the same things.
I’m not saying “ZOMG! They should totally use this!” or anything. This took me about three hours, one of which was spent tracing the Detroit skyline. I’m not a designer and I put together something less sloppy and lazy than the logo the team actually uses.
The logo, designed by the Griffins with input from Reebok, consists primarily of a silver shield dominated by a “frozen” numeral 20. Silver, a secondary color for the franchise since its inception, is given prominence due to its similarity to platinum, a modern theme for 20th anniversary gifts. Red, which the Griffins began to feature significantly in 2002 when they cemented their affiliation with the Detroit Red Wings, serves as an accent in the logo’s border.
I say the “frozen” 20 looks less like it’s covered in ice and more like it’s dripping. The over-use of silver makes the logo look like a photocopy. The use of red without any of the Griffins’ other colors is something I’ve ranted about repeatedly, as I hate seeing the Griffins defer to the Red Wings’ branding. The Griffins’ primary color is blue. They should use it.
I re-drew the logo the way I think it should have been. Here’s the comparison.
I’ve removed the “drip” and the unnecessary bevel from the 20. The black shield is replaced with the Griffins’ standard blue and the full-color Griffin logo is added. The silver used is the same as is already part of the team’s identity. Red stays as an accent color and the black outline becomes blue.
Disclaimer: My version is a slightly-incorrect trace of the original, so some of the shapes aren’t quite right. I wasn’t trying to change them, just too lazy to get it right.
Now, I still don’t think this is a fantastic logo. Aside from the colors, the only part of the Griffins’ identity used in this is the primary logo, which is partially obscured. The Griffins have a unique jersey number font, I’d love to have seen that used. I do think my version is better, though.
Update: By request, I drew up a version that keeps the bevel. I think it might look better than my original idea.
The site for the Pine Ridge Condo Association was developed with communication in mind.
Prior to the site’s creation, all electronic communication between the neighborhood residents was handled via email, with no single contact list maintained. Members of the Board of Directors had the most accurate lists but, in the interest of privacy, those weren’t made available to the neighborhood as a whole.
The Pine Ridge web site, combined with an associated Facebook page, provided another location where communication could occur. Post to the Facebook page were automatically pulled to the site’s home page. Site administrators could then flag important messages as news, which would give them more space on the home page and make them available in an RSS feed.
Additionally, each resident of the neighborhood was given an account on the site where they could log in to manage their contact preferences.
Their email address and phone number remained visible only to the board, but they could opt in to a mailing list based on the data in this user-managed directory. Any messages sent to a specific email address would be forwarded to all of the neighborhood homeowners. To protect against spammers, only messages from email addresses already on the list would be forwarded on.
By creating the web site, a place for static information was also made available. Documents such as the association bylaws – public documents but sometimes hard to find – were given a home on the site to be more accessible.
The above text and images were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in October 2012.
The Library Orientation Exchange program at Eastern Michigan University had come to O6 in 2007 to turn their then-static listing of resources into a database-driven, searchable index. When it came time for a site redesign, they came back to us.
While LOEX’s “mothersite” was the primary focus of the project, much of the design was driven by their newer web property, the site for their annual conference.
The existing design for the conference site was deemed to be acceptable, however we wanted to take the time to create a unified brand shared across the conference site and the primary site.
We started by taking the horizontal navigation and locale-specific images of the conference site and adding in the LOEX branding. A spot for the LOEX Twitter feed was added to the home page to provide fresher content.
The template was built out in such a way that it could be used for each year’s conference by swapping out a couple images and changing a handful of colors.
With the conference site updated, that design was pulled over to the primary site. The colors were updated to match those of EMU and the locale-specific parts of the conference design were replaced by a section showing how users could interact with LOEX via social media.
The above text and images were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in September 2012.
Photographer Heather Bostater came to O6 in need of a web site that could showcase her work and allow potential clients to reach her.
We brought in Nick Gorsline of Pulp+Pixels to create the design, utilizing his experience to build a layout in which Heather’s photos could speak for themselves.
O6 turned Nick’s design into Adobe Dreamweaver templates and built out pages that Heather could edit in Adobe Contribute, giving her control of the small amount of text content on the site.
A custom tool was created to allow for the management of the site’s photo galleries. The front-end for those galleries was the open-source Galleria system.
Other bits of development included an email form allowing Heather to be contacted through the site and a system for randomly displaying a customer testimonial on the home page.
The above text and images were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in August 2011.
O6 originally completed the e-commerce system for Mythlogic Computers in August of 2007 and by early 2011 it was time for an update.
The first Mythlogic checkout was a single page system, with shipping and billing information entered on the same page and immediately submitted for acceptance or rejection. The same address had to be used for billing and shipping and only credit cards were accepted. Additionally, all shipping charges were a flat rate.
The checkout updates broke that single page down into four steps with additional options and validation.
Separate billing and shipping addresses could be entered at the first step. A checkbox copied information from the billing address to the shipping address if the customer wanted them to be the same. Another new addition was support for international addresses.
The second step took the shipping address that was entered and used the UPS and USPS APIs to determine what shipping options were available and what each would cost.
Payment options were the third step. In addition to the previously-employed credit card option, the new checkout system supported check, wire transfer, and PayPal E-Check.
The fourth an final step was a confirmation page, allowing the customer to review their cart before submitting their order.
This front-end checkout system was also cloned into a back-end system that allowed Mythlogic employees to take offline sales.
The above text and images were copied directly from the portfolio of my former development company, O6 Web Services, as I imported it over to this blog. It was not updated for re-publishing. This project launched in April 2011.