The Bureau of Web

Using web technology to prototype almost anything.
Web technologies allow us to create refined UI prototypes in an agile way. But we still feel that there's a disconnect between design prototyping and code prototyping. Our web bureau's aim is to change that.
The Bureau of Web

is one of three bureaus in the engineering unit. There is also the Bureau of Hardware and a Bureau of Software. For us at IXDS it's very important to iterate quickly during a project. We need tools that allow us to not only develop prototypes in a short amount of time, but in a maintainable fashion. Prototyping doesn't just mean to provide quick proof of rough ideas, but rather to prove and improve a complete concept. The Bureau of Web mostly uses tools which support early usability testing, quick iterations, and somethimes even a holistic experience of a product over multiple touchpoints. But sometimes our prototypes are very refined and parts of them even end up in the end product.

What tools do we use?

Since we embarked on our way to prototype with web technologies we learned that they are a good choice for developing in an agile way. Short feedback loops when developing (e.g., no need to do large compilation), the breadth of tools (like web inspectors), frameworks, and libraries available is astonishing. The openess of the medium and the huge community behind it just add to that.

Since then, the web development field has blossomed spectacularly. Tools like AngularJS, NodeJS, Bower, Grunt and Yeoman (just to name a few) have made the development of web-based apps smoother than ever. We use the Angular Fullstack generator to set up projects using Yeoman with AngularJS, UI Router, and Sass. This includes live reloading when JavaScript, template or sass files change, compiling all files on the fly.

Many of our prototypes are embedded interfaces and need to interface with some kind of hardware. NodeJS via websockets is what glues our web prototypes and the hardware together. We often use OSC/TUIO to communicate with touch interfaces or camera tracking, or to communicate with our self-built animation tools. Or we just directly interface with the hardware like on a Raspberry Pi.

Although we are currently happy with our stack, we are still keeping an eye out for newer developments. Currently we are exploring Angular 2, React and Aurelia as frameworks.

The challenges ahead

There are, of course, problems that we face that we feel are not completely solved yet. For example, we think that there is still a deep gap between the design phase and the development phase of a prototype.

In the last years, a number of tools have come out that enable designers to build more-or-less advanced UI prototypes, like Invision, Framer, Proto.io or Noodl. However, given our needs to develop advanced and refined prototypes, we don't always find ourselves comfortable with the code that these tools produce, so there's still the need to rewrite the whole prototype from scratch when the project enters the so-called development phase.

We have been applying some patches to our workflows to minimize that gap. For example, we developers sometimes introduce interactive elements that allow designers to tweak parts of the prototype on the fly. Also, luckily, some of our designers are familiar with code and can directly contribute some minor changes by themselves during development. Recently we also started including SVG into our prototypes, in some cases using whole SVG screens exported from Sketch or Illustrator in an AngularJS application. But is this enough? At IXDS we feel there is still a way to go.

Could a prototyping tool that really enables designers and developers to collaborate seamlessly be the next leap forward in prototyping? One thing is sure, we need to keep exploring...