Click here to watch The Zen of HTML Prototyping & Designing in the Browser .

Overview:

Responsive design is the new normal. As the web moves forward to embrace more mobile devices and new development technologies, the classic “PDF” wireframe becomes less relevant. An entire online experience can no longer be communicated to developers and clients in single pages and static documents, and a new process must emerge to take its place. Enter the HTML prototype. Using HTML to create “living wireframes” enables the design team at Lullabot to create quick, iterative solutions to complex UI problems. In this session, I will discuss how Lullabot uses HTML prototypes to solve design challenges, present a more complete user experience to clients, and create an HTML structure for themers and front-end developers. Since HTML prototyping and responsive design is still very much the “Wild West,” I will also discuss several options for designers that may best fit their specific needs.

Who is this session for?

• Designers (who need to know why they should make the switch, and how to sell it to their organization or their client)
• Front-End Developers / Themers (who wish to work with designers to create a front-end experience based on HTML prototypes)
• Project Managers (who want to learn how to schedule and manage HTML prototyping)
• Clients / Managers (who want to understand the prototyping process, and what to expect from their teams or vendors)
• Anyone (as HTML prototyping becomes as standard as SEO or QA testing, everyone on the site-building team will benefit from learning more)

Topics covered & take-aways:

• The ever-evolving HTML Prototyping process
• The unique challenge of enterprise-level responsive design and why static wireframes don’t work
• Using a framework (Zurb, Bootstrap) vs. using a home-brewed prototype
• Separating UX from creative design
• Using prototypes and browser design to bridge the gap between “Designer” and “Themer”
• Design Comps, Style Tiles, Element Collages, HTML Style Guides
• Working in a team setting
• Pros & Cons of HTML prototyping
• How prototypes work in a Drupal specific environment