ScaleNine

As Adobe continues to move forward in the RIA space they’ve clearly outlined what the focuses are behind Flex 4 and Thermo. One of those focuses is on design/developer collaboration. I’ve been following the progress across blogs, interviews and conversations and I started to think, “What would a Creative Suite for RIAs look like to me?” I think some of what would be included is pretty obvious, but there are other things I haven’t heard anything about.

After being involved with different types of projects and playing different roles on those projects I have definitely started seeing patterns in the way applications are used to create RIAs and what seems to work best. Different projects have different expectations at the design stages. Sometimes the deliverable is a series of “wireframes”, refined views or a full prototype. For a successful series of applications, these use-cases need to be supported. Based on my experiences I’ve assembled a list of what I’d want in an “RIA Suite”.

Fireworks

For me, Fireworks is my go-to application for UI design. I can rapidly iterate on designs that maintain vector qualities, make rich symbols for quickly laying out views and keep everything pretty well organized. Fireworks CS4 makes it even easier to do the day-to-day tasks with features that seemed to be lacking in CS3. The downside is that I usually have to bring Fireworks artwork into Flash to add animation and maintain vector quality before bringing it into Flex. Filters also have to be removed and reapplied in Flex because they don’t translate the way I’d like. From what I’ve seen, Thermo will help solve some of these issues.

Flash

When creating a UI for a Flex/AIR application it’s usually inevitable I’ll be using Flash. I’ll use it to group assets into a single SWF, package up a font, create a complex UI, or add animations. However, it seems I’m beginning to use Flash less and just doing everything right in Flex Builder. Using Tweener and Degrafa I can achieve the results I’m looking for most of the time, but I can’t give Flash up completely yet.

Thermo

We’ve all heard about Thermo and I think it’s going to address a lot of the issues I have with current workflows. It seems Thermo will be the middle application that bridges the gap between CS applications and Flex. Mockups are transformed into working MXML with the help of a designer-friendly environment. This includes converting graphics to working components, adding animations, creating dummy-data sources, and more. The one thing I have yet to see is how the designer/developer collaboration actually works. What happens when a developer makes a change and how does that get reflected on the designer’s side, and vice-versa?

Flex Builder

Every day that I am working I fire up Flex Builder and start plugging away, so of course it’s gonna make it onto my list. From a design-perspective I use Flex to add transitions, bitmap filters, do layout, etc. I’ll jump into Design View or CSS Design View to make sure everything looks the way I want it instead of compiling the application.

Bridge/Version Cue (RIA Edition)

Okay, this is not a real product, but it’s something I see lacking in the current collaboration between designers and developers. Developers are familiar with version control systems like CVS, SVN and the like, but what about designers? How will designers be able to tap into those same repositories to maintain the fluid collaboration? Use a command line, Flex Builder, FTP? Probably not.

I’m thinking it would be great if a familiar application that designers already use, like Bridge or Version Cue, would make it really easy for designers to interact with a repository. Developer’s might cringe at the idea of a designer having that kind of access, but maybe it isn’t direct. If Thermo allows for designers and developers to directly interact with the same code base I think this would be a nice feature. There’d also need to be a way to cycle back and forth with files and probably need to be able to check them in and out.

Degrafa (Not Adobe)

Degrafa is not Adobe, but every project I work on gets Degrafa added to it. Why? Because bitmaps and static vector artwork can only go so far. I make 80-90% of my skins in Degrafa. This allows me to open up any properties of the graphics to CSS, which means one Degrafa Button skin to create an infinite number of variations versus making separate graphics for each variation. There’s things I can do with Degrafa that I can’t with bitmap or static vector graphics and with the the things planned for Degrafa Beta 3, it’s a no brainer.

So, there’s the rundown. It’s a mix of a little present and future, and I’m sure there’s some tool out there that I just don’t know I want yet I’m looking forward to smoother work flows and tighter collaborations between designers and developers. When that happens there’s more time for innovation.

I’m getting ready to take off for Webmaniacs to present during the FlexManiacs portion which starts on Wednesday. I’ll be presenting on Degrafa, its features and what the next release will bring. Of course, you can always check out the dev branch to get a hint.

One thing I noticed is that Degrafa session is listed under the “Advanced Development” category of session topics. However, working with Degrafa is anything but that. Sure, you can do some really advanced stuff, but it is super easy to work with at an MXML level. In fact, that’s one of our primary focuses. I’d say that if you know how to add a Button to a Canvas you can easily jump into Degrafa and do some really cool stuff. Working with the Drawing API is advanced, not Degrafa.

There’s also a session that was put together surrounding some of the current open-source projects going on. I’ll be sitting in with Adam Flater, Ben Stucki, Tony Hillerson and other open-source contributors to talk about the different aspects of open-source. Should be a good one.

I depart on Tuesday with fellow EffectiveUIers Tony Hillerson and Jim Cheng. It’s pretty cool seeing how many of the presenters are flying out of Denver. Anyhow, I’m looking forward to meeting up with people, so feel free to say “hi”.

See you in D.C.

Tomorrow I’ll be giving a presentation on Degrafa at the Rocky Mountain Adobe User Group (RMAUG). The user group is in Denver, CO, but if you can’t be there in person, the whole thing will be “broadcast live” via Adobe Connect. If you can’t make it at all I think it’s going to be recorded, so you can replay my lack of typing skills and those things that always seem to go wrong during a presentation.

If you haven’t heard of Degrafa, it’s an open-source framework for defining graphics programatically through MXML. It greatly simplifies the process of creating dynamic graphics, skins, data visualizations, etc. Features include a library of shapes, fills, strokes, advanced CSS, focus on code reuse and much more. I use Degrafa in every Flex project I’m get my hands on.

I’m glad to finally be able to do something like this. There has been a lot of expressed interest in Degrafa, particularly in a Connect Session. I plan on going in depth on the features Degrafa has to offer, what people are doing with it, running through some sample code and talking about what plans we have for the next release. There will also be more of a hands-on session, which I’m not quite sure how that will work for those following via Connect.

If you’re interested in Degrafa I think this will be a great way to get up to speed with the framework, get some questions answered or just another way to heckle me. I’ll also be listening for feature requests, although my answer usually always is, “We’re working on it.”

Get more details here

Degrafa links:

Degrafa Website, Samples, Community Showcase, Documentation, Discussion Group, Code Repository and Degrafa on Twitter.