HTML Prototyping

The days of producing multiple, fully visualized design comps in Photoshop are gone. These static graphics files usually show how a site will look in a desktop browser, but more and more users will be interacting with your site or your web application using a tablet or mobile phone. It's important to know how your site will render in these smaller viewports, but generating static Photoshop concepts for each responsive breakpoint is time-consuming and costly.

Whenever possible I prefer to do prototyping directly in HTML. Here's how it works:

  1. Creative agency provides me with "grey box" wireframes outlining general page structure and layout BEFORE producing fully styled comps
  2. I use a front end framework to create static HTML pages of the wireframes
  3. These static pages are coded to be responsive on desktop, tablet, and mobile devices
  4. These pages are published to a development server where they can be tested and viewed on various devices
  5. Creative agency reviews, provides feedback and considers actual responsive adaptations in their style tiles.

The benefit of this workflow is that design and development can be happening simultaneously, saving valuable time in the early stages of a project.

It allows everyone to see exactly how the pages will respond and behave on various devices and browsers BEFORE a bunch of time is spent styling and polishing them.

It also allows for multiple iterations and adjustments to layouts, page structures, and UI elements with minimal consequence.

When your style tiles are approved, those design elements can be quickly applied to the existing HTML prototypes and then integrated into the CMS of your choice.

Contact me today to see how this rapid HTML prototyping can speed up your next web project.