To create a static image prototype the following should be created.


  • Screenshots, recommended .png format
  • data file (yaml), creates the screens and region co-ordinates array;
  • Small JavaScript file to handle the clicks.

Utilising JCrop to creates the region boxes, the co-ordinates can then be displayed in the co-ordinates box. Simply override the show variable in the JavaScript to target an individual screen.


  • Config.rb set mobile variable to true - this ignores folders from deployment
  • Make sure in mobile.js view that show is set to false
  • Build - thor project:buildCordova
  • double click platforms/ios/*.xcodeproj file

iPhone5 - 320x568


Learn More

Learn more is where the user is introduced to the application, a carousel gives the user the opportunity to swipe between many screens that provides information on what the app is about, how to use it and benefits.

  • Carousel
  • Hero Image
  • Buttons

Screen Selection




Task Date
Swipe needs to happen on certain regions only, and should work back and forward - use history push
Steps should be: Create Project, Upload Screens, Create Regions
Project creation Form - Project Name - Type (Web or Mobile) perhaps
Make sure screen names conform to a standard when uploaded - no spaces, strange chars etc or rename them
Details saved to local storage
Allow for the boundaries to be chained to produce the full flow for the project
Add an input to declare the parent CSS
Add an input on boundary select end to name the region
Once all has been created then download assets including HTML, JS and CSS
Select a phone when creating the project - use phone as the background for the project
Link together the names of the regions with arrows in a formatted way - show screens later - export to PDF Find out recursively what is connected to each other