This single-page newsletter site was designed to communicate basic promotional and informational content to the company's customer base. It is constructed with the Twitter Bootstrap responsive framework (jQuery/CSS3) so that a single HTML5 page contains the optimized desktop and mobile versions.
Workout Tracking App Flow
This is an example of a simple flow diagram constructed in OmniGraffle showing the screen geography and process for a workout tracking app.
SIMPLE Mobile Game Change
This microsite was developed to communicate critical one-time information to this company's existing customers. To ensure that it was fully functional on a variety of mobile devices, I choose to build it with the Twitter Bootstrap responsive framework. It uses modern HTML5/CSS media queries to restructure the site so that the exact same site markup is optimized for desktop, tablet, and phone browsers.
I served as lead developer and animator on this customer-facing, Flash-based, e-learning project. I worked with a graphic designer to define the visual style and content, then along with an intern, executed all of the development work, interactions and animations.
Although not apparent to the user, the navigation is built to be extendable; the content SWF files are also modular and easily swapped. I'm also particularly proud of the character and text animations.
Digital Signage Wireframes
These wireframe images were developed for a wall-mounted, overhead television in a printing production environment. The system was intended to provide job progress information to employees and to occasionally display a simple competitive leaderboard of production output.
Designing content for digital signage has a number of interesting challenges that are shared with all screens meant to be viewed at a distance, such as GUIs for game consoles and televisions. Visual elements needs to be larger for easier reading, and the information conveyed needs to provide no distraction.
Since 2010 I've created over a hundred Flash banners like these from design mockups provided by an art director. Much of the effectiveness of these animations comes from the effort I put into movement and transition from concept to concept.
I relish in the details of a project, and as art team lead I was able to ensure we included many informative connections to the real-world. For example, the buildings depicted in the the game's Washington D.C. map are not only modeled after the actual buildings, but they are around the Potomac river in roughly the correct position relative to one another.
I designed the user interface art for this game. Working from rough wireframes provided by the game designer, I conceptualized all of the interaction controls and visualizations. The Radiation Therapy screen interaction was quite challenging to construct, but it is very satisfying to use in the finished game.
I conceived and designed the user interface visual style for this game. I worked closely with the game designer to ensure the interface aesthetic matched the planned tone of the game. I also constructed rapid prototypes so we could get a more accurate feel for how the visuals would actually function.
Working from a third-party's UI treatment, I assembled the interface elements into a coherent experience. Most notable is the elaborate paper doll system we designed that allows players to customize the avatar that represents them with hundreds of hairstyles, clothing items and accessories.
As art team lead, I designed all of the UI, city layouts, and animations. Each city has an aesthetic of its own with different style houses and distinctive buildings. Also worth noting are the various power plant buildings; each has multiple states and matching animations.
On Lawcraft, I worked from wireframes to create all of the user interface and interactions to match the previously established visual style. Part of this work was coordinating the implementation of the game's national map, which encompasses every congressional district in all fifty states. I particularly enjoyed the Craft Your Bill screen that depicts members of the House of Representatives running back and forth from one side to the other, based on how you alter the bill to their liking.
Roots of Our Government
On this project I had many art direction responsibilities and was responsible for coordinating and assembling the art assets. As with nearly all of the game projects, I also contributed to the design of most of the visual elements.
Do I Have a Right?
This game required designing an animated character that could be constructed from parts to make a nearly limitless variety. I pioneered the system that allowed the art team to create these individual assets. As with most of the other Flash games, I worked from rough wireframes to design the interactions and create the UI from our previously determined specifications.
Branches of Power
I filled several roles on this project, and designed or coordinated the construction of all of the game's visual elements. Of particular note are the dozens of animated, isometric constructs shown in the game. Each needed to meet the technical needs of the programming team, but be constructed in such a way that the art team could easily alter anything required for game play.
For example, animating the blades of an isometrically-drawn wind turbine required creating a set of two-dimensional transformations that simulate the three-dimensional effect. I was very pleased with how it turned out in the final product.
Designed for middle schoolers, this Flash-based training course teaches foundational Algebra skills. I was project manager, lead designer and developer on this project.
Phone Interface Emulator
I designed and constructed this Flash-based telephone interface to provide a base for employee training.
This document is one example of my lifelong interest in both games and information design. It's a complex strategy game I built over the course of a year as a hobby. I learned to respect game design, as building a game system is no simple task.