In the winter of 2013/14 I took a 12 week UX Design course with General Assembly. There was an emphasis on clickable prototypes made with apps like POP and Axure. Seeing these prototypes in action, there was no doubt in my mind that clickable prototypes provide more value for testing and sharing a design than static images with descriptions of the interactions.

If a designer isn’t comfortable with HTML, CSS, and Javascript, programs like POP and Axeure are great. But it just so happens that I am comfortable with HTML, CSS, and Javascript, so I’ve been trying to transition into coding my designs.

With an HTML prototype, I can show the actual interactions instead of proxies for them. I can show the various states of elements instead of describing them. And, on smaller teams where there isn’t a front end developer who’s a ninja with CSS, I can give working code examples so there’s less confusion about how to build out the designs.

I haven’t completely abandoned lower fidelity wireframes for the initial stages of a design. Lately I’ve been sketching ideas on paper to get ideas out of my head. I’ve also used Photoshop or Omnigraffle as an intermediate step to make ideas clearer. Once I have a few sketches, I can drop them into a storyboard with brief descriptions so people I’m communicating with can get a general idea of the interactions I have in mind. Ideally the product owner and can walk through the storyboard together -lately that’s happened via Google Hangouts- and talk about problems they foresee or changes they want to try.

Once I’ve gotten approval to move ahead I’ve been jumping right into HTML. Sketching on paper takes the place of wireframing in Omnigraffle or Balsamiq. Prototyping in HTML gives us something we can get our hands on which helps us find the weaknesses and strengths of the design.

Redesigning an Interface for a 3D Building Game

I’ve been designing the UI for a 3D modeling startup called 3Scape. We’ve gone through a few drastically different designs, but I think we’ve hit our stride and settled on one that will work for our users.

The process to get to this point is a great example of how I’ve been able to jump from drawings to HTML and then into production, all in about two weeks.

Interactive HTML Prototypes – A Love Story