Tracey Varnell, a fellow Experience Architect at EffectiveUI, pitched me a link to Protoshare, a site for rapidly creating wireframes and collaborating on them with others. Even better, is that there’s interactivity, so people can see various interactions, rather than trying to describe them in text or over the phone. They have a tour on the site covering some of the features.

Other Options

There’s also Axure for wireframes, prototypes and spec creation. The bummer is that it’s PC only, however, there is a prebuilt library of design patterns you can use instead of having rethink the wheel. If someone tries this out, I’d love to hear their thoughts. Check out the tour.

iRise looks like it does a lot of the same stuff and is also a desktop application. There’s a bunch of different editions you can get depending on your needs. Check out the tour.

What’s interesting is I was just talking to some designer’s at EffectiveUI about creating a site very similar to this, but with some additional functionality. I’ll probably end up using this site a lot, but there’s some features I think would really make Scrnshots stand apart from something like Flickr.

I’d like the ability to post iterations and have them be connected. I’d love to be able to post a sketch, get feedback, post a refined mockup with revisions, get more feedback, refine, get feedback, etc. Then, at any point someone could review the entire process I went through from sketch to final execution. Being able to see the thinking that went into something is where most of the value lies.

Being able to have comments point to specific parts of the screenshot would be cool too, kinda like ConceptShare. Maybe even a comparison overlay view to to get down to the details.

I can really see this site used for a variety of things, like filing bugs, reviewing designs, concepting, etc. In some cases, maybe I’d like to make some things private. Then I can share designs for internal purposes.

Scrnshots is one of those site I could browse for hours, kinda like LogoPond. Now all I need is some time to find and upload a bunch of designs that never made it beyond the concept phase.

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’ve mentioned how important a color scheme can be in an application and some places where you can get some inspiration, but every one in a while you may need a pattern. One site I’ve started frequenting for inspiration and ideas for Degrafa samples is COLOURlovers. They have hundreds of thousands of community generated colors, color palettes and contributed patterns as well. I can’t tell you how many times I’ve had people ask me, “Where can I get some sweet repeating patterns?”

Not only is COLOURlovers a great site, but they just launched a public API you can leverage in your own applications. I just recently came across a sweet little AIR app, created by Levi McCallum of Futon Media, that leverages that API to bring some color and pattern goodness to your desktop.

Check out the COLOURlovers site or the COLOURlovers AIR app.

Naming Conventions

If you look at the skin templates that come with the Flex SDE you’ll notice that each skin is named in a particular way. The naming convention works by specifying the component name, an underscore “_”, then the component skin part. For example, Button_upSkin, Button_overSkin, etc. They are named this way so when you import the skin through Flex Builder’s Skin Import Wizard the combo boxes that allow you to assign a skin state for each skin are “automagically” assigned to the skin state you specified in the skin template. This is good to know because you can use the same naming conventions when you’re making your own custom skins that may be created without using the templates provided. I typically make a single file with all my skins in it and use this naming convention frequently.

This method will work for a variety of scenarios. For example, if you need to add a background image to a certain container, you could use myVbox_backgroundImage and it will go through the Skin Import Wizard very easily. This will work for other “skinnable” parts, like borderSkin, upIcon, etc. Easy enough, right?

The other nice thing you can do with adhering to these naming conventions is skin “sub-components”. For example, the DateField component allows you to specify a textInputStyleName. You can assign skins to that text input by specifying the component name, adding a hypen “-” (Illustrator, Fireworks, Illustrator) or dollar sign “$” (Flash) with the sub-component name, then and underscore “_” and the sub-component skin part. So, in the case of the DateField, you could specify the borderSkin for the text input like this:

DateField-textInput_borderSkin (Illustrator, Fireworks, Photoshop) or DateField$textInput_borderSkin (Flash)

Notice I just used “textInput” and not “textInputStyleName”. This is because “StyleName” is appended to the sub-component name during the Skin Import process in Flex. For example, naming a skin asset in Flash “ComboBox$dropdown_backgroundImage”, publishing it and importing it using the Skin Import Wizard would produce the following CSS (Note: You’d have to add backgroundSize: ‘100%’ for the image to stretch.):

ComboBox
{
dropdownStyleName: “comboBoxDropdown“;
}
.comboBoxDropdown
{
backgroundImage: Embed(skinClass=“ComboBox$dropdown_backgroundImage“);
}

If you look at the skin template for the application your using you should see this naming convention used for the tab skins. You can use this same naming convention for other sub-components, like dropdown, verticalScrollBar, etc. Just naming your skin assets a certain way can really streamline the the skin production process.

Naming for CSS Design Mode Previews

Another new feature in Flex 3 is CSS Design Mode. While viewing CSS you can click on the “Design” mode button to see what your CSS looks like applied to a particular component. However, if you were to create a style class and switch to CSS Design Mode you won’t get an immediate preview. This is because you have to specify a component to preview the CSS against. A way to forego this step is to add the type of component you want the styling applied to to the class name. For example, if I had a class name of “blueButton” I could preview it as a Button component in CSS Design Mode by adding “Button” to the class name keeping the dot “.” of the class name like this:

Button.myButton
{
fillAlphas: 1.0, 1.0;
fillColors: #84B1F4, #1D4888;
borderColor: #07314F;
color: #FFFFFF;
}

This will work for pretty much any component, provide a quick way to preview the CSS styling on a component without having to specify it in CSS Design Mode and make your CSS a bit more descriptive. If you use the same styling across multiple components you may want to leave class names void of component specifications.

