Large Canvas Flows + With References

September 4th, 2012


I like spacious canvases with non-linear flows, and here is a work sample from a fellow designer which shows just that. If one can move away from the outdated convention that interaction designers create screens, towards what Bill Buxton calls the stuff “in between the screens”, then it doesn’t take long to realize that larger workspaces are the way to go. In this example of a mobile app, Anton used Omnigraffle and some inspiration from UML to pull off a few interesting things which I thought might be worthy of highlighting:

  • Merging of wireframes with flows. As the above artifact mixes readable screens with flows or user actions, the element of time and narrative begins to emerge. Since the flow diagram is inseparable from the wireframe, it also saves the designer from the extra effort of synchronizing multiple documents.
  • Transition references. Although not visible in the sample, the blue circles are actual links to .mov files that show short video demos of the transitions. Wires plus video feels fresh!
  • Screen references. All of the screens have an ID tag, and occasionally actions lead to screen references instead of full screens – a way of reusing and again minimizing duplication efforts. Also each screen links to a folder with source PNG layout files.
  • Action references. Most user actions here also have an ID with a distinct style and can therefore also be referred to.
  • Starting Point. Since the canvas is quite large it has a clear starting point to guide the viewer.
  • Layout structure. In the top right of the canvas, the core structure of the layout along with some popular components are explained.
  • Toggle-able layers. Various information is kept separate on distinct layers and so that it’s possible to toggle it on and off for various audiences.

In comparison to the above, I have to say that the way in which I do my work is very similar by relying on cross document references. This hierarchical documentation structure (where wires cover the widest scope and prototypes the narrowest) allows designers to focus on what’s necessary at a particular level of fidelity. Below is how I reference visual design mockups within wireframes or sketches (with an “Also See” + filename tag). Again, keep in mind that in my case, only certain screens need and/or have references to more detailed assets.

Anyhow, thanks Anton for sharing!

Credits: Anton Volkov (main sample) & Jakub Linowski (second sample)

Fluid UI, Mobile App Prototyping

August 21st, 2012


Fluid UI is a new browser based, HTML5, mobile app prototype tool released the other month by a small and skillful team from Dublin and Berlin. The tool is blazing fast and at the outset allows users to work in two modes. One of which provides an overview of various screens and their links from a bird’s eye view – great for screen flow design. The other more detailed page level view is accessed by clicking on any particular screen, which then brings a close up of it – great for detailing, and actually designing the screens. In the screen design view, users can rearrange standard iPhone, Android and Windows 8 (their newest addition) elements and components by dragging and dropping from a wide wireframing library. A great number of wireframe samples from their libraries can be seen in their extensive flickr stream. The transition between these two views also happen pretty seamlessly as well which adds to the experience.

As users zoom back out to the screen flow design view, all of the links between pages are explicitly made visible as directional arrows – something I’ve come to like and also very much do in my personal style while designing.

Other features also include the ability to incorporate gestures and design for hand-held devices. Out of the box screens are available for a number of mobile platforms, with precanned components for iPhone, iPad, Android, and Windows 8. For those designers that wish to work with their own assets, the tool also allows to upload custom images for use across screens. Mockups can also be previewed and exported as HTML, PNGs or PDF. With the tool being native in the browser, a degree of collaboration and sharing is also possible. More so, the guys have also release an Android App to allow previewing of your work, as well as the ability to setup and scan QR codes related to projects.

Pretty Slick! Give it a try (in Chrome & Safari).

Credits: Dave Kearney & Ian Hannigan

How I Sketch: An Introduction

August 15th, 2012


I’ve decided to do a screencast of How I Sketch and the style that came to be known as the Interactive Sketching Notation. It’s around 13 minutes in length going over the basic concepts, some of the key benefits, as well as an example of a real world project. The video is in HD so you might have to expand to full screen in order to experience the real deal. Somewhere at the end you might also find a few minutes of attempted real time UI design. :) Let me know if it’s useful, and if it is, I might do another one of these in the future. I’ve also setup a Vimeo Channel for this just in case. Enjoy. Cheers.

