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