Tools We Like v1

A quick look at our favorite tools for building and prototyping

Published
February 12, 2014
Reading Time
3 minutes

Between client projects and personal ventures, IDEO interaction designers and software engineers across our global offices spend a significant amount of time designing and building apps for iPhones and iPads. We’re part of the thousands of iOS developers worldwide beholden to the operating system’s wild popularity and sound frameworks.

While we focus on the design and code, we rely on the latest tools to help us create clean prototypes and iterate more quickly, saving us time and countless emails. Here are some of our favorite tools, as of late.

Proto.io

Robust features and advanced control for creating rich prototypes

Junu Yang, Interaction Designer, New York

How I use it

Proto.io was ideal for prototyping some front-end interactions for a health-tracking app. It’s best for projects involving touch devices and interactions. It has built-in robust features and is relatively easy to learn. If you are familiar with the capabilities of Flash or Axure RP, Proto.io is a simpler version focused on touch devices. For the prototype, I was able to animate/tween elements between different UI states, create swipe gesture interactions, and build a drag-and-drop interaction.

Proto.io lets you prototype robust touch interactions with animation and modular content containers

Why I like it

Robust features make this tool stand out. Other non-code-based UI prototyping tools I’ve used lack the range of features—like animation and gesture support—that Proto.io offers.

 

Flinto

For creating better (quick) prototypes that propel your ideas further — and faster

Kam Keshmiri, Interaction Designer, London

How I use it

I was looking for a really fast way to create iPhone prototypes for various IDEO projects and a Top5ives App (for visitors to Hackney, London). My principal goal was to use a software that slotted into my workflow without a steep learning curve. Flinto allows me to link a variety of screens together—with some basic transitions—to evolve the app design by getting it into the hands of users for feedback.

One of Flinto's strengths is how quickly you can go from the workspace to a functioning prototype on your device. Pushing an iteration is seamless and requires no extra effort for you or your clients to view.

One of Flinto’s strengths is how quickly you can go from the workspace to a functioning prototype on your device. Pushing an iteration is seamless and requires no extra effort for you or your clients to view.

Why I like it

Flinto stood out for me because of the simplicity and thoughtfulness of the software, and the sheer addictiveness of quickly building out a prototype, getting it on the phone, testing it out, and then being able to iterate with very little fuss or pain! Top reasons to consider Flinto for you next project:

  • Take your static screens and create prototypes that emulate a native iOS app
  • As a designer, you can focus on creating the best work in your own chosen program. You don’t need to spend weeks wrestling with unfamiliar tools, learning how to create screen layouts, managing big libraries of UI elements, etc.
  • Use all the real estate of your desktop screen and manage your workflow through a minimal, responsive workspace
  • Sharing and set up are easy and the product flow is light touch
  • It works offline! Amazing when you are road testing your ideas

For more details on Flinto, follow this hands-on tutorial I put together.

 

xScope

For quickly measuring pixels of any asset directly on your computer screen

—Mel He, Software Engineer, Digital Shop, Bay Area

How I use it

I use xScope to quickly measure visual assets on the screen. For many of the apps and assets I work on for clients, there are no design guides or specifications. For instance, there is rarely instruction as to how many pixels an asset should be off from the vertical edge. I’ve also used it to identify color values, which saves me from opening up Photoshop.

Using your cursor, you can easily drop guidelines and move indicators to measure pixels of elements, directly on your screen

Why I like it

Instead of emailing people hundreds of times asking for every spec, I can get the measurements right away with xScope. It’s infinitely better than guessing and enduring back-and-forth messaging for every little layout detail.

Justine Lee