Web Development

Responsive Layouts and UI Prototyping · July 2011 – November 2014

Over the years I’ve built many web designs, from personal sites to a production application. Each project has enhanced my ability to rapidly experiment with flexible layouts and interaction design prototypes.

In particular, I’ve focused on making fluid responsive layouts (such as the one you’re viewing now). These designs require planning, obsessive detail, and testing, but the results make the most out of any screen.

See also: AnswerDash and my visualization work.

Undergraduate Game Projects

CS 638, University of Wisconsin–Madison · Fall Semester 2011

I designed and developed web-based game projects along with three different teams of students. Each project gave me a chance to develop gameplay mechanics and experiment with web technologies such as canvas and WebGL. Furthermore, making games instilled in me the importance of flow, fun, and consistency in interaction design.

The completed games are available online and can be played in recent versions of Safari, Firefox, or Chrome.

A gameplay demonstration of ColorBlocks.

Disco Fever

Help night club fiend Boris Boid charm the ladies (and dudes) onto the dance floor while avoiding threats from jealous couples, Drama Queens, and angry bystanders! Source code and notes on GitHub.

ColorBlocks

This game is a platformer with a twist: players must aim three colored spotlights to activate like-colored blocks, which become landing platforms for the player's rocket ship. Source code and notes on GitHub.

Space Wars

Outflank three computer-controlled opponents in a fight to conquer the galaxy. The game shows resources, troops, and even potential attack outcomes right on the map. Source code and notes on GitHub.

Wisconsin Engineer Magazine Web Design

Web Department Head, Wisconsin Engineer Magazine · January 2010 – September 2012

As a student volunteer, I worked with the editors and department heads to redesign the publication’s website in 2012. We focused on supporting more device screen sizes (including Retina displays) and improving the presentation of photography in articles. I was responsible for designing, building, and documenting this new site.

The redesign offers a responsive reading experience to smartphones, tablets, and computers with a refined look, crisp typography, and bold photography.

The Wisconsin Engineer home page for the December 2014 issue.

dub Website Concept

HCID 521: Prototyping Studio, University of Washington · February 15th, 2014

Though strictly a mockup, this was a fun one: for my prototyping studio class, we were asked to redesign the website for dub - HCI & Design group. My goal was to create a fluid responsive design that accomodated smaller screens with appropriate changes in text size, padding, and layout. I made this working prototype in about four hours.

This assignment is a great example of a project where I experiment with a design in markup first and foremost.

This concept's responsive layout in action.

Stitch 2D Interface Prototype

Master's Capstone Project, Intel and University of Washington · August 2014

My capstone team's vision for our final prototype called for an integrated 2D and 3D user interfaces, running on iPad. The clock was ticking, though: we had less than a week to build it!

With the help of UniWebView, we were able to build the entire prototype in Unity, with the 2DUI as an embedded web app. We hosted the web app on a server, enabling us to make changes to the 2DUI without having to rebuild the iPad app every time. The result was a polished, animated 2D user interface that brought our static mockups to life. I developed the web app and helped integrate it into the Unity environment.

A brief walkthrough of the Stitch 2DUI prototype.

Responsive Photo Gallery Design

January 2011 – July 2011

I designed and developed this responsive photo gallery design in 2011, a time when responsive layouts and Retina display support were nascent on the web.

In addition to writing code, I contributed logo and graphic design expertise for an elegant and consistent site branding. This project has indelibly influenced the way I approach many web design challenges, including how I plan for fluid width layouts and prepare graphics for the web.

A demo of the responsive photo gallery layout.