7 ms·

Minimal wireframing tool - for free

374 points by usaphp 14y ago

thepumpkin1979 14y ago
This is definitely minimal and yet useful. I started looking for a toolbar, but there is no need for a toolbar. Slick!
joewee 14y ago
pretty cool.
Shank 14y ago
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?
- cwilson 14y ago
  Command-Shift-4 in the meantime.
duopixel 14y ago
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.
- aidos 14y ago
  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.
- vbl 14y ago
  I had precisely the same experience.
- danneu 14y ago
  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.
- georgemcbay 14y ago
  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.
joshontheweb 14y ago
pretty awesome. great ui.
mattquiros 14y ago
I can't open the website right now. I wonder if it's getting too much traffic and isn't optimized for it yet?
- usaphp 14y ago
  It is working for me just fine.
flexie 14y ago
Very nice! I like the demo - How did you make it?
sprobertson 14y ago
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.
aidos 14y ago
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!
- jmadsen 14y ago
  +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
rustc 14y ago
Very very well done. I wonder if there's anything comparable open source version? I'd like to hack on it a bit.
- zem 14y ago
  another comment mentioned pencil project [http://pencil.evolus.vn/ http://pencil.evolus.vn/], which looks interesting.
epaga 14y ago
An excellent example of an MVP the way it should be - minimal, yes, but definitely useful and providing great value. Bookmarked. Thanks!
stefanve 14y ago
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.
aviswanathan 14y ago
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.
olsn 14y ago
Love it.
JEVLON 14y ago
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.
saym 14y ago
I have an odd infatuation with favicons. I must say your's is the coolest I've ever seen. Awesome attention to detail.
joe_hoyle 14y ago
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
vojant 14y ago
Bookmarked. Great example of MVP.
sergiotapia 14y ago
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.
- JasonFruit 14y ago
  I was able to by drawing the box outside its container and dragging it in. A bit of a pain, but it worked.
- tpsc 14y ago
  You have to "lock" one box first.
dan1234 14y ago
Very nice but I'd love to see the ability to snap stencils to a grid as I had trouble lining them up.
- __sb__ 14y ago
  I'm going to second snapping, even if it's just snapping to other elements on the page.
  - gk1 14y ago
    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.
joaomoreno 14y ago
Excellent
thomseddon 14y ago
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..
troels 14y ago
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.
OrdojanAndrius 14y ago
Awesome, I've been looking for something like this for so long. Thanks to whoever made this.
alagappanr 14y ago
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!
WickyNilliams 14y ago
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 :)
- code_chimp 14y ago
  I would also like this, and maybe the ability to choose 960 and/or Blueprint overlays to help align the elements.
  - WickyNilliams 14y ago
    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.
d0m 14y ago
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!
faramarz 14y ago
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..
- mistercow 14y ago
  You can also just save and then send the link.
laurentoget 14y ago
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....
- splatcollision 14y ago
  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 http://www.edit-room.com
  - kamjam 14y ago
    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.
    - splatcollision 14y ago
      Cool, thanks for the good points. It's a good idea to emphasize the menu slightly more perhaps.
lrock 14y ago
That´s neat. but why wireframing when you also could make it real by using http://salon.io/ http://salon.io/
kevincennis 14y ago
Holy global namespace pollution, Batman! I do like the app, though.
romeonova 14y ago
Trying to figure out how to edit text that you placed. Any pointers?
- gk1 14y ago
  Double-click it, then select "Edit Text" (second from left).
rco8786 14y ago
I love that the widget options are based on the shape of the area I dragged. Very cool idea!
vbl 14y ago
I hunger for a version of this that can use sketching mechanics on a tablet.
benlower 14y ago
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?
csense 14y ago
"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)
- vedtopkar 14y ago
  "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)

374 points by usaphp 14y ago

thepumpkin1979 14y ago

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

joewee 14y ago

pretty cool.

Shank 14y ago

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?

cwilson 14y ago
Command-Shift-4 in the meantime.

duopixel 14y ago

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.

aidos 14y ago
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.
vbl 14y ago
I had precisely the same experience.
danneu 14y ago
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.
georgemcbay 14y ago
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.

joshontheweb 14y ago

pretty awesome. great ui.

mattquiros 14y ago

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

usaphp 14y ago
It is working for me just fine.

flexie 14y ago

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

sprobertson 14y ago

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.

aidos 14y ago

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!

jmadsen 14y ago
+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

rustc 14y ago

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

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

epaga 14y ago

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

stefanve 14y ago

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.

aviswanathan 14y ago

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.

olsn 14y ago

Love it.

JEVLON 14y ago

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.

saym 14y ago

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

joe_hoyle 14y ago

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

vojant 14y ago

Bookmarked. Great example of MVP.

sergiotapia 14y ago

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.

JasonFruit 14y ago
I was able to by drawing the box outside its container and dragging it in. A bit of a pain, but it worked.
tpsc 14y ago
You have to "lock" one box first.

dan1234 14y ago

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

__sb__ 14y ago
I'm going to second snapping, even if it's just snapping to other elements on the page.
- gk1 14y ago
  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.

joaomoreno 14y ago

Excellent

thomseddon 14y ago

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

troels 14y ago

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.

OrdojanAndrius 14y ago

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

alagappanr 14y ago

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!

WickyNilliams 14y ago

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

code_chimp 14y ago
I would also like this, and maybe the ability to choose 960 and/or Blueprint overlays to help align the elements.
- WickyNilliams 14y ago
  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.

d0m 14y ago

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!

faramarz 14y ago

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

mistercow 14y ago
You can also just save and then send the link.

laurentoget 14y ago

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

splatcollision 14y ago
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 http://www.edit-room.com
- kamjam 14y ago
  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.
  - splatcollision 14y ago
    Cool, thanks for the good points. It's a good idea to emphasize the menu slightly more perhaps.

lrock 14y ago

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

kevincennis 14y ago

Holy global namespace pollution, Batman! I do like the app, though.

romeonova 14y ago

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

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

rco8786 14y ago

I love that the widget options are based on the shape of the area I dragged. Very cool idea!

vbl 14y ago

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

benlower 14y ago

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?

csense 14y ago

"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)

vedtopkar 14y ago
"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)