Step 4) Understanding the target devices /platforms – PART 2 of 4

“Do not get trapped in tools! Focus on the design problem & apply the best design practice”- was one of my mentor’s guiding principles on user experience design.

I believed in him. That was 2004 then. Web 2.0 had not yet hit Indian shores. The designers had very limited digital tools for wireframing. Microsoft Excel & Visio were the de-facto tools for digital wireframing. I never visualized that the mighty Excel could churn out interactive prototypes. I found a new respect for Microsoft Office applications.

Couple of years down the line, Web 2.0 was in everyone’s slidepacks, the social networking phenomenon caught attention of users (Orkut was the cool place to be), and mobile apps ecosystem made a grand debut. The digital product design required new set of tools, new hands & minds of the designers. New interaction patterns were designed & published every day.  Some designers of 2004 had to take a ‘T-shaped’ approach towards design. I am one of them.

Tools – old or new, the way to reach a digital prototype has not changed. Paper prototype is never omitted :). Digital prototypes are created after the paper prototypes mature.

What has changed is the way the tools / stencils / templates are used, in creating paper prototypes. Earlier, I used a blank canvas for sketching user journeys. Now, I use the following templates –

1)   Designing a web based application / portal / enterprise dashboard

Browser Template

Browser Template

The result of using this template is –

Usage: Browser Template

Usage: Browser Template

 

 

2)   Designing an iPhone application

iPhone Template

iPhone Template

The result of using this template is –

Usage: iPhone Template

Usage: iPhone Template

3)   Designing an iPad application

iPad Template

iPad Template

The result of using this template is –

Usage: iPad Template

Usage: iPad Template

4)   Designing an Android application

Android Template

Android Template

The result of using this template is –

Usage: Android Template

Usage: Android Template

Of course, there are multiple templates that you can choose from. Sample this: http://www.geekchix.org/blog/2010/01/03/a-collection-of-printable-sketch-templates-and-sketch-books-for-wireframing/

Remember, as the saying goes, “let’s not get trapped into tools” :). Achieve a fine balance between the UX design tools and the design philosophies. Get the job done :).

In our next post, let’s see how to sketch on the paper – how to conceptualize the user journeys.