Napkin - A Rapid Web Prototyping Tool
napkin.noodletalk.org
napkin.noodletalk.org
Napkin was created as a Mozilla summer intern project. You can find a presentation about it at http://ventures.karthikv.net/napkin/
But I’m glad they use BrowserID for sign-in, at least. Since I was already signed in to BrowserID, the actual sign-in was super easy – a pop-up window opened, I clicked one button, and I was in.
The reason is simple: it works. Many people will hand over their email address with no guarantee of anything in return. A shockingly large number of people will do that. And then the opt-in spam begins. It's a never ending email campaign for who knows what. Does the spam work? Surprisingly, yes. Enough to be worth paying to keep sending it out. Legalised spam.
Is an email address worth something? Gather enough of them and yes, absolutely it is.
This is all pure speculation. Or is it?
If I had a dime for every site that collects email addresses without delivering anything first...
As if Mozilla didn't have enough data about users already.
Anyway, if you wanna see what this thing is here you go:
http://github.com/mozilla/napkin/zipball/master
Unzip the file and start reading.
Well, it may be the bees knees, but I'm not doing all that to get a look at it.
But Lord knows I spend an inordinate amount of time jumping through hoops like these just to try evaluate software. It's just unavoidable.
A small, simple program with no dependencies or assumptions about your software preferences is like a breath of fresh air.
I wonder if there's an easy way to filter all of Github for these types of programs. Say, C programs with less than N LOC, and having no external dependencies.
Gets you a peek and provides them with useless data. I think it's a fair trade.
If anyone is interested in other tools, I built a Twitter Bootstrap prototyping tool called Jetstrap (http://jetstrap.com/). It lets you build bootstrap pages with a lot of control.
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.
I also understand what you mean about the cross-hairs. I'll switch to cursor: move, as this seems more appropriate.
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 :)
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....
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
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.
- 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.
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.
Also, the page is too wide for my 1366x768. See http://imgur.com/kzIqN
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.