Design before discovery

Guillermo Rauch has written a post about the development of the new VideoPress, titled Pure UI. In it, he describes the workflow for creating the new player and how it was managed between design and development.

He says that the use of React allows for a different kind of programming model, where a design/development/discovery feedback loop is possible.

This allow us to make a distinction of two very distinct (yet frequently interleaved) phases of the creation process: design and discovery.

Design is the process of taking the available data and coming up with its representation. The outcome is reasonably well specified and understood.

Discovery is about the transformation (usually expansion) of that input. It’s the evolution of the design. The uncovering of new states and new ideas throughout the process itself.

Even the most careful designer that can anticipate -due to their extensive experience and ability- a wide range of scenarios will necessarily participate in this feedback loop.

I found myself really drawn into the article, especially in how the process he outlays helps prevent spiraling projects.
Another way in which discovery occurs, usually more painstakingly, is in the implementation process itself.

In the case of video streaming, something that can be easily overlooked (which falls under the category of β€œerrors”) is that the download of the video can stall completely. When this happens, the MediaElement API emits a stalled event.

Both designer and developer can be oblivious to details like that initially. But under this model, the communication between the designer and developer now consists of a very clear protocol.

The next step is for the design mockup to be created for the player but with the extra parameter { stalled: true }. And so the TODO list expands, but in a way that neatly breaks down responsibilities.

This workflow brings us closer to understanding the completeness of implementation in a very direct way. If you think up and hand out 20 distinct states in which your application can behave, then you should be able to clearly see them rendered on a screen as HTML. If only 10 are done, then the implementation is only 50% done.

I do recommend you read the whole thing, especially if you find your projects often going beyond what you anticipated, and have trouble identifying the true state (and who hasn’t!).

You can see the new VideoPress on the website and learn more about the new version on the blog. For what it’s worth, it looks to be a good alternative to some other solutions out there, especially if you seek a simple and relatively “naked” player.

Similar Posts