Stuff to click on

Monday, August 13

360flex - Design Eye for the Dev Guy

...and gal too, apparently!

Brain dump notes...

Design Eye for the Dev Guy
Aaron Adams, Cynergy

Color theory and 2D design - rules to learn and follow for implementing good design

Constructing a composition - blocking things out on paper. don't worry about color. worry about flow and focal points

Present wireframes in b/w with no graphics to eliminate judgments and make it clear this is not a polished design

color theory - placing a color on different backgrounds to enhance focal points (or not), looking at distractions and visibility

distinguish focal points - use color and contrast to keep focus on important tasks. if there is an action that's important use more contrast so it is not lost.

prioritization - beware of flow and what needs to be accomplished in what order? perform tasks left to right or top to bottom so that it's logical to the person using it.

think (and build) in layers - comping in fireworks vs. photoshop - fw is higher productivity. shading, lighting, shadows improve "realism".

details - take some time to make things LOOK GOOD like buttons :) play with the elements to see what happens when you add styling to elements.

general suggestions:
eliminate excessive lines - reduce visual distraction, use implied lines instead of a physical line
allow elements room to breathe
design for consistent implementation
understand context
realism vs physical reality - ie put all shadows in same direction, so design mirrors "real world"

90% white on black is still "white" but not as intense, a little more eye friendly :)

transitions are "cool" but may not make sense in a day to day productivity setting. users don't want to wait for an animation or transition.

design still sells. if it looks good and makes sense then it will be more "popular"

get comps in front first, before functionality designed

accessibility - 508 compliant apps? might require multiple versions of applications

use familiarity with existing forms as a jumping off point. borrow from previous experiences so they don't have to relearn a process

make "design time" a phase of the project. once design is finalized then it's dev time, and you don't go back until version 2 :)

Combination of making things look "good" and enhancing productivity and storytelling. keep balance, productivity and flow in mind. Does everything have a purpose?

make sure transitions are consistent. if some items fade in and out, then all similar items should to avoid "jarring"

get the application WORKING functionally first then go back and add transitions as they make sense.

immediate user feedback and recognition. ie login errors, changing context

monitor testing for colors and contrast? some colors look better on mac monitors than lcd & pc monitors. ensure you have good contrast, perhaps exact colors aren't the most important thing?

use color and motion to get attention. gratuitous motion will distract user from what is important and focal points on screen

addressing gender, age, and audience of your application. know your audience!

pixel perfect suggestions:
build in layers, back to front
tackle one element at a time
don't overly depend on tools
borderSkin is your friend - export PNG out of fireworks
embed fonts in Flash - saves on file size :)
class extensions,
blendmode attributes
don't give up!

No comments: