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...

Above diagram based on a lovely presentation slide by Brian Fling at Over the Air - London, UK 2008

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.