Jump to content
fluxx

Options for creating a clickable prototype

Recommended Posts

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!

Share this post


Link to post
Share on other sites
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.


The website is still a work in progress. The "Comics" and "Shop" sections are not yet ready. Feel free to connect with me and let me know what you like or what can be improved. You can contact me here, on my contact page, YouTube channel, or Twitter account. Thanks and have a great day!

Share this post


Link to post
Share on other sites
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.


The website is still a work in progress. The "Comics" and "Shop" sections are not yet ready. Feel free to connect with me and let me know what you like or what can be improved. You can contact me here, on my contact page, YouTube channel, or Twitter account. Thanks and have a great day!

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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.


The website is still a work in progress. The "Comics" and "Shop" sections are not yet ready. Feel free to connect with me and let me know what you like or what can be improved. You can contact me here, on my contact page, YouTube channel, or Twitter account. Thanks and have a great day!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

 

 


The website is still a work in progress. The "Comics" and "Shop" sections are not yet ready. Feel free to connect with me and let me know what you like or what can be improved. You can contact me here, on my contact page, YouTube channel, or Twitter account. Thanks and have a great day!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.