"; webtext [1]="
Stella Recipe CD
This Flash animation for Stella, a line of cheeses from Saputo, was designed to capitalize on the sophistication of their existing brand. A subtle, undulating motion of Trajan letterforms mirrors the typographically active design of Stella's print collateral. Strong reinforcement of this visual theme was important as Stella made an attempt to extend their brand into the digital realm.
"; webtext [2]="
"; webtext [2]="
iMarlin: Integrated Interactive"+link+"
Launch website
This interm site for iMarlin, a Springfield design firm, was designed to capitalize on the fact that minimal content was available for an initial Web presence. The site served as a showcase for experimental interactivity while providing an overview of the company and its process. The innovative drag and drop interface explored the possibilities of spatial navigation while allowing for future expandabilty to thebase architecture.
"; webtext [3]="
This interm site for iMarlin, a Springfield design firm, was designed to capitalize on the fact that minimal content was available for an initial Web presence. The site served as a showcase for experimental interactivity while providing an overview of the company and its process. The innovative drag and drop interface explored the possibilities of spatial navigation while allowing for future expandabilty to the
"; webtext [3]="
Bible Resource Center
The Bible Resource Center was designed as a central resource for scholars from the American Bible Society. The page design incorporates the circular geometry of the BRC logo into photo croppings, typeface selection and button design. Multiple audience needs are accomodated through division of the home page content into modular sections that respond to a user's browsing patterns.
"; webtext [4]="
"; webtext [4]="
Employer's Reinsurance Corporation"+link+"
The challenge in creating this GE-owned corporate site was to combine the services and information available from four acquired companies' existing websites into a site that provided central access to the information and conformed to GE's website standards. We began by organizing and mapping the information from each site and identifying common elements. Working with ERC to correctly segment the information, we developed a system of navigation and templates that allowed ERC to easily update the site.
"; webtext [5]="
"; webtext [5]="
Kingswood Retirement Community"+link+"
Launch archived website
Kingswood is a retirement community in Kansas City. While their website was designed to emphasize the benefits of living at Kingswood, a primary concern was to facilitate access to the site by a target audience generally unfamiliar with computers and the web. I selected a youthful color palette and employed existing photography to create \"Katie,\" a 6-year-old virtual tour guide that could walk visitors through everything Kingswoodhas to offer.
"; //webtext [4]="
Kingswood is a retirement community in Kansas City. While their website was designed to emphasize the benefits of living at Kingswood, a primary concern was to facilitate access to the site by a target audience generally unfamiliar with computers and the web. I selected a youthful color palette and employed existing photography to create \"Katie,\" a 6-year-old virtual tour guide that could walk visitors through everything Kingswood
"; //webtext [4]="
Art & Design Departmental Site"+link+"
Launch website
I worked on this redesign as part of a small collaborative effort with other members of the SMSU design community. The site allows prospective and existing students to easily browse departmental requirements and get a feel for the courses by seeing examples of work done by current students. It highlights the art and design faculty and shows biographies and portfolios of their work. It also provides information about art and design resources and currentexhibitions on campus.
"; // More information links var webmore=new Array(); // BEGIN APP LAYOUT ARRAYS // Navigation image name cores var appsnav=new Array(); appsnav [0]="iextendformat"; appsnav [1]="sigmeat"; appsnav [2]="genbank"; appsnav [3]="iextendadmin"; // Main Image full image names var appsmain=new Array(); appsmain [0]="iextend_ssformat2.gif"; appsmain [1]="sigmeat.gif"; appsmain [2]="genbank.gif"; appsmain [3]="iextendadmin.gif"; // Main image sizes: (width,height) var appssize=new Array(); appssize [0]="178,300"; appssize [1]="195,154"; appssize [2]="195,160"; appssize [3]="195,140"; // Main description text var appstext=new Array(); appstext [0]="
I worked on this redesign as part of a small collaborative effort with other members of the SMSU design community. The site allows prospective and existing students to easily browse departmental requirements and get a feel for the courses by seeing examples of work done by current students. It highlights the art and design faculty and shows biographies and portfolios of their work. It also provides information about art and design resources and current
"; // More information links var webmore=new Array(); // BEGIN APP LAYOUT ARRAYS // Navigation image name cores var appsnav=new Array(); appsnav [0]="iextendformat"; appsnav [1]="sigmeat"; appsnav [2]="genbank"; appsnav [3]="iextendadmin"; // Main Image full image names var appsmain=new Array(); appsmain [0]="iextend_ssformat2.gif"; appsmain [1]="sigmeat.gif"; appsmain [2]="genbank.gif"; appsmain [3]="iextendadmin.gif"; // Main image sizes: (width,height) var appssize=new Array(); appssize [0]="178,300"; appssize [1]="195,154"; appssize [2]="195,160"; appssize [3]="195,140"; // Main description text var appstext=new Array(); appstext [0]="
iExtend: Sweet Street Desserts"+link+"
Launch demo application
iExtend was designed as a modular extranet application to allow users to browse vendor product lines and create customized promotional collateral on demand. The completed projects can be saved in PDF format or output to an Indigo press. As project lead, I created a multi-step process that could accomodate the customization of any project format or size, from posters and table tents toeight-page brochures.
"; appstext [1]="
iExtend was designed as a modular extranet application to allow users to browse vendor product lines and create customized promotional collateral on demand. The completed projects can be saved in PDF format or output to an Indigo press. As project lead, I created a multi-step process that could accomodate the customization of any project format or size, from posters and table tents to
"; appstext [1]="
Signature Meats: Print on Demand"+link+"
Demo application coming soon
This client extranet allows users to browse the Signature Meats product line and create customized sell sheet collateral that can be saved in PDF format and output to a standard office printer, allowing integration with one of seven pre-printedcolor templates.
The site walks the user through the multistep process using a dynamic navigation system that provides an overview of the customized sell sheet and a document preview updated with currentproduct selections.
"; appstext [2]="
This client extranet allows users to browse the Signature Meats product line and create customized sell sheet collateral that can be saved in PDF format and output to a standard office printer, allowing integration with one of seven pre-printed
The site walks the user through the multistep process using a dynamic navigation system that provides an overview of the customized sell sheet and a document preview updated with current
"; appstext [2]="
Generations Bank Deposit Registration"+link+"
Launch demo application
This multi-page web application was designed to serve as the primary means for Generations Bank customers to register for new accounts. It divides the registration process into seperate steps and conditionally requests information based on user input. The customized breadcrumb navigation shows an overview of the registration process and allows the user to return to previous steps and jump directly to the most recently completed step in the process. A contextual help system is used to provide a glossary of financial terms throughoutthe process.
"; appstext [3]="
This multi-page web application was designed to serve as the primary means for Generations Bank customers to register for new accounts. It divides the registration process into seperate steps and conditionally requests information based on user input. The customized breadcrumb navigation shows an overview of the registration process and allows the user to return to previous steps and jump directly to the most recently completed step in the process. A contextual help system is used to provide a glossary of financial terms throughout
"; appstext [3]="
iExtend Administration System"+link+"
Launch demo application
The backend administration system for iExtend employs advanced DHTML techniques to provide a seamless navigation experience within order listings. Users can expand and contract individual order details and print records without page refreshes or additional server overhead. Seperate modules were developed to meet the needs of four user groups - developers, vendors, accounting and clients.
"; // More information links var appsmore=new Array(); // BEGIN TYPE ARRAYS // Navigation image name cores var typenav=new Array(); // Main Image full image names var typemain=new Array(); typemain [0]="silkscreenexpert.gif"; // Main image sizes: (width,height) var typesize=new Array(); typesize [0]="404,123"; // Main description text var typetext=new Array(); typetext [0]="
Download 
Download
Silkscreen Expert is a Truetype face designed specifically for aliased use at small sizes (8 point) on the Web. It complements Silkscreen, a web graphics face originally designed by Jason Kottke, with an all new Small Caps and Expert Character Set. Silkscreen Expert is free for personal or corporate use. The original font is available at www.kottke.org.
"; // More information links var typemore=new Array(); // BEGIN IDENTITY ARRAYS // Navigation image name cores var identitynav=new Array(); identitynav [0]="brclogo"; identitynav [1]="artsfestlogo"; identitynav [2]="chicago"; identitynav [3]="iextendlogo"; identitynav [4]="jhlogo"; // Main Image full image names var identitymain=new Array(); identitymain [0]="brc_logo.gif"; identitymain [1]="artsfestlogo.gif"; identitymain [2]="chicagoposter.gif"; identitymain [3]="iextendlogo.gif"; identitymain [4]="jhlogo.gif"; // Main image sizes: (width,height) var identitysize=new Array(); identitysize [0]="326,100"; identitysize [1]="326,119"; identitysize [2]="326,123"; identitysize [3]="289,109"; identitysize [4]="195,195"; // Main description text var identitytext=new Array(); identitytext [0]="
The backend administration system for iExtend employs advanced DHTML techniques to provide a seamless navigation experience within order listings. Users can expand and contract individual order details and print records without page refreshes or additional server overhead. Seperate modules were developed to meet the needs of four user groups - developers, vendors, accounting and clients.
"; // More information links var appsmore=new Array(); // BEGIN TYPE ARRAYS // Navigation image name cores var typenav=new Array(); // Main Image full image names var typemain=new Array(); typemain [0]="silkscreenexpert.gif"; // Main image sizes: (width,height) var typesize=new Array(); typesize [0]="404,123"; // Main description text var typetext=new Array(); typetext [0]="
Silkscreen Expert and Small Caps"+link+"
Download DownloadSilkscreen Expert is a Truetype face designed specifically for aliased use at small sizes (8 point) on the Web. It complements Silkscreen, a web graphics face originally designed by Jason Kottke, with an all new Small Caps and Expert Character Set. Silkscreen Expert is free for personal or corporate use. The original font is available at www.kottke.org.
"; // More information links var typemore=new Array(); // BEGIN IDENTITY ARRAYS // Navigation image name cores var identitynav=new Array(); identitynav [0]="brclogo"; identitynav [1]="artsfestlogo"; identitynav [2]="chicago"; identitynav [3]="iextendlogo"; identitynav [4]="jhlogo"; // Main Image full image names var identitymain=new Array(); identitymain [0]="brc_logo.gif"; identitymain [1]="artsfestlogo.gif"; identitymain [2]="chicagoposter.gif"; identitymain [3]="iextendlogo.gif"; identitymain [4]="jhlogo.gif"; // Main image sizes: (width,height) var identitysize=new Array(); identitysize [0]="326,100"; identitysize [1]="326,119"; identitysize [2]="326,123"; identitysize [3]="289,109"; identitysize [4]="195,195"; // Main description text var identitytext=new Array(); identitytext [0]="
Bible Resource Center Logo
This logotype was designed for the American Bible Society's new Bible Resource Center, a website for biblical scholars. Its unique character is based on a ligature of the Hebrew glyphs Aleph and Lamed, emphasizing the qualities of strength, leadership, learning and teaching. The icon can be interpreted apart from its literal meaning as both a stylized figure carrying a torch and a graphic symbol for fire itself.
"; identitytext [1]="
"; identitytext [1]="
Artsfest Logo
Artsfest is an annual festival in Springfield, Missouri. Artisans from across Southwest Missouri gather on Walnut Street to celebrate the visual arts. I designed this logotype for the event in the style of Art Nouvoue architect Charles Rennie Mackintosh. The customized, interlocking letters and vibrant color palette provided the basis for the overall identity. Variations were applied to signage, posters, participant buttons and t-shirts.
"; identitytext [2]="
"; identitytext [2]="
Students in Design: ACD Conference Promotion
This logotype was designed for the Students in Design chapter of Southwest Missouri State University to promote the annual ACD Student Conference in Chicago. I started with the visual pun of the typeface Chicago and highlighted a call to action within the word itself. We used the logotype to create awareness of the trip, and promote attendance to planning meetings. The logotype was also used in our proposals for funding from the student funds allocation committee.
"; identitytext [3]="
"; identitytext [3]="
iExtend Product Identity
iExtend is an on-line print on demand system. It allows clients to create and print customized sales collateral from the Web. The identity was designed to reference elements of our company logo while also allowing integration with the identities of future client websites. The i-Man, developed initially for iMarlin, was put to work doing calisthenics, reflecting the possibilities inherent in the system while also standing as a phoenetic semaphore for the brand.
"; identitytext [4]="
"; identitytext [4]="
Personal Logotype
This personal mark, constructed from Adobe Garamond and a splash of paint stands as a semaphore for my initials, JH. It is used to integrate my print collateral with the typographic experimentation of my website. Both show an affinity for oldstyle typography and a sense of playfulness.
"; // More information links var identitymore=new Array(); // -->
"; // More information links var identitymore=new Array(); // -->