OK, so you've read what various UX thought leaders have said or written about prototyping in HTML (or more generally about UXers being able to code) and you're convinced that HTML prototyping is an important skill. Maybe you want to improve the collaboration between you (the designer) and your developer colleagues. Perhaps you want to improve communication with stakeholders. Or maybe you want to get your designs in front of your users earlier.
If you're a freelancer, it could be that you are looking for ways to raise your hourly rate. Or maybe you're an in-house designer who's looking for a better job and who sees the value of having this important skill on your résumé.
But where do you start?
The following is my attempt to show you the alternatives that are out there. I hope it helps you find the way that best suits you.
Disclaimer: I have included Livetyping, which I created. Yes, I think it's great. But I recognize that different people learn in different ways. If self-paced, screencast-based learning isn't your bag, I'm sure you'll find an alternative here.
Workshops
There have been several HTML prototyping workshops run in various locations. A good example is UX Bootcamp's Prototyping in Code, an intensive three-day workshop that has been run twice in London, UK.
Pros:
- It's aimed specifically at UX designers.
- It's good for procrastinators and others who struggle with self-paced learning.
Cons:
- It's a bit pricey (£299, which translates to $475).
- It's only any use if you live within a reasonable distance of the venue.
- It's not available right now. You'll have to wait for the next one to be scheduled.
Books
Hundreds of books (maybe even thousands) have been written about HTML, CSS, and Javascript. Here are a few notable ones:
- HTML5 for Web Designers, by Jeremy Keith
- Designing with Web Standards, by Jeffrey Zeldman and Ethan Marcotte
- CSS3 for Web Designers, by Dan Cederholm
- Responsive Web Design, by Ethan Marcotte
There is also Todd Zaki Warfel's book, Prototyping: A Practitioner's Guide, which touches on HTML prototyping, but does not go into much depth.
Pros:
- You are spoiled for choice.
- Books are relatively cheap.
- There are some great books out there.
Cons:
- It's hard to know which books to buy from the huge selection available.
- None of them are really tailored for UX designers who want to learn how to prototype in HTML.
- Not everybody likes learning from books or has the necessary self-discipline.
Online Video Courses
There are dozens of sites that offer screencast-based courses. For example, Lynda.com has lots of courses on just about any tech-related subject you could mention, including ones on HTML, CSS, and Javascript. There is a lot of good content out there, but most of it is not aimed specifically at UX designers. It's more for people who want to become web designers or web developers.
Pros:
- They are typically self-paced, which is great if that works for your learning style.
- The cost is usually reasonable.
Cons:
- They aren't tailored for UX designers.
- You need to do your research to find the right courses.
- You end up wasting time learning stuff that's not really relevant for HTML prototyping.
Free Online Resources
Where do you go to find almost infinite resources about web technologies? The web, of course! Again, the quantity of information available is staggering. You can get all the information you need, but there are two problems: finding it, and being able to tell the good from the bad.
A few selected resources:
- http://diveintohtml5.info/
- http://www.codecademy.com
- http://www.w3schools.com/
- http://css-tricks.com/
Pros:
Cons:
- It takes a lot of time to find the right resources and work through them. How valuable is your time?
Livetyping
Livetyping is a series of screencast lessons that teach you prototyping in HTML, CSS, and Javascript at your own pace. It is tailored for UX designers and doesn't include stuff that you don't need to know.
Pros:
- It's tailored specifically for UX designers.
- It's great if you can't dedicate a big block of time all at once.
- You can work through it at your own speed.
Cons:
- Not good for procrastinators or those who struggle with self-paced learning (though it's probably better than books in this respect).
Conclusion
HTML prototyping is a valuable skill that is in demand. There are many different ways to get this skill—some will suit your own personal learning style and how you value your time better than others. Best of luck!
You can get Livetyping here.