X

Seelund Trading Co Guild Website

March 2012

Screenshot | Website

This is the website for my World of Warcraft and Star Wars: The Old Republic guild, Seelund Trading Co. The base site is built on phpbb3 with the index and information pages maintained in the cms MX-Publisher (whose website seems to have vanished as of this posting. Guess it’s a good thing I can update and change the programming as I need to myself). I have made substantial programming changes to my copy of MX, including changing the way news posts (posts in the forums that are designated as “Announcements”) are sorted so that the one that expires soonest rises to the top of the front page.

The biggest amount of work I’ve done on the site though is the custom theme. The current design is the second — the first included only World of Warcraft imagery back when we were a WoW-only guild. I used the default phpbb theme as a foundation and then rewrote the better part of it so that it would properly reflow on a smaller screen or with non-default font sizes. The images are all manipulated/cutout screenshots I took from the two games.

As part of both designs for the site, I created logos for the guild, which are used in promotional items such as videos and recruitment posts:

December 2011

February 2010

Future improvements planned for the theme include a mobile-specific version and having the characters at the top randomly chosen from a pool of images of the current members of the guild on load. Current programming projects in progress on the site include a section for user-controlled character profiles and an event calendar that users can post to as their characters (watch the blog for project updates).

Tags: cms, css, custom theme, design, logo, php, programming, seelund trading co, swtor, web, xhtml

X

Crew Skills Chart

December 2011

I created this chart to show the relationships between the different crew skills in Star Wars: The Old Republic for my guildmates and for fellow players in other online communities.

The background is a screenshot from the game and the icons are game assets; I am responsible for the rest of the graphics and treatments in the chart. I chose to use colors to denote relationships for a quick visual cue, using a gradient for items that had more than one relationship. Headings are in Baumans to keep consistent with other TOR collateral I’ve produced for our guild. Created in InDesign. PDF Version Available.

Tags: design, indesign, infographic, pdf, seelund trading co, swtor

X

Myers Listing Syndication

January 2011

Myers Listings Syndication screen

One of the features in Myers AgentCenter/OriginatorNetwork that I worked on the interface for is the Listing Syndication product. The challenge with this interface was to make it easy for non-technical people to, not just use within the confines of AgentCenter, but for them to take their listings and use it in places that don’t allow direct syndication, such as Craigslist (which specifically prohibits any automated submissions). The solution to this was to take each of the four different layouts for listings within our system and convert them to Craigslist-friendly html, ready to be simply pasted from our application:

Myers Listings Syndication Get HTML dialog screen

Besides the usual “change color on hover,” “sort by heading” sorts of interaction you expect from a records list table, we needed to denote which listings lacked information required by the sites we syndicate to, so we added a grayed-out style for those records with an alert that tells the user what’s missing and offers them a link back to put the information in. I initially designed this table to allow inline editing for that information but that feature was cut in favor of the simple link.

Tags: css, html, javascript, jquery, php, ui

X

Laughing Buddha Acupuncture

May 2009

Visit Site: Laughing Buddha Acupuncture – Acupuncture and East Asian Medicine clinic in Oakland, California

This is a three page brochure site for Laughing Buddha. I based the design on the business cards and logo created by Jake Mix, which contained the laughing buddha illustration on a two-tone background split by a curve. I chose muted, earthy versions of primary colors to denote the elemental, grounded nature of the work they’re doing.

Tags: css, design, web, xhtml

X

Resume – Paul Lathrop

May 2007

Visit Site: Paul Lathrop’s Resume

Resume designs should have personality, but the design should never get in the way of telling the person’s story. For Paul, I knew that I needed something typographically simple that could get across the practical and efficient side of his work, but that was a little playful and conveyed just how vibrant he is as a person. This particular shade of red, as a background, I chose because it’s solid and very active, but not so blindingly red that it detracts from the most important part of the page: the text. For the font I used the most basic Arial/Helvetica/san-serif font stack, and stuck to a single font stack throughout the page (except the header graphic). This generates an attractive screen-viewed page that focuses on Paul’s work experience without being boring (because Paul is anything but boring), and leaves a clean, minimalist print version.

Tags: css, design, html, web

X

Schroeder Bros. Construction, Inc.

April 2007

Schroeder Bros. Construction Inc.

This is one of my favorite designs. They were great to work with and they made it really easy to make the site for them. They do amazing work and gave me excellent photos to work from. If I was building a house, I’d want them to do it — and I’m not just saying that because they were clients. Go take a look at some of the gorgeous woodwork in their gallery.

