If a picture is worth a thousand words, then a prototype is worth a thousand pictures.
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
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.
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
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.
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.
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.
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
User Created Websites
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.
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.