A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio
I’ve been playing around with the newest addition to Google Docs, Google Drawings, and I’m quite liking it. I tried drawing a few diagrams and even a wireframe, and it turns out the basic drawing interactions are just as good – in some cases even better – than what I’m used to in Omnigraffle and Fireworks.
5 reasons Google Drawings beats Viso and Omnigraffle
We know the cloud computing arguments, and they certainly apply to wireframes
- It’s live. The entire team can work on the same document and see each other’s work instantly
- The wireframes live in the cloud, no sending files around, no outdated documents
- The risk of losing data is zero. It saves for every edit you make
- It’s free
- Most people already have a Google account, so no sign up required
We need stencils
One thing was missing though: Stencils. Omnigraffle has stencils coming out of its ears, and Fireworks has some excellent built-in ones. But Google Drawings in its current early and simple form simply doesn’t have it. So I made one.
Leaving the stencils in the gutter
An interesting limitation is the fact that
- there’s no stencil library function and
- you can’t easily copy and paste from one document to another.
One solution, it seems, is to clone one of the wireframe kits and thereby also cloning the stencils into each document. To not print or export the stencils, I’ve left them in the gutter area of the document. Seems to work quite okay.
Kind of blue
I’ve been wanting a blue kit since I left a project years ago where we used blue stencils (the idea was Peter‘s). As you may have experienced, some customers simply don’t understand wireframes. The blue color gives that well-known blueprint feel, and shouldn’t prompt questions like “I like it, doesn’t it need a splash of colour?”
The templates
To make it even easier for you (ehm, me) I’ve begun making simple starting point templates.
Main blank template
Product detail page
Landing page
Item list view
They’re all in this shared folder on Google Docs, and it will be updated when there are new templates. If you make one, let me know and I’ll add it to the folder so everyone can use it.
UPDATE: I just added a few wireframe stencils for iPhone
UPDATE: The stencils are now in the Google Docs template gallery:








