I conceived, wrote, and developed this portfolio site by hand.

The Projects

I was the primary UX designer on all of the design projects displayed unless otherwise noted. Additional roles, as applicable, are listed in the "Project Roles" sidebar.

In the cases where the work included contributions from other designers, attributions are listed.

Project Tools

Many different tools were used over the course of these projects.

UX architecture visualizations, wireframes, schematics, and other diagrams were created with pen and paper, Omnigraffle], Sketch, and even Powerpoint. Sometimes interpretive dance was involved if that would get an idea across.

Product and production graphics were generally created with Photoshop. Illustrator was used when appropriate (i.e. rarely, for vector images only). Neither was used for anything but visual design.

A number of different prototyping systems were tried in different projects – some still exist, many have gone to great archive in the sky. Live wireframes and HTML prototypes were built just like this site was.

The Site

This site is a heterogeneous composition of HTML, markdown, JSON, SCSS, and javascript, mostly all written using the venerable BBEdit.

As a static site, all pages are built using a forked and customized version of the static site generator Panini.

Each project is described by a data file and a text content file. A Gulp build script feeds the page data (JSON) and page content (HTML and markdown) to the generator, where a custom layout template is used to assemble each page, rendering the content along with the site-wide elements and unique page elements using custom helpers and methods.

Some of the components have been packaged as open source projects. For example, the site's sidebar navigation is available as a stand-alone resource: SidePanelCollapse.

Various glyphs – when not hand-made – are from the fabulous Font Awesome, subsetted to a fractional size with Icomoon and then re-optimized for web delivery with FontSquirrel.

Site images were massaged in Photoshop, and then optimized to within an inch a byte of their lives with ImageOptim, pngquant, svgo, and the trusty eyeball.

Other Essentials