If you need the Adobe Illustrator template, you can purchase it right here for $29.

Credits: Jakub Linowski

PowerStory

July 23rd, 2012


PowerStory is a PowerPoint UI requirements tool that Martin has been closely working on and recently released as a plugin for Windows 7, MS Office 2010. The main goal here is to save project time/budget and also improve the accuracy of your requirements and test cases, which is applicable to both small and larger teams.

First of all, it combines written use cases with visual storyboards all within PowerPoint. It does this by associating a PowerPoint slide with each use case step in the main flow and alternate flows defined using PowerStory’s step editor (see the right hand side of the image above).

This more flexible approach enables you to define realistic user interaction behavior, making your requirements more accurate. In addition you will save time because a lot of use case steps and therefor UI mockups will be reused, when compared to traditional linear storyboards.

Secondly, PowerStory also can be used to auto-generate test cases into TFS (Team Foundation Server – Microsoft’s software lifecycle system) directly from the Storyboards. What are test cases? You know, those things which tell you if your big and complex software is on track. The uses cases which are written inside of PowerStory are also tagged as “system” or “user” which then translate into either a UI event or a user action inside of TFS’s as test cases.

PowerStory is a unique approach that can work in both small agile teams and larger enterprise teams, because it combines traditionally separate deliverables into one saving time and increasing agility, but also has the ability to generate test cases for formal testing teams or small agile cross functional ones. And after all it is based on PowerPoint, which is already on most desktops, so it is easy to share your work.

So if you write requirements, wear the Business Analyst or UI/UX hat then give this fresh approach a try.

Here is the five day trial download.

Credits: Martin Crisp

Wirefy

July 12th, 2012

Wirefy
Wirefy has been recently released by Christopher over at github. It’s a collection of functional responsive HTML snippets and templates which scale as you resize the browser (hence across devices). Hopefully beneficial to those who build HTML prototypes. Good work. Thanks a thousand for sharing.

From the website description:

Wirefy is a collection of CSS & JS files to help you rapidly experiment with responsive wireframes. Whether you keep them to yourself or use them to help educate your clients, Wirefy is flexible and here to help. Wirefy has been built from the ground up. Following the philosophy of mobile first, Wirefy will respond to the proper viewport. Go ahead, resize this page to see how it works. Wirefy is style agnostic so that clients don’t get hung up on colours, fonts, other design elements. It’s meant to be another tool for your development kit that provides the most basic styles as a foundation.

Credits: Chris Da Sie

Minicons

June 26th, 2012

Minicons
Some time ago, Vincent released Minicons (after his Vectorian release) which I thought might be worth a mention for the UI folks out here. It’s a set of 1500 icons in many many different forms ranging from EPS, to Photoshop CSH, to PNG, PDF, Omnigraffle, Keynote and Powerpoint. The icon packs are sold in flexible plans ranging from 100, to 750 to the ultimate 1500 icon sets and priced accordingly. Cheers.

Credits: Vincent Le Moign

Sketchkit

June 22nd, 2012

Sketchkit
Sketchkit was recently shared as a freebie by Navjot. The kit is a wireframing Keynote template loaded with a bunch of UI elements. A nice alternative to the other growing templates out there. Thanks for sharing!

In his own words:

Wireframes are meant to explore the purpose and functionality of a product. Wireframes are not supposed to imitate the final user interface. In fact, laying too much importance on how the product will look while wireframing can be distracting for the researcher and misleading for the client.

Credits: Navjot Pawera

UXToolbox

June 14th, 2012


Andrew, an enthusiastic, passionate and friendly developer, asked me the other day to share his excitement and write up a quick mention of his latest accomplishment – UXToolbox. This simple, easy to use product is another alternative wireframing and prototyping tool packed with features and worthwhile of consideration. How is this one any different you might ask? Well, off the top at least two things do stand out which are the Fingertip Emulator and Interaction Cues. The Fingertip Emulator turns the cursor into a larger circular overlay with the size of a typical finger. This becomes an interesting way to evaluate a mobile or touch-based UI quickly and see if the elements are possibly too small (never seen something like that before). The Interaction Cues feature on the other hand is an option that can be enabled and turns any hotspot into a visibly pulsating animation – as seen on the many sample prototypes. This way, viewers of an interactive prototype no longer have to blindly search out where to click.

