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

From the same person who brought you the User Interface Design Framework, now comes a set of another 750 Vector Icons. This time around the set costs around $47 and comes in Illustrator, EPS, PDF and PNG flavours. Hopefully useful to some of you UI designers out there. Thanks Vincent!

Credits: Vincent Le Moign

MoobileFrames is an emerging collection of sketches, wireframes and interface drawings in the mobile application space. The tumblr site has been recently started by Hannah and new content is still being scanned in and added. Thanks for sharing!

Credits: Hannah Milan

Austin recently came up with a sitemap or site architecture OmniGraffle stencil that makes room for some extra description. In the stencil, beside each page title there is now a little space for an explanation of what the page is about. He shared the downloadable stencil which can be obtained right from his site. Awesome. Thanks!

In his own words:

I’ve used EightShapes’s brilliant Unify deliverable system for about four years. It’s excellent.

Out of the box, Unify is designed for use with Adobe InDesign. Lately, however, I’ve been site mapping in sweet, luscious OmniGraffle, and I created a Unify-inspired OmniGraffle stencil for making site maps.

But, there’s one problem with lots of site maps.

In your typical site map, you show the page’s title adjacent to the little box for that page. Unfortunately, clients and developers and designers don’t always know what kind of page the page will be. In other words, if you have a page titled, “Orders”, it’s not clear if that’s a dashboard, a list of orders, or even a form form for adding an order.

So I added a line for every page on the site map where you can offer a very brief description of the page.

Credits: Austin Govella

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

The awesome guys over at HotGloo decided to give away 2 single one year plans to the readers of this blog. What’s the catch? I’m requesting UX deliverable samples, and latest sketching techniques of course. Just in the last giveaway, here are a few tips:

1. Submit your own work of wireframes, sketches, a UI design technique, a template, user flow, persona, time based interactions, or any other UI/UX design documentation or technique, by email to me. (any standard formats such as PDF, PNG, JPG, GIF, etc are fine)
2. Your sample has to cover a technique, visual, symbol, representation or approach previously not seen on Wireframes Magazine :)
3. By submitting, you should also be comfortable with me posting your work or approach online.
4. Optionally, feel free to describe what you did.

I’ll select two people randomly when I get back from my honeymoon vacation in mid/end October (there will be a few less posts in the upcoming weeks as well).

Update: The two winners are Hannah Milan and Austin Govella. Thanks to all for sending stuff in. In total six people entered the contest (Hannah, Austin, Vincent, Benjamin, Chance, and Jens).

These wireframing toolkits are recently springing up like mushrooms after the rain, but this one looks really stylish. It’s done for Illustrator and sits more on the high end of the fidelity spectrum. It also contains elements and pieces for: the browser, an iPad landscape and upright backdrop, the Smartphone, form and UX elements. Thanks Dirk for sharing!

Credits: Dirk Weber

Yet another wireframing kit up for grabs. This time for Adobe Fireworks.

In Jonas’ own words:

Dragnet website wireframes kit v0.9 is a common library for Adobe Fireworks and contains over 25 objects that are useful for rapid prototyping of websites. It is completly free to download and use. The kit contains common web design elements such as scrollbars, buttons, menus, alerts etc. Most of them supports the 9-slice scaling feature that is build into Fireworks for a better resizing of the objects.

Yes, it´s true that Adobe Fireworks already is packed with such elements that looks really nice. But we developed the kit because we wanted something more rought, something that looked more like sketches, so the clients or our user test participants wouldn´t get distracted by the design when we instead wanted them to focus on the function behind the web page or application. This kit is something that we will continue to develop and if you think we have forgot an element feel free to write a comment below [referring here of course].

Credits: Jonas Skoglund

In the light of Keynote as a recently popular tool for creating wireframes, here comes another emerging stencil for all to use. As the project name suggests, the template is free, comes with various form elements, modal boxes, and a number of useful header styles. One thing that stands out is the way the stencil is being positioned within github, and the author openly invites others to fork it, tweak it and improve it. Without implying otherwise it would be interesting to see if UX folk will be actually able to push, pull, branch and merge files under git to move the project forward. Or perhaps the technical barrier and the high learning curve behind git commands are just too complicated for the non-developer? Either way, thanks Colin for another cool project.

Grab the files (and collaborate) right here.

In Colin’s own words:

I’m working on some a free wireframing toolkit for creating interactive prototypes with Apple’s Keynote. It’s the best wireframe tool around, and I’ve been using it to build interfaces for web applications.

Credits: Colin Nederkoorn

The Omnigraffle Sitemap Generator is a script that auto creates nicely looking sitemaps from a given XML file. It’s really just a simple byproduct from the guys over at Fuzzy Math. If this is your cup of tea, Jason, also wrote up a table generator script. Hope this saves someone some time.

Download the Sitemap Generator

Credits: Jason Kunesh