Work

The Henry Ford’s Collections and Create Your Own Exhibit

Collections – Users browse the main collection and build their own sets.

Create Your Own Exhibit – Users drag artifacts to exhibit walls. The objects can be repositioned and resized.

Agency: Octane Design
Client: The Henry Ford
Languages: JQuery, HTML, CSS
URL: http://collections.thehenryford.org/

Overview
Octane Design and iWerk teamed up to create a combination collection and exhibit creation tool for The Henry Ford. The user can add and build collections of artifacts and then use those collections to build an interactive exhibit. Once an exhibit is saved, it can be shared with others. The audience for this tool is educators and their students.

I was responsible for programming the front-end interactivity using JQuery. I chose JQuery for both the opportunity to explore what could be done with the language and to address the client’s concerns over search engine optimization and Flash. I chose AJAX as the method for communicating with the database to save and manipulate collections and exhibits. I worked closely with the .NET developers to tie the front-end to the back-end.

The biggest and most rewarding challenge of this project was the exhibit builder. The drag-and-drop and resize functionality was fun to prototype and build. Figuring out how to save the position, size and chosen media for an artifact taught me a lot about CSS positioning and the capabilities of JQuery’s control over HTML elements.

Meadow Brook Hall Website

Agency: Octane Design
Client: Meadow Brook Hall
CMS: Joomla
Languages: PHP, MySQL, HTML, CSS, JQuery
URL: http://meadowbrookhall.org/

Overview
Meadow Brook Hall wanted to create a website that would be separate from Oakland University’s parent site. Joomla was chosen as the CMS for its ability to handle large amounts of content.

One of the goals of this project was to use as little Flash as possible while implementing interesting and simple elements of animation. The slide shows on the home page and interior pages all utilize JQuery. The small ads below the home page slideshow use subtle animation to display additional information when rolled-over.

Meadow Brook Hall has a lot of history and with that a lot of content. The design called for accordions to hide and show content on interior pages. This allowed for a lot of content that could be read in small pieces without overwhelming the user.

The beautiful design was challenging and engaging to build.

Visitypsinow.com

Agency: Octane Design
Client: Ypsilanti Area Convention and Visitors Bureau (YACVB)
CMS: Joomla
Languages: PHP, MySQL, HTML, CSS, JQuery
URL: http://visitypsinow.com

Overview
The purpose of the YACVB is to promote Ypsilanti area businesses, events and information. They wanted a website to house all of that information in one searchable location.

Joomla was the CMS of choice for this site due to the amount of content. The main site content uses standard articles and modules to display information. I chose to write a custom component for the business listings, which was like building a site within a site.

Each business is listed by one or more types (Hotel, B&B, etc), by location and again by multiple categories. Complex SQL statements needed to be written to list businesses properly within each type, category and location. This data also had to be integrated into Joomla’s built-in search engine. An administration component was written in parallel to the front-end to allow content managers to update and add or remove businesses.

Each location has a slideshow header with an integrated Google map. The home page and headers across the site utilize the SiFR font replacement tool for displaying non-web-safe fonts while keeping text indexible by search engines. SiFR is the only Flash element used throughout the site with the exception of YouTube videos.

Octane Design Website

Agency: Octane Design
Client: Octane Design
CMS: WordPress
Languages: HTML, CSS, JQuery
URL: http://octanedesign.com/

Overview
Over the years Octane’s website has taken many interesting forms. The latest iteration was simplified to reflect more of the work. The site was to be simple and easy to navigate, allowing the work to be the focus.

I chose WordPress for the site as a bit of a study into building a portfolio site with blogging software. I had been using WordPress for smaller websites for some time and had some ideas for using the built-in blogging tools as a way to organize the work.

The work thumbnail page is a custom plugin that pulls certain content from each work-related post, such as the name and the thumbnail. Each portfolio piece is an individual blog post that is given a category. By clicking the categories at the top, the work is filtered by the chosen category. The work is also organized by year which is determined by the date of the blog post.

The WordPress tag engine was used to group related projects together. When viewing a project, if it shares a tag with another project, its “siblings” are included below the project copy. For example: all projects for the Detroit Metro Convention and Visitors Bureau (DMCVB) are tagged with “dmcvb” and are grouped together.

Each project has a series of large images showing off the work. An image can be given a CSS class of “featured” to be included in the random home page rotation of featured projects. A plugin pulls link information for that project when it is displayed on the home page.

Internal websites can be an excellent resource for testing new ideas that are outside of client budgets. This site certainly opened new doors for future projects.

Fiat Sales Presentation

Agency: Octane Design
Client: Suburban of Troy
Languages: ActionScript 3, XML
URL: Local Presentation

Overview
Suburban of Troy approached Octane to create a sales presentation for Fiat. The presentation was to be built using Flash and built in a way that it could be re-skinned by Octane for future presentations.

One of the biggest time-consuming issues with using Flash is updating a project. It’s often cumbersome to manipulate a structure that is already in place. Furthermore, as a project progresses the client often has change requests that play into those difficulties. I built this presentation with future changes in mind by controlling the “slides” and navigation solely with XML.

By altering the XML structure, one can change the order of the slides, which slides appear in which sections, and the navigation and title text. The navigation builds dynamically, including the underlines and background accents. Each slide is a separate SWF containing all of the content. The logo is also dynamically driven to allow for multiple copies of the presentation with a different logo. The entire presentation is built using custom ActionScript 3 classes which can easily be ported to future projects.

EEI Global Website

Agency: Octane Design
Client: EEI Global
Languages: ASP, HTML, CSS, ActionScript 3
URL: http://eeiglobal.com/

Overview
EEI Global is an event marketing agency based in Rochester Hills, Michigan. This project had some unique hurtles to overcome. The site is hosted locally on IIS, requiring the site to be built in classic ASP using an Access database. Using an unfamiliar language was a refreshing challenge.

The Dapper Dude Blog

Agency: Octane Design
Client: Rob McIntosh
CMS: WordPress
Languages: HTML, CSS
URL: http://thedapperdude.com/

Overview

The Dapper Dude is a blog managed by Rob McIntosh. Rob is involved in the fashion industry and wanted a blog that relayed his love of fashion in multiple forms.

I was excited to work with this design from the beginning and enjoyed the challenge of pushing the WordPress structure and CSS to fit the look and feel.