This curated column is authored by Product Strategy & Design Consultant, Kevin Bury
Imagine you are trying to describe an elaborate dance to someone and all you have available to you is a series of pictures. Sure you can add words to the pictures – “The dancer spins around moving her left arm in a wide arc while holding her partner by the right hand” – but you will never be able to communicate the rhythm of the dance, or the subtleties of the movement.
Static mocks alone are not able to communicate a dynamic design.
The purpose of this article is to equip designers with a core set of skills that will allow them to demonstrate dynamic behaviour in their HTML prototypes. The information here is intended for the designer, not the front-end web developer. Our focus is on demonstrating high-fidelity designs, not developing production code.
What is Rapid Prototyping?
This question is probably best answered by an example. Let’s say you are designing a list interface and want an intuitive way for users to remove items from the list. You want the experience to be obvious, smooth, and maybe have a little bit of panache 🙂 So you come up with the design below. When the user positions the pointer over a row, the row highlights. When they click the X, the row fades and then animates closed.
This design is typical of the type of interaction common on the web today. A pretty simple interaction, but it would not be that easy to described in words. In fact, to get the details of this interaction correct, you really need to see it in action. How else are you going to know how to balance the speed of the fade and the close animations?
We call this “rapid prototyping” because our sole purpose is to demonstrate the design. Because we are not trying to deliver production-ready code, we can work very quickly. We need to be 100% accurate in the demonstration of the design. But once we’ve attained that, we’re done.
So how does one create a prototype to demonstrate an interaction like the one shown above? It’s not as difficult as you might think. Let’s start with some basic concepts.
The Document Object Model
Our focus is on demonstrating high-fidelity designs, not developing production code.
In summary, here are the core concepts to remember:
· Objects on a web page can be given ids.
· Functions can manipulate objects on the page.
If you understand the concepts above you are well on your way to adding dynamic behaviour to your prototype.
To see live examples of the concepts discussed above, visit dreamstep.com
Disclaimer: This is a curated post. The statements, opinions and data contained in these publications are solely those of the individual authors and contributors and not of iamwire and the editor(s). The article was published by the author here.