making it work: moving from design to runtime
DESCRIPTION
TRANSCRIPT
Makin’ it workmoving from design-time to runtime
http://futureplatforms.com
Bryan RiegerCreative Director, Future Platforms
feeling bloated?
Danish clown Lars Lottrup in a giant balloon at the International Clown Festival in Copenhagen, Denmark. (John McConnico/AP)
memory problems?
Lars Lottrup from Denmark is seen with a giant balloon on his head during the International Clown Festival at the amusement park Dyrehavsbakken.
performance issues?
http://www.balloncirkus.dk/show.htm
The job isn’t done until it runs well on the actual device.and it’s not only the developers responsibility...
I’m not picking on Operathe image just happened to have a nice error...
a quick example...
custom fonts
anti-aliasingeffects
gradients
large images
filters
original design
12.34Kquite likely to run sluggishly on a Nokia N73
multiply, screen, inverse, etc
drop shadows, glows, reflections, etc
backgrounds, buttons, splash screens, etc
different sizes, colours and styles
often makes re-use difficult
typically can’t be rendered dynmaically
animationgreat animation sequence created in Flash
resources
and we’re still missing a few graphics just for this one screen
8.68K
unselected?we’ll need to include the white versions as well
Does this text change?might need to include other versions...
backgroundstill haven’t included 13.86K image...
custom fontsdo we need to include different sizes, colors?
simplified version
system fonts
box drawn dynamically
designed for the device
no resources required
no effects
solid colours
flat background
index transparency1bit instead of 8bit transparency
at least simple Photoshop effects
no additional memory/storage required
much faster to render dynamically
animationrevisit animation later
5.35Knot bad, but I think we can do better...
simple style guide
composite elements
margins + padding
combine bits and pieces as required
as numeric values
shadow
composite
device fonts
simple offset solid drop shadow adds depth
no additional resources or cpu cycles needed
anti-aliased angle is added to drawn box
notes for developerlet’s draw much of the ui dynamically
resources
2.87K totalactually runs quite well on a Motorola PEBL
animation + statessingle image - works much like a flipbook
aliased edgescan be used on different colours
constantshighlight_colour: 0x00FFFFmargin: 4padding: 4shadow_colour: 0x333333shadow_offset-x: 2shadow_offset-y: 2screen_width: 240screen_height: 320
or 176 x 220tweaking values making porting ui much easier!
easy to updatecolour changes can often be made by developers
like css, no?use what already works
constraints
highlight.width = (screen_width/2) - (padding*2)
header.height = icon.height + (padding*2)
highlight.height = icon.height + font.leading + (padding*2)
known valuemuch more flexible than
value easily tweakeduseful when porting to different screen sizes
simple expressions
composites
+
=
+
+ 871 bytes
530 bytes
388 bytes
1,789 bytes 2,147 bytesvs
transparent overlaytypically used as a ‘screen’ filter
font could be separatecomposited from a complete set of glyphs
base shapereused by all similar elements
final composite imagerequires designer + developer co-operation
single exported imagedesigner as lone wolf...
Don’t be afraid of the geek!design + developer = ux++
conversely, developers – go embrace the muse...
understand the target platform
don’t rely on app effects, filters, etc
use constants, constraints and composites
different devices may require different designs
treat your developer to a coffee once in a while ;)
tips & tricks
thank you.