Options for creating a clickable prototype

[fluxx]

I'm starting to use Affinity Designer for creating layouts for mobile apps. Perhaps tools like Axure would be an even better fit for this scenario, but I would love to stick to the software I know and create the screens with Affinity Designer, especially since I like the visual outcome. Currently I'm using one document for an app, which contains several artboards, one per screen.

 

Now my question is: What's the best tool and workflow for getting clickable prototypes out of Affinity Designer artboards?

 

Mandatory function would be to display the screen / artboard and have clickable areas which link to other screens / artboards on a mobile device (Android / iOS). Every other function like transistion effects and so on would be a plus. I have some programming skills but wouldn't call myself a mobile developer, so if there is an easy way that involves generating some code, that would be an option too. 

 

Would be happy to hear several opinions about this, thanks in advance!

[Bri-Toon]

On 2/23/2018 at 4:11 AM, fluxx said:

Now my question is: What's the best tool and workflow for getting clickable prototypes out of Affinity Designer artboards?

 

First of all, I love the idea, and I was previously thinking it would be a great idea for Affinity to do something like this, but I'm afraid it is not currently possible to create interactive prototypes like Axure or Moqups. I do a lot of UI designs on the side myself, and I would love to have some presentation by showing menus that pop up after certain buttons are pressed. If Affinity adds something like this, I will use the heck out of it.

[fluxx]

So I guess exporting a series of artboards is the way to go at the moment? Could you suggest any external tools or services?

[Bri-Toon]

6 hours ago, fluxx said:

So I guess exporting a series of artboards is the way to go at the moment? Could you suggest any external tools or services?

 

If you mean to export content and panels from Designer to import into something with clickable interactions, then this is what I will suggest.

 

For Designer tools, I'd say either artboards or regular slices. In the Layers tab in the Export persona, you can add a slice to an entire layer rather than having to use the Slice Tool. Just make sure you have your document set to a transparent background in case you have rounded corners or something non-square shaped. You can add transparent backgrounds in Document Setup > Color > Transparent Background.

 

For external tools or services, I don't know if it would do all of the things you are looking for, but at the time, I did really enjoy using Moqups, an online prototype tool. It features pages, links, common shortcuts, and it has come a long way. You can upload your content in their Images tab, and then with the Pages feature, you can tell Moqups what to do when an image is clicked on. So let's say you want to have a drop-down menu. You would have the menu closed on the page, duplicate the page, and have the menu open in the duplicate. Adding a hotspot to the link would trigger that second page to open.

[fluxx]

Thanks @Bri-Toon I'll give Moqups a look. After days working with Affinity Designer on UX / Screen Design I absolutely love Affinity Designer, it brings all the advantage essentials you need. Would love to see Affinity to add a native channel to one of these Mock-up tools in the future. 

[Bri-Toon]

I'm glad you really enjoy it. As I'm sure many others are well aware from my rambling, I really love it myself.

 

And since you are doing UX / Screen Design, be aware of the Assets and Symbols tabs which are hidden by default. You can locate them at in the View menu and then in Studio. The Symbols tab is good for keeping colors in sync with global changes.

[fluxx]

Thanks, I already use them, very handy!

After some research I found another service that is very easy to use and (as of now) free of charge: https://mockup.io/about/ It's perfect for my needs, just export slices from Affinity, upload them, create link zones and a fixed header and you're ready to go. 

EDIT1: And just reading into the topic a little bit more, here is a list of other, similar tools that could help: Briefs, InVision, Notism, Flinto, Fluid, Mockup.io, Prott, POP, Marvel, Balsamiq, Red Pen and Keynotopia.

EDIT2: In the end I went for Invision, Mockup.io is abandoned and sometimes works and sometimes does not work (unfortunately). What I would love to see now is a workflow form Affinity Designer to Invision, as it's already possible with Photoshop.

[Bri-Toon]

Quote

EDIT1: And just reading into the topic a little bit more, here is a list of other, similar tools that could help: Briefs, InVision, Notism, Flinto, Fluid, Mockup.io, Prott, POP, Marvel, Balsamiq, Red Pen and Keynotopia.

 

Ah yes, it's been a long while, but I remember some of those names. Balsamiq definitely rings a bell.
 

Quote

EDIT2: In the end I went for Invision, Mockup.io is abandoned and sometimes works and sometimes does not work (unfortunately).

 

 

That's too bad. I was reading into the app store version of Mockup.io, and it looks like it got bad reviews. It looks like it was abandoned back in 2016 or earlier.

 

And wow, from this quick video, Invision seems to look pretty dandy.

 

 

[Synthesz]

If Affinity add a prototyping mode, it's going to be a new era for us Ipad Designers. My current workflow has been really good and would reach a godtier point with that addition, rather than redoing everything in Figma or other prototyping services.