How to use Framer for Low fidelity Prototyping ?
Create Low fedility prototype in less than 5minutes using Framerjs, Codepen(live reload) and imgbb(get sceens pulic URL) on the Browser.
Step 1
Sketch your product ideas using paper & pen. You can download iphone template here Free Iphone template A4 pdf
I have used my user research project Healthy companion app idea to prototype. http://healthycompanion.strikingly.com/
Step 2
Take pictures of the screens from your camera app and crop it.
Step 3
Upload the pictures from step2 to https://imgbb.com/
Step 4
Get publicly accessible URL. Get shareable image link as shown below.
Step 5
Open codepen.io, prepare for Framer project.
Link to Framer boilerplate https://codepen.io/anilbms/embed/zzKYOz
click on “edit on CODEPEN” near top right of the page to start working on it Framer prototype.
Or
configure it manually
Select Coffeescript on Javascript Preprocessor on Javascript tab of codepen.
Add following 3 external JS libraries in a same order.
https://cdn.rawgit.com/anilkk/framerjs/07022a08/framer.js
https://cdn.rawgit.com/anilkk/framerjs/07022a08/framer.generated.js
https://cdn.rawgit.com/anilkk/framerjs/07022a08/framer.modules.js
Step 6
Setup device type. Paste following code on the code pen coffeescript block of codepen prepared in step5.
Step 7
Get device screen width & height. It’s used for further reference in the layers later.
Step 8
Create layers for the paper sketches you created in step2. Use URL you get it from Step4. Create layers for each of your screens as shown below. I had 2 screens, so 2 layers.
Step 9
Create transparent layers for the hotspots, place to attach event listeners. Example: ‘click/tap’ event.
Step 10
With the power of flow component we can achieve transition between screens.Fore more details refer Framer docs.
https://framer.com/docs/#flow.flowcomponent
Create flow component.
Step 11
Attach click/tap event to the hotspots created in the step9.
Step 12
Sample code demo. As a next step, test your prototype with your target audience.
Just using good Framer docs, codepen.io and Imgbb.com you can create low fedility prototypes.
References
Follow us on Twitter @Berlinlean & Anil Kumar to get more information on Lean Prototyping.