April 19th, 2010 at 11:04 am
Fantastic! I can easily see this becoming my first choice wireframing tool. Great work and thanks for sharing…
April 19th, 2010 at 11:06 am
Thank you!
April 19th, 2010 at 11:10 am
[...] full post on Hacker News If you enjoyed this article, please consider sharing it! Tagged with: beats • [...]
April 19th, 2010 at 11:22 am
Thanks for the info. But is that really 5 reasons? It’s kinda just one: it’s a webapp. All 5 of those reasons apply to most/all webapps. I was hoping to hear some reasons why the actual task of creating a drawing is better in Google Drawings vs. OmniGraffle vs. Visio.
April 19th, 2010 at 11:23 am
[...] Just wrote a blog post describing how he uses it for that purpose, but even more awesomely he’s shared a drawing [...]
April 19th, 2010 at 12:06 pm
Great – Thanks for sharing this post adds more reasons why the world should use Google Docs – cheaper, easier, faster and readily shareable
April 19th, 2010 at 12:36 pm
So how does it compare to another cloud wireframing tool like gomockingbird.com?
April 19th, 2010 at 12:41 pm
This is great! Thank you so much!!
April 19th, 2010 at 1:07 pm
Friggin amazing! Thank you. I’ve been using OmniGraffle until now but I can’t wait to try wireframing with this.
April 19th, 2010 at 1:11 pm
Wow. Thank you so much for sharing this with everyone. I work in a GoogleApps powered workplace with a number of remote collaboraters, and have started evangelizing GoogleDrawings for a number of key uses: white boarding, design markups.. but I hadn’t thought about how this could help with wireframe collaborations! (just need multipage) Viva la Cloud!
April 19th, 2010 at 2:20 pm
great work !
April 19th, 2010 at 3:11 pm
But I’m assuming you can’t create any kind of interaction and therefore present it to your clients as a semi-working model of a site (that allows for naviagtion) … so it’s not really a proper wireframe, but a structural concept.
So I would argue that this is a replacement for creating structural concepts in photoshop; but is in no way a replacement for omnigraffle or visio …
April 19th, 2010 at 3:51 pm
I agree with “n”: it is not easy to customize the “stencils”, so I think it doesn’t replace Visio. It also lack of interactivity, but tw anyway for the good job
April 19th, 2010 at 4:18 pm
This is great, I have been looking towards Fireworks – But your templates has everything to sketch up a web page without installing Fireworks
April 19th, 2010 at 4:41 pm
[...] A wireframe kit for Google Drawings via mortenjust.com [...]
April 19th, 2010 at 5:25 pm
While I do like the idea of Google creating a drawing type of application as apart of their google docs family, I don’t think this will overtake Visio or Omnigraffle anytime soon. Visio and Omnigraffle are just way more robust, comes with stencils/libraries, is way more flexible and has a lot more features such as alignment guides, grid/canvas adjustments and shadows/gradients and that this doesn’t have.
Also, to your point about it being blue to reflect actual blueprints… having it being black and gray is much better because it takes the color out completely. If you have it blue they will now wonder why everything is blue, especially if there brand colors are blue it can cause a lot of confusion.
April 19th, 2010 at 5:58 pm
Mockflow.com and of course balsamiq.com are both cloud based apps as well. I feel there is huge room for improvement here – curious that Adobe hasn’t stepped up and come up with something that lives online with regard to UX/IA apps? huge opportunity. aviary?
April 19th, 2010 at 7:16 pm
Mockingbird is still my favorite. Fun and fast to use.
http://gomockingbird.com/
April 19th, 2010 at 7:42 pm
These templates are very fine. Thank you so much.
April 19th, 2010 at 7:47 pm
These are fantastic – many thanks for sharing. I built several super-hacky pages in GDocs last week and was wishing for exactly this…
April 19th, 2010 at 8:04 pm
[...] A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio – Morten Just One thing was missing though: Stencils. Omnigraffle has stencils coming out of its ears, and Fireworks has some excellent built-in ones. But Google Drawings in its current early and simple form simply doesn’t have it. So I made one. (tags: google wireframe drawing webdesign wireframes tools graphics ux mockup diagram stencils) [...]
April 19th, 2010 at 9:45 pm
[...] MortenJust- A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/ [...]
April 20th, 2010 at 2:09 am
[...] A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio – Morten Just (tags: google drawing wireframe mockup wireframes diagram stencils webdesign) [...]
April 20th, 2010 at 4:05 am
[...] A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio – Morten Just (tags: application diagram drawing Ergonomie google graphics prototype prototyping tool tools webdesign websites) [...]
April 20th, 2010 at 6:06 am
[...] A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio (tags: google ia tools ux webdesign) [...]
April 20th, 2010 at 6:13 am
I gotta say, for serious web pros, I wold recommend axure. You can prototype entire web app and test functionality.
April 20th, 2010 at 7:00 am
[...] ?????? A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio ?? ???????? 5 ??????, ?????? Google Drawings ????? Visio ??? [...]
April 20th, 2010 at 4:52 pm
Love them! Thanks Morton
April 20th, 2010 at 4:56 pm
[...] just read this post by Morten Just about using Google Docs’s new Google Drawings to create wireframes that can be easily shared with your collaborators because they live in the [...]
April 20th, 2010 at 5:06 pm
Thanks, this looks great!
April 20th, 2010 at 6:31 pm
Beautiful! Thanks for doing this! I’ll definitely start using it.
April 20th, 2010 at 6:52 pm
I would never have thought of this! Thanks for all the stencils and shared docs!
April 20th, 2010 at 9:12 pm
Well – I have to disagree with your conclusion:
Yes, it’s a webapp and yes, it’s well done, works good and feels nearly like a desktop app.
Now the features are sufficient to draw small diagrams and quickly sketch something – but in comparison to OmniGraffle (I don’t use Visio so I can’t compare) it feels like using Wordpad compared to Office/OpenOffice. Only some examples:
- You can’t choose a font…
- There’s not outline view, which is one of the greatest drawbacks.
- Objects can’t be connected (or I didn’t find out how..)!
- No (auto)layout features
- Grid is fixed
- No import, No multipage documents, no tables, no stylesheets …… and so on.
I could continue the list but I the point is this:
To create professional and/or structured diagrams, wireframes or charts it’s by far not usable enough (currently of course..).
April 20th, 2010 at 10:07 pm
That’s clever, I wouldn’t have thought of using it for wireframes. I just wish it had a way to turn objects into links so I could link to other drawings and mock-up interactions.
April 21st, 2010 at 12:21 am
[...] A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio – Morten Just (tags: application blueprint diagram drawings googleapps googledocs mockup ia ux ui prototyping prototype graphics wireframe design) Share with Shareomatic! [...]
April 21st, 2010 at 12:27 am
THanks for sharing this. It was only two days ago that we were considering using this tool for our project. You have now made that decision a lot easier and taken a whack of time out of it for us.
Cheers,
Rhys
April 21st, 2010 at 1:12 am
This is going to sound like a dumb question, but: I’m unable to use these templates: I’ve tried to make a copy of one of the blueprints, so I can manipulate it. But it shows up blank in the copy.
Is anyone else having this issue?
April 21st, 2010 at 1:35 am
Yes. After my last post went away, came back and I have the same issues…….
April 21st, 2010 at 1:39 am
Oh wait…. but when I followed these instructions I got it into my new pic http://docs.google.com/support/bin/answer.py?answer=161768 i.e. use the web clipboard!
April 21st, 2010 at 2:24 am
Thanks!
April 21st, 2010 at 2:41 am
Ah, that worked! Thanks!
April 21st, 2010 at 3:21 am
[...] to be some good momentum behind the app. For example, others in the web design community have already begun creating wireframing templates. And being a regular Google Apps user, the interface felt right [...]
April 22nd, 2010 at 9:25 am
[...] A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio – Morten Just [...]
April 22nd, 2010 at 10:56 am
[...] ist der Link zu seinem Blogbeintrag – ”A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio“ Be [...]
April 22nd, 2010 at 6:25 pm
That is a great idea! The interface of Google Drawings is a bit clumsy lacking some native OS features, but I guess with practice you can develop and get used to it. I am looking forward the day I can do all my work at Google Docs.
April 23rd, 2010 at 3:04 pm
[...] A wireframe kit for Google Drawings [...]
April 23rd, 2010 at 4:15 pm
you’re my hero :)
April 23rd, 2010 at 5:04 pm
Any tips on how to get your shared folder in my “Shared folders” in google docs hosted on my own domain?
I only managed to view the docs in my regular google account, how to import it to my hosted google apps accounts?
Great stuff, thanks for your work, really appreciate it.
April 23rd, 2010 at 11:55 pm
[...] suite. Wouldn’t it be great to use this for wireframing? A generous fellow created a set of stencils for just that [...]
April 25th, 2010 at 2:07 am
Thank you for making these kits. It’s awesome and really helpful!
April 27th, 2010 at 5:49 am
[...] Need stencils? Read more [...]
April 27th, 2010 at 3:17 pm
[...] created a stencil for the Google Drawings addition to Google Docs. Could be interesting to try. Comparing Google Docs [...]
April 27th, 2010 at 4:39 pm
this is awesome, thanks! I’ve made a very simple basket icon for e-commerce websites, and probably I will make some more stuff in the future, for example product snapshots, etc. How can i send them to you? (Share?)
April 27th, 2010 at 6:06 pm
[...] used to help visualize how the page will look and function before all the details are worked out.Morten Just has created some templates that you could use to get [...]
April 27th, 2010 at 7:18 pm
[...] created a stencil for the Google Drawings addition to Google Docs. Could be interesting to try. Comparing Google Docs [...]
April 27th, 2010 at 8:35 pm
Awesome! Thank you!!!
April 28th, 2010 at 2:25 am
Great post – another app that allows you to create wireframes in the cloud is cacoo.com. Recently launched and free. They have a good set of stencils to choose from as well.
April 28th, 2010 at 2:08 pm
Mockingbird is awesome, free and it supports links between pages. I have to try out this solution too.
April 28th, 2010 at 3:18 pm
Great post, thx!!!
April 28th, 2010 at 9:53 pm
[...] nyligen stötte jag på ett blogginlägg av Morten Just där han visar hur man kan använda sig av Google Drawing (ny application till Google Docs) för [...]
April 29th, 2010 at 7:42 am
[...] created a stencil for the Google Drawings addition to Google Docs. Could be interesting to try. Comparing Google Docs [...]
April 29th, 2010 at 12:11 pm
[...] They’re all in this shared folder on Google Docs, and it will be updated when there are new templates. If you make one, let me know and I’ll add it to the folder so everyone can use it. via mortenjust.com [...]
April 30th, 2010 at 11:59 am
[...] created a stencil for the Google Drawings addition to Google Docs. Could be interesting to try. Comparing [...]
April 30th, 2010 at 12:46 pm
A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio…
I’ve been playing around with the newest addition to Google Docs, Google Drawings, and I’m quite liking it. I tried drawing a few diagrams and even a wireframe, and it turns out the basic drawing interactions are just as good – in some cases even bette…
May 1st, 2010 at 6:02 am
[...] that people share (give away) useful stuff they have made on the web. Morten Just has created a set of stencils for web designers that can be used in Google [...]
May 1st, 2010 at 8:25 am
[...] Plantillas que permiten a Google Drawings rivalizar con Visio y Omnigraffle [ENG] mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/ por bruskli hace 3 segundos [...]
May 1st, 2010 at 10:01 am
[...] mortenjust [...]
May 2nd, 2010 at 8:13 pm
[...] A wireframe kit for Google Drawings – Morten Just Skapa mockups i Google Docs. (taggar: googledocs ux drawing wireframes mockup prototyping ) [...]
May 2nd, 2010 at 9:20 pm
??? ??…
?? ????? ? ? ?? ???? ?????? ?. ?? ??? ??? ‘make a copy’?? ?!…
May 3rd, 2010 at 9:00 am
[...] Google Drawings Wireframe Stencil ????? wireframe-????????? ??? ??????-??????????? ?????????????? Google Drawings. ???? ?? ?????????? ? ?? ??? ???????????? ??? ?????? ??? ???????????? ? ?????? ???????? ?????????????????? ????????????, ??? ??????????? ?????????? ?????? ???????? ?????????. [...]
May 3rd, 2010 at 11:06 am
[...] A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio – Morten Just: (ux prototyping ) [...]
May 3rd, 2010 at 1:03 pm
[...] A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio – Morten Just (tags: wireframe google drawings stencil) [...]
May 4th, 2010 at 8:12 am
[...] Google Drawings Wireframe Stencil ????? wireframe-????????? ??? ??????-??????????? ?????????????? Google Drawings. ???? ?? ?????????? ? ?? ??? ???????????? ??? ?????? ??? ???????????? ? ?????? ???????? ?????????????????? ????????????, ??? ??????????? ?????????? ?????? ???????? ?????????. [...]
May 4th, 2010 at 8:08 pm
[...] Par contre, il embarque un gestionnaire (sommaire) de projet. Gratuit, $15/mois ou $75 en standaloneWireframe kit + Google Drawings La suite bureautique de Google peut aussi servir au prototypage. A ce effet, Morten [...]
May 4th, 2010 at 9:34 pm
[...] Wireframe Kit for Google Drawings [...]
May 5th, 2010 at 10:50 am
[...] Šodien p?rskr?ju p?ri blogiem un paman?ju pie Mika ierakstu par Google Docs Drawing r?ka iesp?j?m, kuras ir sal?dzin?jis Morten Just sav? blog?. [...]
May 6th, 2010 at 3:41 am
[...] for some stencils. Luckily I found http://www.mortenjust.com because the author has created a very nice stencil template. I will post a follow up when I find the time to give it a shot. Comments [...]
May 6th, 2010 at 6:15 pm
[...] Download Kit here [...]
May 6th, 2010 at 9:36 pm
[...] so much for all the positive feedback on the Wireframing in Google Docs post. I’m sorry if I haven’t yet responded to your reply, you’re always welcome to ping me on [...]
May 7th, 2010 at 2:34 am
[...] kit for Google Docs (Drawings) Found a killer link today to a blog article posted at MortenJust – who has developed a set of templates to make wireframing super easy for websites and even [...]
May 8th, 2010 at 11:46 pm
[...] better when people are making free stuff/kits I really can use. Free + free + good tools = me happy Morten Just has made this sweet wireframe kit for Google [...]
May 9th, 2010 at 5:25 pm
??? ??…
A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio ???? ??……
May 10th, 2010 at 12:02 pm
[...] har Morten Just og rock og silkepapir med is i vores hjerner Home About me « A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio I wrote a guest post on the Google Docs blog [...]
May 10th, 2010 at 1:41 pm
[...] lo ha ido trabajando y presentando durante el mes de abril es ahora cuando la gente de Google Docs le ha invitado a que lo explique en el blog [...]
May 13th, 2010 at 1:46 pm
[...] Check it out! [...]
May 17th, 2010 at 5:41 pm
[...] Wireframing Kit for Google Drawings (rapid UI prototyping templates for Google Docs) [...]
May 22nd, 2010 at 3:25 pm
[...] Google Drawings Wireframe Stencil [...]
May 31st, 2010 at 5:26 am
[...] MortenJust.Com’s Wireframe Kit for Google Drawings – This is a cool wireframe kit made by Morten Just of Denmark, who works for Vodafone as a user experience guy. Basically he used the latest addition of Google Docs, Google Drawings, and created a few diagrams and some wireframing elements for you to use.What I Like: Morten Just shares it on a public folder of his Google Docs and you can save a copy of his different modules for you to sketch your page designs. Another bonus is the updated wireframe stencils for iPhone. [...]
June 9th, 2010 at 9:30 pm
[...] http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/ Categories: software development Tags: google docs, mockup, wireframe Comments (0) Trackbacks (0) Leave a comment Trackback [...]
June 10th, 2010 at 9:26 am
[...] À la recherche d’un petit outil pour réaliser des prototypes rapidement, en évitant de sortir l’artillerie lourde (Fireworks, pour ne pas le citer) à chaque occasion, je suis tombé sur l’idée ingénieuse de Morten Just. [...]
June 18th, 2010 at 11:54 am
[...] empezar Sonesu me lo puso fácil, me pasó los Stencils de Morten Just para prototipar con Google Drawings. ¿Qué más se podía pedir? gracias [...]
June 25th, 2010 at 5:42 am
[...] hacer estos aproximaciones a interfaces de usuario existen múltiples alternativas (El kit para google draw es interesante, Muchas herramientas para productos Adobe y varios SAAS), sin embargo Evoluspencil es una gran [...]
July 6th, 2010 at 5:21 pm
[...] A wireframe kit for Google Drawings /via @echoditto [...]
July 25th, 2010 at 5:15 pm
[...] Wireframe Kit (Google Drawings) [...]
July 29th, 2010 at 8:18 am
[...] Wireframe Kit (Google Drawings) [...]
August 12th, 2010 at 6:20 pm
[...] Wireframe Kit (Google Drawings) [...]
August 25th, 2010 at 10:54 pm
[...] su página “A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio” (http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/ [...]
August 26th, 2010 at 6:29 pm
[...] out an existing web site – like News.com, for instance. If I do switch to a tool, Wireframing with Google Drawing looks pretty [...]
August 26th, 2010 at 8:13 pm
[...] Wireframe Kit (Google Drawings) ???????? Google Drawing ? UI ?? [...]
August 27th, 2010 at 3:10 pm
[...] [...]
August 27th, 2010 at 3:57 pm
[...] Wireframe Kit for Google Drawings [...]
August 27th, 2010 at 6:58 pm
[...] Wireframe Kit for Google Drawings [...]
August 28th, 2010 at 1:34 pm
[...] [...]
August 30th, 2010 at 4:12 am
[...] Wireframe Kit for Google Drawings [...]
August 30th, 2010 at 5:04 am
A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio – Morten Just…
I’ve been playing around with the newest addition to Google Docs, Google Drawings, and I’m quite liking it. I tried drawing a few diagrams and even a wireframe, and it turns out the basic drawing interactions are just as good – in some cases even bette…
September 1st, 2010 at 1:17 am
[...] [...]
September 1st, 2010 at 9:31 am
[...] Wireframe Kit for Google Drawings [...]
September 2nd, 2010 at 5:36 pm
[...] ?? ??? ? ?????? ?? (Wireframe Kit for Google Drawings) [...]