Google Profile

THE CREATIVE
TECHNOLOGY

Digital wanderings @ Publicis

Prototyping, for real ?

By Lucas Mouilleron, Creative Technologist, on the 23/09/2014

Prototyping apps or websites is said in countless blogs to helping designers, developpers, product managers and owners to produce the right thing with minimal hassle.

Or at least less than in the old way of building static mockups, explaining them along the production chain, and sometimes, move backward late in the process.

For real ?

When to prototype

Prototyping, in its broader sense is about building a rough fake version of a product to help understand it.

In the case of an app or a website, it can be a wireframe, an interactive wireframe, an interactive mockup or a (semi) functionnal prototype.

When the app or the website and / or its budget and / or its lifetime are small, refined prototypes are too expensive.

As a rule of thumb, here are common situtations and matching prototypes solutions :

 

  • User flow, global understanding, mature audience (project managers, developpers) : interactive wireframe
  • Complex user flow, non mature audience (clients, stakeholders), enough budget : interactive mockup
  • Complex and specific interaction (new UX, reponsive reactions), enough budget : semi functionnal prototype

Prototyping tools

Interactive wireframe tool

  • Users : project managers, designers
  • End users : developpers, project managers, mature clients
  • Output : pdf file, html website
  • Axure : robust, medium learning curve, export as html
  • Balsamiq : ligher, easy to use, cloud or not, no export (maybe via plugins, did not try)

Interactive mockup tool

  • Users : project managers, designers
  • End users : developers, project managers, clients
  • Output : html website
  • Invision : very easy, cloud, Photoshop auto slicing and sycing, comments

Semi functionnal prototype tool

  • Users : designers with light to medium dev (js) skills, developpers
  • End users : developers, project managers, clients
  • Output : prototype website
  • FramerJS : convenient framework (animation helpers, states machine, coffee or js), Photoshop auto slicing

Conclusions

As we realized, it is actually possible to prototype and yield time and noise savings.

It’s just about using the right protootype tool for the right context.

Examples