Myo's random rambling

Here are some digest for from the Day1 of 360|Flex in Seattle. Fortunately, we have David Coletta from Buzzword attending and presenting the conference. I met with him and he beat me to post about conference coverage and much much more detail than me. So, be sure to visit him and check it out for some more details.

My Free Review about BuzzWord (my word processor of the day for the coverage)
I’ve got preview invite for BuzzWord & I thought I gave it a spin to write my coverage using it while attending the session. It was a pleasant experience I must say. I am really impressed with amount of work and thoughts Buzzword team has put into the application. Though, it is still in preview, it works flawlessly. It doesn’t have any other super feature than basic editing functionality but it does the job. I ran into some minor annoyance as power user but David assures me that they already have got enough feed back about those minor kinks and it won’t be there soon. I cannot wait to attend session on internals of Buzzword tomorrow.

Ted Patrick Keynotes

• Flex3 Beta would be coming in Oct 2007
• Flex3 & AIR 1.0 release early 2008 in parallel
• Flex3 will release as Open Source

Design Eye for the Dev Guy (by Aaron Adams from cynergysystems.com)

• Books Recommendation: Elements of Color, Johannes Itten — Design & Form
• Don’t worry about color, just work on flow & composition to get it started on your wire frame so your meeting won’t get distracted
• Study color theory — color has impact on the context
• Beware that how you combine things with different color
• Distinguish Focal Points
  • Use of brighter color, what do you want user to look at at one point
  • Use element of design
• Prioritize Action
  • Beware of where you placing the elements
  • Think of how user scan the information (let to right, top to bottom)
• Think in Layers, build in layers
  • Fireworks — try it out
  • Build depths with layers, place UI Element (e.g. tooltips)
• Fall in Love with the Details
  • Take sometime, scan through again, take a day
  • User doesn’t care about how beautifully your code is
  • Recognize about how you like about your fav UI & remember how it is done
• Eliminate excessive lines; Clean things up, make different element by border
• Allow your elements room to breathe
• design for a consistent implementation
  • beware of how elements got repeated in different place
  • be consistent — says if you use drop shadow differently in different place
• Understand context
• Notes from Q&A
  • Start with design concept & design sells
  • Accessibility (meet standard 508 compliant) — not much good examples in Flex yet
  • Don’t forget that people have to do something done — they will borrow from past experience — how your application or other applications used to work for them
  • Transitions, effects & animations: keep in mind the balance, productivity, general flow of your concept, make sure it has the purpose, don’t overuse because it is cool, make your story telling from there, be consistent as well. Get your application working first before the transitions (but will it work). Cool demo with transitions, make the apps & merge the transitions. –a lot of discussion & interest in this– respond user with meaningful feedback (like shaking when login fail –hey, we are doing that right now–), flow through while page change; Motion attracts people, don’t distract people from the focal point, unless it is what you want to attract to them
  • Should designer/product dictate the functionality? — make sure they are designing to details, beside looking good. Make sure it is agreed upon with developer
  • They use runtime skinning, compile the themes, make swf
• Pixel Perfect is Possible
  • Build in layer, back to front
  • Tackle one element at a time — starts with bigger container & move inwards
  • Get dirty, don’t overly-depend on tools
  • borderSkin is your friend — you can do a lot for graphic skin
  • Embed fonts in Flash swf for control
  • Find/use good class extensions — extend what it offers
  • Know your blendMode attributes
  • Don’t give up until it looks right
• More Suggestions
  • Good design is good iteration
  • Keep project owners / marketing happy
  • allow others to review design before implementing
  • Design comps is other tools than Flex
  • Leverage Flex skins templates
  • Turn off your computer. Pickup a pencil.
  • Fireworks is a great every-person application
  • Stand on the shoulders of giants (without copying)


Building Stunning Flex Applications with FlexBuilder3 & CS3 (George Comninos from Adobe)

• Control the appearance through Skinning
• Skinning can be done through CSS
• Options
  • Pure CSS
  • Graphical skins
  • Programmatic skins
  • Third-party themes
• Graphical Skins
  • Can be bitmap file: GIF, PNG, JPEG, also SVG, SWF symbols
  • Scale elegantly using scale grid, applied to your component via CSS
• Programmatic Skins
  • Default halo
  • Written in AS
  • Applied to your component via css

He talks about Fireworks and output the graphical skin. Template command will be there at a url to be discolosed in MAX. Demonstration in Firework how to create a skin. Referes to devnet article to check it out. He showed how to changed the default skin using default assets in FireWork and export. Then go to FlexBuilder and import the skin. It will copy to Flexbuilder project and you can rename. He talks about ability to use the DesignView for CSS file in FB3. He then talks about imporing screenshot to import and use the scale grid to move the area you wantto overlap the content of the window. He then talks about using Illustrator to export the skin & import to FlexBuilder project. Now, goes to Flash, selec the component and using Conrol-> Convert to flex components. Then publish and now it is ready to be used in the Flex. He just use that in the application as the component and it just show up. He then moves onto FireWork about the feature that you can export the prototype with the flex components.

Useful article to get it started & example skin: http://www.adobe.com/devnet/flex/articles/flex_skins.html


Advanced Charting (by Brendan Meutzner)
He basically walk through the code and here is the code: http://meutzner.com/360


Get Beyond Point & Grunt (by Tony Hillerson from EffectiveUI)
I would say, this is my session of the day. Tony discuss the alternatives mean of communicating with user other than click & pointing. At this point, I know David was covering the day pretty good, so I got lazy & just enjoyed the session. Check out his site for the coverage of the session. Tony said he will post the slide & examples on his blog as soon as he got a chance, so here is the link to his site and I’ll update with the direct link if he update his site.