Home > Prototyping and wireframing > Are HTML wireframes a thing of the past?
The HTML wireframe has its place in UX design but have interactive wireframes quickly taken over?

The HTML wireframe has its place in UX design but have interactive wireframes quickly taken over?

Sketched wireframes, HTML wireframes, lo-fi wireframes, interactive wireframes… there’s a lot that goes into wireframing and a lot of different ways to do it. These are just tools in a designer’s toolbox. Each method comes with its own set of positives and negatives, but the result should always be user-friendly, functional prototypes that lead to memorable web and mobile experiences.

One of the best ways to go from idea to final product is using a prototyping tool, like Justinmind. The beauty of having a set of predefined and customizable widgets mixed with an easy to use interface makes creating prototypes faster. And it’s even possible to get the HTML you need, so you can keep developers happy too. With that said, does this means HTML wireframes are a thing of the past? Let’s see…

html-wireframe-interactive-wireframe-prototyping-tool-ux-design

What are HTML wireframes?

A wireframe, by its simplest definition, is just a two-dimensional framework of a page or app’s user interface. The wireframe focuses mostly on the distribution, prioritization and allocation of content and functionality. That means an HTML wireframe is a wireframe that’s been written in HTML without any color, typographic or stylistic choices taken into consideration, at least not at this stage of designing.

HTML wireframes are closer to a final product because they’ve been written in the language necessary; however, perfectly written code isn’t always achieved first time around. HTML wireframes take time to write and people spend a lot of that time checking for errors in the code than thinking about the final product. And in a world of tight deadlines, time is money.


Download Justinmind and bridge the gap between HTML & design!

Download free


Benefits of HTML wireframe

HTML wireframes are great for those with knowledge of coding. However, the ‘should designers code?’ debate lives on with no definite end in sight.

A car analogy works well here: when a car factory builds a new car and tests it – this prototype can be approved, modified or abandoned. But cars can also be built virtually and simulated with software. Both do the same thing; however, one is much less time consuming. It would make more sense to do things virtually to iron out any potential errors before committing to construction.

An HTML wireframe is like a real built car – difficult to create but has all the functionality you need. If it works, then more cars get built. But is this the best way to go about it?

Another benefit of HTML wireframes is that they’re already being built in the browser. This allows teammates and stakeholders the chance to tinker around in the browser with the code, should they have the right knowledge. HTML wireframes get into the browser quicker – you can open them up in any browser and see how things look in context on any device.

They also lay the foundation for the final product. You can build on the HTML you write which can then make up the code of the final product.

There is a lot to be said for HTML wireframes but depending on what kind of designer you are and what kind of knowledge you have, they may be an unrealistic, if not impossible, way for you to design.

Drawbacks of HTML wireframes

A HTML wireframe sets the foundation for the final product; both the wireframe and final product will be written in the same language. But if you don’t know the difference between your <h1> and your <h2> tags then a HTML wireframe isn’t going to be of any use. What’s the solution then? Not every designer can be expected to learn coding and they shouldn’t have to.

It’s true that developers bring with them their own ideas and creativity and designers are no different. They have different ways of working. But many UX designers are visual people who use software such as Illustrator, Sketch or Justinmind to create designs and don’t think in the logical, structured way of developers.

Developers will sing the praises of the HTML wireframe, claiming it to be the most efficient way of working, forgetting that a HTML wireframe is static. This is crucial because clients want to see something work; its inherent interactivity. A HTML wireframe doesn’t offer this unless you throw in some CSS and JavaScript. Then the lines become blurred between UX/UI design and front-end development. HTML prototypes are the solution to this because they allow you to create wireframes with content and interaction as well as offering HTML documentation. And in a tool like Justinmind you can make your wireframe as simple as a skeleton layout or as complex as a fully functional interactive prototype.

html-wireframes-interactive-wireframes-ux-design-prototyping-tool

Interactive wireframes with HTML in Justinmind

Justinmind lets designers create web and mobile experiences from scratch using drag and drop widgets. This intuitive design means you don’t need to understand a word of coding, making the process for UX designers less daunting and more efficient. Justinmind enables UI and UX designers to do what they do best: design creatively .

There’s a benefit for the client too, who will see something very similar to the final product with interactions and a mockup of the final layout. Communication will be improved with designs in context; with an interactive prototype a client can simulate and use the website or mobile app as if it had been written and coded in HTML. Why is this a bonus? Well, if there are any changes that need to be made, such as an interaction, then the client can make those changes before any code has been written. Saving time and money – win win! And poor ideas can be dumped much sooner – better to lose an hour prototyping a functionality than a week coding something that won’t go into the final project phase.

Through simulation and demonstration, the coding phase will be much smoother as every specification will be clearer from the outset.

There is also the developer interface with Justinmind – it’s a read-only interface that helps developers do their job better. And in a Justinmind prototype, downloading the HTML documentation takes no time, just a simple click and voila – developers have everything they need.

Conclusion

Software over the last 10 years has changed a lot – HTML wireframes served their purpose before the proliferation of advanced prototyping tools. However, now designers can relax and stay relaxed because with Justinmind there’s no need to learn HTML – everything can be dragged and dropped onto the canvas with added interactivity. Let’s save the HTML for the developers – they do it best, after all.

Victor is the Product Manager at Justinmind. His specialties include business analysis, usability, requirements management and prototyping. When not busy doing that he is known to eat or sleep.