User Interface / User Experience Design


List of resources and acknowledgments used to build out this site.

The last time I did a redesign was in 2006 before I moved out to Seattle. Somehow I managed to keep artifacts over the years and not loose them through another cross country move!

With so many platforms and templates to choose from I wasn't sure which direction to take. I decided to start from scratch and learn how to build a responsive site. Below is a list of what it took for me to put all this together. Many hours writing, editing, training, sketching, hacking. If you see something wonky/buggy then drop me a note.

Copy edits

Molly Gardner — Writer and all around awesomeness

Molly helped me structure my project stories and revisions - Thanks!


HTML5 BOILERPLACE — The foundation

Great foundation for starting a new site / prototype.

This Is Responsive — Grid Block

Used the responsive grid block for my main portfolio pages.

Flexible Math — Responsive Design

A quick way to get pixel widths in percentages.

Modular Scale — by Tim Brown

Achieving harmony.

Font Awesome — Font Icons

Icons used throughout.

CSS-Tricks — Drop Caps

Drop cap used on my landing page.

WUFOO — Form Builder

For the contact form - applied custom CSS.

HSL Color Picker — Editing colors

Experiment with color.

HEX Color Tool — Lighten or Darken

Used to simply lighten or darken a color.

Responsive Nav Patterns — Responsive Design

Referenced to help me decide on the type of responsive nav.

Content Slider — Responsive Design

Fully responsive slider I used to display my work.

ImageOptim — Image optimizer

After exporting all my images from FW - I ran them through ImageOptim to reduce.

Typekit — Typography

All fonts are served up via Typekit.

Responsive-Nav.js — Navigation

Used for responsive primary navigation.

Full page background — CSS-Tricks

Get the full page image

Adobe Fireworks — Image Editing/Export

Quick hi-fidelity mock ups and image editing.

Paper and Pencil — Sketching

Everything starts with a simple sketch.

Reference material — Mobile design course

I knew this site needed to be responsive - responsive course got me up and running quick.

Combining Typefaces — Typography

Referenced for find a good type combination.

Hardboiled Web Design — HTML5 CSS3

Always on my shelf for reference.

What makes a good UX Designer — UX Evaluation

Influenced me to write a story about each UX project.

Portfolios of the past

December 2004 — Web Designer

Quick page that outlined by resume with links to some work I've done.

May 2006 — Flash Designer

Oh boy - full flash site - at least I didn't have a skip intro on this one.