Prototyping Mobile Apps Without Having to Learn How to Code


I recently gave a presentation on building mobile app prototypes without coding. This came from my own experience of fully prototyping the SpotOn mobile app without writing a line of code. The benefit of it was immediately apparent when all the stakeholders could touch and play with what seemed to be the real app. Having something that could run on the phone is so much better than looking at screenshots on the computer or looking at wireframes or documentation.

Why is this a better approach? For one this brings a whole new meaning to rapid prototyping. Being able to eliminate what used to be a key player in the iteration loop (the developer) made developing the app so much faster. I would screen the screens, load them up in a prototyping tool, start clicking around, find problems, immediately fix them and retouch the screenshots, rinse and repeat.

Another benefit is that there are so many people who have skills and ideas who cannot code. Now they too can start building their ideas and proving their concepts rather than just talking about it. Having something that is clickable on the phone is priceless compared to having sketches on a napkin or even a powerpoint presentation.

What do you need to do this? My current favorite tool of choice is this brand new app called FieldTest. Load this URL on your phone. You can click around some of the buttons to get an idea of how the app works. Keep in mind no code was actually written. I uploaded a bunch of screenshots to the tool and wired it all together using their user interface. I can then send people this link and have them open it on their phones. They can click around and get a sense of how the app will work.

I strongly encourage designers to try this approach as it will really improve their workflow.

Popularity: 6% [?]

Quick & Dirty iPhone App Wireframes

No Comments

People pay lots of money for various wireframe tools. There are wireframe tools for all flavors of OSes but none of them have really appealed to me. In my work, my deliverables are not wireframes so my advice may not apply to all. However I think even people who do deliver wireframes can benefit from this simple technique. It’s so easy anyone can do it. Even if you are used to using wireframe tools, you might want to give this a shot because of how fast you can test out your ideas.

All you need are three things:

  • iPhone
  • paper pad
  • pen

You start out by drawing a rectangle the size of the iPhone screen. Then you just start drawing your UI within that rectangle. Draw how your app would look like. If you have many screens, draw those screens too.

Next take pictures of those screens, making sure that each screen fills up the entire camera view. Now, just load up the Photos app and pull up those screenshots. Viola you have a ghetto wireframe that you can see on your phone, You can move your thumbs over it and see if it feels right. You can swipe and go to the next screen. You can swipe back and go back to the screen you came from.

This is a super quick and dirty way to mock something up and test out some theories. What I have here took less than 5 minutes and the great thing is that anyone can do this. I had 3 screens that I wanted to think through. Doing this made it feel more real and I was able to improve upon the designs. Putting it on the phone got me thinking about things I wish I could do with the app that I wouldn’t have thought of if I was just staring at it on the computer screen.

You might say, that’s great Pek, but I can’t draw to save my life. In case you haven’t seen my chicken scratch, but I can’t really draw either. If you don’t feel confident in your skills then you can rely on something like this

I think this useful when you want to get slightly higher fidelity than the sketches but that higher fidelity comes at the cost of additional time.

Popularity: 12% [?]