How to get started with next-generation website prototyping

Default avatar.
July 14, 2014
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.

Read Next

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…