5 ms·

Napkin - A Rapid Web Prototyping Tool

36 points by karthikksv 14y ago

PythonDeveloper 14y ago
Can't add a page 'cause the stinkin ForkMe image is covering the button when full screen.
- karthikksv 14y ago
  Sorry, this should be fixed now; let me know if you continue to experience issues.
nmcfarl 14y ago
I think this needs some more explanatory text. It's a nice quick mockup generator, it would appear, but it oddly exports not HTML, but rather a nodeJS application, which seems insanely heavyweight for a simple form builder.
- nmcfarl 14y ago
  Ok - I've found a github repo for this: https://github.com/mozilla/napkin#readme https://github.com/mozilla/napkin#readme which doesn't help much, but it does seem to have an overview document that helps somewhat: https://github.com/mozilla/napkin/blob/master/docs/overview.md https://github.com/mozilla/napkin/blob/master/docs/overview.... It looks like links and forms can be linked inside the mockup generator, and it's that linking that they are trying to preserve by exporting a node.js app. I'm not sure that I'd care enough, to lock things in in this fashion, but perhaps it's a nice tool if you are already planing an app using Node/Express
  - seanmonstar 14y ago
    I don't think it's so much to keep working on the prototype afterwards, but to be able to export it out of the tool (Napkin) and still be able to easily show someone your prototype.
ataggart 14y ago
An overlay requiring me to "Sign in" before I can even know what the hell the site is about? No thanks.
- rhizome 14y ago
  I noticed a comment in another story earlier today that it's a kind of call-to-action, which apparently is getting more popular. But then again, so is overlay pleading in general. "Shut up and give me your email address."
- karthikksv 14y ago
  As a quick overview, Napkin is a wireframing tool inspired by Balsamiq, Mockingbird, and Axure. It allows you to quickly mock up individual pages, known as screens, by means of a drag-and-drop interface. What sets it apart from the competition is its interactions. Rather than creating a prototype and telling others where a certain link leads to or that some page requires authentication, you can directly show them. The elements that you can add to a page have these interactions built in, and you can see them in action when you preview a given screen. When you're done working, you can export a whole project to a node.js express application as a baseline starting point for development. Napkin was created as a Mozilla summer intern project. You can find a presentation about it at http://ventures.karthikv.net/napkin/ http://ventures.karthikv.net/napkin/
  - deleted 14y ago
    [deleted]
  - cadr 14y ago
    I'd be interested in knowing what your bounce rates are - do you have anything in place measuring that?
- dickbasedregex 14y ago
  So many times this. You'd think the bounce rate for something like this has to be around 95%. Either way, I didn't bother and anyone who values their time wouldn't either.
- 14y ago
dapak 14y ago
Eh, sorry but I can't even read a faq to know what this is before being bombarded with a sign-in alert? Count me out.
yesimahuman 14y ago
Looks interesting, but I think it could use more explanation of how it works and what it creates. If anyone is interested in other tools, I built a Twitter Bootstrap prototyping tool called Jetstrap (http://jetstrap.com/ http://jetstrap.com/). It lets you build bootstrap pages with a lot of control.
- ollerac 14y ago
  I like this a lot. Please keep developing it.
  - yesimahuman 14y ago
    Glad to hear that! It just opened up to signups yesterday, so it's really new. If you have feedback feel free to email me (email in profile), and you can help shape it!
- aaronbrethorst 14y ago
  Please, please, please add Haml support! This is awesome!
edna_piranha 14y ago
Think of it as a prototyping app that you can create a functioning standalone app out of. With Balsamiq, you can create wireframes but they aren't responsive nor can you do any real workflow out of it. In the Napkin project, our attempt was to experiment with the idea of combining wireframes with scaffolding - then you can export the app and continue development (design/more backend work/frontend/etc) or just port it to your preferred language/framework. This was a project that came out of 3 months of development and planning and although it's still an early project, we hope it influences those interested in combining rapid prototyping worlds to contribute or build their own :)
anthemcg 14y ago
I imagine this is not meant for UI Designers. The layout creation process feels impractical and the drag and drop with the side menu to add internal elements is a bit confusing. Overall, its got some cool ideas. I like the export to Node.js feature. Anyway, it may be easier to pick one design pattern ( i.e. Drag and Drop or control by side menu)the mixture is kinda clunky. The cross-hairs on the draggable elements is also kinda confusing as that is not conventionally what it means. I recommend the closed hand icon for that ( a quick Google search of "drag cursor") will get you on your way. Overall not bad, but I can't see myself using it for prototyping.
- karthikksv 14y ago
  You make a good point about the consistency of design patterns; it can seem confusing. I'll be sure to address that. I also understand what you mean about the cross-hairs. I'll switch to cursor: move, as this seems more appropriate.
