The advantages of HTML prototyping

It wasn’t long ago that websites started life as a flat, pixel-perfect JPEG, passed from designers to developers, built and packaged up for the client. Simply put, a pass-the-parcel method of producing a digital solution.

It wasn’t long ago that websites started life as a flat, pixel-perfect JPEG, passed from designers to developers, built and packaged up for the client. Simply put, a pass-the-parcel method of producing a digital solution.

Out of the box prototyping applications

The introduction of services like inVision and MarvelApp have allowed those flat visuals to be brought to life with interaction states, transitions and linked screens providing a pleasing click through prototype. There are limitations though, mainly the limited library of features - while it also requires extra time to put these prototypes together following the production of flat visuals, as before.

It can sometimes be difficult for a developer to interpret a designers wireframes/visuals once they are “handed over the wall” ready for development. This can result in unexpected results and “I thought you meant this”, requiring further meetings and conversations, eating into the available design and dev time.

A great way of getting around this overlap of creating flats, then a prototype, is by trying out collaborative prototyping in HTML.

Let’s get together

So why should we treat front end development and design as two different processes? The answer is: don’t. Combine them into one stage of nailing the look and feel, micro interactions and animations all at the same time. By cutting out production of flat wireframes and visuals in Adobe CC/Sketch, and time spent by developers reviewing those initial design, you’ll have more time to focus on the fun and engaging tasks. Refining the beautiful elements that really bring a digital experience to life - while ensuring it is technically possible and can fulfil its intended purpose.

Designing collaboratively and directly within the browser allows for a true representation of how a website could look and feel. It’s also easy to incorporate critique regularly in the process to ensure the design is moving forward together with the wider team and client expectations.

Working with simple scamps and a style-tile for reference, pages, component libraries and boilerplates can be produced relatively simply, making key decisions during the process. There is no substitute for seeing designs in their intended environment as early in the process as possible - it can have a massive helping hand in getting the look and feel just right.

A final word

Prototyping collaboratively in HTML is a really slick and effective way of working and can help ensure there are fewer miscommunications between design and development, the wider internal team and importantly the client. I hope you can try it out soon.

By Dave Paterson, Designer