Minimal wireframing tool - for free | Hacker News Reader

Minimal wireframing tool - for free

wireframe.cc

374 pointsusaphp56 comments

This is really cool! One suggestion: visual editors are probably the only place where I don't mind my backspace button being binded to the delete action. I tried deleting something with backspace and ended up back here without warning, and my (useless) work was lost. I can imagine this causing a lot of frustration in a real work setting.

This is why I unmapped Backspace -> Back in Firefox. It's just a source of heartache.

Typical example is trying to backspace in a textarea -- whoops -- textarea didn't have focus. Your progress was probably lost because most textareas these days are actually some textarea-looking Javascript magic.

fn-delete on the mac (ie delete - not backspace) deleted the elements for me. Would be good to stop backspace too - that's definitely not something you want going wrong while you're working.

Actually apps like this are the one time I'm somewhat okay with the browser stopping me from navigating back at all (hopefully while displaying a dialog telling me work will be lost if I back out and giving me a confirm option), though ideally it would just save everything always like Google Docs does so then it just doesn't matter as much.

I had precisely the same experience.

Very cool idea to let the user mark an area before selecting widget, rather than the reverse, which is more or less the standard way. It works well.

I would suggest that you save state in local-storage and/or hook into the onunload event, to prevent people from accidentally abandoning a sketch.

Very nice but I'd love to see the ability to snap stencils to a grid as I had trouble lining them up.

I'm going to second snapping, even if it's just snapping to other elements on the page.

Seems as though this is already a feature. When I created a headline and moved it close to a body of text, a guideline appeared and I was able to snap to it.

very nice UI, I really like the idea of marking an area and than choose what type it is. seems to be great for a tablet UI as well. For an opensource off-line tool may I suggest pencil project. I'm currently using it for my work.

How do I export the jpeg/png? If I can't share my wireframe, what good is my work really. I guess I can capture the screen..

You can also just save and then send the link.

Very very well done.

I wonder if there's anything comparable open source version? I'd like to hack on it a bit.

another comment mentioned pencil project [http://pencil.evolus.vn/], which looks interesting.

I might be alone here, but I've found that it's much easier to put together a high-fidelity PSD that details every intricacy of a site or app before writing a line of code. So, I end up spending more time designing the app/site than actually coding (which I think is the way it should be). Nevertheless, this project is really cool; been playing around with it for half an hour already.

Woah, I love how simple the editor is. I'm not sure how quickly it'd replace something like a notebook for in-depth prototyping, but it's definitely a nice tool for basic layouts.

I see you can save to the website, but is there a way you can output it as an image or something and download it?

Command-Shift-4 in the meantime.

i can see how this would be useful for requirement gathering or informal high level design, but if I cannot export it to a format which i can version control and/or access programatically it remains a toy.

now if i could have an open source version of it....

You may find Edit Room (my product) more useful then.

It's a visual web design application that lets you design all the way from rough wireframes to detailed, precise designs. Full export of semantic HTML, clean, usable CSS. Much more...

http://www.edit-room.com

I just took a very quick at the demo's, that is really slick. I'm loving the pallettes and the UI in general.

Couple of minor things: the font that you use ('Sorts Mill Goudy') really isn't that clear or crisp, simply falling back to the default browser font looks much better. Secondly, I'm not a big fan of your menu - it's very sparse and blends away too easily (the one in the top right) and IMO 'features' link should be more prominent and at the top of the page.

Cool, thanks for the good points. It's a good idea to emphasize the menu slightly more perhaps.

Nice work. I have an unfinished project that is similar to this. It's neat that you have made it so the shape is chosen after drawing. Consider either not changing the cursor to a pointer, or remove the space between the buttons.

I'm glad it doesn't have those silly wavy I-can't-draw-for-shit lines. Also the interaction is very intuitive, and it's great that you can dive right in. Great tool overall. I'll be bookmarking it.

Brilliant, really really like it!

Would be good if you could "lock" the screen size as it's annoying when you try and start/resize boxes to full width as your cursor changes to an arrow to resize the screen..

Great interface, so simple.. With all honestly, I think it's by far my favorite UX interface to create wireframes. It's intuitive and gets the shit done very fast. Congrats!

Really amazing tool. For someone who very occasionally does some small wireframe designs which do not need a full blown wireframe software, this website would be an instant help. Thanks!

Trying to figure out how to edit text that you placed. Any pointers?

Double-click it, then select "Edit Text" (second from left).

THis is really nice! Not sure if this is intended, but the annotations show underneath the other elements, I expected the annotation dotted background to appear above everything else

"Wireframing" isn't a good term. From the headline, I thought this had to do with 3D modeling (3D is the context where you usually hear the word "wireframe" used)

"Wireframing" is an incredibly common term in the web development community for drawing out rough layout plans. I think given the target audience, it's perfectly appropriate.

(Though admittedly, I too thought the same thing for a moment when I first saw this post)

Really really nice. I don't do a lot of wireframing so I'm not sure what it's missing that's essential but it's definitely the easiest tool I've used. Well done!

+1 I clicked on two things and was instantly convinced to bookmark - didn't even have to read anything to get started, just dragged my mouse around a bit

Tried to add a box within a box and I can only move the box when my mouse is inside the bounds of the rectangle. I wish I could add boxes within boxes.

I was able to by drawing the box outside its container and dragging it in. A bit of a pain, but it worked.

You have to "lock" one box first.

Looks good, works well.

Would love to see some kind of "snap to grid" type feature for easy alignment. Bonus points if the grid dimensions are user definable :)

I would also like this, and maybe the ability to choose 960 and/or Blueprint overlays to help align the elements.

I think that's may be going too far into implementation for a wireframe? All I'd want is to be able to request 16/12/9/x columns, with some kind of overlay or BG to make it very apparent there's a grid in operation. Vertical rhythm would be cool as well.

An excellent example of an MVP the way it should be - minimal, yes, but definitely useful and providing great value. Bookmarked. Thanks!

I have an odd infatuation with favicons. I must say your's is the coolest I've ever seen. Awesome attention to detail.

This is definitely minimal and yet useful. I started looking for a toolbar, but there is no need for a toolbar. Slick!

I can't open the website right now. I wonder if it's getting too much traffic and isn't optimized for it yet?

It is working for me just fine.

Awesome, I've been looking for something like this for so long. Thanks to whoever made this.

I hunger for a version of this that can use sketching mechanics on a tablet.

I love that the widget options are based on the shape of the area I dragged.

Very cool idea!

cool demo. however a new reminder of how broken the web is becoming. wireframe.cc doesn't work in IE. what technology is being used that won't work in IE?

Holy global namespace pollution, Batman!

I do like the app, though.

Very nice! I like the demo - How did you make it?

That´s neat. but why wireframing when you also could make it real by using http://salon.io/

Bookmarked. Great example of MVP.

Excellent

Love it.

pretty awesome. great ui.

pretty cool.

Reply on news.ycombinator.com