Free Online Storage

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Thursday, 6 May 2010

Rapid wireframe sketching in Google Docs

Posted on 09:36 by Unknown
Guest post: Morten Just is a product manager in Vodafone. Based in Copenhagen, Denmark, he spent most of his career as an interaction designer churning out wireframes and diagrams, and also co-founded Imity, a Bluetooth-enabled social network for mobile phones in 2006. On his personal blog he writes mostly about user experience.

When I saw Google drawings on a Twitter update a few weeks ago, I didn't really think about it until I got a feeling I might not have understood a rather complex problem at work. I drew a diagram and asked my colleague to edit it in case I had misunderstood him. It worked out well, we're still using the drawing as a basis for discussion, and it is constantly being refined as we go along. So taking the next step and trying out a wireframe was an obvious decision.

For quite a while I’ve been wanting a simple and fast way to burst out interface ideas, and then quickly share them with my colleagues in Düsseldorf and London. Since a relatively large portion of a wireframe looks like something I’ve sketched out before, I figured modifying a template like a list view or a landing page would speed things up.

In fact, I wanted to speed it up to the point where I all I had to do was to add a few words before I had a wireframe.

From the templates I extracted the scroll bars, buttons, and sliders and put them in the gutter outside the drawing’s canvas, ready to be duplicated and dragged onto the wireframe.

Here's a generic page displaying product details:


... and a typical mobile phone drill-down of items in groups:


To begin working on a wireframe

  1. Open the template you want to use
  2. Click 'Sign in' in the upper right
  3. Choose file > make a copy
  4. Make your wireframe
Packing it up

When you have several individual wireframes it can be a neat thing to pack them all up into one single document that you can send around, have people print out, or even present in meetings.

Since there’s no way to import a drawing into a presentation yet, here’s a trick using the web clipboard feature. You'll still be able to edit the imported drawing should you need to.
  1. Go to File > New Presentation. A blank presentation opens in a new window.
  2. Switch back to your drawing and select everything.
  3. Click the web clipboard icon > Copy to web clipboard
  4. Switch back to your presentation and paste your drawing using the web clipboard.
Building the library

I'd love for this to be the beginning of a shared wireframe template repository in Google Docs. For now, I've shared a folder in which I'll add user contributed templates and stencils. Get in touch if you want to contribute.

I hope you'll enjoy the templates and that it will help you actually sketch out your ideas rather than just describe them in words. As Dan Roam said in his keynote at this year’s IA Summit, “The person who draws the picture wins."

Links
  • All wireframe templates
  • Morten Just's blog and his Twitter account
Posted by: Morten Just, mortenjust.com
Email ThisBlogThis!Share to XShare to Facebook
Posted in drawings, Google Apps Blog, Guest Post | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • More Google Experiments That Hide Results URLs
    There are at least two other versions of the Google experiment that removes search results URLs . The first alternate version places site na...
  • Add a Keyboard Shortcut for Chrome's App Launcher
    I'm not sure why Chrome's app launcher doesn't have a keyboard shortcut, but it's pretty easy to add one. For Windows XP, r...
  • Merge cells vertically in Google spreadsheets
    There are many times when you want to format your spreadsheets in a certain way to make your data easier to read and understand. Starting to...
  • Docs on the iPhone with Chris Pirillo
    Posted by: Meredith Whittaker, Program Manager Chris Pirillo , Gnomedex Conference founder, CNN.com Live technology contributor, and one of ...
  • Writing a campaign speech with Google Docs
    A few months ago, my colleague Julia and I were at a technology conference for educators. Teachers were very enthusiastic when we demonstrat...
  • Google Now for Google's Homepage in Testing
    It looks like Google Now won't be limited to Android, iOS and Chrome , it will also be added to Google's homepage. Some code from a...
  • Google spreadsheets, now with discussions
    Getting things done with others would be much easier if everyone was sitting right next to you. But since that’s rarely the case, we’re alwa...
  • Collect audience input with Google Sites & Moderator
    Google Moderator helps anyone find the best input from their audiences, whether it’s suggestions on how to stop the oil spill , debate que...
  • Get Docs in 38 languages
    Posted by: Ken Norton, Product Manager, Google Docs Earlier today we launched Google Docs in 13 more languages, bringing our total number of...
  • View .doc attachments right in your browser
    Cross posted on the Gmail blog If you receive Microsoft® Word files as attachments in Gmail, you can now view them with a single click -- no...

