How to get started with next-generation website prototyping

Recently I’ve become increasingly frustrated with the current toolset and accepted practices for creating UI and UX ‘deliverables’.

In my experience, building static mock-ups in Photoshop and Illustrator no longer captures the essence of current UI design. Likewise, creating wireframes and UX documentation in tools such as Axure seem to communicate very little of how a site or app actually feels to use.

These tools are reductive, limiting the design to a series of static ‘states’, rather than communicating the rich, dynamic, immersive experience that we hope to build.

For instance, consider clicking on an item in a list view to reveal an information screen. How is the list item disposed? How does the new screen build? What happens when I click to go back to the list view? How are new items added to the list view?

No matter how many screen-state ‘snapshots’ you make, the essential character of modern screen design is how UI elements transition from one state to another, and how new screen elements are brought on/off the screen.

Animations and transitions seem to me to be where the essence of UI design now lies, as we move to more spatial design patterns.

It’s a space, not a page

Part of this is because interactive media are now becoming ubiquitous, we no longer need to make reference to paper-based visual metaphors, such as ‘the page’ in order to make our interfaces easy to use. Now, spatial metaphors for navigating content on screen are more useful, and transitions described in the language of animation.

Pasquale d’Silva calls this area of UI design Transitional Interfaces, and I think he has identified a key area of investigation for modern web and app design.

But most of the current interactive designers’ toolset is inadequate to explore, design and build these interfaces.

Animation software can be used to build mockups and prototypes of interaction. After Effects, Adobe Edge Animate, even Flash, can be used to demonstrate transition effects, which can be output as animated gifs, videos or Flash files. However, these can be time consuming to build, and while they might be good at showing a particular UI transition effect, tweaking the parameters can also be a highly labor intensive exercise. And of course, once you have built a rich interactive UI demo, you then have to translate all your transitions and interfaces into working code for your app or website.

Visual composition tools

It’s no surprise that many of the tools that interactive designers are turning towards are visual multimedia compositing tools, used by VJ’s and video effects programmers.

The best known of these is Apple’s own visual programming tool Quartz Composer which—if you have a Mac—you may already have on your computer, assuming you have Xcode installed. (You’ll find it in the Developer > Applications folder, or it can be downloaded as part of Xcode).

Quartz Composer has been thrust into the spotlight as an interactive prototyping tool due to an article Go Big by Going Home, where Julie Zhuo, a designer at Facebook, revealed that the design team of the new Facebook Home had used QC extensively to test and demo the UI of Home:

“something like Facebook Home is completely beyond the abilities of Photoshop as a design tool. How can we talk about physics-based UIs and panels and bubbles that can be flung across the screen if we’re sitting around looking at static mocks?

“When you see a live, polished, interactable demo, you can instantly understand how something is meant to work and feel, in a way that words or long descriptions or wireframes will never be able to achieve. And that leads to better feedback, and better iterations, and ultimately a better end product.”

Over at the QC forum at Branch, designers began to reproduce the work of the Facebook team.

Facebook followed up by releasing Facebook Origami, a toolkit for Quartz Composer specifically aimed at interactive designers.

Learning Quartz Composer can take quite a while but its node-based approach (where leads connect inputs to processing nodes (patches) and then to an output) is logical. Its visual representation of a computational process may make it more understandable to designers, and it’s easy to tinker around with parameters and change the wiring of a composition.

With Origami, creating interactive mockups for mobiles and browsers is fairly simple. It offers ready to use interface elements to build up the functionality and interactivity of your app, such as buttons, transitions, text layers etc. It’s easy to tweak the parameters of say a transition, in order to experiment with different effects.

Other node based visual programming tools are also finding favour with interactive designers, including Max by Cycling 74, and the open source Vvvv.

Another new tool which looks interesting is Vuo, currently in beta.

Next-gen mockup and prototyping

New tools are being released which are aimed specifically at allowing interactive designers to prototype apps and web sites.

One of the best of these is Briefs. Briefs is a Mac-only tool very much oriented to the creation of apps for iPhone and iPad, though mocking up desktop apps is possible as well. As well as the main Briefs app for the Mac, there is also an iOS app Briefscase, to allow you to publish your Briefs project to an iPad or iPhone in order to demo and share your mock-ups on a real device.

