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.
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 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.
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."
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.
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.
Yes, it would be better to let you use the site as a guest, and then require signing in only to save your work.
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.
This strategy of collecting email addresses without delivering anything first never seems to die down.
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:
I am 100% in agreement. I would never make users jump through hoops like that. Or assume that Redis would be their choice of database. That's a choice for the user.
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.
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/). It lets you build bootstrap pages with a lot of control.
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!
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 :)
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.
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).
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.
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.
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.
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.
38 comments
[ 2.0 ms ] story [ 97.0 ms ] threadwhich 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
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.
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 :)
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.
- 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.
Also, the page is too wide for my 1366x768. See http://imgur.com/kzIqN
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.
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.
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.