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

A wireframe kit for Google Drawings and 4 reasons it beats Omnigraffle and Visio(mortenjust.com)

118 points by mortenjust 16 years ago | 21 comments

hammerdr 16 years ago |

I use Mockingbird for wireframing. 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 16 years ago | |

And we should be getting collaboration soon - I'm going to start working on it tomorrow.

brown9-2 16 years ago | |

mockingbird is great, I love the "look" of it's graphics

alextgordon 16 years 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 16 years 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.

ramanujan 16 years 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/

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/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 16 years ago | |

I'm far too entertained by the fingerless gloves. Clever setup, though.

hailpixel 16 years 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).

jsankey 16 years 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 16 years 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.

harisenbon 16 years 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...

glymor 16 years ago | |

You could use latex; either directly or using dot2tex.

http://www.texample.net/tikz/examples/simple-flow-chart/

sarabob 16 years 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.

mijoro 16 years 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?

oomkiller 16 years 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?

sssparkkk 16 years 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 16 years 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 16 years 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.

noibl 16 years ago |

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

nadan 16 years ago |

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

va_coder 16 years ago | |

Just copy them using File -> Copy