Home / Articles / Building Adobe WorkflowLab, Part 3: Planning for Development

Building Adobe WorkflowLab, Part 3: Planning for Development

Article Description

In part 3 of this series, Aaron Pedersen, James Polanco, and Doug Winnie, the authors of Adobe Flash Platform from Start to Finish: Working Collaboratively Using Adobe Creative Suite 5, continue discussing the creation of WorkflowLab. After capturing the concept in a high-level goal with an approved prototype, use cases, and wireframes, it was time to analyze the technologies involved and how they would affect the architecture of the application.


With completed wireframes, the project team broke down each wireframe into components. Each component was identified and dissected further into sub-components. Figure 3 shows the task panel highlighted as a component. Inside the panel, we further break down this component into sub-components, such as the tool area and annotations. From there, the tool area is broken down into individual components for each of the tools. For instance, one tool is Adobe Flash Catalyst.

Figure 3 Wireframe highlighting the WorkflowLab details panel.

Once the wireframes were completely dissected into components, the design and development teams worked together to develop a designer/developer contract for each component. The contract would consist of a complete list of all the parts of each component. For example, a tool would contain three parts: the icon, the tool's name, and a delete button.

From there, the component's states could be identified. A state is a unique look based on a use case for that component. For example, a tool would have three states: up, rollover, and selected.

With each component's contract determined, the design and development teams had all the necessary information to begin each discipline's construction. Design began creating detailed comps, and the development team starting developing each component's business logic.

9. What's Next? | Next Section Previous Section