This page contains all of the important details for the Web Prototyping Tool project (codenamed napkin).

Elevator Pitch

napkin is a rapid web prototyping tool intended to bridge the gap between product/UI/UX and development processes when building applications and sites.

napkin is not a tool where you can edit HTML/CSS/JS directly.

The project is broken into phases and there is a documentation process required at each stage.

The first stage involves researching, prototyping the prototype. Second stage requires a high-level design plan of how the code will be generated through user interactions. Third stage is building the application. Fourth is testing by users and getting feedback to iterate as required.

Overview

• Code name: napkin
• Prod URL: TBD
• Dev URL: TBD
• Stage URL: TBD
• Code Repo: https://github.com/mozilla/napkin
• L10N Repo: n/a
• Code: Node / Express
• Product Owner: Jennifer Fong
• Dev Team:
  • Jennifer Fong
  • Karthik Viswanathan
• IRC Channel: #napkin on irc.mozilla.org

Project Status

• Stage 3: Research and Prototype development.

Development Phases

• Stage 1: Researching users and prototype concept development

• Stage 2: High-level architecture of code generation from user interactions

• Stage 3: Development of initial concept

• Stage 4: Testing, feedback and iteration

Target time line: Q3/2012

Meetings

• TBD

Specs / Useful links

• Brainstorming (brainstorm session)

• Overview (implementation)

A couple of links from Hacker News:

• Easel
• Edit Room – uglier than Easel, but some nice aspects to how it works
• Easel Discussion

Phase 1 Wireframes

Phase 1 Development

1. CRUD sitemap/project
2. CRUD basic screen
3. Screen default layouts (CSS) and JSON generation
4. Web component building (integrated into screen)
5. HTML element component building (integrated into screen)
6. Sitemap screen association
7. Site sharing/testing on central application
8. Site exporting as a standalone
9. QA

Bugs

• TBD