About This Site

Project Notes

I was the primary UX designer on all of the design projects displayed unless otherwise noted. I also wore a lot of other hats over the course of these works; additional roles, are listed in the "Roles" sidebar.

Solutions take a team – when the work shown included contributions from other designers, that is noted.

Project Tools

Many different tools were used to realize 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 consistent theme in these projects is my belief in working and designing in the medium itself whenever possible. I believe in being conversant and capable in code, both for the effect of designing in reality, and for being able to better communicate with engineering. A number of different prototyping systems were tried in different projects – some still exist, many have gone to great archive in the sky. Whenever possible, live wireframes and HTML prototypes were built.

This Site Itself

I wrote, assembled, and developed this site by hand.

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

As a static site, it is 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 (mostly Javascript object notation) and page content (HTML and markdown) to the generator, where a layout template is used to assemble each page, rendering the content along with the site-wide elements and unique page elements using a collection of custom helpers and methods.

Some of the individual 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 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.

Miscellaneous Essentials