Putting the rapid into rapid prototyping

« View all Writing

Sometimes you can better explain an idea to someone if they can see it in action – this is where prototyping is a really strong tool. For testing ideas, demoing interactions to developers or pitching to clients, having a visual sat on screen or in your hand is a great way to get better results.

Recently I’ve been upping my game on prototyping with a few time saving tools, letting me do a “save once” workflow for quickly iterating through design treatments. This is super helpful for discussing internally and also for external user testing.

The output is a link to a web page which can be saved onto device or viewed in browser which can feel pretty damn realistic. The biggest advantage is once someone has the link they get the updates straight away, no new pdfs to download or separate web pages to view.

Tools

Photoshop – still the weapon of choice for many web designers despite the emergence of competitor software like Macaw or Sketch.

Slicy – Photoshop’s generate asset feature I’ve found to be a bit clumsy, especially when I’m using one file for multiple page designs

Dropbox – the go-to solution for simultaneous cloud/local file storage and backup

Marvel app – a web based tool for taking images from dropbox and turning them into clickable prototypes

Workflow

So this requires a bit of preparation, but nothing outside of normal best-practice for file management.

1. Set your project folder on Dropbox and include a ‘Prototype’ folder to save jpegs or PNGs in.

2. In your Photoshop file, ensure images for exported are grouped and named with ‘.png’ at the end. Also mask the group to the size you want the export to be.

3. Drag and drop the file into Slicy, save the files into your Prototype folder and make sure you repeat the export automatically.

4. Finally go to Marvel App, sync up the exports from Dropbox and add hotspots. And you’re done!

Now, when the client asks you to change a button style or the CD wants to change the hex value of the link text, I just make the updates in Photoshop, save the document and the prototype on Marvel is automagically updated. Amazing time saver for visual stuff.