Paper Wireframing is an article by Doug on his process work with an approach which relies very much on paper and scissors. A technique like this has been noted in the past to be engaging and collaborative. Perhaps what sets this method apart from the previous example, is the use of electronically generated content whose copies are then printed numerously for the generative session.

Doug writes:

The idea behind Pwireframing (again, wireframing with paper) was to make the regular wireframing process more modular and collaborative. Instead of having a designer simply follow the instructions of a strategist, we started by discussing all possible contents of pages as a group, including syndicated feeds Bethel is currently maintaining. We also made some decisions about feeds or content Bethel would be likely to bring online in the near future. After this, I drew and printed modular drawings of all of the types of content we talked about, and cut them into sets.

Read the full article.

Credits: Doug Gapinski

Here is a quick way of setting page boundaries on long scrolling pages. Aluísio has applied and made visible some sort of page crop marks on his wireframe. This approach could be used to give a stronger sense of the relationship between the wireframe and the page screen to show what is visible and what is beyond the fold.

Credits: Aluísio Barcelos

Naview is small web based tool, built by Volkside, for generating prototype like hierarchal navigational structures. The tool allows information architects to specify a tree based hierarchy using tabbing and line breaks, which spits out an interactive prototype of the navigation. Volkside state that with this little piece of software they try to “bridge the gap between card sorting and IA user testing”. Pretty cool!

Keith relies on a similar technique to the Stickyframes approach posted earlier. His approach differs in that it mixes a number of techniques together. These hybrid interface representations mix sticky notes with sketching, sketches with flows, and anything else he comes up he just posts up and groups on a wall in a sketchboarding manner. Here is what Keith writes:

I’ve been creating wireframes since the late nineties and in retrospect have always relied on hand sketching and rapid ideation to solve my UI/UX problems.

This example is not unlike the Stickyframes example currently posted on your site. The difference with my approach is that I use color to begin to organize the chuncks of content or functionality. I also attach sticky notes containing mindmaps, flows, or mini sketches of interfaces. The grouping of ideas and sketches stay put until I have sorted out the actual page layouts to be rendered in Visio or AxureRP. The result is a moodboard for ideas which allows me to swap out thoughts until ideas are fully baked. I’ve had success sharing these with clients and collaborative teams early on in the process because they appear to be work in progress.

While I love working at a larger scale on whiteboards, these are a portable alternative for negotiating screens.

Credits: Keith Tatum of Resource

Ta da. Three people entered last week’s contest for a chance to win a copy of FlairBuilder. The winner is Keith. I determined the winner by asking participants for a random number between 1 and 10, ordering their first names alphabetically, and counting through the names with the sum of the numbers provided. Congratulations! Here are the people who participated along with the provided numbers.

• Fabian – 7
• Keith – 6 – Winner
• Luis – 7

I plan on posting, Keith’s sample tomorrow, as well as hope to do another one of these sometime in the future. New ideas are more than welcome!

Ethnio is web based user research recruitment tool developed by Bolt Peters – a company which specialized in remote user research. The tool makes it super easy to create user recruitment screeners which can then be attached to any web site. The screener is basically a popup window that asks web site visitors if they would like to participate, followed by a few custom questions. Ethnio also comes with a control panel that allows the recruiter to see an overall status of the recruiting process, as well as the ability to contact the ones which are of most interest. Naturally, Ethnio can be combined with screen sharing software such as UserVue or GoToMeeting, for the actual remote research part. Great little tool!

Also, be sure to see the awesome screencast which explains the product perfectly in a humorous way. Ethnio also offers a trial for the first 20 recruits.

Often while wireframing, we delay considerations for exact sizing till later in the process. However, at other times, the designer may wish to portray some form of pixel dimensions explicitly. Here is one way to accomplish just that and communicate a wireframe’s dimensions, be it margins, widths, heights, or in between spacing. Lukas in his sample did this with the help of a few simple arrows and associated numbering. The nice thing about this approach is that it moves one step closer into putting a wireframe into some form of dimensional perspective.

Credits: Lukas Tomski

SketchBook Pro is a very nice little application which feels like it sits somewhere in between paper and the digital world. The tool is probably more geared toward people who are equipped with a pen and tablet that makes it a lot easier to draw with than with a mouse. After playing around with it for a few minutes, one advantage became apparent over traditional paper based sketching techniques. Sketching on an electronic canvas along with the power of layers and undos at your disposal, offers the ability to refine and change more flexibly than on paper. Sure, there are those people out there who will argue that all sketches should be kept and not erased so that the process is made visible. Nevertheless, sometimes little corrections still have to be made and software such as this makes it a breeze.

I’ve noticed a couple of other great features with SketchBook Pro. There is a ruler tool that allows you to draw straighter lines when required. Then there is the marker which looks great and has a similar effect to the water colour style of real world makers.

Grab the 15 day free trial here (and click to “software trials” item).

ProtoShare is a fully web based prototyping tool developed by a company called Site9. The third version of this product has been released in early April which brought forth improvements to performance as well as to collaborative aspects. ProtoShare offers such features as page templates, collaborative discussion, interactive prototyping, support for multiple states, drag and drop interface elements, and export functions.

A few features of ProtoShare also make it stand out from other tools on the market. For one, ProtoShare offers increased reusability of interface elements with the help of clippings. Clippings allow to save and store common pieces of an interface onto a flexible clipboard, which can then be pasted and repasted easily wherever required. Another interesting direction in which ProtoShare is moving into is by allowing to attach custom CSS styling to elements, and in turn providing greater flexibility. Being web based, ProtoShare also allows you to save your work online.

A few weeks ago, ProtoShare has also began experimenting with an iPhone prototyping mode that is currently in beta. By allowing users to export their prototypes into HTML, the software makes it easy to preview the resulting work in an actual iPhone. A detailed post on this topic can be found here here.

Signup for a 30 day free trial.

Craving some new UI design techniques, I decided to do a little call for participation that will end with a software giveaway. In return for some new sample submissions (from you), we’re giving away one full license of FlairBuilder – a cross platform wireframing tool. The winner will be determined randomly. Want to join in? If interested, here is what you need to do:

1. Submit your own wireframe, sketch, UI design technique, user flow, persona, time based interactions, or any other UI/UX design documentation or technique, by email to me.
2. In the same email, provide a number between 1 and 10 (which will be used to determine a random winner). :)

The draw will take place on July 20, and your sample has to cover a technique or approach previously not seen on Wireframes Magazine. By submitting, you should also be comfortable with me posting your work or approach online. Please send em in …