Retro Portfolio: Judicial Administration at MSU

The site for MSU’s Judicial Administration Program was very difficult to work on dispite the simple format because the information architecture was never well thought out. As a result, the site’s design was constantly being adjusted to modify the menus.

I was in charge of building the site once the original design was completed. It was a frustrating build because of the ever-changing menus and in the end we resorted to using a JavaScript “drop-down” menu that the client was very happy with but I would rather have not used. As far as I can tell, the menu only works in Internet Explorer, but there are alternate menus available for other browsers.

Another difficult thing about working on the site was that there are subtle differences between the index page’s template and the template for the sub-pages. Because of this, I couldn’t re-use any part of one on the other.

After the site was completed, I oversaw several Macromedia Contribute training sessions with the client.


 

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. This project launched in July 2004.

Retro Portfolio: MA TESOL at MSU

The MA TESOL (Master of Arts, Teaching English to Speakers of Other Languages) site for Michigan State University was built to be an online brochure providing information to students enrolled in the program and prospective students not yet enrolled.

As the site was an informational site, it had to be built to be very expandable. To help accommodate this, the navigation was built as a list of links down the left-hand side of the page. At the time of the site’s launch, I had pared down the topics in the navigation to six links to follow the “Rule of Seven” but after the site was handed over to the client to administer the list of links grew to over ten.

Because the site focused on information in text form, I tried to make the layout graphically interesting without being distracting. I used curved lines wherever possible rather than straight edges to get the page an interesting flow. The site’s navigation followed the curved image that appeared along the left-hand side of the page, rather than just following a straight line.

The only part of the site that used straight edges was the “Upcoming Events” box that appeared on the home page. There, the straight edges and bright color caused the box to pop off the screen and draw attention to the important information inside it.

A view of the MA TESOL home page. Originally the menu was limited to abide by the "Rule of Seven" but that didn't last long.
A view of the MA TESOL home page. Originally the menu was limited to abide by the “Rule of Seven” but that didn’t last long.

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. This project launched in February 2004.

Retro Portfolio: MSU College of Arts & Letters

MSU’s College of Arts & Letters was the first college-level site I worked on as a staff member at University Relations. My work on the site itself was limited to helping troubleshoot the HTML and CSS that was developed by my supervisor.

Additionally, I installed the Calendarix calendar software on the site. I was also in charge of training the client to manage the calendar using its built-in admin functions and to manage the rest of the site’s content using Macromedia Contribute.


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.  This project launched in September 2003.

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: ClarkRasmussen.com

By August 2003 I had already gotten tired of the original design for ClarkRasmussen.com 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 ClarkRasmussen.com home page.
A thumbnail view of the ClarkRasmussen.com 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: MSU.edu 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, drwcentral.net became DetroitHockey.Net. DetroitHockey.Net continued to use the same page layout as drwcentral.net. 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 drwcentral.net 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: drwcentral.net Redesign

After drwcentral.net 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 drwcentral.net, 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 drwcentral.net wordmark (“drwcentral.net” 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 drwcentral.net home page as seen after the transition to DetroitHockey.Net.
A view of the drwcentral.net home page as seen after the transition to DetroitHockey.Net.

When drwcentral.net became DetroitHockey.Net in September 2002, a DetroitHockey.Net wordmark replaced the drwcentral.net 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: drwcentral.net Redesign

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

Before this redesign, drwcentral.net 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 drwcentral.net home page in May 2001.
A thumbnail view of the drwcentral.net 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.

michigan-sentinels-s4

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.

michigan-sentinels-s7

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.

michigan-sentinels-s8


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.