Other Resources

Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3
Flex 3 CSS Design Mode in LiveDocs

What you need to get going is Flash CS3 and the Flex Skin Design Extension for Flash, which includes the templates. Download the Flex Skin Design Extension for Flash and install it. Once installed, fire up Flash CS3. You should see a “Flex Skins” option under the “Create from Template” column in the Getting Started window.

When you click on the “Flex Skins” option you’ll get a window with a list of available Flex Component skins. For this example I’ll select the Button skin.

When you first open the file you’ll see 4 layers: information, symbols, labels, background. Double-click on the Button symbol to reveal the timeline within.

If you scrub through the timeline you’ll notice the artwork changes to reflect the different states. This coincides with the frame labels: up, over, down, disabled. These frame labels match the state names for this Button component. Each of the other component skins may have different frame labels.

You may also notice the other frames with labels that are right next to each other. These are the transition starting and ending frames. The reason they are right next to each other is to prevent a time delay between the states. So, the first thing you want to do is spread those frames apart. For this example I’ll be working with the up-over transition.

If you look at the frame labels for that particular transition you’ll notice they’re named up-over:start and up-over:end. This is necessary for the transition to work properly in Flex.

With the frames spread apart I’ll create an under-glow transition where the Button will appear to be lit from the bottom as the user rolls over. Here’s a snapshot of the work area after I’ve created my transition:

I’ve got my skin all set up, so now I’ll export it for use in Flex. For this example I’ll just publish the SWF/SWC to my Desktop.

Once those are published I switch over to Flex Builder 3. In Flex Builder I’ll create a new Flex Project called “ButtonTransitionSkin”. Now it’s time to bring in my Button skin.

To bring in the Button skin got up to the File > Import > Skin Artwork menu item in Flex Builder. When you select “Skin Artwork” there are a few options. At the top select the “SWC or SWF file” radio button and then browse for the SWC that was published. I had put mine on my Desktop. Make sure you select the SWC and not the SWF.

I’ll change the default CSS entry for “Create skin style rules in:” to style.css and just leave the default selection for the “Attach style sheet to application:” option. Usually I’ll put my skin assets into a subfolder called something like “style” or “skins”, but in this case I’m not. After doing that the window looks like this:

When I hit the “Next” button I get a list of check box items to select the skins I want to include in my style sheet. I’ll leave “Button_skin” checked and click “Finish”. When I do that the style.css file is created and the skin is assigned to that component.

Now all that’s left is to add a Button to my Application layout and I get something like this:

Click here to view in new window (View Source enabled). Or download the project (including FLA) here.

If you’re looking for another method of creating “stateful” skins without using Flash, check out a post Nahuel of AsFusion wrote.

Additional Style and Skin Options
Now, in the Flex Properties panel in CSS Design View, you can access a variety of options for Styling and Skinning. The Styling portion adds more visual indicators to things like alpha, fillColors and there are inputs for things like padding, icon specifications, rollOver text colors, selected text colors, etc. The Skinning portion allows for easy selection of a skin. Once selected the CSS embed code is dropped into your CSS file.

Scale Grid Guides
You can now set/edit the scale9 grids right inside of the CSS design view. Whenever you change the values, your CSS file is updated. No more having to guess on the values or using another application to get the exact pixel perfect values.

Auto-Embed of Fonts
I’ve heard of a number of issues people have had embedding fonts for use in an application. Either a font weight wasn’t available, a wrong guess for a fontFamily name was made, etc. Now, when you creating a style you can select a local font from a drop down and, once a font is selected, you can click an option to embed the font. The proper CSS code is written to your CSS file and you’re ready to go.

One thing I did notice is that if you select a font and then select a different font, the former font embed code stays in your CSS file. When changing fonts in Design View to find one you like, make sure when you do find one that you go back to CSS file and remove the unnecessary font embed code.

Auto-Embed of Icons
Just like fonts, you can select an icon to be used from two options: Flash symbols and image files. When you select either Flash or image files you can browse for a SWC, SWF or image file and select your icon. Then, like the fonts, the embed code is written for you.

Additional Styling Navigation
In the CSS Design View there are additional features to help navigate through your styling. Rather than using the Outline panel to navigate through your styles, there is now style selector combo box next to the Source/Design toggle buttons. This is great for quickly switching between styles.

Also, there now some buttons for adding a new style or deleting the currently selected style. There’s also a color picker for selecting the background color that your skins sit on while you’re editing a style.

These are some of the immediate features I noticed and they’re all great for productivity. I think these additions will definitely help people get through skinning/styling their applications with fewer headaches. Nice!

“…an innovative new tool, codenamed Thermo, that will enable designers and creatively inclined developers to easily build rich internet applications and interactive content.”

There’s a bit more about it at pixelconsumption, but I have a feeling there might be more information at MAX. Ted Patrick mentioned MAX should not be missed and this alone will make going there well worth it. As it is right now there are so many ways to create UIs for Flex. I’d like to see the process streamlined, simplified and more powerful by making programmatic skinning more easily accessible. This is partly why I got involved with Degrafa, but hopefully “Thermo” will be the answer.

I can’t wait to see what it is and how long before it’s available.

Check out the AIR Filter Explorer

Here’s another helpful Flex Explorer for creating Custom Easing Functions by Raúl Díaz. You can mess with different paramaters including time and easing types and get a curve representation of what your function will do. Also, you can get a sense of how the motion will look by clicking the “Explorer” tab in the app.