Android Honeycomb Stencils and Resources

I have previously posted numerous mobile stencils and wireframes, but with Google’s recent release of the new OS, we designers need the new tools:

Android Honeycomb Stencils & Sketchsheets

android tools

Google recently released their OS designed specifically for tablets: Android Honeycomb. This is a set of stencils & sketchsheets to help you get started mocking up your GUI’s.


android tools

DroidDraw is an online tool to help you easily build graphical user interfaces for the Android cell phone platform. There’s also a standalone executable available for Mac OS X, Windows, and Linux. This is a really quick way to emulate your application with almost no need to know code and focus strictly on the interface. Continue reading

3 Obstacles When Presenting Wireframes

Based on my past experience with presenting wireframes to stakeholders, I believe many designers and UX specialists run into the same issues related to persuasion, understanding and collaboration. Here are some ways to mitigate some of the challenges of these wireframe review meetings.

Some content originally posted on Design Festival by Emily Smith

Wireframes are intended to lay the groundwork for design open up dialogue, establish direction, refine scope, and create a sense that progress is being made on a project.
In order to do these things it demands the right preparation. Here are issues to be aware of for your next presentation.
  1. The Problem of Abstraction

  2. Some people are abstraction geniuses, but for the rest of us it’s mental gymnastics. For example, I used to work with a product designer who made high end tools that looked like they came from outer space.During his paper sketching phases, it would be impossible for me to get a feel for the final product. The 3-​​d renderings were easier to digest, but nothing compared to holding the final product. It was always interesting to see where I was off on my assumptions about how the tool would work, feel, weigh, and look.

    A rendering of a paint sprayer and a photo of the final product
    One of his renderings vs. the final product, used with permission

    Similarly, as soon as any type of mockup or sketch of your web site is presented, each person who sees it begins constructing a different vision in their head of how the final product should look and feel. Assumptions and heuristics allow us all to function with efficiency in life. You, your clients, and team members are all employing these mental tools during the project. This is perfectly reasonable behavior, but it creates risk for unmet expectations. We have the ability to lessen this burden, though, and I’m going to flesh out specific ways to do this in my upcoming posts.

  3. The Power of Suggestion

  4. A means of persuasion. Your wireframes and the way you present them are a powerful tool of influence that steers the whole project. If your solution is slightly under-​​baked but you’re a great salesperson, you may be able to push through to approval (possibly against the best interests of the project). On the other hand, you might have a great solution but be unskilled at selling it with confidence and enthusiasm and so it isn’t as well received. Thankfully, we have a way to help minimize this problem. Continue reading

Rapid Wireframe Sketching in Google Docs

posted in googledocs blog

Morten Just is a product manager in Vodafone. Based in Copenhagen, Denmark, he spent most of his career as an interaction designer churning out wireframes and diagrams, and also co-founded Imity, a Bluetooth-enabled social network for mobile phones in 2006. On his personal blog he writes mostly about user experience.

When I saw Google drawings on a Twitter update a few weeks ago, I didn’t really think about it until I got a feeling I might not have understood a rather complex problem at work. I drew a diagram and asked my colleague to edit it in case I had misunderstood him. It worked out well, we’re still using the drawing as a basis for discussion, and it is constantly being refined as we go along. So taking the next step and trying out a wireframe was an obvious decision.

For quite a while I’ve been wanting a simple and fast way to burst out interface ideas, and then quickly share them with my colleagues in Düsseldorf and London. Since a relatively large portion of a wireframe looks like something I’ve sketched out before, I figured modifying a template like a list view or a landing page would speed things up.

In fact, I wanted to speed it up to the point where I all I had to do was to add a few words before I had a wireframe.

From the templates I extracted the scroll bars, buttons, and sliders and put them in the gutter outside the drawing’s canvas, ready to be duplicated and dragged onto the wireframe.

Here’s a generic page displaying product details:

… and a typical mobile phone drill-down of items in groups:

To begin working on a wireframe

  1. Open the template you want to use
  2. Click ‘Sign in’ in the upper right
  3. Choose file > make a copy
  4. Make your wireframe

Packing it up

When you have several individual wireframes it can be a neat thing to pack them all up into one single document that you can send around, have people print out, or even present in meetings.

Since there’s no way to import a drawing into a presentation yet, here’s a trick using the web clipboard feature. You’ll still be able to edit the imported drawing should you need to.

  1. Go to File > New Presentation. A blank presentation opens in a new window.
  2. Switch back to your drawing and select everything.
  3. Click the web clipboard icon > Copy to web clipboard
  4. Switch back to your presentation and paste your drawing using the web clipboard.

Building the library

I’d love for this to be the beginning of a shared wireframe template repository in Google Docs. For now, I’ve shared a folder in which I’ll add user contributed templates and stencils. Get in touch if you want to contribute.

I hope you’ll enjoy the templates and that it will help you actually sketch out your ideas rather than just describe them in words. As Dan Roam said in his keynote at this year’s IA Summit, “The person who draws the picture wins.”


Posted by: Morten Just,

Using Fireworks to Create Wireframes

fireworks wireframe

The latest addition to Adobe TV are a series of instructional videos about using Fireworks to make wireframes and other interaction design deliverables.

Adobe really is trying to court the IA community and I, for one, am grateful for the resulting information.

Check out the videos HERE

New Wireframing Tool

Pencil Project screenshot
It looks as though we have another tool available through GPL (free) that will allow for everyone to make GUIs and other prototyping without the CS3 expense.

I have yet to test it out, but will comment with reviews after I try it.

Please let me know your thoughts as well.

The software as well as tutorials and support are available here: