Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Components
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.