5 ms·

A wireframe kit for Google Drawings and 4 reasons it beats Omnigraffle and Visio

118 points by mortenjust 16y ago

noibl 16y ago
I used to use Etherpad and Dabbleboard for rough collaborative specs and mocks because they're realtime. Now Google Docs will do nicely.
sssparkkk 16y ago
Nice. Just the other day I was contemplating the use of a specialized webapp that allows me to easily create mockups of new user-interface designs. However, Google Drawings now seems extensive enough to be able to fulfill most of my needs with regard to UI prototyping. I believe I read about Balsamiq on HN a while ago; it must be tough for a small company to operate in an area that intersects with areas google might be(come) active in.
- wizard_2 16y ago
  I think Balsamiq saw this coming, in the past two months or so they've been publicly progressing with their development. Templates with inheritance, online saving, and components (so you can say design the footer and headers for several pages and have them be the same element reused.) are all on their way. My point is, even if you're now competing with a team from Google, you're not over and out yet.
- dhimes 16y ago
  * it must be tough for a small company to operate in an area that intersects with areas google might be(come) active in* That's getting to be more and more of us.
hammerdr 16y ago
I use Mockingbird for wireframing. http://gomockingbird.com http://gomockingbird.com It doesn't allow collaboration but it is entirely focused on wire framing (unlike GDrawings, OmniGraffle and Visio). It provides a great experience. For everything else, I use OmniGraffle.
- saikat 16y ago
  And we should be getting collaboration soon - I'm going to start working on it tomorrow.
- brown9-2 16y ago
  mockingbird is great, I love the "look" of it's graphics
harisenbon 16y ago
I've been looking for something like this. Lately it seems that we're doing more and more wireframing at my work, and having to pull out illustrator, and then deal with large files and passing them all around into SVN and whatnot has gotten to be a huge pain. I'm going to check this out. I'm also curious how their flowchart handing is. I've still never found a decent flowcharting program made for coders. It was getting to the point where I was actually considering making one to fill my need...
- sarabob 16y ago
  I'm finding omnigraffle's dot import and auto-layout useful for flowcharting. I write dot layouts by hand then pretty them up in omnigraffle.
- glymor 16y ago
  You could use latex; either directly or using dot2tex. http://www.texample.net/tikz/examples/simple-flow-chart/ http://www.texample.net/tikz/examples/simple-flow-chart/
hailpixel 16y ago
OmniGraffle has been circling the drain in my work-flow for a while now; pen and paper easily beating it out most of the time. Wire-framing should be fast, quick, and recyclable. I've been impressed with Google drawings: it's not bloated (unlike onmingraffle) and it's visually clean (unlike balsamiq).
alextgordon 16y ago
I use paper and pencil for my mockups. They've got the unique property of not making you think about details, but allowing you to put them in at any level. You don't need any skill either. It works even if your drawings consist of lopsided rectangles.
- nailer 16y ago
  > They've got the unique property of not making you think about details Paper and pen is good too, but it makes me think about details like: * Whether a line is straight * Whether my writing is legible * Whether my writing fits in the container etc. I don't have to think about these when using a drawing app. Also I can send my render to an XML slicing service. On the other hand, connections are much easier to draw on paper.
deleted 16y ago
[deleted]
jsankey 16y ago
I see five reasons, and they are all advantages of being cloud-based, rather than a desktop application. There isn't much about drawing itself.
- steadicat 16y ago
  And there are plenty of disadvantages related to the drawing. Most annoyingly, the fact that you can't alt+drag or alt+nudge (arrow keys) to duplicate an object. For me that's the single biggest time-saver when doing wireframes and mockups. Otherwise you spend a lot of time repositioning and realigning pasted objects. Most desktop apps get it right. I've yet to find a web-based app that does.
nadan 16y ago
Um....can anyone tell me how to use these? Do I have to slice them up?
- va_coder 16y ago
  Just copy them using File -> Copy
ramanujan 16y ago
Omnigraffle is a lot better than this for really making pretty diagrams, because it's connection aware and can do graph layout. Also, if you learn the Keyboard Shortcuts you can be really fast. It's one of the few applications I use as much as emacs, and it's worth learning. People in this thread have been saying pen and paper, but it's (obviously) a pain to scan a bunch of pen/paper sheets for search later or remote collaboration. FWIW, a new solution I've been using with some success just over the past few days is Penultimate, a really simple/nice IPad notebook app -- as distinct from a sketching app. http://ipad.maccreate.com/2010/04/16/penultimate-ipad-app/ http://ipad.maccreate.com/2010/04/16/penultimate-ipad-app/ Use that with a $15 Pogo Sketch (you can get it in the Apple Store) and a $11 pair of fingerless cloth gloves from Hot Topic (http://www.hottopic.com/hottopic/Accessories/GlovesArmwarmers/Gun-Fingerless-Gloves-135608.jsp http://www.hottopic.com/hottopic/Accessories/GlovesArmwarmer...) The gloves are really handy as they turn off palm detection, so you can rest your hand on the Ipad surface while you use the stylus, just like a normal sheet of paper.
- tvon 16y ago
  I'm far too entertained by the fingerless gloves. Clever setup, though.
mijoro 16y ago
The only "advantages" here have nothing to do with wireframing, they're just the advantages of any hosted service. When it comes down to it, Omnigraffle is better than Drawings for doing wireframes, because that's what it's meant to do. On the other hand, how about http://www.gomockingbird.com http://www.gomockingbird.com?
oomkiller 16y ago
Google Drawings have a long way to go. First, they need to add the ability to "connect" lines. This is a very basic ability and I was astonished when I discovered it was missing. Then they need to add some REAL way to make stencils and reuse them. Stencil gallery anyone?