UXToolbox comes ready to use out of the box, but can be customized when needed. The large number of screen templates (ranging from iPads, Nintendo, Phones, iPods, and other Tablets) packed with a wide range of standard UI widgets and elements, can be used to start generating wireframes straight away. For those that prefer a degree of customization however, new backdrop screens for other devices and different working resolutions can all be added.

Another aspect of the tool I like is its capability to switch between a simple sketchy, more traditional wireframe view and a high resolution, pixel-perfect view which looks just like the real thing. This works great if you want to start refining your screens or to get a feel for the finished design.

For sharing and collaborating, the design tool also has a customizable commenting and annotation system in place. As seen before, comments take the form of post-it like notes, however what’s new is UXToolbox has 6 different color options. Andrew tells me the idea being that different color notes can be used to capture different types of information e.g. User Steps, Questions, Ideas, Assumptions, Requirements, etc. There is also a wide range of exporting options available. Users can export to PNG, Word, HTML, XML or three different types of print out styles. The Word export also boasts the ability to include the coordinates of the UI elements placed on a screen in a nice little layout table.

A good bit of work for such a young startup! Thanks for sharing Andrew. Want to give it a try? There is a 14 day trial download available for the Windows platform (which apparently has also been successfully emulated on MAC with VMware or Parallels). A little bird tells me there may also be a MAC version available later in the year.

Two Thumbs up! :)

Credits: Andrew – SoftandGUI

Living CSS Style Guides & Pattern Libraries

June 4th, 2012

Living CSS Style Guides & Pattern Libraries
A number of tools have recently sprung up with the aim of generating and maintaining one’s own CSS Pattern Libraries or CSS Style Guides. Living front-end CSS style guides can especially be quite powerful if done right. Guides help to decrease the amount of UI waste that is generated by minimizing the need for detailing similar screens over and over and relying instead on reusable elements. Detailed visual mockups still make sense for a few initial stylistic explorations. However, when teams over rely on detailed screens to communicate UI ideas, things start to duplicate, fragment and slow down. Living CSS guides are tools that could potentially work with wireframes, by placing common emerging UI elements and patterns into one shared place.

Here are a few interesting and emerging tools which I found that might help with starting your own CSS Pattern Library:

  1. Pea.rs by Dan Cederholm (github) – a WordPress theme that basically turns your blog entries into interface pattern pairs of HTML & CSS. It comes with a few default patterns and the UI looks slick. The one disadvantage is that people would still have to transform the pattern library from WordPress into a real workable common.css file that could be used on a real project. So for maintainability, the pattern library and the actual CSS is a bit disconnected.
  2. Knyle Style Sheets by Kyle Neath (github) – a documentation standard for writing more understandable CSS which auto generates a style guide. You start off by writing your CSS and then with some Ruby on Rails help, the CSS file can be automatically turned into a guide.
  3. Pattern Response by Luke Brooker (github) – a PHP script that takes patterns defined from folders and generates a style guide. Each pattern can be composed of HTML, CSS and a potential description.
  4. Pattern-Primer by Jeremy Keith (github) – also a PHP script which automatically generates CSS patterns.
  5. Kalei Style Guide by Thomas Davis (github) – this project aims at making sure your style sheets are fully documented whilst being synchronized with your webpages styles. To do this it actually uses your live stylesheets in so that at anytime you can review how your styleguide looks.

Credits: Dan Cederholm, Kyle Neath, Luke Brooker, Jeremy Keith and Thomas Davis

Multi-Device Layout Patterns

April 30th, 2012

Multi-Device Layout Patterns
Multi-Device Layout Patterns is a short compilation of a few common layout patterns by Luke Wroblowski after he has gone through the Media Queries site. The article contains 5 high level layout considerations that could work for when dealing with responsive wireframes. A great inspirational read for those who like to respect flexible screen widths.

Credits: Luke Wroblewski