kodablah 14y ago
I like the app. I would prefer a freeform mode though where I can place my objects where I'd like instead of being forced to conform to a grid no more than three wide (and no way I can see from altering the spacing/size of the cells).
- karthikksv 14y ago
  Adding the restriction of a grid gives us a few key benefits: - Ability to export to clean code (no absolutely positioned divs) - Easy to add responsiveness - Support for mobile devices due to the last point - Prevention of infeasible designs that could stem from free-form flexibility I do, however, see your point about the lack of more grid options. That'll likely be something to iterate on.
shousper 14y ago
Doesn't seem to be working very well on my FF 14.0.1 on Mac 10.8 - works okay in latest Chrome though :)
duked 14y ago
no way I'm signing in before I know what is the site about ...
ripperdoc 14y ago
I tried using it on Windows Chrome 23, but not going well. I get into creating screens, but can't for the life of me figure out how I can start drawing those screens. I seemingly can only edit the name of the screen or delete it. Also, the page is too wide for my 1366x768. See http://imgur.com/kzIqN http://imgur.com/kzIqN
roryokane 14y ago
This tool might be good for static web pages where the copy and layout is the most important thing, and perhaps basic web apps of the kind that Rails generates with scaffolding. But it doesn’t seem suited for most web apps. The library is missing components needed to represent many things. For instance, you can’t represent images. You can’t represent most things that would be a “custom view” of data – tables, graphs, diagrams, draggable components, etc.. I tried mocking up Napkin itself in Napkin and ran into trouble. The sidebar needs components of all types (Article, Form, and Navigation), so I need to split it into multiple boxes. But I can’t arrange the app by columns, only by rows, so the main content is vertically aligned with boxes in the sidebar, though it shouldn’t be. I couldn’t represent the screen prototype view – there’s no way to draw “dotted boxes”. I also tried mocking up another note-database app, and that went better – I typed bullets at the beginning of Article paragraphs to represent my bulleted list of notes. At least the app is very polished. I enjoy the simplicity of the model – the grid-based layout and the organized types of content. The site also looks clean and pretty. Though a few interactions are weird, such as how you need to drag components from the sidebar to add them, but you can only click a “+” button to add elements listed in the sidebar. A small bug: if you have a 3-column row and put content in columns 1 and 3, then Share Screen to preview, column 3 moves to the left to take empty column 2’s place. I would prefer it to stay on the right side.
mgkimsal 14y ago
ummm... icons to do things like edit the project name, export as nodejs app and delete the project, but no icon to do anything? Oh... just click the actual project name. Highly unintuitive - add an icon. And when editing the project name, increase the contrast of the 'done' icon/button/link - dark gray on black (espeically when other action icons are white on black) is very hard to read.
mgkimsal 14y ago
give the option of exporting rails, php (zf and/or symfony), asp.net and a couple other target stacks, and I'd pay for this.
egeozcan 14y ago
I added a page and I can edit the name... Now what? http://i.imgur.com/oqcyT.png http://i.imgur.com/oqcyT.png
vdm 14y ago
At first I Just Said No to the sign in overlay. Based on the comments here, the fact that it was a Mozilla project (I trust that brand, so it might help to say 'Napkin by Mozilla (Labs)' or similar), and the fact that I actually wanted to try a real example of Persona, I logged in. The Persona experience was positive enough, but when I was bounced back to Napkin the examples under the overlay have disappeared. There is nothing to explore, just a blank interface; disappointing. This is wasting too much of people's time to qualify as an MVP and is wasting the project's opportunity to get some decent feedback from HN. How not to launch.

