
Napkin - A Rapid Web Prototyping Tool - karthikksv
http://napkin.noodletalk.org/
======
ataggart
An overlay requiring me to "Sign in" before I can even know what the hell the
site is about? No thanks.

~~~
karthikksv
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/>

~~~
cadr
I'd be interested in knowing what your bounce rates are - do you have anything
in place measuring that?

------
yesimahuman
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.

~~~
ollerac
I like this a lot. Please keep developing it.

~~~
yesimahuman
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!

------
anthemcg
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
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.

------
dapak
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.

------
edna_piranha
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 :)

------
nmcfarl
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
Ok - I've found a github repo for this:
<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....](https://github.com/mozilla/napkin/blob/master/docs/overview.md)

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
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.

------
roryokane
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.

------
kodablah
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
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.

------
vdm
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.

------
ripperdoc
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>

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

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

------
mgkimsal
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.

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

------
mgkimsal
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.

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

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

