Designer/Developer Workflow as a Common Goal
The phrase “Designer/Developer Workflow†has rapidly become the second most spoken buzzword in the RIA space (besides RIA). At EffectiveUI we’ve put our own processes into place in order to make sure nothing is lost in translation as designers and developers collaborate to create a common vision. Of course, processes can only go so far with the available tools that currently exist, particularly on the design side. Throw in some tight deadlines, budgets, and client agendas and sometimes you have to compromise on some things, but the end goal is to create something the client and we are happy with.
I’m working in Flex pretty much everyday (I do have to sleep sometimes) and tools play a huge role in the way you operate throughout your day. From a design perspective, I’ve been trying to work in different Adobe applications, like Flash, Illustrator and Fireworks to create application designs from start to finish. This includes every part of the process, from wire frames, icons, “story boards†and all the way through to the final design.
What I’ve found is that none of the applications I work with provide the most optimal solution. There’s things in Fireworks that I want in Flash, things in Flash I want in Illustrator, etc. What ends up happening is I use 2-3 design applications to achieve the final result. I understand that each application has it’s own specialties, and that’s fine, but it really cuts into production time and how quickly you can iterate through application designs. Of course, that’s just the design phase.
After getting the design where I want it, I then have to bring that all into Flex. With the Skin Design Extensions and the Skin Import feature in Flex Builder the process is quickened. However, those solutions only get me 60% of the way there. There are additional skinning nuances that aren’t represented directly in Flex, there are still effects and transitions to be implemented and a slew of other things that I have to do to get the app looking and “acting†the way I want. In my case, I can play both roles to a certain extent, but this process is magnified when there is a hand-off from designer to developer.
Stories like mine aren’t anything new. In fact, I read emails, blogs and threads about these same frustrations. The good thing is that all players in the RIA space are pushing for a solution. We’ve all heard about the problems Adobe Thermo and the prospects of Flex 4 are going to address, but Microsoft is also addressing these same issues.
A while ago, a white-paper called “The New Iteration†landed on my desk. It basically outlines how XAML and Microsoft tools help facilitate a tighter collaboration between designers and developers. A little later, I read a blog post by Ethan Eismann, Design Lead on Thermo, that addresses some of the exact same things. Both use different terminology, but it all points to a common goal. In fact, as I was reading “The New Iteration†I tried swapping XAML out for MXML, Thermo out for Expression Blend, and Flex Builder for Visual Studio, and it still made sense.
At this point, there is still a lot of refinement going on. I don’t think anyone has the perfect solution yet, but the good thing is that we’re moving closer to it. I can’t wait until I can design applications for mobile, desktop and browser in one application and have it “seamlessly†translate into a development environment without loss of fidelity and not having the headaches to deal with when I have to make design changes. Less time needed for implementation of designs means more time to spend innovating, integrating usability testing, and further refining the processes we use. The result is an escalation in the number of ground-breaking user experiences.
I can live with that 
April 12th, 2008 at 3:41 am
Well said. I know I will get flack for this but I think it would be nice to have all these features in one program. Sorry Matt, hire more Flex developers.
Add the photoshop, fireworks or illustrator layers panel. Add premiere’s time line. Add flash’s filters. Add photoshop and illustrators selection and subselection tools. Add illustrator and flash drawing tools. Add flash’s property inspector so we can have rich text editing in the FB design view. Add flash cs4 or thermo timeline effects.
That or have Flex Builder host ps, ai, fw, fl plugins. So when you are in Flex and you want to edit a skin made in photoshop you can bring up a “photoshop” design view in Flex Builder with photoshop panels that won’t mess up your layout.
The reason I would say make an all in one Flex Builder tool is that every version of photoshop, fireworks, illustrator or flash will have to be updated to support the new features in Flex. Plus they aren’t built for the layouts and containers Flex uses. Does photoshop support a constraint based layout? Do the designers even know what this means? What about horizontal or vertical layout or a mixture of all the layouts, absolute positioning, box layout and constraint, scale 9 etc? What about states and viewstacks? I’d rather have a designer use Flex Builder to design an application maybe pulling in assets from those other tools.
Dreamweaver gave you a design view that it let you do what you want but it would not stop you from making a design that would break in different browsers. In the same way the design tools will not stop a designer from making a design that won’t translate over to a Flex application. Flex Builder is constantly marketed as a “developer’s” tool but it erks me to hear it described like that. To me Flex Builder is, as you described it best, a tool to create “…ground-breaking user experiences”. It should support tools inherent to the creation of that goal.
April 14th, 2008 at 12:50 pm
What if Adobe made all of their apps a little more fluid? What if they could replace all of these apps with a single thing who had different views for different features? It seems like they already duplicate a lot of functionality - instead of duplicating more, let’s just merge them all and give people different views for different tasks. That way you the super-specialized developer can customize it however you want.
Just an idea - I’m not signing up to do this.
April 14th, 2008 at 1:55 pm
I still think there is still merging going on between Adobe/Macromedia in the way of applications. From what I’m hearing, there’s going to be a much more fluid merging in CS4. As far as creating features for RIAs, I think there’s more to it than a UI. I’d like to have a tool I can work with through every part of the process, from interaction diagrams, to wireframes, to interactive mockups, to final product. Each of those steps has their own integral parts that could be made much smoother if there was a tool to support and join those steps together. Of course, what’s created would have to integrate with the development side of things too.