Mobile Creativity 2008




   Going Mobile
A Pragmatic Look at Mobile Design

                          Bryan Rieger
     ...
http://www.flickr.com/photos/ishane/2478049891/




mobile is different
multiple networks




      limited memory           tiny           small cpu
                              screen

      ...
context of use
  http://www.flickr.com/photos/psd/2197649475
http://www.flickr.com/photos/robyn-gallagher/185437944




private device – public context
http://www.flickr.com/photos/zac-attack/2506457417/




expect distractions
http://www.flickr.com/photos/gaetanlee/118885175




expect diversity
http://www.flickr.com/photos/hawksanddoves/325231714




a few walled gardens...
WAP            T9       MMS       predictive text
                     location-based services

     GPRS          transco...
Some things change quickly...
voice
monochrome



                               sms

                              wap
       bitmaps




             ...
voice                               web                    WiFi
                             Java
              3G        ...
but not everywhere at once...
2003 device
                     VERY popular in SE Asia in 2007....


Silicon Valley      South East Asia


             ...
and other things
change very slowly...
two hands
                          two eyes
                                                  two ears




              ...
design for human beings
http://www.flickr.com/photos/ikkoskinen/311484235




do research
http://www.flickr.com/photos/veganstraightedge/2256486567




iterate quickly
http://www.flickr.com/photos/yandle/761632009




test ideas often
http://www.flickr.com/photos/mellis/304872324




get something on a device quickly
http://www.flickr.com/photos/viriyincy/2491840552




focus on the content
http://www.flickr.com/photos/robyn-gallagher/185437944




don’t forget the context
design for mobile
 the problem with pixels...
2.0“
        2.6“                           right there                         240 x 320 pixels
240 x 320 pixels         ...
limited support

                                      SVG vs Flash?

                                      the future...
...
small
           medium
           large
           bold
           italic



regarding mobile typography...
but it’s starting to get better!
http://patterns.littlespringsdesign.com/index.php/Mobile_Typography
http://sender11.typep...
design-time to runtime
from _________________ to _______________
     insert favorite design tool insert final runtime
filters
                        animation                       multiply, screen, inverse, etc
great animation sequence cr...
Does this text change?
                                                            might need to include other versions......
index transparency
             animation                      1bit instead of 8bit transparency
         revisit animatio...
margins + padding
              as numeric values


                                      composite
                      ...
animation + states
                                           single image - works much like a flipbook



         aliase...
highlight_colour: 0x00FFFF
  like css, no?
use what already works   margin: 4               easy to update
               ...
simple expressions

        header.height = icon.height + (padding*2)
                                         known value...
+                          871 bytes             base shape
                                                 reused by all...
design for humans                          the mobile web is different
don’t just design on a computer            Flash, S...
Little Springs Mobile Resources           Adobe Mobile & Devices
http://patterns.littlespringsdesign.com   http://www.adob...
thank you
      Bryan Rieger
 bryan.rieger@futureplatforms.com
Upcoming SlideShare
Loading in …5
×

Going Mobile - A Pragmatic Look At Mobile Design

24,788 views
24,198 views

Published on

Presentation by Bryan Rieger of Future Platforms at Mobile Creativity 2008 in London, UK.

Published in: Technology, Business
1 Comment
103 Likes
Statistics
Notes
No Downloads
Views
Total views
24,788
On SlideShare
0
From Embeds
0
Number of Embeds
1,923
Actions
Shares
0
Downloads
1,792
Comments
1
Likes
103
Embeds 0
No embeds

No notes for slide

Going Mobile - A Pragmatic Look At Mobile Design

  1. Mobile Creativity 2008 Going Mobile A Pragmatic Look at Mobile Design Bryan Rieger bryan.rieger@futureplatforms.com
  2. http://www.flickr.com/photos/ishane/2478049891/ mobile is different
  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
  5. http://www.flickr.com/photos/robyn-gallagher/185437944 private device – public context
  6. http://www.flickr.com/photos/zac-attack/2506457417/ expect distractions
  7. http://www.flickr.com/photos/gaetanlee/118885175 expect diversity
  8. http://www.flickr.com/photos/hawksanddoves/325231714 a few walled gardens...
  9. WAP T9 MMS predictive text location-based services GPRS transcoding SMS WURFL GPS GSM 3GP EDGE WiFi NTT DoCoMo OEMs haptics CLDC 3G MIDP OpenWave .mobi NetFront SVG WebKit operators Symbian Java ME Android Opera UiQ Flash Lite Series 60 Bluetooth Series 40 nSeries tri-band and lots of jargon.
  10. Some things change quickly...
  11. voice monochrome sms wap bitmaps circa 2001
  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
  13. but not everywhere at once...
  14. 2003 device VERY popular in SE Asia in 2007.... Silicon Valley South East Asia circa 2007
  15. and other things change very slowly...
  16. two hands two eyes two ears two feet http://en.wikipedia.org/wiki/Human_being
  17. design for human beings
  18. http://www.flickr.com/photos/ikkoskinen/311484235 do research
  19. http://www.flickr.com/photos/veganstraightedge/2256486567 iterate quickly
  20. http://www.flickr.com/photos/yandle/761632009 test ideas often
  21. http://www.flickr.com/photos/mellis/304872324 get something on a device quickly
  22. http://www.flickr.com/photos/viriyincy/2491840552 focus on the content
  23. http://www.flickr.com/photos/robyn-gallagher/185437944 don’t forget the context
  24. design for mobile the problem with pixels...
  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

×