The folks at thirteen23 have built some really cool little apps using the latest and greatest tech. You’ll need Vista RC1 or .NET 3.0 RC1 to run these. The two things I find most interesting about these: they are really well designed and they blend the power of the desktop and the connectivity of the web. One app is a flickr browser and another is a netflix manager/browser. Cool stuff–check it out!
Category Archives: Downloads
Fireworks XAML Exporter
Infragistics has put together a Fireworks panel that allows exporting to XAML for those of us more used to Fireworks than Photoshop or Illustrator. (Hey, it’s called “PHOTOshop” for a reason and I rarely need to edit photos…)
Now there are several choices for those looking to create XAML graphics for use in WPF or metro. See the complete list on Mike Swanson’s blog for details and links.
May CTP’s of All Expression Products
The first CTP* of Expression Web Designer–released last week–has now been joined by brand-spankin’ new CTP’s* of Graphic Designer and Interactive Designer.
Get ’em here: Microsoft Expression – Home
* ‘CTP’ is Microsoft-speak for “public alpha”.
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 pt.2
What:
I updated the stylesheet that turns any mxml app into a wireframe. V2.0 catches a lot of styling exceptions that snuck by with the first version of this wireframing stylesheet. It also adds wirebox and wire header styles you can add to make sure all the necessary wireframes show up.
Why:
This stylesheet allows you to create wireframes that take advantage of the built in components, layout, and CSS styling of Flex. For more information on the benefits of wireframing in Flex, read the previous post. I’ll be posting some of the problems with this approach in the near future.
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/wireframe2.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.
If you use this at all, let me know if it works for you and if there are any improvements needed.
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:
- To keep prototypes looking like prototypes, avoiding premature discussion about Halo look and feel.
- Using flex for the wireframes help insure that they are technically feasible. Designers build familiarity with Flex.
- Save time wireframing by using the automatic layout features of flex.
- 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.
- 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.