Jason & Sam are over at the Dublin Interaction12 conference this year and have been running a Sketching Interfaces Workshop for which they released some slides. The slides are loaded with a few handy tips and rants (i.e. of what sketches are not). They also look at sketching as a number of activities pertaining to: warming up, capturing, focusing, writing, styling, and adding interaction. I’m sure looking through slides probably isn’t as awesome as meeting these two in person at an event. At least it’s something for those who weren’t able to make it to Ireland. :) Cheers and thanks for sharing!

Credits: Jason Mesut & Sam Smith

ProtoShare has recently gone live with the next version of their online prototyping app. The latest version of the tool takes design conversation to the next level by introducing topics. For one, topics are conversation placeholders which can be pinned to a page. More importantly however, topics can also be subscribed / unsubscribed from by various team members. This now allows collaborators some degree of filtering in terms of what might be relevant to them. Finally, another important characteristic of discussions is the way they elevate two types of conversation properties: decisions and resolutions. A comment inside a topic can now be marked as a decision, which makes it stand out visually as a task item to be acted on. Finally, a topic can come to a state of completion by being tagged as “resolved”. Taken together, this wave of improvements now allows for more structured design discussions.

ProtoShare 6 also brings a few extra improvements. These guys have now enabled drag and drop file uploading for a more seamless web-desktop experience. The layout has also been moved forward by increasing the size of the workspace and turning palettes into floating and movable ones. In other words, some minor usability improvements.

The last thing which really caught my attention was the ability to create and switch between multiple concepts (“Designs”) for a single page. In other words, the tool allows users to duplicate a page, try a different layout or idea, and then with time decide which one should be the proper one by means of “Activating” one. Strongly believing in multi-concept generation and the exploration of alternatives, I think this is a solid move from a design process standpoint.

>> Have a look yourself.

In addition to the 750 Vector Icons for Web Designers, Vincent has also released 930 Vintage Vector Ornaments as set. The set comes in both EPS and AI files and is filled with ornaments, borders, corners, rulers and flourishes. :) Possibly useful for some projects? The bundle comes at a price of $39. Enjoy.

Credits: Vincent Le Moign

Hannah just started the Fireworks Wireframing Kit resource site. It’s still hot of the press, but the blog is gearing up to be a collection of freely submitted PNG files submitted by the public to help with wireframing. So far there are a few grey scale files already with such components as: modal windows, login boxes, and buttons of various shapes and sizes. Right now you have to download each component individually, as you see fit. Hopefully it’s useful and please feel free to submit something if you have stuff to share.

Credits: Hannah Milan

myBalsamiq has just launched last month and took the web based version of Balsamiq Mockups and extended it with a bunch of collaboration features. The sketchy wireframes can now be uploaded online and organized into projects which can then also be given one of the following four access settings: private, website, blog and wiki. The default setting, “private”, is the most restricted and makes projects only visible to the specified members you share your work with. Whereas “wiki” on the other end of the spectrum is the most open and allows anonymous users to comment on, and edit the work. This degree of collaboration offers quite the flexibility for a variety of projects.

More so, myBalsamiq also comes with the ability to version your work by means of a revision history, as well as allows for email based discussion groups for each project. The web version of balsamiq resembles the desktop version so closely that it’s hard to tell the difference. Overall, I think this move marks a natural direction for the already awesome and popular tool.

Have a look.

PJ recently took another stab at making gesture icons more comprehensible and released Cue under Creative Commons. It’s a proposed system for representing gestures more clearly that makes use of thumb like icons. He explains his motivation for the project in a blog post as well. The icons come in PNG (4 sizes), SVG, Omnigraffle and InDesign formats. Awesome. It’s always great to see explorations in visual language. Thanks PJ!

Here is how he puts it:

These gesture icons act as roadsigns to an app for interaction way-finding. As expected, there has been a significant collection of gesture icon sets that have been made available to fill this need. The current crop of icons succeed in clarity, but they lack the iconic qualities necessary to act as a standard representation of gestures. My goal is to help create a foundational set of icons that are flexible, clear and distilled to a point where they could become a standard visual system to build from – ultimately to be used within apps for when explicit communication is needed.

Credits: PJ Onori

Here comes InVision, a simple click-through prototype building app. The tool itself is pretty light (in a good way) in that you do not design the actual pages in InVision. Instead, the idea is to design your screens in your other weapons of choice (Fireworks, Illustrator, Balsamiq, Photoshop etc.) and then upload them into InVision. Once you upload your GIFs, PNGs, or JPGs, the tool then allows you to create hotspots and link pages together. When creating these hotspots, you also are provided with a very useful ability to save them into templates for easier reusability.

InVision also comes with a few standard collaboration features. You can easily share a full prototype or individual pages through easily accessible links, which then can be commented on by the viewers. You can also invite additional designers if you need multiple people to work on the prototype.

One thing which becomes immediately apparent when using this is that a good amount of effort has also been put into designing the sleek interface. All the little tiny details in terms of interactions and visual design have been fine tuned. As an example, the upload process is quite smooth as files are drag and dropped from your desktop to the web app. Overall, a simple yet clearly focused little application!

Give it a try.

Happy World Usability Day from the guys over at Optimal Workshop! An awesome bundle of online usability tools is up for grabs on World Usability Day up until this Thursday, November 10! This year a bunch of User Experience (UX) organizations have put together a basket of complementary training and tools for the World Usability Day Bundle. The bundle is only available for 48 hours and includes an incredible package of UX tools at more than 70% off the usual price.

This year’s World Usability Day Bundle is priced at $1,370 (pretty much the same as last year) and includes more than $5,000 worth of subscriptions. The individual components of the bundle are:

1. Usability Professionals’ Association: 4 video seminars and a live webinar.
2. OptimalSort: Remote card sorting.
3. Treejack: Test and validate your IA.
4. Loop11: Test the user-experience of any website.
5. OpenHallway: Record a/v screencasts of user testing sessions.
6. SnapEngage: Live chat with your site visitors and customers.
7. ConceptShare: Markup visual designs collaboratively
8. HotGloo: Rapid collaborative wireframing.

Johannes Tonollo’s thesis project explores a number of interesting user interface transitions, and how they can be used to create meaning by complementing static UIs. They have been segmented into six categories: Orientation, Spatial Extension, Awaking Controls, Highlight, Feedback and Feedforward. The site has a large number of examples or patterns for each category that are pure inspiration. Interesting stuff! Traditionally, UI designers have been reinforcing meaning by relying on gestalt principles using proximity, alignment, positioning and contrasts. Johannes shows that these could be extended with transitions and the element of time. With CSS animations getting more and more powerful, these transitions don’t seem so far fetched any longer. Thanks Michael (@konigi) for finding this!

Credits: Johannes Tonollo

The guys over at WitFlow recently put together an Axure Cheat Sheet (PDF). It comes loaded with a bunch of potentially useful little shortcuts for the Axure masters out there (or shall I say, Axure FU Masters to be). Thanks for compiling & sharing this. :)

Credits: @WitFlow