Working with Briefs is very logical. You can import screen images and add simple interactivity to them, or for a richer interactive experience, build up the screen layouts from a library of standard UI elements such as tab bars, search boxes, list elements etc. There are libraries for iOS, Android, Desktop, and a platform agnostic ‘Blueprint’ style. Then you apply the interactivity to those elements you want to demo, for example to show how the search results are displayed, or how the transition works from one screen to another.

In many ways it feels like working with a presentation app like Keynote, but rather than a linear timeline, you can create complex branching, which is when the ability to see your screens as nodes connected by their interactions becomes useful.

The best aspect of Briefs is that it is not just a tool to demo functionality, it is actually a great design tool, to help build good user interfaces in the tight screen space of a phone or tablet.

At $199 for the main Briefs software, it is not a cheap product, but very well designed, and does what it sets out to do very well. (A limited demo is available for evaluation.)

For an open source solution, check out Framer.js, an interactive prototyping framework to quickly build UI mockups. There also a product, Framer Studio, built on the framer.js framework, to provide a ready made prototyping tool.

With Framer Studio, all the screen elements must be created first in Photoshop as layer groups, before being imported into Framer to add transitions and functionality. Framer uses Coffeescript, a “little language that compiles into Javascript”, to keep the code looking clean and simple. However, the code you build has no real value outside of the prototyping tool.

If you are adept at using Photoshop for your mock-ups for web sites or apps, then Framer Studio is a great way to easily add interactivity to your screen designs, to create a demo.

Future tools for design and development

As mentioned above, all the tools featured so far might help you visualize and present the UI of the app or site you’re building, but you are still then faced with the task of implementing the design.

This is perhaps an even bigger problem when using these tools than producing static wireframes and mockups: now you don’t just have to reproduce the layout, you also have to implement the same functionality and the transitions.

There’s an argument that designing in the browser is the best way to ensure your comps are not writing cheques your code skills can’t cash.

However, there are some apps that can help bridge the gap between visualization and production ready code.

RealTime Studio by Outracks, is a well implemented IDE for visualization, almost a mix between the node based tools such as Quartz Composer, and a timeline based tool such as Edge Animate.

Because in RealTime Studio you can see both the code and its visual representation, both designers and developers can use and understand it. Outracks uses its own language called Uno, which is very similar to Java or Actionscript. Best of all, because the code can be exported for a number of different target platforms, it’s a practical development tool, not just a visualization app.

With so much going on it’s no surprise that the screen is rather cluttered. There is a node view, a timeline view and a code view as well as the preview window. Some improvements to the UI would be welcome, to make it easier to minimize the views you don’t need, in order to expand the ones you are working in. The node viewer especially is very poor compared to something like Quartz Composer. However, I’m really excited about this product. Currently in beta, it’s PC only, and there is a demo available on the Outracks site.

Another exciting new product is NoFlo, a flow-based Javascript programming tool. Developed as the result of a successful Kickstarter campaign (disclosure: I was a backer), it highlights both the dissatisfaction with the currently available tools, and the untapped potential for flow-based programming tools, that could be more easily understood by non-programmers. NoFlo builds upon Node.js to deliver functional apps to the browser. Native output to Android and iOS is in the works.

The NoFlo engine is open source and can be downloaded for free. There is also a hosted version at Flowhub.io. Flowhub can be run either in the browser, or as a Chrome app.

However, Flowhub doesn’t really live up to its promise yet as an intuitive programming environment, it seems rather slow, flaky and difficult to use. The nodes that you create in the Source Graph represent functions (or methods to use the proper terminology), whose actual Javascript code resides elsewhere.

At the moment, using Flowhub is a hindrance rather than a help. I suspect that most developers would rather hand crank code than use Flowhub. However, these are early days,

That being said, Flowhub and NoFlo offer a powerful glimpse as to where flow based programming may take both visualization and development, and hopefully will develop into the intuitive rapid application development tool it aims to become.

It is my belief that the future of interaction design lies in flow-based tools.

Martin Gittins

Martin is an interactive designer based in North Yorkshire. He still spends way too much time thinking about Constructivism, linear cities, and cycling. Find out more at www.kosmograd.com.