SlideShare ist ein Scribd-Unternehmen logo
1 von 40
Downloaden Sie, um offline zu lesen
Mobile Creativity 2008




   Going Mobile
A Pragmatic Look at Mobile Design

                          Bryan Rieger
               bryan.rieger@futureplatforms.com
http://www.flickr.com/photos/ishane/2478049891/




mobile is different
multiple networks




      limited memory           tiny           small cpu
                              screen

                              one app
   many variations


                                              no mouse

limited battery life




                       indirect manipulation

               numerous platforms and technologies
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          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.
Some things change quickly...
voice
monochrome



                               sms

                              wap
       bitmaps




                 circa 2001
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
but not everywhere at once...
2003 device
                     VERY popular in SE Asia in 2007....


Silicon Valley      South East Asia


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




                          two feet


            http://en.wikipedia.org/wiki/Human_being
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                         ~100 ppi




  exactly how big is a pixel?
                   A real problem faced when dealing with pixel fonts...
limited support

                                      SVG vs Flash?

                                      the future...



what about vectors?
   http://en.wikipedia.org/wiki/Image:VectorBitmapExample.png
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.typepad.com/sender11/2008/01/prototyping-mob.html
design-time to runtime
from _________________ to _______________
     insert favorite design tool insert final runtime
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
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
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
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
animation + states
                                           single image - works much like a flipbook



         aliased edges
can be used on different colours




                                   2.87K

                       all resources
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
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
+                          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
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
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
thank you
      Bryan Rieger
 bryan.rieger@futureplatforms.com

Weitere ähnliche Inhalte

Andere mochten auch

Stop Ruining your Real Estate Reputation - Detox your Digital Brand
Stop Ruining your Real Estate Reputation - Detox your Digital BrandStop Ruining your Real Estate Reputation - Detox your Digital Brand
Stop Ruining your Real Estate Reputation - Detox your Digital BrandLaura Monroe
 
Giving a great user experience in a mobile app
Giving a great user experience in a mobile appGiving a great user experience in a mobile app
Giving a great user experience in a mobile appmattanderson496
 
Google Analytic for Mobile Applications
Google Analytic for Mobile ApplicationsGoogle Analytic for Mobile Applications
Google Analytic for Mobile ApplicationsRajith Rajan
 
Evaluating Mobile Usability Guidelines: Mobile Usability Guidelines
Evaluating Mobile Usability Guidelines: Mobile Usability GuidelinesEvaluating Mobile Usability Guidelines: Mobile Usability Guidelines
Evaluating Mobile Usability Guidelines: Mobile Usability GuidelinesElementive
 
Mobile Usability Testing
Mobile Usability TestingMobile Usability Testing
Mobile Usability TestingGeneXus
 
Mobile App Analytics
Mobile App AnalyticsMobile App Analytics
Mobile App Analyticspragativbora
 
Usabilidad en Dispositivos Móviles (UNSIS 2014)
Usabilidad en Dispositivos Móviles (UNSIS 2014)Usabilidad en Dispositivos Móviles (UNSIS 2014)
Usabilidad en Dispositivos Móviles (UNSIS 2014)Mario A Moreno Rocha
 
Presentacion Taller Usabilidad / UX
Presentacion Taller Usabilidad / UX Presentacion Taller Usabilidad / UX
Presentacion Taller Usabilidad / UX Mario A Moreno Rocha
 
Web analytics como herramienta de Diseño
Web analytics como herramienta de DiseñoWeb analytics como herramienta de Diseño
Web analytics como herramienta de DiseñoSol Mesz
 
[2016/2017] Modern development paradigms
[2016/2017] Modern development paradigms [2016/2017] Modern development paradigms
[2016/2017] Modern development paradigms Ivano Malavolta
 
[2016/2017] AADL (Architecture Analysis and Design Language)
[2016/2017] AADL (Architecture Analysis and Design Language)[2016/2017] AADL (Architecture Analysis and Design Language)
[2016/2017] AADL (Architecture Analysis and Design Language)Ivano Malavolta
 
