The Joy of Flex

10 am. I’m at Aaron Adams’ talk called “Design Eye for the Dev Guy” aimed at developers who are stuck doing their own design and don’t have the support of a dedicated design department or team member. At Cynergy Systems, designers are called PPGs, “pretty picture guys.” The two classes from design school he uses every day are color theory and 2-d theory (rules about how you

group elements). Design is not all about feeling, even though emotional response is important, there are rules.

Before worrying about color and details, think about construction and composition. Sketch things out get away from the pixels, turn the computer off and sketch on paper. Iterate a lot of versions. But don’t worry about color: worry about focal points, flow. If you go into a presentation with just a wireframe and you use any kind of specific design or color, the owner will get caught up in the details: not sure I like that color, can we see three different versions with different colors? You can kill all of that distraction with true wireframes. Make it obvious that it’s not a polished design.

Color theory. Color has impact in terms of its context. The effect of a color depends on its background. In the context of a user interface, how you combine elements could be lost on the user, focal points could be put in the wrong place because of bad color combination choices.

Focal points. Use color and contrast to keep the focus on important tasks. Say that in the UI there is one action that is most important, then if everything is the same color and there is little contrast, then the focus could be lost. Mark down the key focal points. Use elements of design to help the user get their job done.

Prioritizing actions. Drive the UI based on the flow of tasks that the user has to accomplish. Think about reading left to right (for English speakers), use that as a basis for laying out tasks to be performed. Validate the UI by putting it in front of people and get them to talk to you about what they see. Get some tough skin and listen to criticism.

Switching from PhotoShop to Fireworks as a primary UI design tool increased Aaron Adams’ productivity by 100%. Use layers to build things up, creates depth, realism, shading. Trying playing around with overlaps and transparency: “broad sweeping strokes of realism” like shadow and depth adds a richness to the UI. Back in Flex 1.5 when we had the first Flex style explorer, people responded well to simple things like translucent panels.

Fall in love with the details of the design. The developer focus is typically on the details of the code. But if you are responsible for making things look good as well, look at the details of the design. For example, look at your favorite UI and figure out what about it is so attractive to you.

More quick suggestions: eliminate excessive lines, allow elements room to breathe, design for a consistent implementation, understand context, broad sweeping strokes of realism vs. physical reality.

Question about 508 compliance: has anyone actually seen a real 508 compliant app in Flex? How do you do it? Aaron hasn’t seen one.

Question about how to stop designing: there’s always a better design out there, but eventually you have to nail it down and start coding. Set milestones for finishing design and then come back in the next version.

Question: When are transitions more than just cool and actually useful and important for helping people get their work done? Examples: Immediate feedback to the user, e.g., modal dialog shaking its head left to right. Changing context: moving from one module to another where there is a big break between the component layouts.

Question: what about concepts that apply different to different ages, genders, etc. Look at how your users interact with the product, know your users.

Question: how about letting users customize the colors, animations, etc.? When those features get added in, turns out the percentage of people who actually use it is low. Don’t give users the tools to screw up the UI.

Question about designer-developer workflow. We do a look-first approach, where we focus on the UI first, get some comps up. But the question is also about whether designers should be allowed to dictate the functionality, or are so enamored of a particular look that they don’t allow needed functionality to be part of the design.

More suggestions for making things pixel perfect: build in layers back to front; tackle one element at a time; get dirty, don’t overly depend on tools; borderSkin is your friend; Embed fonts in SWF for more control; find and use good class extensions, know your blendMode attributes; and don’t give up until it looks right.

Question about embedding fonts. People making arguments that it’s too slow to load an embedded font, or that it’s unnecessary unless you have specific needs like animating the text. On the other hand, if you need a consistent look, you have to embed the font.

More suggestions: good design is good iteration; keep project owners and marketing happy; allow others to review design before implementing; design comps in tools other than Flex; leverage Flex skins templates; turn off your computer and pick up a pencil; Fireworks is a great every-person application; stand on the shoulders of giants (without copying).

Question about examples of what developers typically get wrong. Poor use of color is a big one.

Question about Adobe FlexStore example: is it a good design, are there any major design flaws in it? It shows off a lot of Flex features, so that’s good. It provides a good left to right flow.

Question: is there a source for good design reference applications built in Flex? There are some examples at cynergytv.com.

Technorati Tags: 360Flex