Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Creating prototypes for next-gen web apps

Wednesday, May 7th, 2014 by Servage

Click-Through Prototypes

Web and mobile app designers make use of various tools to express their creative ideas in a project. They must convey these ideas during the design process to clients, as well as other team members, i.e. graphics designers, UX designers, programmers, and sometimes a testing team.

More and more, this task of project communication is allocated to the UX designer, as complexities with design processing are increasing due to the advent of newer technologies and added intricacy in the project’s requirements. I have noticed that, historically, big teams and reputable companies use paper and/or whiteboards to draw wireframes and produce prototypes.

This method seems natural enough for wireframe production, where design personnel just delineates the basic ideas regarding features and functionality for the project. However, producing prototypes on paper is turning into an outdated practice, as graphic design software accomplishes this objective quite nicely.

Despite the new trend, most mobile and web design folks still use paper as the primary means for sketching graphical representations and then handing these rough sketches over to graphics designers, who in turn, create polished images to share with clients.

Why We Need Click-Through Prototypes

Paper or whiteboard prototypes can only convey a partial message with regards to our designs, as there is no accurate method depicting interaction. To bring life to the stationary prototypes, we have to employ modern techniques. Click-through prototype production is such a technique, which uses the latest tools, such as POP (Prototyping On Paper).

The ultimate benefit of click-through prototypes is that it saves time. You don’t need multiple drawings for the same screen, to show complex interactions with various hotspots or buttons. You also don’t need a large whiteboard to accommodate all screens, which then depict each feature and functionality involved in a single screen.

Indeed, click-through prototypes reduce the potential for more labor when frequent changes and iterations inevitably occur from the project’s expanding scope. Frequently modifying our drawings is the standard for prototyping, and click-through prototypes save time during individual or team meetings.

Smart White Boarding

When we are working on development for a large-scale web or mobile application project, it is normal business procedure to involve large teams  and combine staff meetings during project planning, especially during wireframes and prototypes preparations.

Modern tools like “eno” can greatly assist us by creating a collaborative environment, which offer out-of-the-box features for local as well as geographically distributed resources. Additionally, “Gowrite” can turn any surface into a non-digital whiteboard for a group meeting.

POP for Smart Prototypes

Currently, my office along with some friends’ offices use smartphones and tablets to draw prototypes, sometimes using Stylus and other useful software, such as Jot Pro, SketchBook Pro, etc. However, these are fairly expensive, as an infrastructure, or on paid membership. Instead, we prefer POP to upload our paper sketches. We use a camera to photograph drawings and then add hotspots using POP’s functionality.

POP members can create a free account for a limited project and then upload their prototypes on the Woomoo’s server for further collaboration with their own team members as well as other POP users, including their clients. Also, POP offers some editing tools for the sketch photos. This way, you can make attractive and interactive prototypes, without spending much time and cost.

POP allows you to distribute your prototypes using e-mails or social networking services. Though POP is not the only tool our team uses; the recently released “Launch” and the complicated, but useful “Protosketch” tools are also creating highly collaborative prototypes for us.

References & More Reading

Building Clickthrough Prototypes To Support Participatory Design
Are You Still Using Earlier-Generation Prototyping Tools?

Creating prototypes for next-gen web apps, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.