118 points by mortenjust 16y ago

noibl 16y ago

I used to use Etherpad and Dabbleboard for rough collaborative specs and mocks because they're realtime. Now Google Docs will do nicely.

sssparkkk 16y ago

Nice. Just the other day I was contemplating the use of a specialized webapp that allows me to easily create mockups of new user-interface designs. However, Google Drawings now seems extensive enough to be able to fulfill most of my needs with regard to UI prototyping. I believe I read about Balsamiq on HN a while ago; it must be tough for a small company to operate in an area that intersects with areas google might be(come) active in.

wizard_2 16y ago
I think Balsamiq saw this coming, in the past two months or so they've been publicly progressing with their development. Templates with inheritance, online saving, and components (so you can say design the footer and headers for several pages and have them be the same element reused.) are all on their way. My point is, even if you're now competing with a team from Google, you're not over and out yet.
dhimes 16y ago
* it must be tough for a small company to operate in an area that intersects with areas google might be(come) active in* That's getting to be more and more of us.

hammerdr 16y ago

I use Mockingbird for wireframing. http://gomockingbird.com http://gomockingbird.com It doesn't allow collaboration but it is entirely focused on wire framing (unlike GDrawings, OmniGraffle and Visio). It provides a great experience. For everything else, I use OmniGraffle.

saikat 16y ago
And we should be getting collaboration soon - I'm going to start working on it tomorrow.
brown9-2 16y ago
mockingbird is great, I love the "look" of it's graphics

harisenbon 16y ago

I've been looking for something like this. Lately it seems that we're doing more and more wireframing at my work, and having to pull out illustrator, and then deal with large files and passing them all around into SVN and whatnot has gotten to be a huge pain. I'm going to check this out. I'm also curious how their flowchart handing is. I've still never found a decent flowcharting program made for coders. It was getting to the point where I was actually considering making one to fill my need...

sarabob 16y ago
I'm finding omnigraffle's dot import and auto-layout useful for flowcharting. I write dot layouts by hand then pretty them up in omnigraffle.
glymor 16y ago
You could use latex; either directly or using dot2tex. http://www.texample.net/tikz/examples/simple-flow-chart/ http://www.texample.net/tikz/examples/simple-flow-chart/

hailpixel 16y ago

OmniGraffle has been circling the drain in my work-flow for a while now; pen and paper easily beating it out most of the time. Wire-framing should be fast, quick, and recyclable. I've been impressed with Google drawings: it's not bloated (unlike onmingraffle) and it's visually clean (unlike balsamiq).

alextgordon 16y ago

I use paper and pencil for my mockups. They've got the unique property of not making you think about details, but allowing you to put them in at any level. You don't need any skill either. It works even if your drawings consist of lopsided rectangles.

nailer 16y ago
> They've got the unique property of not making you think about details Paper and pen is good too, but it makes me think about details like: * Whether a line is straight * Whether my writing is legible * Whether my writing fits in the container etc. I don't have to think about these when using a drawing app. Also I can send my render to an XML slicing service. On the other hand, connections are much easier to draw on paper.

deleted 16y ago

[deleted]

jsankey 16y ago

I see five reasons, and they are all advantages of being cloud-based, rather than a desktop application. There isn't much about drawing itself.

steadicat 16y ago
And there are plenty of disadvantages related to the drawing. Most annoyingly, the fact that you can't alt+drag or alt+nudge (arrow keys) to duplicate an object. For me that's the single biggest time-saver when doing wireframes and mockups. Otherwise you spend a lot of time repositioning and realigning pasted objects. Most desktop apps get it right. I've yet to find a web-based app that does.

nadan 16y ago

Um....can anyone tell me how to use these? Do I have to slice them up?

va_coder 16y ago
Just copy them using File -> Copy

ramanujan 16y ago

Omnigraffle is a lot better than this for really making pretty diagrams, because it's connection aware and can do graph layout. Also, if you learn the Keyboard Shortcuts you can be really fast. It's one of the few applications I use as much as emacs, and it's worth learning. People in this thread have been saying pen and paper, but it's (obviously) a pain to scan a bunch of pen/paper sheets for search later or remote collaboration. FWIW, a new solution I've been using with some success just over the past few days is Penultimate, a really simple/nice IPad notebook app -- as distinct from a sketching app. http://ipad.maccreate.com/2010/04/16/penultimate-ipad-app/ http://ipad.maccreate.com/2010/04/16/penultimate-ipad-app/ Use that with a $15 Pogo Sketch (you can get it in the Apple Store) and a $11 pair of fingerless cloth gloves from Hot Topic (http://www.hottopic.com/hottopic/Accessories/GlovesArmwarmers/Gun-Fingerless-Gloves-135608.jsp http://www.hottopic.com/hottopic/Accessories/GlovesArmwarmer...) The gloves are really handy as they turn off palm detection, so you can rest your hand on the Ipad surface while you use the stylus, just like a normal sheet of paper.

tvon 16y ago
I'm far too entertained by the fingerless gloves. Clever setup, though.

mijoro 16y ago

The only "advantages" here have nothing to do with wireframing, they're just the advantages of any hosted service. When it comes down to it, Omnigraffle is better than Drawings for doing wireframes, because that's what it's meant to do. On the other hand, how about http://www.gomockingbird.com http://www.gomockingbird.com?

oomkiller 16y ago

Google Drawings have a long way to go. First, they need to add the ability to "connect" lines. This is a very basic ability and I was astonished when I discovered it was missing. Then they need to add some REAL way to make stencils and reuse them. Stencil gallery anyone?