ScaleNine

A recent blog post I came across brought up some questions regarding the UI design workflow and bringing those designs into Flex 2. I replied to the post outlining my experiences and I thought it might be worth sharing that information here.

Initially, when I first got started with Flex 2 I spent time just getting to understand the default components and what attributes could be skinned. The Component Explorer helped a lot, as did the Style Explorer to begin understanding what could be done with just CSS.

With that knowledge I just jumped in and started experimenting and learning how to write MXML to get the layout I wanted. I made up some projects to give myself a direction/goal. I used XML files to populate all my data driven components. Sure, nothing really ended up being completely functional, but it looked nice and this knowledge would prove to be quite helpful.

Now, the first thing I do is create a design and get approvals. I create the initial vector art in Adobe Illustrator. Yes, Adobe Illustrator. Why not Photoshop or Flash you might be asking. Well, basically it’s just in case I ever need the icons, buttons, etc. for printed pieces. I’ve run into numerous occasions where a client has needed some graphic I created for the web to be scaled up to 5 times it’s original size and placed in some corporate documentation or instruction manual.

From Illustrator I’ll either go into Photoshop or right into Flash. I use Flash to hold all my graphical assets for buttons, backgrounds, drop downs, etc. in one SWF. It’s really easy to define the 9-slice or scale9 characteristics for scaling purposes. Also, it’s nice just to have everything in one place to insure design consistency. If file size becomes an issue, I’ll split things up.

After I have enough graphics to get going, I fire up Flex Builder. By this time I have a layout going. I create a new CSS file if I don’t have one already and start defining CSS styling globally (including embedded fonts, and embedded images/swfs) for components and CSS styling for other design variations (ie. .blueButtoon, .orangeButton). If there are single instances of a component that need certain styling I’ll do it in the MXML.

As I mentioned above, I use XML files to get data populating my components. If I need any Item Renderers or Item Editors I’ll create those and skin them. Basically create a visual prototype since sometimes it’s easier to show someone than explain it and Flex makes it easy to do that.

This is great for the programmers ’cause when they come in they’ve got the initial structure. They ditch my XML files and hook the components up to a database. They also implement everything else that I’m not able to do, like build custom Action Script components. Then it’s just me going back and forth with the programmers to get everything looking the way it should.

This is the way I have been working, but by no means am I saying it’s best practices. The worflow has worked great so far, but if anyone has any suggestions on how to improve it I, and I’m sure others, would love to hear about it.

This process will get easier and more simple as new releases and versions of Adobe software become available. So until then, if you can get designers to learn MXML and a little XML it can definitely speed up the work flow. There’s a bit of a learning curve to be sure, but it can be worth it.

This entry was posted on Monday, February 26th, 2007 at 8:59 pm and is filed under general, how-to. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.