How to design wireframes on your tablet

Default avatar.
November 07, 2014
How to design wireframes on your tablet.
thumbnail

There’s no doubt that mobile devices are “the (current) big thing”. This is exactly where decades of computing technology has led us. These small tablets and phones (and now watches)…these are the screens from which most of us consume information.

That information could be one-hundred-forty-character-long tweets, our favorite shows on Netflix (cough Knights of Sidonia cough), or just good music. We read e-mails, chat, and play games.

Slowly, we are beginning to create content on these devices as well. Tablets can be pretty great for writing, and the cameras on our phones are getting better every year. We record podcasts on iPhones, and there are even a few apps for editing audio/video.

The desktop computer, it seems, will be relegated to resource-intensive tasks. It will be the realm of hobbyists, tinkerers, and high-end gamers. Oh, and web designers.

We might never have pixel-precise graphics editing on a tablet. That's fine. There are parts of the design process, however, that can be moved over to the touch screen.

What I need in a wire-framing app

Here's what I need in a wire-framing app:

  • a few basic shapes to work with;
  • to be able to place, arrange, and re-size these objects easily;
  • collaboration, sharing, and export features.

The apps

My favorite wire-framing app of all time is Google's Drawing application. It does everything I need and has great sharing and collaboration features besides.

However, while Google has created Android applications for its text documents and spreadsheets, there is way to make Google Draw work on Android. It doesn't work in the browsers, either.

There are a couple of apps created specifically for Android that do work. These, I will review in depth, as I've been able to test them out. I'll also list a few apps for iOS.

Native Android Apps

Mocking Pal (free)

For its price, Mocking Pal does a fantastic job. Its range of available elements is basic, but sufficient for most web wire-frame projects. Performance is decent, and the app comes with some smart options.

The really cool thing, I think, is Live Share. Basically, you can share a link to your project, and anyone who goes to that link can view the wire-frame as you build it in real-time.

mockingpal

Mockups for Android ($5 approx.)

Mockups for Android costs about 5 USD, but it packs a lot of features in. It doesn't have a ton of UI elements, but it runs fast, and does its job well. When you're done, it can export your projects to various bitmap formats, and SVG.

Its main drawback is that it's not terribly user-friendly, at first. You kind of have to get used to the work-flow. Still, it's not bad.

mockupsforandroid

Mockups.me Wireframes ($20)

Weighing in at a hefty 20 USD price, this app makes you feel like it had better be awesome! And it is pretty awesome. Where the other wire-framing apps available for Android have limited libraries of UI elements, this one has tons.

It has to, because it's compatible with Balsamiq files, so you can create stuff in Balsamiq, and take it with you anywhere.

The killer feature, I think, is the implementation of gestures. You can add elements to your canvas quickly by just drawing on it.

Last, but not least, there are web and desktop versions of the app, meaning you can collaborate online, and access your work anywhere.

mockups.me

FlexiSketch

A free app with great performance, FlexiSketch is not a wire-framing app per se, but it can quickly be made into one. It's a vector drawing app, but here's the twist: each object you draw can be quickly saved as its own “object type”.

You can drag and drop more of each object type onto the canvas at will, essentially creating your own library of elements. If you need a lot of custom elements, this is the app for you.

flexisketch

Native iOS Apps

Mockups.me Wireframes ($20)

That's right! There's an iOS version of this app as well. It has the exact same functionality as its Android counterpart, so it's gotta be pretty good.

The price is the same too. If you’ve got the cash, I say, “Have at it!”

iMockups ($7)

This is another one with support for Balsamiq, but it only costs 7 USD. With rave reviews from many people, iMockups focuses on using the multi-touch support and other features provided by iPads to speed up the wire-framing process.

imockups

Keynote ($10)

No, actually, I'm not kidding. This 10 dollar app for making presentations actually has a rather large wire-framing fan-base.

And why not? It's all vector graphics. Its format is standard in the Apple-verse. You can link screens together to create a more interactive prototype, the works! There's even a toolkit or two out there to make wire-framing in the app easier.

iWorkKeynote2

Adobe Ideas (free)

At last! A free option! Keep in mind, this isn’t technically a wire-framing app. It’s more of a vector drawing app. In some ways, this makes it less useful, and in others, more powerful.

adobe-ideas-android-screenshot

General issues

Wire-framing on a tablet can be tricky. Some of the apps I encountered are resource-hogs. In addition, it’s hard to place elements evenly. There are “snap-to-guide” features in most of these apps, but they are of limited help. I wish the “snapping” effect were a bit stronger.

Mocking Pal addresses that problem by providing some directional arrows that move the selected element one pixel at a time. This is a slow solution, however, and so not totally ideal. Also, it's the only app I've tried that actually addresses the problem.

Ultimately, which solution you choose depends on your preference. But there are definitely some strong options out there that allow you to get stuck in on your commute, in the bath, or at your local coffee shop.

Ezequiel Bruni

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.

Read Next

3 Essential Design Trends, November 2024

Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…

20 Best New Websites, October 2024

Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…

Exciting New Tools for Designers, October 2024

We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…