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

Job Postings

April 25th, 2012

Putting my commercial hat on I’ve just started a Jobs section experiment on this blog. Why not? To start off and populate a few listings, the first five posts will be free. So if you have a job you would wish to advertise, please email me: the company name, job title, link to job description and a location and I’ll post it. Cheers. Jakub

Justinmind Prototyper FREE 1.0 and PRO 4.5

April 24th, 2012


The other month, Justinmind Prototyper went ahead and split their pricing plans into two, with a paid pro and a free version. As a refresher, this is an advanced prototyping tool allowing for such things as rich interactions, data simulation, variable based and conditional rules (for both Mac OSX & Windows). They have also shared a few of their prototype examples online.

The Free edition is slightly lighter but still should be able to satisfy many designers’ needs. It comes with access to a wide library of iPhone, iPad, Android and web based widgets. Some useful widgets include: buttons, phone icons, date and time pickers, switches, status bars and keyboards. If those are not enough, users can also create their own libraries. Prototyper also allows the running of an interactive simulation after screens have been linked up. Other beneficial features might include grid controls, snap to grid and resolution guides. Finally, the Free edition also works with the subscription based Usernote online platform (for a monthly fee) which has now also officially left beta. The Justinmind Usernote service lets users publish, share, run tests and obtain feedback on their work in a collaborative way.

As for the latest and the greatest in the 4.5 Pro version, there have been some usability improvements as well as a few new features. For one, Prototyper now allows designers to organize work in layers (Photoshop hide and show style). Furthermore, the latest version also now allows multiple users to work on the same file together. In other words, these guys have built in support for performing file splits and merges. Pretty cool.

That’s the latest and greatest from this company. Download Justinmind Prototyper and give it a spin.

15 Dribbble UI Sketching Designers

April 23rd, 2012

Dribbble UI Sketching Designers
There are those who design, and then there are those who design in the open – enter dribbble.com. Although sharing a 300 by 400px image perhaps might work if you want to show off a shiny button style, maybe it isn’t always the best constraint for interaction type of work (flows, multiple screens, scenarios and stuff in between the screens). Nevertheless the other day I was looking through dribbble.com out of curiosity for some designers who might be doing a bit of UI sketching type of work. I guess I always find it interesting to look at how others sketch. Here is a bit of a list (including myself at the bottom) for those who might be interested. :)


Interface Origami

April 16th, 2012

Interface Origami
Juan has been recently playing with paper in order to explore some possibly new interactions. This person is trying to pinch, tear, flip, curl, fold, and peel UI’s in new ways just for kicks without the limitations of pixels. In a way this kind of stuff resembles paper prototyping a bit but probably focuses more on discovering new gestures. Either way, it’s an awesome way to think outside the box in my opinion, as tactile play breads creativity. Thanks for sharing!

In Juan’s own words:

In a previous post, I mentioned a way of thinking about interactions and interface within a framework of depth and space. The ideas were centered around the digital space, but as a designer I find it’s important to remove myself from that space and explore solutions that can originate in physical space.

One of the easiest ways to do this is to break out scissors and paper. With paper you can remove the constraints of working in pixels to fold, tear, flip, curl and manipulate the medium to discover solutions that may have otherwise been missed.

To illustrate this, I created a few examples based on some familiar apps and others based on former concepts I’ve played around with in the past.

Credits: Juan Sanchez

Foundation

April 10th, 2012


Foundation looks like an interesting open framework for building HTML, CSS and Javascript prototypes. It offers a quicker way to build prototypes as it comes loaded with code for grids, buttons, alerts, forms and error states, sliders (Orbit), and modals (Reveal). The project also feels like it has some github momentum. The makers of Foundation have also shown a few examples of their prototypes.

Have a look and see if it’s for yourself.

Credits: ZURB

InVisionApp: Starter Plan Now Live (1 Free Project)

April 3rd, 2012

InVisionApp: Starter Plan
The InVisionApp team over in NY just readjusted their pricing model to now allow the awesome Starter Plan. This little plan now includes one free active project, unlimited screens, and unlimited collaborators. A pretty cool way to give designers an opportunity to feel out the app for more than 30 days.

As a short reminder, for those who might not know what InVision is, I’ve written up a quick review of their prototyping app a few months ago. It’s a great tool for gathering feedback on sets of linked up screens. Enjoy!

Give the Starter Plan a try right here.

Speech Bubble User Flow

March 29th, 2012


The Speech Bubble User Flow by Barnabas, is a hybrid representation that combines a sitemap, persona and user flow all into one. The idea starts off by overlaying simple and short comments made by a persona in the form speech bubbles on top of a structured sitemap. More so, the speech bubbles are ordered chronologically and so flow through one by one. In the built Axure Demo that has been generated, the sitemap pages are also linked to the wireframes which makes it easier to switch from the generic to the specific. Barnabas has been exploring Personas that “could talk” in a few other forms as well, as the Complex Speech Bubble Persona and the Commented Sitemaps show.

My take on this deliverable would be that Personas can sometimes get lost once a project builds momentum. Possibly what Barnabas is doing is helping the Persona to live a little bit longer and inspire the team a bit more as the Persona’s comments pop up throughout the project. One thing I do wonder about is how this would work though if there was a second or third scenario for the same user type, as sometimes I feel that interactive projects are composed of many little separate user stories and not just one. Either way, good stuff and thanks for sharing!

If you would like to tweak the deliverable, the author has been kind enough to share the actual source Axure file as a downloadable template.

Credits: Barnabas Nagy