sunshine rainier mountain seattle trees dark trees darker trees darkest 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 specialize in User Experience Design, Atomic Design and coded prototypes. I do full visual site architecture, usability flows, 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 create scalable, responsive modular designs that are coded up into interactive prototypes for presentation and user testing.

Atomic Design Concepts

In 2014 I started designing custom coded 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 Brad Frost introduced a new design methodology called Atomic Design that was almost identical to the proprietary UX prototyping/design tools I had created. In 2016 I started the process of converting my system over to Brad's atomic design system called Pattern Lab as it was more mainstream and well established.

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 (  ShapeAllrecipesMartha StewartBetter Homes & GardensParents,  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 process. 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

Atomic Design & Pattern Lab

When it comes to prototyping, my preferred tools are Atomic Design and Pattern Lab. Having the ability to create fully responsive and functional designs that you can see and interact with on any device and at any viewport size is hard to beat. These tools not only allow you to design highly functional prototypes, but also auto generates your style guide for use by everyone in the company. It also provides all the sample code for UI developers to use when implementing modules into real web pages, with the styling and design code fully baked in for pixel perfection. Once set up, its scalability and reusability allow UX designers to create new designs and prototypes super-fast and to almost 100% accuracy of the final product.

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,  and  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 builders 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 an 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.

linkedin pinterest

footer trees footer mountain