Categories

  • Acquisitions
  • Ads
  • Android
  • Annoyances
  • April Fools Day
  • attachments
  • back to school
  • Blogger
  • charts
  • chat
  • Chrome
  • Chrome extensions
  • chrome web apps
  • Cloud Connect
  • collaboration
  • comments
  • community
  • discussions
  • DMCA
  • docs
  • document list
  • documents
  • documents list
  • drawings
  • drivebacktoschool
  • Easter Egg
  • education
  • Faces of Docs
  • forms
  • gmail
  • gone google
  • Google Alerts
  • Google Analytics
  • Google Apps Blog
  • Google Apps Script
  • Google Calendar
  • Google Cast
  • Google Checkout
  • Google Chrome
  • Google Chrome OS
  • Google Cloud Connect
  • Google Contacts
  • Google Dictionary
  • Google Docs
  • Google Docs Viewer
  • google documents
  • google drive
  • Google Earth
  • Google Goggles
  • Google Hangouts
  • Google Instant
  • Google Keep
  • Google Latitude
  • Google Local
  • Google Maps
  • Google Music
  • Google News
  • Google Notebook
  • Google Now
  • Google Pack
  • Google Photos
  • Google Play
  • Google Plus
  • Google Reader
  • Google Sites
  • Google Suggest
  • Google Takeout
  • Google Talk
  • Google Toolbar
  • Google Translate
  • Google Trends
  • Google Voice
  • Google Wallet
  • Google+
  • googlenew
  • Greasemonkey
  • Guest Post
  • holiday
  • iGoogle
  • Image Search
  • images
  • InOut
  • iOS
  • Keep
  • Knowledge
  • mobile
  • OCR
  • offline
  • OneBox
  • paperless
  • pdfs
  • photo
  • photos
  • Picasa Web Albums
  • presentations
  • product ideas
  • profiles
  • quickoffice
  • Reddit
  • research
  • save to drive
  • scripts
  • Security
  • sharing
  • sheets
  • shortcut
  • slides
  • spell check
  • spreadsheets
  • stock photos
  • storage
  • students
  • tables
  • teachers
  • templates
  • Tips
  • User interface
  • videos
  • Viewer
  • Visualization
  • Voice Search
  • Web Search
  • Yahoo
  • YouTube

Blog Archive

  • ►  2013 (519)
    • ►  December (33)
    • ►  November (44)
    • ►  October (64)
    • ►  September (50)
    • ►  August (63)
    • ►  July (60)
    • ►  June (57)
    • ►  May (62)
    • ►  April (49)
    • ►  March (33)
    • ►  February (1)
    • ►  January (3)
  • ►  2012 (34)
    • ►  December (4)
    • ►  November (4)
    • ►  October (5)
    • ►  September (4)
    • ►  August (2)
    • ►  July (1)
    • ►  June (3)
    • ►  May (2)
    • ►  April (2)
    • ►  March (2)
    • ►  February (5)
  • ►  2011 (80)
    • ►  December (4)
    • ►  November (1)
    • ►  October (7)
    • ►  September (10)
    • ►  August (11)
    • ►  July (8)
    • ►  June (9)
    • ►  May (1)
    • ►  April (8)
    • ►  March (8)
    • ►  February (8)
    • ►  January (5)
  • ▼  2010 (118)
    • ►  December (11)
    • ►  November (16)
    • ►  October (6)
    • ►  September (13)
    • ►  August (13)
    • ►  July (7)
    • ►  June (15)
    • ▼  May (11)
      • Formula highlighting in spreadsheets
      • Tips & Tricks: Comments in Google documents
      • Faster finding and other document tweaks
      • Advanced sorting rules in spreadsheets
      • New themes in Google forms
      • Dictionary, improved comments and more in the new ...
      • Google drawings enhancements
      • What’s different about the new Google Docs?
      • Rapid wireframe sketching in Google Docs
      • Answering your FAQs about the New Google Docs
      • Copy sheets from one spreadsheet to another
    • ►  April (7)
    • ►  March (7)
    • ►  February (6)
    • ►  January (6)
  • ►  2009 (82)
    • ►  December (14)
    • ►  November (4)
    • ►  October (10)
    • ►  September (10)
    • ►  August (4)
    • ►  July (6)
    • ►  June (6)
    • ►  May (5)
    • ►  April (4)
    • ►  March (8)
    • ►  February (7)
    • ►  January (4)
  • ►  2008 (97)
    • ►  December (6)
    • ►  November (4)
    • ►  October (6)
    • ►  September (8)
    • ►  August (5)
    • ►  July (7)
    • ►  June (11)
    • ►  May (20)
    • ►  April (13)
    • ►  March (6)
    • ►  February (6)
    • ►  January (5)
  • ►  2007 (25)
    • ►  December (1)
    • ►  November (1)
    • ►  October (2)
    • ►  September (3)
    • ►  August (3)
    • ►  July (4)
    • ►  June (3)
    • ►  May (2)
    • ►  April (2)
    • ►  March (1)
    • ►  February (2)
    • ►  January (1)
  • ►  2006 (10)
    • ►  December (2)
    • ►  November (4)
    • ►  October (4)
Powered by Blogger.

About Me

Unknown
View my complete profile