Pretotype Template for Evolus Pencil

What is this?

This is an html export template for the Evolus Pencil http://pencil.evolus.vn/ prototyping tool. It is an adaptation of the Default HTML Template that ships with Pencil. The aim of this template is to output your pencil project as a "usable" pretotype.

Why you should care?

If you are a web/app developer looking to validate your idea before pouring countless hours into building the "next big thing", you should consider creating a simple low/hi-fi interactive mockup.

Coupling the power and versatility of Pencil with the simplicity of this Html Pretotype template:

• You can mockup and produce simulations of your website/app in quick iterations.
• Your testers/validators can "use" the non-functional app with minimal distractions.
• You can gather useful feedback quickly to help you decide the next steps to take with your idea.

In short, this template enables you to present your mockup as a clean interactive story with no unnecessary chrome and unobtrusive notes that are available on demand. All for the low price of FREE.

Features

• Convincing simulation of an actual app with the appropriate flow of pages
• Streamlined export of your page mockups are center stage
• Unobtrusive Page Notes available through nifty button
• Light - does not depend on any heavy JavaScript libraries
• FREE! MIT License

Usage

If you are already using Pencil, I assume you know how to install and use export templates. If you have no idea what Pencil is, please take a moment to check out this useful tool from the folks at Evolus.

Using the Pretotype template follows the same workflow as any other HTML Export template in the Evolus ecosystem:

1. Download (see the Releases section above) or simply grab the latest version
2. Install the template through the Tools > Manage Export Template menu
3. Export your mockup with the template by using the Document > Export Document... wizard.
   • Choose to export a Single web page for the Output format
   • Select All pages in the document for pages to export
   • Select the Pretotype Template as your export template, provide a destination and click Done

NOTE! The above steps are pretty typical in any conventional Pencil worflow. However there is one thing you must note:

Your mockup must have one page called "Start"! If you do not do this, the template will not know which of your pages to show first.

How it works

This template provides a simple Html5 index.html file with the supporting JavaScript and Stylesheets. The JavaScript and CSS work together to hide all but the active page from view.

The screen you see when you launch your pretotype, will have scrolling disabled. You will only be able to jump between pages by clicking/tapping on navigation you created by linking UI elements to pages.

Any notes that you created for a page, would be hidden. However, when viewing the page, you will be able to bring up the notes by clicking/tapping the (?) icon to the top right of the screen.

Releases

Latest: v0.4.7-b, June 11 2013

Download v0.4.7-b

• Made it possible to "pin" the notes on screen
• Provided custom favicon and iOS homescreen icon to exported pretotype
• Fix bug where exported pretotypes were not working in FireFox
• Prettyfied the onscreen icons

Latest: v0.4.6-b, May 27 2013

Download v0.4.6-b

• First public beta release
• Added support to show in full screen when pinned to home screen in iOS
• Present notes to right side of screen
• Scale to viewport when launched to support viewing on mobile devices

Supported browsers and known limitations

Desktop

Google Chrome 27+ (Mac, Win), FireFox 16+

Mobile

Safari (iOS) 5+, Google Chrome (Android), FireFox (Android)

FAQs

1. Why is this called a "pretotype" template? You've not heard about "Pretotyping"? Learn about it here http://www.pretotyping.org/