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.

930 Vintage Vector Ornaments Set

December 16th, 2011

Vintage Vector Ornaments
In addition to the 750 Vector Icons for Web Designers, Vincent has also released 930 Vintage Vector Ornaments as set. The set comes in both EPS and AI files and is filled with ornaments, borders, corners, rulers and flourishes. :) Possibly useful for some projects? The bundle comes at a price of $39. Enjoy.

Credits: Vincent Le Moign

Fireworks Wireframing Kit

December 12th, 2011

Fireworks Wireframing Kit
Hannah just started the Fireworks Wireframing Kit resource site. It’s still hot of the press, but the blog is gearing up to be a collection of freely submitted PNG files submitted by the public to help with wireframing. So far there are a few grey scale files already with such components as: modal windows, login boxes, and buttons of various shapes and sizes. Right now you have to download each component individually, as you see fit. Hopefully it’s useful and please feel free to submit something if you have stuff to share.

Credits: Hannah Milan

myBalsamiq

December 5th, 2011


myBalsamiq has just launched last month and took the web based version of Balsamiq Mockups and extended it with a bunch of collaboration features. The sketchy wireframes can now be uploaded online and organized into projects which can then also be given one of the following four access settings: private, website, blog and wiki. The default setting, “private”, is the most restricted and makes projects only visible to the specified members you share your work with. Whereas “wiki” on the other end of the spectrum is the most open and allows anonymous users to comment on, and edit the work. This degree of collaboration offers quite the flexibility for a variety of projects.

More so, myBalsamiq also comes with the ability to version your work by means of a revision history, as well as allows for email based discussion groups for each project. The web version of balsamiq resembles the desktop version so closely that it’s hard to tell the difference. Overall, I think this move marks a natural direction for the already awesome and popular tool.

Have a look.