Jump to content

What are the best Demo (Prototyping) workflows that goes well with Affinity suit


Recommended Posts

Hi. 

Im looking to get insight on how others create work prototype workflows to show their app/website to clients. 

At this stage i’ve tried the things below depending on the work and amount of animations

1, create my work on AD, bring them to sketch, do lots of adjusting, than make a demo workflow in proncipal. 

2. Create work in AD, bring to XD, lots of adjustments and create demo workflow. 

3. Create work in AD, bring layers individually in apple motion, animate and record. 

On iPad, which at this point im fluent with AD (still missing things like, global colors, search function for color pallets which is specially useful when ur getting pantone colors, lack of a complete expor persona). 

1. Create work in AD, animate using core animation app (its a real pain and I DO NOT RECOMMEND)

i want to know if there is a better way and what you guys recomend,

plus. Is affinity planning on making any prototyping functionality in designer?

cheers. 

Link to comment
Share on other sites

Hi Aaron,

Do all my prototyping directly in to Bootstrap 4 (HTML RAPID PROTOTYPING) and use Affinity Photo for images and Designer for logo's and vector stuff in the Bootstrap prototype.

Saves a lot of hassle later on! CSS and JavaScript works instantly (and can be tweaked in a simple way!), responsiveness works out of the box. Can be used for applications and/or websites. That way you experience the creative and technical limitations and challenges of the design instantly in the prototype of Bootstrap. 

There are prototyping templates for Affinity (Bootstrap 4 for example!)

Resources for Affinity here!

Template Bootstrap 4   here!

I find it complicating  my work to design it first in a application (without testing if it works in the real world) and think it's better to show the client the real deal. If PHP or what ever is needed I show my clients the application or website on a local server (MAMP Pro) in my laptop that I carry with me.

Of course you need basic knowledge of CSS, JavaScript and Bootstrap 4 or any other framework. (In the past I worked with Fireworks, Sketch, Photoshop and Illustrator and it has cost me twice as much time instead of working with Bootstrap and Affinity).

This is only my personal experience/opinion, but maybe you have a good reason to make the prototype in Affinity. 

Regards,

David

Link to comment
Share on other sites

Your welcome!    https://getbootstrap.com/

Here is a very old but good explanation of my work flow (HTML RAPID PROTOTYPING).

Only I don't even use wire frames from an other source anymore and make it strait in to Bootstrap that works as a wire frame too. 

I do make a sketch on paper first.

Some links are outdated, but the explanation is still relevant.

https://blog.alexdevero.com/html-rapid-prototyping-facts-need-know/ 

Link to comment
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

Terms of Use | 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.