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.

001

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.

002

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

003

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

005

 

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.

006

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.

007

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.

008

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.

009

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.

  • http://www.themesrefinery.com/ Themesrefinery

    Great info i read it twice and then understood.Its very helpful
    http://www.themesrefinery.com/

  • macwill.in

    Great work, I like the way to post. It’s very easy to understand the things with your pots.

  • Ethan Moon

    Hey guys.
    The comsograd link in the author bio is broken.

  • http://www.007studio.pl 007studio

    Nice Article :) Thanks

  • Alex

    why should be show the customer every single transition and screen? arent we the experts? don’t they rely on us to do the job right? didn’t they choose us based on our references and skills? do we deliver a construction kit they can pick of or change?
    i think it is a bad habit and shows your uncertainty.
    we show our customer photoshop screens (and here only the mainscreens) and they are happy up to today with it and the result at the end. so consider being a bit more professional about it. I know that was provoking ;)

    • bejamshi

      Exactly I agree. They don’t care about wireframes or technicalities. Its like a plumber showing to me and explaining why and what he does every step of the way. I don’t care, I want my toilet fix so I can take a dump LOL

  • http://www.miraclestudios.in/ John David

    Good read. In depth knowledge, I have gained from here.

  • bejamshi

    Even wordpress is getting drag and drop, check The7 or Divi, the list is growing like crazy. Soon in a few years from now everyone if not now is making websites. Sad but reality.

    • Alex

      I partially agree – as with print today: there will be amateurs making it look horrible, ambitious amateurs that spend time and have talent making it look surprisingly cool and there are pros making it look horrible and talented pros ;-)

      However: the advantage of the web is IMHO its versatility – from Marketing to UI to UX to “why is the damn div not where it should be in IE8″ to jQuery and finally to serverside stuff – it’s a tremendously large playground.You really have to like it a lot in order to get a cool product.

  • I Am Weasel

    :the rich, dynamic, immersive experience” – Holy Weasel Word Batman.

  • PC Users

    Great info I liked Realtime Studio…..designing in panama

  • http://www.drwebsitesuk.com web design manchester

    A really fine article. thanks for sharing it with us.