[2016/2017] Architectural languages
[2016/2017] Architectural languages[2016/2017] Architectural languages
[2016/2017] Architectural languagesIvano Malavolta
 
Pragmatic Product Strategy - Ways of thinking and doing that bring people tog...
Pragmatic Product Strategy - Ways of thinking and doing that bring people tog...Pragmatic Product Strategy - Ways of thinking and doing that bring people tog...
Pragmatic Product Strategy - Ways of thinking and doing that bring people tog...Jonny Schneider
 
[2016/2017] Introduction to Software Architecture
[2016/2017] Introduction to Software Architecture[2016/2017] Introduction to Software Architecture
[2016/2017] Introduction to Software ArchitectureIvano Malavolta
 
Structure modeling with UML [Software Modeling] [Computer Science] [Vrije Uni...
Structure modeling with UML [Software Modeling] [Computer Science] [Vrije Uni...Structure modeling with UML [Software Modeling] [Computer Science] [Vrije Uni...
Structure modeling with UML [Software Modeling] [Computer Science] [Vrije Uni...Ivano Malavolta
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information ArchitectureAndy Fitzgerald
 
Information Architecture & UI Design
Information Architecture & UI DesignInformation Architecture & UI Design
Information Architecture & UI DesignIvano Malavolta
 
Mission planning of autonomous quadrotors
Mission planning of autonomous quadrotorsMission planning of autonomous quadrotors
Mission planning of autonomous quadrotorsIvano Malavolta
 
Digital Detox: Destruction Myths
Digital Detox: Destruction MythsDigital Detox: Destruction Myths
Digital Detox: Destruction MythsDmitriy Soloveev
 
Modeling and abstraction, software development process [Software Modeling] [C...
Modeling and abstraction, software development process [Software Modeling] [C...Modeling and abstraction, software development process [Software Modeling] [C...
Modeling and abstraction, software development process [Software Modeling] [C...Ivano Malavolta
 

Andere mochten auch (20)

Stop Ruining your Real Estate Reputation - Detox your Digital Brand
Stop Ruining your Real Estate Reputation - Detox your Digital BrandStop Ruining your Real Estate Reputation - Detox your Digital Brand
Stop Ruining your Real Estate Reputation - Detox your Digital Brand
 
Giving a great user experience in a mobile app
Giving a great user experience in a mobile appGiving a great user experience in a mobile app
Giving a great user experience in a mobile app
 
Google Analytic for Mobile Applications
Google Analytic for Mobile ApplicationsGoogle Analytic for Mobile Applications
Google Analytic for Mobile Applications
 
Evaluating Mobile Usability Guidelines: Mobile Usability Guidelines
Evaluating Mobile Usability Guidelines: Mobile Usability GuidelinesEvaluating Mobile Usability Guidelines: Mobile Usability Guidelines
Evaluating Mobile Usability Guidelines: Mobile Usability Guidelines
 
Mobile Usability Testing
Mobile Usability TestingMobile Usability Testing
Mobile Usability Testing
 
Mobile App Analytics
Mobile App AnalyticsMobile App Analytics
Mobile App Analytics
 
Usabilidad en Dispositivos Móviles (UNSIS 2014)
Usabilidad en Dispositivos Móviles (UNSIS 2014)Usabilidad en Dispositivos Móviles (UNSIS 2014)
Usabilidad en Dispositivos Móviles (UNSIS 2014)
 
Presentacion Taller Usabilidad / UX
Presentacion Taller Usabilidad / UX Presentacion Taller Usabilidad / UX
Presentacion Taller Usabilidad / UX
 
Web analytics como herramienta de Diseño
Web analytics como herramienta de DiseñoWeb analytics como herramienta de Diseño
Web analytics como herramienta de Diseño
 
[2016/2017] Modern development paradigms
[2016/2017] Modern development paradigms [2016/2017] Modern development paradigms
[2016/2017] Modern development paradigms
 
[2016/2017] AADL (Architecture Analysis and Design Language)
[2016/2017] AADL (Architecture Analysis and Design Language)[2016/2017] AADL (Architecture Analysis and Design Language)
[2016/2017] AADL (Architecture Analysis and Design Language)
 
[2016/2017] Architectural languages
[2016/2017] Architectural languages[2016/2017] Architectural languages
[2016/2017] Architectural languages
 
Pragmatic Product Strategy - Ways of thinking and doing that bring people tog...
Pragmatic Product Strategy - Ways of thinking and doing that bring people tog...Pragmatic Product Strategy - Ways of thinking and doing that bring people tog...
Pragmatic Product Strategy - Ways of thinking and doing that bring people tog...
 
[2016/2017] Introduction to Software Architecture
[2016/2017] Introduction to Software Architecture[2016/2017] Introduction to Software Architecture
[2016/2017] Introduction to Software Architecture
 
Structure modeling with UML [Software Modeling] [Computer Science] [Vrije Uni...
Structure modeling with UML [Software Modeling] [Computer Science] [Vrije Uni...Structure modeling with UML [Software Modeling] [Computer Science] [Vrije Uni...
Structure modeling with UML [Software Modeling] [Computer Science] [Vrije Uni...
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
 
Information Architecture & UI Design
Information Architecture & UI DesignInformation Architecture & UI Design
Information Architecture & UI Design
 
Mission planning of autonomous quadrotors
Mission planning of autonomous quadrotorsMission planning of autonomous quadrotors
Mission planning of autonomous quadrotors
 
Digital Detox: Destruction Myths
Digital Detox: Destruction MythsDigital Detox: Destruction Myths
Digital Detox: Destruction Myths
 
Modeling and abstraction, software development process [Software Modeling] [C...
Modeling and abstraction, software development process [Software Modeling] [C...Modeling and abstraction, software development process [Software Modeling] [C...
Modeling and abstraction, software development process [Software Modeling] [C...
 

Ähnlich wie Going Mobile - A Pragmatic Look At Mobile Design

Fast Track - Windows 8 Apps
Fast Track - Windows 8 AppsFast Track - Windows 8 Apps
Fast Track - Windows 8 AppsAnkit Kashyap
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersAriya Hidayat
 
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentationUnderstanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentationJustin Dorfman
 
Developing the Next Generation Embedded HMIs
Developing the Next Generation Embedded HMIs Developing the Next Generation Embedded HMIs
Developing the Next Generation Embedded HMIs mentoresd
 
Heavy Chef March: Building Great Mobisites
Heavy Chef March: Building Great MobisitesHeavy Chef March: Building Great Mobisites
Heavy Chef March: Building Great MobisitesHeavy Chef
 
Introducing SAMSUNG GALAXY Note 10.1
Introducing SAMSUNG GALAXY Note 10.1Introducing SAMSUNG GALAXY Note 10.1
Introducing SAMSUNG GALAXY Note 10.1JJ Wu
 
Discovering The Unknown Aspects Of Nuke
Discovering The Unknown Aspects Of NukeDiscovering The Unknown Aspects Of Nuke
Discovering The Unknown Aspects Of NukeAnimation Kolkata
 
Is the Browser a Transitional Technology?
Is the Browser a Transitional Technology?Is the Browser a Transitional Technology?
Is the Browser a Transitional Technology?Allen Wirfs-Brock
 
Going Mobile with React Native and WebRTC
Going Mobile with React Native and WebRTCGoing Mobile with React Native and WebRTC
Going Mobile with React Native and WebRTCSaúl Ibarra Corretgé
 
Porting BlackBerry apps to the Series 40 platform
Porting BlackBerry apps to the Series 40 platformPorting BlackBerry apps to the Series 40 platform
Porting BlackBerry apps to the Series 40 platformMicrosoft Mobile Developer
 
Device+Cloud: come sviluppare App moderne ed interconnesse
Device+Cloud: come sviluppare App moderne ed interconnesseDevice+Cloud: come sviluppare App moderne ed interconnesse
Device+Cloud: come sviluppare App moderne ed interconnesseNinja Marketing
 
Joy of Inkscape - at StixCamp
Joy of Inkscape - at StixCampJoy of Inkscape - at StixCamp
Joy of Inkscape - at StixCampDonna Benjamin
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQueryPaul Bakaus
 
The FT Web App: Coding Responsively
The FT Web App: Coding ResponsivelyThe FT Web App: Coding Responsively
The FT Web App: Coding ResponsivelyC4Media
 
Nolan Wright: Appcelerator's World-Class Ecosystem
Nolan Wright: Appcelerator's World-Class Ecosystem Nolan Wright: Appcelerator's World-Class Ecosystem
Nolan Wright: Appcelerator's World-Class Ecosystem Axway Appcelerator
 
Mozilla In Malaysia
Mozilla In MalaysiaMozilla In Malaysia
Mozilla In MalaysiaGen Kanai
 

Ähnlich wie Going Mobile - A Pragmatic Look At Mobile Design (20)

Fast Track - Windows 8 Apps
Fast Track - Windows 8 AppsFast Track - Windows 8 Apps
Fast Track - Windows 8 Apps
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
 
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentationUnderstanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
 
Developing the Next Generation Embedded HMIs
Developing the Next Generation Embedded HMIs Developing the Next Generation Embedded HMIs
Developing the Next Generation Embedded HMIs
 
Datt 2501 week 11
Datt 2501 week 11Datt 2501 week 11
Datt 2501 week 11
 
Heavy Chef March: Building Great Mobisites
Heavy Chef March: Building Great MobisitesHeavy Chef March: Building Great Mobisites
Heavy Chef March: Building Great Mobisites
 
Introducing SAMSUNG GALAXY Note 10.1
Introducing SAMSUNG GALAXY Note 10.1Introducing SAMSUNG GALAXY Note 10.1
Introducing SAMSUNG GALAXY Note 10.1
 
Discovering The Unknown Aspects Of Nuke
Discovering The Unknown Aspects Of NukeDiscovering The Unknown Aspects Of Nuke
Discovering The Unknown Aspects Of Nuke
 
Is the Browser a Transitional Technology?
Is the Browser a Transitional Technology?Is the Browser a Transitional Technology?
Is the Browser a Transitional Technology?
 
Going Mobile with React Native and WebRTC
Going Mobile with React Native and WebRTCGoing Mobile with React Native and WebRTC
Going Mobile with React Native and WebRTC
 
K2P workshop 3-23-13
K2P workshop 3-23-13K2P workshop 3-23-13
K2P workshop 3-23-13
 
Porting BlackBerry apps to the Series 40 platform
Porting BlackBerry apps to the Series 40 platformPorting BlackBerry apps to the Series 40 platform
Porting BlackBerry apps to the Series 40 platform
 
Device+Cloud: come sviluppare App moderne ed interconnesse
Device+Cloud: come sviluppare App moderne ed interconnesseDevice+Cloud: come sviluppare App moderne ed interconnesse
Device+Cloud: come sviluppare App moderne ed interconnesse
 
Joy of Inkscape - at StixCamp
Joy of Inkscape - at StixCampJoy of Inkscape - at StixCamp
Joy of Inkscape - at StixCamp
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
 
Hacking for salone: drone races
Hacking for salone: drone racesHacking for salone: drone races
Hacking for salone: drone races
 
The FT Web App: Coding Responsively
The FT Web App: Coding ResponsivelyThe FT Web App: Coding Responsively
The FT Web App: Coding Responsively
 
Nolan Wright: Appcelerator's World-Class Ecosystem
Nolan Wright: Appcelerator's World-Class Ecosystem Nolan Wright: Appcelerator's World-Class Ecosystem
Nolan Wright: Appcelerator's World-Class Ecosystem
 
Mozilla In Malaysia
Mozilla In MalaysiaMozilla In Malaysia
Mozilla In Malaysia
 
Pen pc tech
Pen pc techPen pc tech
Pen pc tech
 

Mehr von Bryan Rieger

The End of Unlimited Bandwidth
The End of Unlimited BandwidthThe End of Unlimited Bandwidth
The End of Unlimited BandwidthBryan Rieger
 
Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of WonderfulBryan Rieger
 
What Would Picasso Do?
What Would Picasso Do?What Would Picasso Do?
What Would Picasso Do?Bryan Rieger
 
Rethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuRethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuBryan Rieger
 
Going Mobile (2010) by Yiibu
Going Mobile (2010) by YiibuGoing Mobile (2010) by Yiibu
Going Mobile (2010) by YiibuBryan Rieger
 
8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User Experience8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User ExperienceBryan Rieger
 
Mobile Ajax Workshop
Mobile Ajax WorkshopMobile Ajax Workshop
Mobile Ajax WorkshopBryan Rieger
 
Of Prototypes, Rubber Ducks And Little Men Behind The Curtain
Of Prototypes, Rubber Ducks And Little Men Behind The CurtainOf Prototypes, Rubber Ducks And Little Men Behind The Curtain
Of Prototypes, Rubber Ducks And Little Men Behind The CurtainBryan Rieger
 
Modeling the Mobile User Experience
Modeling the Mobile User ExperienceModeling the Mobile User Experience
Modeling the Mobile User ExperienceBryan Rieger
 
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?Bryan Rieger
 
Creating Casual Games, Content and Applications for the Mobile Long Tail
Creating Casual Games, Content and Applications for the Mobile Long TailCreating Casual Games, Content and Applications for the Mobile Long Tail
Creating Casual Games, Content and Applications for the Mobile Long TailBryan Rieger
 

Mehr von Bryan Rieger (14)

The End of Unlimited Bandwidth
The End of Unlimited BandwidthThe End of Unlimited Bandwidth
The End of Unlimited Bandwidth
 
Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of Wonderful
 
What Would Picasso Do?
What Would Picasso Do?What Would Picasso Do?
What Would Picasso Do?
 
Rethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by YiibuRethinking the Mobile Web by Yiibu
Rethinking the Mobile Web by Yiibu
 
Going Mobile (2010) by Yiibu
Going Mobile (2010) by YiibuGoing Mobile (2010) by Yiibu
Going Mobile (2010) by Yiibu
 
8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User Experience8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User Experience
 
Mobile Ajax Workshop
Mobile Ajax WorkshopMobile Ajax Workshop
Mobile Ajax Workshop
 
Of Prototypes, Rubber Ducks And Little Men Behind The Curtain
Of Prototypes, Rubber Ducks And Little Men Behind The CurtainOf Prototypes, Rubber Ducks And Little Men Behind The Curtain
Of Prototypes, Rubber Ducks And Little Men Behind The Curtain
 
Modeling the Mobile User Experience
Modeling the Mobile User ExperienceModeling the Mobile User Experience
Modeling the Mobile User Experience
 
Mobile Persuasion
Mobile PersuasionMobile Persuasion
Mobile Persuasion
 
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
 
Creating Casual Games, Content and Applications for the Mobile Long Tail
Creating Casual Games, Content and Applications for the Mobile Long TailCreating Casual Games, Content and Applications for the Mobile Long Tail
Creating Casual Games, Content and Applications for the Mobile Long Tail
 
Makin It Work
Makin It WorkMakin It Work
Makin It Work
 
Prime Sky
Prime SkyPrime Sky
Prime Sky
 

Kürzlich hochgeladen

ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 

Kürzlich hochgeladen (20)

ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 

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