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

Axutopia – Axure UI widgets

March 21st, 2012

Axutopia
From the maker of Keynotopia, now comes Axutopia. This is a wide collection of Axure widgets and icons that can be used for prototyping, wireframing and UI design purposes. The whole thing can be purchased as a bundle, or libraries are also broken up individually. Sets are available to style: iPhones, iPads, Windows 7, Mac OSX, Web 2.0, Facebook, Blackberries, Android, and Windows Phones. Here are the details:

  • 3,000+ Axure widgets
  • 100% Royalty-free icons
  • Fully editable text labels
  • Pixel-perfect PNG groups
  • Preserved corners with transparency
  • Comes in .rp and .rplib formats

Get It Now

Credits: Amir Khella

Proto.io V2 – Silly-fast mobile prototyping

March 15th, 2012


Proto.io V2 is here. Since the last review, within a few short months these guys managed to release the next version pretty quickly. The new release has a newer UI with some improvements (ex: bigger and clearer buttons for the 3 core sections: Screens, Templates & Containers). The supported mobile devices have also been expanded to accommodate for the Android platform, and now include the following:

  • iPhone 3/3GS/4/4S (320×480)
  • iPhone 4/4S (640×960)
  • iPad 1 and 2 (768×1024)
  • Android Smartphone (480×800)
  • Android Tablet (800×1280)

More importantly, version 2 now also allows HTML exporting. So considering some developers use PhoneGap which takes in HTML as input, it’s now easier then ever to create standalone and deployable prototype apps. Cool stuff!

Decided to embed their awesome promo Vimeo video for a quick high level overview. :)

Visit proto.io to give it a try.

Wireframes Old & New

March 2nd, 2012

Wireframes Old & New
There is a bunch of articles out there that raise some of the problems, disadvantages and limits behind wireframing. Here are at least four such write ups that I’ve come across lately. Although many of the authors invoke “death” analogies, please don’t be put off as most articles are quite constructive. :) I doubt wireframes will disappear altogether, but instead are probably undergoing a transition of sorts.

Sketch More, Sketch Better: The Buzz at Interaction12

March 1st, 2012

Article by:


I am a sketcher. I recently realized quite how much sketching defines what I do when someone pointed out to me that I rarely present any work without a pen in my hand. Whether I’m drawing on a whiteboard or quickly sketching on paper sketching that helps me to illustrate what I’m talking about. So it was an interesting challenge when I was asked to present a workshop at the Interaction12 conference in Dublin, where I would be doing the talking but the participants would be doing the sketching.

Looking at the number of workshops and presentations at the conference that were related in some way to sketching, and the number of people who have viewed my presentation slides on Slideshare (nearly 70k views in just over a week), I think it’s pretty safe to say that the perceived lack of sketching skills in the digital design community is something that has obviously touched a nerve. With all the rhetoric around collaboration with coders and clients through sketching, and the focus on lesser deliverables, this was obviously well timed.

I do believe that by breaking the ‘art’ of sketching down to a set of basic techniques that can be practiced, anyone can create sketches that not only do a good job of communicating but also look good. But before I dived into the practical side of the workshop I spent a bit of time asking people to think about 2 really important aspects that underpin all of the techniques that I was about to share: ‘what is a sketch?’ And ‘why sketch?’

What is a sketch? (and what isn’t?)

Firstly, and possibly most importantly, I like to make a distinction between sketching and drawing.

A sketch is not the same as a drawing in 2 important ways: execution and intent.

Aside from the obvious wiggly lines vs. straight lines type of differences, it’s easy to look quickly at something and decide whether it’s a sketch or a drawing. Quality and fidelity are easy markers but there’s more to it than that.

Unlike drawings, sketches aren’t precise and often include mistakes or corrections. A drawing is closer to a finalized design or idea. From a drawing you can get a good idea what the whole thing will look like. And that’s often what stops people picking up a pen. Half of the time when people are reluctant to sketch it’s because they are scared that their sketches will be judged by the same standards we use to judge a drawing or a polished design.

A good sketch doesn’t try to describe everything in detail (the bit that counts is ‘in focus’ and the rest is vaguely described for context), but it gives you enough information to get the point across.

When I sketch I’m not looking to create a beautiful, polished or even finished object (sketches can be beautiful, but they don’t have to be). What I’m trying to do is to capture an idea so that I can communicate it to others and explore whether or not it works. I’m not trying to do visual design on paper. We’ve all been in scenarios where the bottom line is boss and thinking time is seen as a luxury. If I’m spending time articulating all of my ideas in high fidelity on paper, it’s going to take way more time than I have.

