Design Better, Faster and Smarter – 7 Tools for Rapid Prototyping on Mobile Devices

A popular idiom states that a picture is worth a thousand words. Well, isn’t that the truth? e-Learning professionals thrive on the challenge of bringing ideas to life in visually compelling mobile and responsive designs. How do you take descriptions, instructions, technical specifications, visual concepts, and feedback and combine it all together into a working mockup? Rapid prototyping is a stellar technique.

Successful e-learning projects call for an iterative approach to project management and UX design. Luckily for us, rapid prototyping is truly complimentary to this model. In an iterative approach, which calls for input from an entire team, incorporating multiple rounds of feedback into a working prototype can mean the difference between an early buy-in and enthusiasm for the look and feel of a finished e-learning solution, or toiling away in round after round of strawman concept building.

With mobile-friendly design becoming an even bigger focus in e-learning, there are dozens of rapid prototyping design tools on the market to choose from. I’ve spent time test driving several of these, and here are my favorites:

The Contenders
Paper by 53 – This is a fantastic tool for creating illustrations on the fly, and is most useful for designers creating graphic or artistic work. This is also a great way to capture you sketches, scribbles and doodles and organize them in a useful prototype. Designers who are familiar with Adobe Illustrator Draw will find Paper by 53 very similar.

Adobe Illustrator Draw – As mentioned, this tool has a similar look and feel to Paper by 53. It is useful for designers who are already comfortable working in other Adobe software, as many of Adobe’s apps integrate seamlessly.

Adobe Comp CC – Not a strong illustrator? Here is another solution that excels for creating sleeker page layout mock-ups instead of using hand-drawn sketches. This is a good tool for creating basic layout and can be integrated with Photoshop, Illustrator, and InDesign. An added benefit allows designers to export images of created layouts and then import them into tools like POP or Marvel to link them together.

POP – The primary feature that distinguishes POP is that it allows designers to take photos of hand-sketched user interfaces and then link them together via hot buttons. This is a great tool to select if you’re trying to demonstrate how different sections/pages will link and flow together.

Keynotopia – Looking for a solution that functions similarly to POP, but gives you a more polished end product? Keynotopia is a safe bet. Note: While this app utilizes images created in Apple’s Keynote or in PowerPoint, and allows designers to link them together and view them on mobile devices, for anyone not using a Mac, this tool might not be the best choice.

Keynote Kung-Fu – This tool is very similar to Keynotopia. If you’re a Keynote user, this one is worth a look.

Marvel – If you’re looking for a tool with the best of the rest, Marvel is a safe bet. Marvel has features similar to other tools like POP, Keynotopia, and Keynote KungFu. My favorite part about Marvel is that it doesn’t limit designers to exclusively using Apple’s Keynote to create slides. Designers can use photos of their sketches (like POP) or import more polished images created with Photoshop.

The Winners
So how do you choose the best solution from a group of great choices? The winners are:
Best for digital illustrations and sketches: Paper by 53.
Best for wireframing: Marvel with an honorable mention to POP.
Best for creating memorable UX layouts: Adobe Comp CC

Agree with these picks? Have your own suggestions to add to the list? Please share your thoughts! Connect with us on Twitter: @oe_learning.

Stumble onto more blog posts from our e-learning experts.
Contact Us
(248) 816-4400