3. multiple networks
limited memory tiny small cpu
screen
one app
many variations
no mouse
limited battery life
indirect manipulation
numerous platforms and technologies
4. context of use
http://www.flickr.com/photos/psd/2197649475
12. voice web WiFi
Java
3G podcasting
Bluetooth
mega-pixel+
video
cameras
gesture
blogging haptic
SVG full colour
music
Flash
gigabytes location-based services
circa 2007
25. 2.0“
2.6“ right there 240 x 320 pixels
240 x 320 pixels ~100 ppi
exactly how big is a pixel?
A real problem faced when dealing with pixel fonts...
26. limited support
SVG vs Flash?
the future...
what about vectors?
http://en.wikipedia.org/wiki/Image:VectorBitmapExample.png
27. small
medium
large
bold
italic
regarding mobile typography...
28. but it’s starting to get better!
http://patterns.littlespringsdesign.com/index.php/Mobile_Typography
http://sender11.typepad.com/sender11/2008/01/prototyping-mob.html
29. design-time to runtime
from _________________ to _______________
insert favorite design tool insert final runtime
30. filters
animation multiply, screen, inverse, etc
great animation sequence created in Flash
gradients
typically can’t be rendered dynmaically
effects
anti-aliasing drop shadows, glows, reflections, etc
often makes re-use difficult
custom fonts
different sizes, colours and styles
large images
backgrounds, buttons, splash screens, etc
12.34K+
original design
31. Does this text change?
might need to include other versions...
unselected?
we’ll need to include the white versions as well
background
still haven’t included 13.86K image...
custom fonts
do we need to include different sizes, colors?
8.68K+
original resources
32. index transparency
animation 1bit instead of 8bit transparency
revisit animation later
solid colours
much faster to render dynamically
no effects
box drawn dynamically at least simple Photoshop effects
no resources required
system fonts
designed for the device
flat background
no additional memory/storage required
5.35K+
simplified design
33. margins + padding
as numeric values
composite
anti-aliased angle is added to drawn box
composite elements shadow
combine bits and pieces as required simple offset solid drop shadow adds depth
device fonts
no additional resources or cpu cycles needed
design notes
34. animation + states
single image - works much like a flipbook
aliased edges
can be used on different colours
2.87K
all resources
35. highlight_colour: 0x00FFFF
like css, no?
use what already works margin: 4 easy to update
colour changes can often be made by developers
padding: 4
shadow_colour: 0x333333
shadow_offset-x: 2
shadow_offset-y: 2
screen_width: 240 or 176 x 220
screen_height: 320 tweaking values making porting ui much easier!
constants
36. simple expressions
header.height = icon.height + (padding*2)
known value
much more flexible than
highlight.width = (screen_width/2) - (padding*2)
highlight.height = icon.height + font.leading + (padding*2)
value easily tweaked
useful when porting to different screen sizes
constraints
37. + 871 bytes base shape
reused by all similar elements
+ 530 bytes font could be separate
composited from a complete set of glyphs
+ 388 bytes transparent overlay
typically used as a ‘screen’ filter
= 1,789 bytes vs 2,147 bytes
final composite image single exported image
requires designer + developer co-operation designer as lone wolf...
composites
38. design for humans the mobile web is different
don’t just design on a computer Flash, SVG, Ajax, etc aren’t standard
do research and prototypes define constants
understand your users and the experience border: 4px; text-colour: 0xFF33EE;
get something on a device asap apply constraints
solve design problems in context ${this.width = screen.width/2}
very limited typography create composites
type on mobile has a long way to go button = base + icon + highlight;
pixel sizes will likely vary design flexible layouts
as will pixel density on many devices for screen widths of 176px to 240px+
colour will vary between devices optimize for file size and memory
no standard gamuts or depths render just-in-time if possible
tips + techniques
39. Little Springs Mobile Resources Adobe Mobile & Devices
http://patterns.littlespringsdesign.com http://www.adobe.com/devnet/devices
dotMobi: Mobile Web Development Forum Nokia
http://dev.mobi http://forum.nokia.com
mobiledesign.org Mobile Monday
http://log.mobiledesign.org/ http://www.mobilemonday.net/
Squidoo: Mobile Design Mobile Processing
http://www.squidoo.com/mobiledesign http://mobile.processing.org/
Cameron Moll: Mobile Web Design Mobile User Experience
http://mobilewebbook.com/ http://www.mobileuserexperience.com/
mobile design resources
40. thank you
Bryan Rieger
bryan.rieger@futureplatforms.com