The point of sketching is not to produce polished outputs, it’s to explore, challenge and validate ideas. That’s not to say that sketches can’t look good. They can, and with a bit of practice they will. But it’s not so much about what they look like as what they allow you to achieve.

Fast and free

I like to sketch because it’s quick and free (and not just in the financial sense). I can explore ideas on paper much quicker than I can in Illustrator or other tools and I’m not tempted to fall back on libraries of stock elements to solve problems because it’s easy.

Plus, the temptation in doing things digitally is to make things too neat.

When I am about to sketch on paper, knowing that it will be harder to undo, I hold myself back and think twice before the ink or lead leaves a mark … When I sketch electronically, this worry disappears as I know that I don’t have to generate the right ideas, but instead can easily correct myself if something needs adjusting. [Jakub Linowski]

Show your workings

I’m not against sketching digitally. If you can work as quickly as you can on pencil and explore as many ideas in the same way, then the medium isn’t really the issue. My worry is that working digitally encourages us to tidy up and erase mistakes, when often the mistakes are just as important as the final idea. If we are constantly hitting undo, all of those mistake are lost. We end up with a polished final sketch, but no record or evidence of how we got there.

When we’re reluctant to capture our ideas as sketches, often those ideas don’t get captured or aren’t explored as fully as they might be. Sketching is a really useful ideation and communication tool. The ‘art’ of sketching can be learned and practiced, but the real value is in the generating of ideas and the discussions around those ideas that sketches prompt.

Sketching shouldn’t always be solo

Jakub makes a really nice point in his piece on digital sketching:

Looking back, sketching has been wonderful at giving rise to design
representations that naturally act as conversation starters

I agree wholeheartedly with this. When I start to address a design challenge, my sketches are much looser and lower fidelity, but still enough to prompt and aid those conversations.

Sketches do not have to be pretty, beautiful or even immediately understandable by others. However, you should be able to explain your sketches and ideas when anyone asks about them.

– Sketching User Experiences [Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt & Bill Buxton]

Often the sketch will develop and evolve over the course of the conversation, as per Jakub’s point here:

Perhaps the use of paper can still be justified in collaborative sketching sessions when there‘s more than one designer at the table and the design activity happens simultaneously in real time.

I am a big advocate of this style, with one significant difference. I’ve seen this work successfully (and often) where the collaborators around the table aren’t just designers. Some of my most successful ideation sessions (for generating good design based around insight) have been when there have been designers, clients/stakeholders and developers all contributing and sketching – not just the designers.

Part of the beauty of sketching is that it doesn’t look like the finished product. It’s like creating wireframes with ‘wiggly’ sketch lines to reassure the client that this isn’t what it’s going to end up looking like – except you’re actually sketching rather than making your digital version look sort of like a sketch. The key thing here is that people don’t mind scribbling on a sketch to show you what they mean. And then you’re on your way to collaborative design. Happy days.

Sketching in code

I heard the phrase ‘sketching in code’ mentioned more than a few times at IXD12. In his presentation, Jonas Löwgren talked about (and showed) how really complex interactions can sometimes be best communicated by building them out (show don’t tell).

Although I don’t disagree with this, I don’t think it’s always necessary when we’re dealing with less complex interactions, as many of us are compared to the things Jonas demonstrated.

Committing to building something (as opposed to sketching it) definitely restricts the way that I design. It certainly takes me longer to build it than to sketch it, and as a consequence I find myself exploring less ideas. Plus, if I’ve spent time building something, I’m more inclined to keep elements and re-use them rather than starting from a blank slate. Perhaps this is a symptom of me needing to get more comfortable in code the way I am encouraging people to get more comfortable with a pen or pencil?

Sketch more, sketch better

So, in short: sketching is good, mistakes are ok, neater isn’t necessarily better and when it comes down to brass tacks, good well thought through ideas are what counts.

Like anything, the more you practice, the better you’ll get. There’s more about what is/is not a sketch as well as some basic techniques and exercises in my Sketching Interfaces workshop sides.

Credits: Sam Smith

Remote Collaborative Sketching

February 25th, 2012

Remote Collaborative Sketching
Jeff recently has been experimenting with a remote sketching technique in a distributed team scenario. In the article, he describes the setup, technique and learnings in great detail. Interesting things that were mentioned included:

  1. use of multiple Skype accounts, cameras and dual monitors (to see both the sketches and the team in parallel)
  2. initial priming of participants
  3. use of an excel spreadsheet for rapid idea generation
  4. use of 1 and 6 screen per page templates
  5. facilitation of a 8 person team

Awesome work and thanks for sharing!

Credits: Jeff Gothelf

Sketching Interfaces Workshop Slides

February 3rd, 2012

Sketching Interfaces Workshop
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 6

January 13th, 2012


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.