Wireframes Magazine » Inspirations

Sketching Interfaces Workshop Slides

Jakub — Fri, 03 Feb 2012 14:25:31 +0000

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

Meaningful Transitions

Jakub — Mon, 07 Nov 2011 13:31:31 +0000

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

Personal Pattern Books

Jakub — Fri, 27 May 2011 12:49:22 +0000

A few weeks ago, I started a personal pattern project which I’m finding useful and thought to share as a potential design activity. After grabbing a blank notebook, I basically began sketching out and writing down various examples of interesting interactions I find all over the web. The idea isn’t completely new as design and interface patterns have been around us for quite a while now. In fact, some really awesome collections have sprung up that are great for designing interactions and interfaces. If you’re seeking inspiration from these publicly available pattern libraries some existing resources include:

By personalizing these patterns however, there could be a few added benefits beyond just observing other people’s work passively. For one, I’m beginning to notice that after drawing out some selected examples it becomes easier to internalize and remember them later on in the future. When working on projects, these sketched patterns tend to emerge from memory more vividly than ones that were just seen somewhere. Secondly, when recording these patterns personally it is also possible to gain another chance at practising and evolving your own personal sketching style. Patterns are a great source of more complex user-interface interactions which may push the boundaries of your visual communication and sketching abilities.

There is no set standard on how to record them. Some things which I thought might be useful to include were elements such as: a title, a few screens (tied together with user actions), a simple description, a date, and an example URL. But really, these being personal, it’s all up to you to come up with your own style. So go ahead and grab that fresh notebook …

Credits: Jakub Linowski

Recommendations for Usability in Practice – Card Set

Jakub — Thu, 27 Jan 2011 14:12:30 +0000

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

500 Storyboard Tutorials & Resources

Jakub — Fri, 19 Nov 2010 14:49:58 +0000

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

MOObileFrames

Jakub — Wed, 03 Nov 2010 16:00:15 +0000

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

SketchWizard

Jakub — Thu, 21 Oct 2010 17:23:14 +0000

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

ILoveSketch: 3D Sketching

Jakub — Thu, 24 Jun 2010 14:11:35 +0000

ILoveSketch is a 3D curve sketching system done as an academic project by a few University of Toronto students. The software tool looks like it allows designers to draw out concepts using a tablet based system while automatically approximating the drawn curves in a 3D space. Designers can easily zoom, pan, and tumble through their work space as well as make use of a few gestural interactions for deleting and redrawing lines. Unfortunately, I wasn’t able to actually find the download option to try it out. A design tool like this is perhaps geared more at industrial or product designers, and less so UI interaction designers. Nevertheless I still wanted to share it as I think it’s something really unique and perhaps a bit inspirational. Makes me wonder what a 3D UI wireframe would look like. :)

Credits: Seok-Hyung Bae, Ravin Balakrishnan, and Karan Singh

Nonlinear Books

Jakub — Mon, 19 Apr 2010 13:25:41 +0000

The other week while discussing the idea of narrative with Bob, he reminded me of the Choose Your Own Adventure books from the 80-90s. These types of books basically are written in a second-person point of view and readers are given choices requiring to flip back and forth throughout the book. As the plot unfolds, readers also may find themselves finishing with various types of endings, with some being less desirable than others. Looking for examples of CYOA books I also came across a superb narrative visualization project by Christian Swinehart. Christian analyzed a couple of these books and began comparing which pages are composed of pure story, decisions and endings.

What does all of this have to do with the remaining design artifacts scattered throughout this blog? I think books like these through their combined use of nonlinearity, choice and guidance raise a few interesting points around how our time based (flow) deliverables could potentially look like and behave. What if readers of our deliverables were guided through a set of predefined flows? What if the flows we design required readers to make choices in order to achieve multiple endings? On one end of the extreme spectrum we have passive documents such as wireframe decks where there is often a single thread of experience. Here we have guidance, but no choice as we flip from the first page till the end. On the other hand of the spectrum, we might have a fully interactive prototype. Here we have zero guidance and tons of choice (perhaps even too much). Could this more balanced combination of guidance and choice then be a more powerful means of conveying interaction and narrative in our field? I’d think so.

Credits: mewrite (flickr image), and Christian Swinehart (visualizations)

Use Case Maps

Jakub — Fri, 19 Feb 2010 14:15:14 +0000

Speaking with Greg the other day I learned about Use Case Maps. This notation which has been initially the work of Raymond Buhr, has its roots in software engineering and perhaps could be an area to draw inspiration from. Use Case Maps intend to convey sequences of events by showing the paths of users over a backdrop of structured system representations. With these flexible scenario-like visualizations, software engineers ensure that the element of time is considered. As part of the notation, Use Case Maps have starting and stopping points and can also branch out. It seems like Daniel Amyot has contributed to this work as well and has published a decent Quick Tutorial with a reference guide at the end. In a nutshell, here is what Daniel writes about the philosophy of UCM:

The Use Case Map notation aims to link behavior and structure in an explicit and visual way. UCM paths are first-class architectural entities that describe causal relationships between responsibilities, which are bound to underlying organizational structures of abstract components. These paths represent scenarios that intend to bridge the gap between requirements (use cases) and detailed design.

Credits: Raymond A. Buhr & Daniel Amyot