UXD Pioneer Rumored Dead

There aren’t exactly any household names in the Experience Design world, but one of the bigger names is rumored to have died yesterday. Jef Raskin is credited as the creator of the Apple Macintosh and the Canon Cat. He also wrote an influential book, The Humane Interface. It’s on my Recommended Reading list (which I haven’t gotten around to posting here yet.)
The related news story is here.
His site is here.

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.

MAX 2004 Presentation

November 8th, 2004I spoke at MAX 2004 with John Bennett of Macromedia Consulting. The presentation is entitled “Creating Rich User Experiences with the Flex Experience Model” (say that five times fast).

The presentation went fairly well–no one threw rotten fruit or pointy objects so we can consider that a success. We also ended up with a fair number of people showing up, considering that the session wasn’t listed in the registration app.

I’ve recorded a breeze presentation to be posted on the macromedia MAX web site. I’ve also posted the presentation in uglified web format here.

Salutations!

My name is Brad Becker and I’m currently a Sr. Product Designer at Macromedia on the Macromedia Consulting team. I was formerly the product designer for Flash, the Flash Player, and FlexBuilder. I’ve spent a fair amount of time over the last decade or so contemplating and using software. This is where I’ll be posting some of the things I’ve learned and some of the things I’ve created as an engineer and a user experience designer. Thanks for dropping by.
-Brad Becker

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.

Making Technology Work For People