Posts Tagged ‘sketch’

Sketch Map

Tuesday, February 12th, 2013


What do you get when you mix mind maps and sketches together? Well, Sketch Maps, of course. Catriona of InspireUX just shared an interesting approach to organizing your sketches around a central idea. Awesome big canvas sketching! I’m a firm believer that your workspace affects the way you think. How you structure your screens will affect what you end up with. In the case of these Sketch Maps, it’s clear that the structure guides the designer to maximize the number of alternative ideas. It forces the designer to explore more alternatives in a playful way as opposed to thinking about a concrete unified solution. Two thumbs up. Thanks for sharing.

Credits: Catriona Cornett

MicroPersonas

Wednesday, January 23rd, 2013

MicroPersonas
MicroPersonas is a new icon set that I just came up with for building and using quick persona like characters in your interaction design deliverables. The set is founded on the belief that personas should be generated rapidly with only those characteristics that can be used to influence or inspire design action. If personas are to be leaner, more concise and live closer with interface sketches (without being lost in separate documents) then this is a materialization of that type of thinking and a step toward lighter documentation.

The set comes with 40 sketched style characters and 9 characteristics (beliefs, habits, comments, triggers, tools, needs, problems, data, and artifacts) setup in .AI (Illustrator) and .PNG (Fireworks) formats.

Purchase and download it at www.linowski.ca/micropersonas for $29. Enjoy …

Credits: Jakub Linowski (Twitter)

How I Sketch: An Introduction

Wednesday, August 15th, 2012


I’ve decided to do a screencast of How I Sketch and the style that came to be known as the Interactive Sketching Notation. It’s around 13 minutes in length going over the basic concepts, some of the key benefits, as well as an example of a real world project. The video is in HD so you might have to expand to full screen in order to experience the real deal. Somewhere at the end you might also find a few minutes of attempted real time UI design. :) Let me know if it’s useful, and if it is, I might do another one of these in the future. I’ve also setup a Vimeo Channel for this just in case. Enjoy. Cheers.

If you need the Adobe Illustrator template, you can purchase it right here for $29.

Credits: Jakub Linowski

15 Dribbble UI Sketching Designers

Monday, April 23rd, 2012

Dribbble UI Sketching Designers
There are those who design, and then there are those who design in the open – enter dribbble.com. Although sharing a 300 by 400px image perhaps might work if you want to show off a shiny button style, maybe it isn’t always the best constraint for interaction type of work (flows, multiple screens, scenarios and stuff in between the screens). Nevertheless the other day I was looking through dribbble.com out of curiosity for some designers who might be doing a bit of UI sketching type of work. I guess I always find it interesting to look at how others sketch. Here is a bit of a list (including myself at the bottom) for those who might be interested. :)


Remote Collaborative Sketching

Saturday, February 25th, 2012

Remote Collaborative Sketching
Jeff recently has been experimenting with a remote sketching technique in a distributed team scenario. In the article, he describes the setup, technique and learnings in great detail. Interesting things that were mentioned included:

  1. use of multiple Skype accounts, cameras and dual monitors (to see both the sketches and the team in parallel)
  2. initial priming of participants
  3. use of an excel spreadsheet for rapid idea generation
  4. use of 1 and 6 screen per page templates
  5. facilitation of a 8 person team

Awesome work and thanks for sharing!

Credits: Jeff Gothelf

Persona Template

Tuesday, March 1st, 2011


A persona template has just been shared by the folks over at Orange Bus. Perhaps what might be interesting about this particular one is that it invites quick and dirty hand drawing or writing. A lot of the other personas out there, from what I’ve seen in the past, look pretty well polished. This one on the other hand is a lot more doodle compatible. It comes with fill in the blank spaces for basic naming, portrait, a back story, motivations, frustrations, their ideal experience, and a summary quote. Nice!

Credits: Joanne Richardson

Business Model Canvas – Facilitator Cards

Friday, December 10th, 2010


Jason does quite a lot of collaborative sketching, business modelling and multidisciplinary design workshops. Recently he shared a set of downloadable cards in PDF form that are aimed at helping to facilitate such sessions. The cards help move the conversation away from the tactical nature of interface design to more high level business strategy with keywords such as: customers, channels, cost structure and value proposition. Additionally, he also wrote up an awesome blog post about facilitating a collaborative process, which sheds more context into how these cards could be used. It’s always interesting to see design intersect with other disciplines (such as business in this case). Thanks Jason!

Credits: Jason Furnell

iPad Sketch Elements AI

Wednesday, December 1st, 2010


Teehan+lax just released the iPad Sketch Elements for Adobe Illustrator to complement the existing iPhone counterpart. The downloadable file contains a number of useful sketch style UI components (such as the keyboard, browser bars, system bars, etc) that can used to speed up an exploration process. Thanks!

Credits: Chris Tanner – teehan+lax

500 Storyboard Tutorials & Resources

Friday, November 19th, 2010


Filmmakers have been sketching, storyboarding and playing with the element of time for quite a while now and we can definitely learn from them. Here comes an inspirational resource loaded with tutorials and videos on the topic of storyboarding. It contains tips on showing movement, zooming, panning and highlighting story points. Perhaps one interesting thing that emerges as one looks at these screens is that only minimal amounts of drawing is done in order to convey screen-to-screen changes more clearly. Could be great to pick some ideas up from these guys.

In addition there is also a list of storyboarding software, such as Celtx, that can be used for this process. Enjoy.

Credits: FilmmakerIQ.com

SketchWizard

Thursday, October 21st, 2010


A rather interesting experimental wizard of oz sketching tool has been developed a few years ago by a group at the University of Washington. The setup requires two separate monitors with the user on one and the designer on another. The person evaluating the prototype can then use a standard computer or a pen based input to perform actions on one monitor. While the screen pauses on the user’s monitor, the designer (acting as the wizard) then spontaneously draws up or selects what the user will see as a consequence, and so on.

Today’s popular prototyping tools for the most part rely on a similar approach to handling interactivity, which might be a bit stale. There is a large focus on trying to predict all possible interactions in advance and prerecording event handlers (such as onclicks and mouseovers) ahead of time. I find SketchWizard on the other hand provides a more spontaneous way of playing out interactions with a prototype. While it alleviates the need to have everything thought out before hand, the one catch might be that the user has to occasionally wait a few seconds longer before a new screen comes into view (as the designer is preparing it quietly on the other end). Perhaps it would be interesting to see more prototyping tools take on this approach as well.

There are binary releases and videos available right there on the project page.

Credits: Richard C. Davis, T. Scott Saponas, James A. Landay