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 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.
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.
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.
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.