36 points by karthikksv 14y ago

PythonDeveloper 14y ago

Can't add a page 'cause the stinkin ForkMe image is covering the button when full screen.

karthikksv 14y ago
Sorry, this should be fixed now; let me know if you continue to experience issues.

nmcfarl 14y ago

I think this needs some more explanatory text. It's a nice quick mockup generator, it would appear, but it oddly exports not HTML, but rather a nodeJS application, which seems insanely heavyweight for a simple form builder.

nmcfarl 14y ago
Ok - I've found a github repo for this: https://github.com/mozilla/napkin#readme https://github.com/mozilla/napkin#readme which doesn't help much, but it does seem to have an overview document that helps somewhat: https://github.com/mozilla/napkin/blob/master/docs/overview.md https://github.com/mozilla/napkin/blob/master/docs/overview.... It looks like links and forms can be linked inside the mockup generator, and it's that linking that they are trying to preserve by exporting a node.js app. I'm not sure that I'd care enough, to lock things in in this fashion, but perhaps it's a nice tool if you are already planing an app using Node/Express
- seanmonstar 14y ago
  I don't think it's so much to keep working on the prototype afterwards, but to be able to export it out of the tool (Napkin) and still be able to easily show someone your prototype.

ataggart 14y ago

An overlay requiring me to "Sign in" before I can even know what the hell the site is about? No thanks.

rhizome 14y ago
I noticed a comment in another story earlier today that it's a kind of call-to-action, which apparently is getting more popular. But then again, so is overlay pleading in general. "Shut up and give me your email address."
karthikksv 14y ago
As a quick overview, Napkin is a wireframing tool inspired by Balsamiq, Mockingbird, and Axure. It allows you to quickly mock up individual pages, known as screens, by means of a drag-and-drop interface. What sets it apart from the competition is its interactions. Rather than creating a prototype and telling others where a certain link leads to or that some page requires authentication, you can directly show them. The elements that you can add to a page have these interactions built in, and you can see them in action when you preview a given screen. When you're done working, you can export a whole project to a node.js express application as a baseline starting point for development. Napkin was created as a Mozilla summer intern project. You can find a presentation about it at http://ventures.karthikv.net/napkin/ http://ventures.karthikv.net/napkin/
- deleted 14y ago
  [deleted]
- cadr 14y ago
  I'd be interested in knowing what your bounce rates are - do you have anything in place measuring that?
dickbasedregex 14y ago
So many times this. You'd think the bounce rate for something like this has to be around 95%. Either way, I didn't bother and anyone who values their time wouldn't either.
14y ago

dapak 14y ago

Eh, sorry but I can't even read a faq to know what this is before being bombarded with a sign-in alert? Count me out.

yesimahuman 14y ago

Looks interesting, but I think it could use more explanation of how it works and what it creates. If anyone is interested in other tools, I built a Twitter Bootstrap prototyping tool called Jetstrap (http://jetstrap.com/ http://jetstrap.com/). It lets you build bootstrap pages with a lot of control.

ollerac 14y ago
I like this a lot. Please keep developing it.
- yesimahuman 14y ago
  Glad to hear that! It just opened up to signups yesterday, so it's really new. If you have feedback feel free to email me (email in profile), and you can help shape it!
aaronbrethorst 14y ago
Please, please, please add Haml support! This is awesome!

edna_piranha 14y ago

Think of it as a prototyping app that you can create a functioning standalone app out of. With Balsamiq, you can create wireframes but they aren't responsive nor can you do any real workflow out of it. In the Napkin project, our attempt was to experiment with the idea of combining wireframes with scaffolding - then you can export the app and continue development (design/more backend work/frontend/etc) or just port it to your preferred language/framework. This was a project that came out of 3 months of development and planning and although it's still an early project, we hope it influences those interested in combining rapid prototyping worlds to contribute or build their own :)

anthemcg 14y ago

