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
October 29th, 2009 at 2:11 pm
I like the interaction, I think I will put in practice for the next projects, and hope that others persons do the same.
October 29th, 2009 at 2:59 pm
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
October 29th, 2009 at 4:34 pm
This is excellent. Thanks for sharing!
October 29th, 2009 at 4:58 pm
Is the red a pen, pencil, marker? Just curious
October 30th, 2009 at 12:10 am
Hey Zaq. The red is a thin sharpie pen.
October 30th, 2009 at 3:51 am
Can you post a sample set of drawings using this notation? Would love to see it in context.
October 30th, 2009 at 9:56 am
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?
October 30th, 2009 at 7:38 pm
[...] http://wireframes.linowski.ca/2009/10/interactive-sketching-notation-v0-1/ [...]
November 5th, 2009 at 3:49 am
Liou. I like the FX suggestion. Thanks!
November 5th, 2009 at 7:18 pm
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...
November 9th, 2009 at 6:13 pm
[...] Interactive Sketching Notation 0.1 [...]
November 13th, 2009 at 9:33 pm
i made an omnigraffle stencil of the above notation: http://www.graffletopia.com/stencils/518/
November 23rd, 2009 at 9:53 pm
[...] User and Social Experience DesignAn under-development notation system for user interaction interaction design documentation.I stumbled across Wireframes Magazine today – a blog dedicated to collecting and sharing user interface design and information architecture wireframe production techniques, tools and examples – and found Jakub Linowski’s Interactive Sketching Notation. [...]
November 29th, 2009 at 8:29 am
[...] Interactive Sketching Notation 0.1 [...]
December 9th, 2009 at 6:46 pm
[...] Annotating wireframes with animation data can do the trick for less complex projects. Though that approach can soon become messy and complicated and less than self explanatory. The best way to assure you get this right is by building interactive prototypes. A topic I intend to write more about in the future as I progress with my experiments and work. [...]