«
»

Interactive Sketching Notation 0.1

October 29th, 2009


After being inspired by people’s UI sketches for almost a year now, only naturally, my own approach to drawn user interactions with pen and paper began emerging. This personal compilation of the various techniques which I find relevant, is being published as the so called Interactive Sketching Notation. The general idea behind this notation is the desire to visualize user interface states as well as user actions in a clear and rapid manner. This of course, as the version number implies, is an emerging visual language for sketching interactions which I hope to continue to evolve and improve well into the future. Thanks again to all those who made this possible and please let me know if you find it helpful or have any recommendations. If this inspires your own approach to sketching, I would also love to see some samples of how people use this. .

Download the PDF directly.

Credits: Jakub Linowski

Tags: ,
Posted in Samples, Templates | 36 Comments »

36 Comments:


  1. Lucks on said:

    I like the interaction, I think I will put in practice for the next projects, and hope that others persons do the same.

  2. Matt Yankelovich on said:

    I think it's pretty cool from the perspective of understanding one's own sketch interactions. My only concern is that some may want to show this to a client, and expect the client to understand the interactions that are trying to be conveyed through the notation; but of course, you might not want to be showing clients sketches anyway :)

    Very cool! Thanks

  3. josh on said:

    This is excellent. Thanks for sharing!

  4. Zaq on said:

    Is the red a pen, pencil, marker? Just curious

  5. Jakub Linowski on said:

    Hey Zaq. The red is a thin sharpie pen.

  6. ryw on said:

    Can you post a sample set of drawings using this notation? Would love to see it in context.

  7. Liou on said:

    Just a pedant suggestion. How about using the abbreviation FX instead of E for effects? It's quite common and probably more understandable.

    I think that you might be better off switching to prototype when you get very complex diagrams. Do you make use of prototypes yourself?

  8. Jakub Linowski on said:

    Liou. I like the FX suggestion. Thanks!

  9. Jason Robb on said:

    This is awesome. I need to make one of these for myself. Leah Buley has a great sketching pattern library as well: http://www.flickr.com/photos/jasonrobb/4064453154…

  10. pauric on said:

    i made an omnigraffle stencil of the above notation: http://www.graffletopia.com/stencils/518/

  11. tSherrell on said:

    Thanks for making the Omnigraffle version!

  12. tSherrell on said:

    Jakub,

    These look great. It would be great to have a common IA/UX/UI language.

  13. charlene on said:

    Funny (as in funny interesting), this reminds me of animation storyboards and x-sheets where similar types of notation is used to indicate actions the camera is making or timing for specific actions.

  14. Roman Bercot on said:

    Very cool! I like this a lot.

    Question: Shouldn't the notations on your interactions be in read also (since you've set black and grey as elements the user sees)?

  15. Jakub Linowski on said:

    Hey Roman,

    Perhaps. I'd say the ones related to user actions should be in red, and the ones pertaining to the interface should be in black. Of course it's all debatable. Which specific part were you referring to?

    Jakub

  16. Jakub Linowski on said:

    Here is a drawing which resulted from using this notation: http://wireframes.linowski.ca/2010/02/tablet-illu…

  17. Alexey Novikov on said:

    Cool! I use similar technique, however, I use pencil and gel pens. And a yellow textmarker for emphasizing.

    My notation also contains markers and callouts.

  18. Naveen on said:

    Excellent article Thanks!