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

The Usability Test Data Logger is an interesting excel sheet for capturing usability test results. It’s not new (first released in 2002) but still fully valid (with the latest release in 2008). Brought to you by the guys over at Userfocus, the tool is customizable, cross platform, captures both qualitative and quantitative data and generates reports. The excel file also comes with an embedded timer for logging time on task. If you find this free tool really useful and like to support other’s work, you may do so as it’s released under donationware.

Download the Data Logger (Excel & Manual).

Here is another experiment in the form of an open source jQuery plugin named onProximityFade. What it does is it fades tagged elements (requiring a CSS class of “fadeBox”) depending on their proximity to the mouse cursor. The idea emerged after a subtle irritation with long lists of repeating links which sometimes feel as they receive too much attention on a page. So the intention is twofold. First, to visually deemphasize repeating and predictable elements throughout a page and thus achieve greater simplicity. Secondly, use gradual feedback to invite users to find actionable elements by using ranged values (the closer you get, the greater visibility). Any thoughts? Would love to hear them.

Have a peek at the demo or fork the code at github.

Credits: Jakub Linowski

An awesome Adobe Illustrator library has just been released for designing user interfaces. The set contains hundreds of vector shapes for GUI form elements, 260 vector based interface icons, and 200 graphic styles. Best of all, it’s available to use for commercial projects. Nice work Vincent!

Credits: Vincent Le Moign

Amir Khella just described his experience of building an interactive prototyping for an iPad application using Apple’s Keynote. Along with a thorough post, he release a template available for download (requires blog subscription). The post also comes with a video screen cast showing the final result and interactions. Here is an interesting quote around what he has to say on prototyping:

Remember that a prototype doesn’t need to be perfect. It just needs to convey your idea better than your words do. Don’t over-engineer it, and don’t prematurely optimize it. Just put together something that users can see and play with. You will get many more insights than spending hours in focus groups, market research and surveys.

Credits: Amir Khella

A copy of Mental Notes just arrived on my desk and it looks like a great little design tool. The mental notes are a stack of 52 cards which can be used in conceptualization phases to help with idea generation. Each card conveys an inspirational thought related to psychology that touches upon such themes as: persuasion, comprehension, memory, attention and comprehension. The set of cards comes very well presented in a leather case with wonderful illustrations (Kevin Cornell) on each card. If you need to sprinkle a bit of randomness and brainstorming into your process, this set could very well be an interesting way to help you achieve just that.

In Stephen’s own words:

The Mental Notes cards were designed to be idea starters and can be used at almost any stage of product development. They’re great for generating new product or feature ideas or finding creative solutions to problems.

While there is no one right way to use these cards (it’s fun to simply learn or review these ideas!), I’ve found the following phrase quite helpful during brainstorming sessions: “How can we use [card] to … [goal]?”

Credits: Stephen P. Anderson