Author:

Shlomo Goltz Is an Associate Interaction Designer working at Salesforce. He developed the methods described in this article at an Internship at Cooper while finishing his Masters of Design degree at the IIT Institute of Design. New to the San Francisco area, he practices a holistic user-centered and goal-directed design process by combining ethnography and competitive analysis with design. His interest in the methods available to illustrate, test, and iterate on interactions has led him to begin creating his own prototyping tools, such as Vellum for prototyping iPad apps and Silk for prototyping websites.

Twitter: Follow Shlomo Goltz on Twitter

Creating Wireframes And Prototypes With InDesign

Hundreds of tools may be available for interaction designers, but there is still no industry standard for interaction design the way Photoshop and Illustrator are to graphic design. Popular programs are out there, but many of them have considerable drawbacks, which has led me to explore alternative apps.

Creating Wireframes And Prototypes With InDesign

I eventually chose Adobe InDesign for much of my preliminary interaction design work. Yes, you read that correctly: InDesign, a desktop publishing app originally created for designing books and magazines, is currently my tool of choice for designing low- to medium-fidelity wireframes and interactive prototypes.

Read more...

iOS Prototyping With Adobe Fireworks And TAP (Part 3)

In the previous parts of this tutorial (part 1 and part 2), we looked in detail at the building blocks of our design in Fireworks (pages, shared layers, symbols, styles), and we started to make a demo prototype in Fireworks.

iOS Prototyping With Adobe Fireworks And TAP (Part 3)

The demo prototype had six pages, linked together by hotspots, and each hotspot was customized for use with TAP. Now that the six-page Fireworks PNG file is ready, it’s time to prepare it to be exported as a click-through prototype and then converted (with the help of the TAP extension) to an animated, gesture-based prototype that we can use on an iOS device.

Read more...

iOS Prototyping With TAP And Adobe Fireworks (Part 2)

In the previous article in this series, "iOS Prototyping With Adobe Fireworks and TAP, Part 1: Laying the Foundation," I looked in detail at the four major stages that all of our projects at Cooper go through, as well as our approach to Fireworks PNG organization, and the main components of Fireworks (pages, shared layers, symbols and styles).

iOS Prototyping With TAP And Adobe Fireworks (Part 2)

Now we can start actually building the prototype. First, let me try to sum it up quickly: to create a “live” iOS prototype, you only need to perform the following six steps:

Read more...

iOS Prototyping With TAP And Adobe Fireworks (Part 1)

One of the strengths of Adobe Fireworks lies in its ability to produce basic-level prototypes in HTML format for the purpose of sharing concepts, evaluating them and conducting usability tests. But did you know that you can use Fireworks in combination with other tools to create complex iOS prototypes (for both the iPhone and iPad) with similar ease?

iOS Prototyping With TAP And Adobe Fireworks (Part 1)

In this series of three articles, you’ll learn how to use Adobe Fireworks together with another tool, called TAP, to create prototypes with animated transitions.

Read more...

↑ Back to top