Fixed width site with repeating background. All of the textures used in the site are sampled from client-supplied photos from their homes, including the background/bracketing texture. The site has been redesigned since my work on it, but they continue to use the banners I created for them:

Tags: banners, design, html, php, web

X

Obsidian Live Action Quickstart

August 2004

Obsidian Live Action Quickstart

I created the art, graphics, photo illustrations and logo for the Obsidian Quick Start, as well as doing the typography and layout for both the quickstart and the character sheet.

Quickstart: http://index.rpg.net/display-entry.phtml?mainid=17098
Character Sheets: http://crysodenkirk.com/images/gallery/charactersheet.pdf

Tags: design, illustration, layout, obsidian, photography, print, typography

X

Myers Order Forms – Package Details

August 2011

Standard Package Features List

These pages needed a complete overhaul so I got the chance to do them from scratch, the only part of the application where that’s the case. At the time, html5 was not yet implemented in any browser so I wrote them in xhtml, which was the standard at the time. They’ve been restyled to match the Marketing site a couple times but with the new version of the page (as screenshotted here), that meant only css changes. You can view these pages by going to the order form at https://wbm.originatornetwork.com/orders/broker_step1.html and clicking on “View” by the packages.

Auto-Plus Package Features List

Executive Package Features List

Tags: css, xhtml

X

TheVentureCo.org logo

June 2010

Blue “ice” logo for theventureco.org

Single Color Version

I created this logo for use by the roleplaying community forums for The Venture Co (US) server from World of Warcraft. The quirky shapes and the way the letters run together is a perfect reflection of the the community itself.

Tags: logo

X

Myers Image Library

September 2009

Several of my photos of downtown Milwaukee were selected for use in the new Myers Internet image library, a catalogue of web-sized images that our clients can put on their own sites. Here are a few of the images selected for the library:

Tags: photography

X

Keepers of Stromgarde

August 2008

the Keepers of Stromgarde‘s site has gone through several iterations, on multiple versions of phpbb and the CMS MX-Publisher. I was responsible for two of them, from initial concept through custom theme. I also created the guild’s logo.

Summer 2008

July 2009

Logo

Tags: custom theme, design, html, logo, php, web

X

Keyclothes.com by Workhorse Outfitters

September 2007

Keyclothes.com by Workhorse Outfitters — Outerwear for Work or Sport

Unlike most of the sites I’ve posted here, I did not do the final code implementation on this site, nor the banner ads associated with it. Parts of the current implementation are different from my original design, particularly in the navigation treatment. However, they retained 99% of the design elements I created and I’m happy with how the design turned out overall. The screenshot above is from my initial mockup rather than the final site.

In addition to the basic site design, I created the two main logos visible in the screenshot above (at the top and bottom of the site).

Tags: design, logo, web

X

Lithograhics.com

October 2005

Lithographics, Inc. – Quality Printing, Superior Production

The brief for Lithographics included a small book that they print and use for promotions and my task was to keep the website in line with that book while still giving them a dynamic — in both design and technical terms — site that would stand out from the competition and convey the quality of their print work despite being a non-print medium.

I wrote all the code and markup for this site, with the exception of the reference desk, which I heavily modified from an application written in-house by another programmer at the company, and I created all the banner ads using single-frame cel animation techniques in Photoshop and ImageReady. I also converted all the photos from press-ready to web-ready with an eye to making them look the way they looked after coming off the press, rather than just making them look like digital photos.

Each section of the site had its own photo. Here are mockups of two of those other two sections:

Banners:

Tags: banners, design, html, javascript, php

X

Precision Screw Thread Corp.

January 2007

The initial landing page for the site was conceived as an abstracted display panel from one of the threading machines and evolved into what you see on the page now. We wanted to showcase the short movie but avoid the typical “trash splash” intro that trips up a lot of sites. This display panel instead brings together the site’s navigation and news from the company blog to make it easy for users to get where they want to go on the site (I was outvoted on making the movie start playing immediately. Sorry visitors, you’ll have to hit stop instead of start).

Visit Site: Precision Screw Thread, Inc.

The internal pages carry through the theme and the navigation from the intro page. We wanted to add a little motion so I animated the starburst behind the logo in the upper left so that it glows and rotates on mouseover.

Tags: design, html, javascript, php, web

X

Milwaukee City Hall

June 2010

Milwaukee’s City Hall On A Stormy Day

Digital manipulation based on a photo I took of Milwaukee’s City Hall in Sept. 2009. I used the same original image as the basis for my Photoshop tutorial on Vignetting/Depth of Field with Smart Objects CS4/CS5

Tags: digital art, photo manipulation, photography