sunshine rainier mountain seattle trees dark trees darker trees darketst trees

About Me

quotation mark If a picture is worth a thousand words, then a prototype is worth a thousand pictures. quotation mark

Heath Huffman

I'm Heath Huffman an award-winning entrepreneur, UX designer, and prototyper. I have been interviewed and reviewed by TechCrunch, PC World, PC Magazine, An Event Apart, and several other websites/magazines.

  • Kansas City Chamber of Commerce
  • Techcrunch
  • PC Magazine
  • PC World
  • An Event Apart

I focus mostly on UX design, but I also like to innovate through coded prototypes. This website is a reflection of my combined skills as I custom designed and coded it myself. I do full visual site architecture, flow, interaction design, product design, and UX integration under defined brand styles and guidelines. I research, design and build fully responsive prototypes of my work for presentation, usability testing, and/or proof of concept analysis. I specialize in designing scalable, responsive modular components that can be placed and reused anywhere in any grid on any web page.

Modular Design Concepts

In 2014 I started designing and coding custom UX components for prototyping purposes at Expedia. That eventually lead to the creation of an advanced prototyping system for UX designers to use for demo and user testing purposes. Around that same time the concept of “element queries” and “container queries” started popping up. The two naturally merged into what I consider to be true “modular design” with me designing scalable/reusable stand-alone components that could be placed anywhere, on any website, in any grid, at any viewport size.

Modular Design 1 Modular Design 2 Modular Design 3

While working at Meredith, this concept evolved into the idea of designing generic modules that could be used across all of Meredith’s magazine websites (Shape, Allrecipes, Martha Stewart, Better Homes & Gardens, Parents, etc.). At the same time, these components would be “self-aware” of their own size and could adjust responsively based on their own internal breakpoints regardless of viewport sizes, grid limitations, or page layouts.

Wireframes & Sketches

wireframes wireframe 1 wireframe 2 wireframe 3

Wire framing and sketching is a critical part of the UX processes. It filters out distracting visual nuances in the early stages of design in favor of more practical, functional, and usable concepts. My preferred wire framing tools are Balsamiq and Sketch, though I have also used other similar tools such as UXPin, Gliffy, and Visio. Below is a small compilation of wireframes I have done for past companies and clients.

  • wireframe allrecipes 1Allrecipes
  • wireframe blackrock 1BlackRock
  • wireframe expedia 1Expedia
  • wireframe allrecipes 2Allrecipes
  • wireframe expedia 2Expedia
  • wireframe allrecipes 3Allrecipes
  • wireframe doodlekit 1Doodlekit
  • wireframe allrecipes 4Allrecipes
  • wireframe expedia 3Expedia
  • wireframe allrecipes 5Allrecipes
  • wireframe expedia 4Expedia
  • wireframe allrecipes 6Allrecipes

Designs, Products, & Prototypes

Responsive Website Designs, Products, & Prototypes design tools tablet design desktop design

High resolution mockups and prototypes are the heart of what we do as UX designers. We have to not only capture the look of a website, but also its feel. Flows from events and actions on a page are critical to understanding usability. These are best done through prototyping, and prototyping is what I specialize in. Below is a small collection of some of my past design work.

design doodlekit 1Doodlekit
design allrecipes 1Allrecipes
design doodlebit 1Doodlebit
design blackrock 1BlackRock
design expedia 1Expedia
design mealthy 1Mealthy
design doodlebit 2Doodlebit
design allrecipes 2Allrecipes
design mealthy 2Mealthy
design expedia 2Expedia
design allrecipes and expediaAllrecipes
& Expedia
design expedia 3Expedia
design allrecipes 4Allrecipes
design doodlekit 2Doodlekit
design allrecipes 5Allrecipes
design expedia 4Expedia

HTML, CSS & JavaScript

When it comes to prototyping, nothing beats the real thing – actual HTML, CSS and JavaScript. All other prototyping tools try to mimic code, but in the end, they are never as good as the actual thing. Over the years I have developed several prototyping systems for companies as well as my own personal framework I take with me wherever I go. This allows me to create real life prototypes that can be used on any device at any viewport size and to capture work flows, actions, and animations that most other prototyping tools cannot recreate.

Sketch, InVision, Craft, Abstract & Photoshop

While I love creating real coded prototypes, it is not always practical to do so. Depending on the company needs, time, and how a shop is set up, using tools like Sketch, InVision, Craft, Abstract & Photoshop may be more practical. I am well versed in these tools and use them daily in unison with code where it makes sense to do so.

Doodlekit Online Website Builder

Doodlekit Online Website Builder doodlekit on tablet

Doodlekit is an online website builder that my business partner and I created back in 2006. It has evolved into one of the top online website builder in the world and is used by millions of people. In 2016 Doodlekit was awarded “Best International Small Business Of The Year” by the Kansas City Chamber of Commerce. It has also been featured in online publications and magazines such as PC World, PC Magazine, TechCrunch, and AOL.

All of Doodlekit’s powerful tools that allow novice users to make their own websites were designed and created by me. Using those very tools, I then generated hundreds of starter templates for our users to pick from when they first sign up. Below are some examples of Doodlekit user generated websites and starter templates.

Doodlekit Starter Templates


Tools that auto generate fully functional websites for small business owners and novice web designers require massive amounts of UX and design work. They also require and extensive domain knowledge about browser compatibility, device type interfaces, SEO, social media, marketing, and much more. Creating and owning my own tech company has provided me with vast amounts of experience concerning websites and how they work.

Contact Me

Contact Me

Like what you see? If you have a project or job opportunity in mind or are simply interested in finding out more, get in touch and let’s get things moving.

footer trees footer mountain