Category Archives: Tools

PCMag Picks Expression Web over Dreamweaver CS3

PCMag Editors' Choice PC Magazine just concluded their review of Dreamweaver CS3 by giving the nod to Expression Web for Editors’ Choice.

“Expression Web gets many basic jobs done much more elegantly, so it keeps our Editors’ Choice…”

And in their recent review of Expression Web, they said that the bottom line in this competition is:

“Unless you’re married to Dreamweaver, Expression Web is the editor to use for modern, efficient Web sites.”

That’s an impressive feat for Expression Web–Dreamweaver’s been the de facto standard for pro web design for a number of years now and Expression Web is brand new. Not a bad way to kick things off for the Expression line of products! Congrats to the Expression Web team for all of their hard work–it’s paying off.

Free WPF Tools

I’m glad to say that for the first time, we have some free developer tools for XAML and WPF. John Montgomery has blogged about it here and includes some links. Although this is still a CTP, it’s a CTP of some tools that are always free as in beer. The C# patch is up and the VB will be soon. Enjoy!

It’s Alive!

Microsoft Expression Interactive Designer – Free Trial
So Expression Interactive Designer (AKA “Sparkle”) is finally publicly available in a CTP (pre-beta) download. Check it out and let us know what you think. The product is definitely not finished yet and your feedback counts.
We also now have a new version of Expression Graphic Designer available. It now has some good XAML exporting options that make it useful even for anyone trying to create graphic assets for use in XAML. EGD is also a CTP (pre-beta) release so plan accordingly and let us know what you’d like to see in the product before it ships.

Wireframing with Flex

What:

I created a stylesheet that turns any mxml app into a wireframe. This allows you to wireframe using real components.

Why:

  1. To keep prototypes looking like prototypes, avoiding premature discussion about Halo look and feel.
  2. Using flex for the wireframes help insure that they are technically feasible. Designers build familiarity with Flex.
  3. Save time wireframing by using the automatic layout features of flex.
  4. Reuse the UI layout effort in wireframing to save time at implementation—just remove the stylesheet or replace with a production one and you have a styled flex UI.
  5. Allows for wireframes that actually *work*–can be interacted with. You can now “wireframe” the interaction design work without needing to create a Flash animation mockup.

How:

If you’re using FlexBuilder for wireframing, just use the Design panel > CSS tab > Attach StyleSheet button to add the wireframe.css to your app. Or under the application tag just add the style tag:

< mx:Style source="../Wireframes/wireframe.css" />

(where ../Wireframes/ is the path to this css file) and the entire app will inherit these styles. Note that if you are overriding this elsewhere, the more localized styles will override the wireframe styles—wireframing is usually happening long before styling so this shouldn’t be a problem.

You can download it here.

This is just a first rough draft that I’ve been using. If you use this at all, let me know if it works for you and if there are any improvements needed.