January 27th, 2011
Here comes another awesome design related card set. This time it’s from Jasper who has recently been doing a PhD thesis over at TU Delft on the topic of Managing Product Usability. As a side effect of his time spent dug up in the subject, he has summarized some of his key ideas as recommendations in a card set format (PDF download link at the bottom of that post). The set is composed of 25 recommendations which are organized by themes pertaining to: Usability, Process, Team, Project, Company and Market. It’s an inspiring piece of work that might be of use to all those thinking of usability in the larger context of an organization or business. Thanks Jasper!
Here is how he explains it himself:
Based on learnings from the case studies as well as on existing literature on usability in practice, I wrote 25 recommendations for industry that describe how I would organize product development if the goal is to make usable electronic consumer products. The recommendations were ‘user tested’ by product development researchers and practitioners.
Credits: Jasper van Kuijk
January 10th, 2011
The gesture library from gestureworks has been recently expanded to contain a total of 200 illustrations. The library now contains multi-touch as well as stroke gestures in a variety of bitmap and scalable formats. It’s loaded with swipes, drags, flicks, holds, scrolls, taps, and even 3D gestures. For showing stroke direction, they’ve come up with an interesting way of starting off each stroke with a blue circle and ending with a red one. Pretty cool and inspirational ways of showing off user actions.
January 6th, 2011
The time has finally come to update the Interactive Sketching Notation for the new year. This time around it now comes with an Adobe Illustrator template that’s loaded with swatches, character styles, and symbols ready for use. The whole sketching system has also been elaborated to also include such things as: variation, notes, scenarios, and multiple user types. The notation can be applied for use with traditional pen and paper media but has advantages when using a computer and a tablet.
Please let me know how you use it or if you have recommendations. Enjoy.
Updated: to work with Illustrator CS4 and CS5
Credits: Jakub Linowski
December 20th, 2010
Here comes Wirify (or here). It’s a great little bookmarklet tool brought to you by Volkside that renders wireframes from any web page with a click of a button. Typically we’re accustomed to moving from wireframe to visual design to finished product. The wirify script however flips this around enabling the movement from finished HTML back to wireframe. I think it’s just awesome when people upset the linearity of design processes. Great work! So, why would anyone want to do this? Jussi writes:
There are some compelling reasons for viewing a live web page as a wireframe:
1. The wireframe allows you to step back and see the big picture. By tuning out the detail it lets you study the building blocks of the page and their relationships.
2. The wireframe is a great learning and teaching tool. Many of the design concepts that underpin page layouts become easier to identify and analyse in a wireframe. Think visual hierarchy, whitespace, symmetry, chunking, grid systems, golden ratio, rule of thirds, etc. etc.
3. The wireframe is a useful redesign tool that stops you getting bogged down in detail in the very early stage of a website redesign project.
4. The wireframe looks cool. You can now turn all the live sites in your portfolio into large wireframes and plaster them on your studio walls ;)
Credits: Jussi Pasanen
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
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
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.
November 12th, 2010
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
November 3rd, 2010
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
October 26th, 2010
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