I imagine this is not meant for UI Designers. The layout creation process feels impractical and the drag and drop with the side menu to add internal elements is a bit confusing. Overall, its got some cool ideas. I like the export to Node.js feature. Anyway, it may be easier to pick one design pattern ( i.e. Drag and Drop or control by side menu)the mixture is kinda clunky. The cross-hairs on the draggable elements is also kinda confusing as that is not conventionally what it means. I recommend the closed hand icon for that ( a quick Google search of "drag cursor") will get you on your way. Overall not bad, but I can't see myself using it for prototyping.

karthikksv 14y ago
You make a good point about the consistency of design patterns; it can seem confusing. I'll be sure to address that. I also understand what you mean about the cross-hairs. I'll switch to cursor: move, as this seems more appropriate.

kodablah 14y ago

I like the app. I would prefer a freeform mode though where I can place my objects where I'd like instead of being forced to conform to a grid no more than three wide (and no way I can see from altering the spacing/size of the cells).

karthikksv 14y ago
Adding the restriction of a grid gives us a few key benefits: - Ability to export to clean code (no absolutely positioned divs) - Easy to add responsiveness - Support for mobile devices due to the last point - Prevention of infeasible designs that could stem from free-form flexibility I do, however, see your point about the lack of more grid options. That'll likely be something to iterate on.

shousper 14y ago

Doesn't seem to be working very well on my FF 14.0.1 on Mac 10.8 - works okay in latest Chrome though :)

duked 14y ago

no way I'm signing in before I know what is the site about ...

ripperdoc 14y ago

I tried using it on Windows Chrome 23, but not going well. I get into creating screens, but can't for the life of me figure out how I can start drawing those screens. I seemingly can only edit the name of the screen or delete it. Also, the page is too wide for my 1366x768. See http://imgur.com/kzIqN http://imgur.com/kzIqN

roryokane 14y ago

This tool might be good for static web pages where the copy and layout is the most important thing, and perhaps basic web apps of the kind that Rails generates with scaffolding. But it doesn’t seem suited for most web apps. The library is missing components needed to represent many things. For instance, you can’t represent images. You can’t represent most things that would be a “custom view” of data – tables, graphs, diagrams, draggable components, etc.. I tried mocking up Napkin itself in Napkin and ran into trouble. The sidebar needs components of all types (Article, Form, and Navigation), so I need to split it into multiple boxes. But I can’t arrange the app by columns, only by rows, so the main content is vertically aligned with boxes in the sidebar, though it shouldn’t be. I couldn’t represent the screen prototype view – there’s no way to draw “dotted boxes”. I also tried mocking up another note-database app, and that went better – I typed bullets at the beginning of Article paragraphs to represent my bulleted list of notes. At least the app is very polished. I enjoy the simplicity of the model – the grid-based layout and the organized types of content. The site also looks clean and pretty. Though a few interactions are weird, such as how you need to drag components from the sidebar to add them, but you can only click a “+” button to add elements listed in the sidebar. A small bug: if you have a 3-column row and put content in columns 1 and 3, then Share Screen to preview, column 3 moves to the left to take empty column 2’s place. I would prefer it to stay on the right side.

mgkimsal 14y ago

ummm... icons to do things like edit the project name, export as nodejs app and delete the project, but no icon to do anything? Oh... just click the actual project name. Highly unintuitive - add an icon. And when editing the project name, increase the contrast of the 'done' icon/button/link - dark gray on black (espeically when other action icons are white on black) is very hard to read.

mgkimsal 14y ago

give the option of exporting rails, php (zf and/or symfony), asp.net and a couple other target stacks, and I'd pay for this.

egeozcan 14y ago

I added a page and I can edit the name... Now what? http://i.imgur.com/oqcyT.png http://i.imgur.com/oqcyT.png

vdm 14y ago

At first I Just Said No to the sign in overlay. Based on the comments here, the fact that it was a Mozilla project (I trust that brand, so it might help to say 'Napkin by Mozilla (Labs)' or similar), and the fact that I actually wanted to try a real example of Persona, I logged in. The Persona experience was positive enough, but when I was bounced back to Napkin the examples under the overlay have disappeared. There is nothing to explore, just a blank interface; disappointing. This is wasting too much of people's time to qualify as an MVP and is wasting the project's opportunity to get some decent feedback from HN. How not to launch.