The HTML Prototyping Intensive

Coding for UX designers (Coming soon!)

Why prototype?

Prototyping has many benefits compared to making static deliverables (wireframes or mockups):

• A prototype means less documentation. Less to create, less to maintain.
• Prototyping is more about experimenting than describing.
• Stakeholders and clients can understand them. And get excited about them.
• Prototypes are much better suited to usability testing than static deliverables.
• A prototype lets you see and feel what it is like to actually use your design.

Why HTML prototyping?

If you're designing for the web, prototyping in HTML, CSS, and JavaScript takes it to another level:

• An HTML prototype is built using exactly the same materials as the finished product. This means you work with (and understand) the same constraints (and the same opportunities) as the finished product.
• Designing in code means more empathy with your developer colleagues, not to mention better communication and collaboration because you can speak the same language.
• You can call bullshit on the developer who says it can't be done, because you understand the technology well enough to know that it can.
• Front-end frameworks make page layout dead easy. They let you skip over lots of fiddly CSS stuff.
• You can make your design responsive really easily—no more having to create multiple wireframes for different screen sizes.
• Knowledge of front-end technologies means you can muck in and help more. This is particularly valuable in companies that work as Agile teams.
• More and more UX job postings are requiring front-end skills these days.
• These skills make you a more valuable designer.

Who it's for

This course is for UX designers who have little or no coding experience, and who are currently using something like Omnigraffle or Visio to make wireframes or an app like Axure or InVision to make prototypes.

What you'll learn

The workshop will teach you the basics of HTML prototyping. By the end, you'll be able to make HTML prototypes of your designs, including interactivity, transitions, and animations. In short, something that looks and behaves like a real web application.

The course covers:

• The basics of HTML5: not everything (you don't need everything)—just the parts you need to be able to prototype your designs.
• The basics of CSS3: again, not everything—we'll be using a front-end framework for all the page layout stuff.
• jQuery intro: JavaScript is what makes web pages do stuff. And jQuery makes it easier and more powerful.
• Using front-end frameworks like Foundation and Bootstrap to make prototyping faster and easier.
• Using transitions and animations to bring your interactions to life.

What you'll be able to do after the workshop

After the workshop, you will be able to prototype your designs in HTML, CSS, and JavaScript, instead of OmniGraffle, Axure, or InVision. You won't be a master programmer (it's only a twenty-hour workshop, after all!), but you will have a solid foundation to build on, and knowledge of what to learn next, and how to go about it.

Workshop format

This workshop consists of five four-hour sessions, which start at 17:00. The class size is limited to just 12 people. This means you can ask questions and get help when you need it.

When and where

The next workshop will take place in Tel Aviv (location TBD) sometime this summer (2015). Enter your name and email address below and I'll let you know more details as they become available. Later, I plan to run the workshop in other locations (Europe and the US). And an online version is also on the cards :)