Home / Articles / Adobe Flash / Building Adobe WorkflowLab, Part 5: Designing WorkflowLab

Building Adobe WorkflowLab, Part 5: Designing WorkflowLab

Contents

  1. Finally, the Planning Is Done!
  2. Crafting the User Interface Design
  3. Gathering Team Feedback
  4. What's Next?

Article Description

Continuing their series on the design and creation of WorkflowLab, Aaron Pedersen, James Polanco, and Doug Winnie, the authors of Adobe Flash Platform from Start to Finish: Working Collaboratively Using Adobe Creative Suite 5, discuss the final UI design process used to create the design comps and assets required to complete the project.
Crafting the User Interface Design

Crafting the User Interface Design

To ensure that all of the design elements were covered in the final design, the wireframe was used as a punch list. The elements of the wireframe were brought into Illustrator, and the designer redesigned the wireframe elements using the final design, following the style guide that was completed during the design planning process (see Figure 1).

Figure 1 UI design comp in Illustrator CS5, based on the previous wireframes.

As part of the designer and developer contract, the developers worked with the designers to define the designs that were required to complete the functionality of the buttons and components of the application. For example, each button needed designs for all of its various formats: the design for the "normal" state, as well as any different looks that the button might take when the user hovered a pointer over the button or clicked it, or if the button was disabled. By establishing a component contract with the developers, the designers had a clear understanding of what they needed to do to keep the project moving along smoothly.

3. Gathering Team Feedback | Next Section Previous Section