![Page 1: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/1.jpg)
Makin’ it workmoving from design-time to runtime
http://futureplatforms.com
Bryan RiegerCreative Director, Future Platforms
![Page 2: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/2.jpg)
feeling bloated?
Danish clown Lars Lottrup in a giant balloon at the International Clown Festival in Copenhagen, Denmark. (John McConnico/AP)
![Page 3: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/3.jpg)
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.
![Page 4: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/4.jpg)
performance issues?
http://www.balloncirkus.dk/show.htm
![Page 5: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/5.jpg)
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...
![Page 6: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/6.jpg)
a quick example...
![Page 7: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/7.jpg)
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
![Page 8: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/8.jpg)
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?
![Page 9: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/9.jpg)
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...
![Page 10: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/10.jpg)
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
![Page 11: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/11.jpg)
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
![Page 12: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/12.jpg)
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
![Page 13: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/13.jpg)
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
![Page 14: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/14.jpg)
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...
![Page 15: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/15.jpg)
Don’t be afraid of the geek!design + developer = ux++
conversely, developers – go embrace the muse...
![Page 16: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/16.jpg)
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
![Page 17: Making it Work: moving from design to runtime](https://reader033.vdocument.in/reader033/viewer/2022052819/5462ea35b4af9f621c8b497d/html5/thumbnails/17.jpg)
thank you.