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

Building Adobe WorkflowLab, Part 5: Designing WorkflowLab

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.
Gathering Team Feedback

Gathering Team Feedback

An important part of any design process is to get feedback as the various sections of the design are completed. We created WorkflowLab before Adobe Creative Suite 5 (CS5) was available. CS5 includes a new service called CS Review, which lets a designer send something from Photoshop, InDesign, or Illustrator to the CS Review service, inviting other people to review the design and provide comments.

Since we didn't have CS Review when we created WorkflowLab, we used the PDF review workflow that combines Adobe Acrobat and Acrobat.com. From Illustrator, the designer created a PDF and uploaded it to the Acrobat.com service. Using Adobe Acrobat Reader, our production team commented on and annotated the design. The designer would make adjustments based on the team's notes (see Figure 2) and then resubmit the design for further review.

Figure 2 UI comp PDF review with notes, using Acrobat.com and Acrobat.

Using Acrobat was great because each team member could reply to each comment, discussing collaboratively any issues we had with the design.

Later in the development process, when time became more critical, we used Adobe ConnectNow to do real-time screen sharing. Our developers would share their screen, and we would make small iterative tweaks on specific areas of the design until we were all happy with the result. We used ConnectNow because our teams were scattered around the world, and this process really helped to nail down a number of discrete but important design elements.

One important issue was ensuring that design didn't detract from the performance or stability of our application. Examining some performance tests and analysis of the initial product designs, we found that our heavy use of vector artwork was actually causing delays in startup time. Using this information, we asked our designers to rasterize some of the smaller, less detailed graphics, which improved startup time dramatically, creating a better customer experience.

Finally, our designs were shared with other team members by using Dropbox. The developers grabbed the assets and integrated them into the functional application, and then tested the design.

Using the designer and developer contract significantly reduced the number of edits and updates we needed to make with the final design, allowing our designers to focus on fine details to make the overall user interface look more polished.

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