0
61.     Rules for Designing     Amazing Apps     Brian Fling @fling                      4.2.                    5.3.     ...
great mobile design isnot made in Photoshop                 MADE WITH LOVE IN SEATTLE BY
“We could build the best mobile appever made, but if our customers don’tknow why it’s good, then it could be is great mobi...
The Puget Sound Region
The Puget Sound Region
mobiledesign.org
“[Brian] states making a nativeapplication can be the best thing for aproduct, but confirms on the otherhand that the mobil...
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
Ancient Greek Technology
Ancient Greek TechnologySTREETS CARTOGRAPHY CALIPER CRANE  ESCAPEMENT TUMBLER_LOCK GEARS      PLUMBING SPIRAL_STAIRCASE  U...
MADE WITH LOVE IN SEATTLE BY
POLITICAL_PHILOSOPHY ETHICS METAPHYSICS   ONTOLOGY LOGIC  BIOLOGY RHETORIC    & AESTHETICS
“Greek philosophy hasshaped the entireWestern thought sinceits inception.”
MADE WITH LOVE IN SEATTLE BY
Some Innovations from the Roman Empire
Some Innovations from the Roman EmpireABACUS AMPHITHEATER AQUEDUCT ARCHBOOK BRASS BRIDGE CAMEOS CAST_IRON    CEMENT CRANE ...
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
“In an economy where the only certainty isuncertainty, the one source of lastingcompetitive advantage is knowledge. Whenma...
1970           1980           1990               2000                2010                      2020computing          main...
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
61.#1                          Rules for Designing                          Amazing Apps                          Brian Fl...
mobile design is anentirely new breed     of design.              MADE WITH LOVE IN SEATTLE BY
Phones areabout makingthe most ofthe moment,simple tasks,& context.
MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
think of your app as a     great book.                 MADE WITH LOVE IN SEATTLE BY
think of your app as a     great book.  with a clear beginning, middle and end                                  MADE WITH ...
Tablets areabout focus,consumption,simple tasks& portability.
‣   Platform Aesthetic
‣ Platform Aesthetic‣ Many Resolutions
‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch
‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation
‣   Platform Aesthetic‣   Many Resolutions‣   Pixels per Inch‣   Orientation‣   Design Grids
‣   Platform Aesthetic‣   Many Resolutions‣   Pixels per Inch‣   Orientation‣   Design Grids‣   Perspective
‣   Platform Aesthetic‣   Many Resolutions‣   Pixels per Inch‣   Orientation‣   Design Grids‣   Perspective‣   Dimension
‣   Platform Aesthetic   ‣   Interactions‣   Many Resolutions‣   Pixels per Inch‣   Orientation‣   Design Grids‣   Perspec...
‣   Platform Aesthetic   ‣ Interactions‣   Many Resolutions     ‣ Motion‣   Pixels per Inch‣   Orientation‣   Design Grids...
‣   Platform Aesthetic   ‣ Interactions‣   Many Resolutions     ‣ Motion‣   Pixels per Inch      ‣ Transitions‣   Orientat...
‣   Platform Aesthetic   ‣ Interactions‣   Many Resolutions     ‣ Motion‣   Pixels per Inch      ‣ Transitions‣   Orientat...
‣   Platform Aesthetic   ‣   Interactions‣   Many Resolutions     ‣   Motion‣   Pixels per Inch      ‣   Transitions‣   Or...
‣   Platform Aesthetic   ‣   Interactions‣   Many Resolutions     ‣   Motion‣   Pixels per Inch      ‣   Transitions‣   Or...
p/z universal
p/z universalbuild a website that provided the bestpossible experience to the context.
p/z universalbuild a website that provided the bestpossible experience to the context.      iPad      magazine
p/z universalbuild a website that provided the bestpossible experience to the context.      iPad         iPhone      magaz...
p/z universalbuild a website that provided the bestpossible experience to the context.      iPad         iPhone        Des...
MADE WITH LOVE IN SEATTLE BY
1x HTML5 Markup
1x HTML5 Markup1x Hexadecimal CSS Framework
1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework
1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks
1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks12x Media-Query-based Layouts
a hexadecimal what?
the hex-gridTypically when using a gridweb designers are typicallyonly using vertical units.
the hex-gridbut in mobile design, we must usehorizontal units as well. thismeans that any unit size mustwork vertically as...
61. UNDERSTAND THE MEDIUM#2.                          Rules for Designing                          Amazing Apps           ...
1 out of 3 projectsgo sideways because ofBAD DATA                  MADE WITH LOVE IN SEATTLE BY
MADE WITH LOVE IN SEATTLE BY
Content is Data  and there is noDesign without Data
Content is Data  and there is noDesign without Data
Creating Amazing Experiences for all Mobile DevicesCLIENTAutomatic Data ProcessingPROJECTSADP iPhone App, Mobile Web App, ...
“A new form of Web      content that ismeaningful to computerswill unleash a revolution  of new possibilities.”
MADE WITH LOVE IN SEATTLE BY
61. UNDERSTAND THE MEDIUM                          Rules for Designing                          Amazing Apps              ...
JARGON ALERTContextThe circumstances that formthe setting for an event,statement, or idea, and interms of which it can be ...
context addsmeaning to data            MADE WITH LOVE IN SEATTLE BY
Radio                   TV    Live                                               Billboard                         ry     ...
WAP             Bluetooth                                             Radio                   TV                          ...
WAP                       Discuss                                                                  IVR                    ...
Join              Down                                                                             Notify                 ...
types of contextBig IdeasLocationDeviceState of Mind
types of contextBig IdeasLocationDeviceState of Mind
types of contextBig IdeasLocationDeviceState of Mind
types of contextBig IdeasLocationDeviceState of Mind
always add value to the    users context*                  MADE WITH LOVE IN SEATTLE BY
always add value to the    users context*  *Doing so requires a little Psych 101                                   MADE WI...
6                      Rules for Designing                       Amazing Apps                       Brian Fling @fling1. U...
interactions evoke  strong feelings             MADE WITH LOVE IN SEATTLE BY
MEDIUM (Mobile)
CONTEXT          MEDIUM           (Mobile)
CONTEXT                        MEDIUM                         (Mobile)          INTERACTION
The Elements of User Experience                                                                                           ...
Completion                   Web as hypertext system                                              Visual Design: visual tr...
Web as software interface                         ConcreteVisual Design: graphic treatment of interfaceelements (the "look...
JARGON ALERTNeedsThe circumstances in whichsomething is necessary, or thatrequire some course of action.
Abraham Harold Maslow(April 1, 1908 – June 8, 1970)was an American psychologist.He is noted for his concept-ualization of ...
CONTEXT                        MEDIUM                         (Mobile)          INTERACTION
?CONTEXT                        MEDIUM                         (Mobile)          INTERACTION
JARGON ALERTSkeuomorph A derivative object that retains ornamental design cues to a structure that was necessary in the or...
http://www.flickr.com/photos/youraccount/sets/72157619967702538/with/3642814120/
great interactions evoke feelings              MADE WITH LOVE IN SEATTLE BY
“Unlike personality, attitudesare expected to change as afunction of experience.”
Affect
AffectThe emotional response that expresses anindividuals degree of preference for an entity.
AffectBehavior
AffectBehaviorThe verbal indication or typical behavioraltendency of an individual.
AffectBehaviorCognition
AffectBehaviorCognitionThe evaluation of the entity that constitutes anindividuals beliefs about the object.
6                      Rules for Designing                       Amazing Apps                       Brian Fling @fling1. U...
details matter            MADE WITH LOVE IN SEATTLE BY
design @ 1600%           MADE WITH LOVE IN SEATTLE BY
6x Navigation & Toolbars
6x Navigation & Toolbars3x Alerts & Modals
6x Navigation & Toolbars3x Alerts & Modals26x Types of Views
6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls
6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls13x Application Controls
6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls13x Application Controls9x Animations & Trans...
6                      Rules for Designing                       Amazing Apps                       Brian Fling @fling1. U...
there are few tools or processes that    suit mobile              MADE WITH LOVE IN SEATTLE BY
DESIGNERS   DEVELOPERS
Planning   Interactions   Design       Integration   Development   Testing   Fixes   Deployment                           ...
Planning   Interactions   Design       Integration   Development   Testing   Fixes   Deployment                           ...
Planning   Interactions   Design       Integration   Development   Testing   Fixes   Deployment                           ...
Planning   Interactions   Design       Integration   Development   Testing   Fixes   Deployment                           ...
Planning   Interactions   Design       Integration   Development   Testing   Fixes   Deployment                           ...
Planning   Interactions   Design       Integration   Development   Testing   Fixes   Deployment                           ...
Planning   Interactions   Design       Integration   Development   Testing   Fixes   Deployment                           ...
Planning   Interactions   Design       Integration   Development   Testing   Fixes   Deployment                           ...
Planning   Interactions   Design       Integration   Development   Testing   Fixes   Deployment                           ...
Mobile Design is Web Design
Mobile Design is Web Design
Mobile Design is Software Design
Mobile Design is Software Design
A Fully Agile Agency                                      From Start to FinishThis document contains confidential informat...
This document contains confidential information and is provided for private review only. Do not distribute without permiss...
This document contains confidential information and is provided for private review only. Do not distribute without permiss...
Process
DefineProcess
Define   DataProcess
Define   Data   InteractionProcess
Define   Data   Interaction   DesignProcess
Deliverables                 Define   Data   Interaction   Design               Process
Deliverables               Project Brief                  Define        Data   Interaction   Design               Process
JourneysDeliverables               Project Brief                  Define        Data   Interaction   Design               P...
Context Map                  JourneysDeliverables               Project Brief                  Define        Data   Interac...
Context Map                  JourneysDeliverables               Project Brief   Content Audit                  Define      ...
Context Map                  Journeys        API AuditDeliverables               Project Brief   Content Audit            ...
Context Map     Data Modeling                  Journeys        API AuditDeliverables               Project Brief   Content...
App Flow               Context Map     Data Modeling                  Journeys        API AuditDeliverables               ...
App Flow               Context Map     Data Modeling                  Journeys        API AuditDeliverables               ...
App Flow               Context Map     Data Modeling                  Journeys        API Audit    Zone DiagramsDeliverabl...
App Flow               Context Map     Data Modeling      App Map                  Journeys        API Audit    Zone Diagr...
App Flow      Reference                                                  Design               Context Map     Data Modelin...
App Flow      Reference                                                  Design               Context Map     Data Modelin...
App Flow      Reference                                                  Design               Context Map     Data Modelin...
App Flow      Reference                                                  Design               Context Map     Data Modelin...
App Flow      Reference                                                                Design Comps                       ...
Asset Library                                   App Flow      Reference                                                   ...
6                      Rules for Designing                       Amazing Apps                       Brian Fling @fling1. U...
EHARMONYHOME v1
EHARMONYHOME v2
EHARMONYHOME v3
EHARMONYHOME v4
EHARMONYHOME v5
EHARMONYHOME v6
Get in TouchTHANK YOU                    Find Out How We Can Help You.My name is Brian Fling and            Brian FlingI’m...
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
6 Rules to Designing Amazing Mobile Apps (@media 2011)
Upcoming SlideShare
Loading in...5
×

6 Rules to Designing Amazing Mobile Apps (@media 2011)

9,201

Published on

THE PATH TO CREATING MEMORABLE MOBILE EXPERIENCES

Building a mobile app isn’t easy. Regardless of chosen platform or technology creating a memorable mobile experience has some pretty intense challenges throughout. However if you can get it right it can have some incredible rewards and propel your brand in more ways than one. After spending ten years building mobile apps for some of the biggest companies in the world, author and mobile designer Brian Fling shares his six rules for building amazing apps that will either you get you started or improve upon your next release.

Published in: Technology
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,201
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
363
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

Transcript of "6 Rules to Designing Amazing Mobile Apps (@media 2011)"

  1. 1. 61. Rules for Designing Amazing Apps Brian Fling @fling 4.2. 5.3. 6.
  2. 2. great mobile design isnot made in Photoshop MADE WITH LOVE IN SEATTLE BY
  3. 3. “We could build the best mobile appever made, but if our customers don’tknow why it’s good, then it could be is great mobile designnot made in Photoshopthe worst app ever made. —Scott Dierdorf @sdierdorf MADE WITH LOVE IN SEATTLE BY
  4. 4. The Puget Sound Region
  5. 5. The Puget Sound Region
  6. 6. mobiledesign.org
  7. 7. “[Brian] states making a nativeapplication can be the best thing for aproduct, but confirms on the otherhand that the mobile web is the onlylong term commercially viablecontent platform for mobile devices —Thibault Imbert
  8. 8. MADE WITH LOVE IN SEATTLE BY
  9. 9. MADE WITH LOVE IN SEATTLE BY
  10. 10. MADE WITH LOVE IN SEATTLE BY
  11. 11. Ancient Greek Technology
  12. 12. Ancient Greek TechnologySTREETS CARTOGRAPHY CALIPER CRANE ESCAPEMENT TUMBLER_LOCK GEARS PLUMBING SPIRAL_STAIRCASE URBAN_PLANNING CROSSBOW WINCH WHEELBARROW SHOWERS CENTRAL_HEATING LIGHTHOUSE ALARM_CLOCK CHAIN_DRIVE CANNON LEVERS WATER_MILL GIMBAL DRY_DOCK ANALOG_COMPUTERS FIRE_HOSE VENDING_MACHINE WIND_VANE CLOCK_TOWER AUTOMATIC_DOORS
  13. 13. MADE WITH LOVE IN SEATTLE BY
  14. 14. POLITICAL_PHILOSOPHY ETHICS METAPHYSICS ONTOLOGY LOGIC BIOLOGY RHETORIC & AESTHETICS
  15. 15. “Greek philosophy hasshaped the entireWestern thought sinceits inception.”
  16. 16. MADE WITH LOVE IN SEATTLE BY
  17. 17. Some Innovations from the Roman Empire
  18. 18. Some Innovations from the Roman EmpireABACUS AMPHITHEATER AQUEDUCT ARCHBOOK BRASS BRIDGE CAMEOS CAST_IRON CEMENT CRANE DAM DOME LOOM FLAMETHROWER GLASS BLOWING HAND_SOAP HYDRAULICS HYDROMETER KNIFE LIGHTHOUSES LEATHER MILLS STEAM_ENGINE NEWSPAPER ODOMETER PADDLE_WHEEL PEWTER POTTERYREAPER SAILS RUDDER SAUSAGE SEWERS SPIRAL_STAIRCASE STENOGRAPHY STREET_MAPS SURGICAL_INSTRUMENTS
  19. 19. MADE WITH LOVE IN SEATTLE BY
  20. 20. MADE WITH LOVE IN SEATTLE BY
  21. 21. MADE WITH LOVE IN SEATTLE BY
  22. 22. MADE WITH LOVE IN SEATTLE BY
  23. 23. MADE WITH LOVE IN SEATTLE BY
  24. 24. “In an economy where the only certainty isuncertainty, the one source of lastingcompetitive advantage is knowledge. Whenmarkets shift, technologies proliferate, andproducts become obsolete almost overnight,successful companies are those thatconsistently create new knowledge,disseminate it widely throughout theorganization and quickly embody it in newtechnologies and products”
  25. 25. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 next MADE WITH LOVE IN SEATTLE BY
  26. 26. MADE WITH LOVE IN SEATTLE BY
  27. 27. MADE WITH LOVE IN SEATTLE BY
  28. 28. 61.#1 Rules for Designing Amazing Apps Brian Fling @fling UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums.2. GET YOUR DATA DIALED 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Data is the new content, and it comes from Small screens don’t make things easier. They everywhere. make things a lot harder.3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.
  29. 29. mobile design is anentirely new breed of design. MADE WITH LOVE IN SEATTLE BY
  30. 30. Phones areabout makingthe most ofthe moment,simple tasks,& context.
  31. 31. MADE WITH LOVE IN SEATTLE BY
  32. 32. MADE WITH LOVE IN SEATTLE BY
  33. 33. think of your app as a great book. MADE WITH LOVE IN SEATTLE BY
  34. 34. think of your app as a great book. with a clear beginning, middle and end MADE WITH LOVE IN SEATTLE BY
  35. 35. Tablets areabout focus,consumption,simple tasks& portability.
  36. 36. ‣ Platform Aesthetic
  37. 37. ‣ Platform Aesthetic‣ Many Resolutions
  38. 38. ‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch
  39. 39. ‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation
  40. 40. ‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids
  41. 41. ‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective
  42. 42. ‣ Platform Aesthetic‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension
  43. 43. ‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension
  44. 44. ‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions ‣ Motion‣ Pixels per Inch‣ Orientation‣ Design Grids‣ Perspective‣ Dimension
  45. 45. ‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions ‣ Motion‣ Pixels per Inch ‣ Transitions‣ Orientation‣ Design Grids‣ Perspective‣ Dimension
  46. 46. ‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions ‣ Motion‣ Pixels per Inch ‣ Transitions‣ Orientation ‣ Color‣ Design Grids‣ Perspective‣ Dimension
  47. 47. ‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions ‣ Motion‣ Pixels per Inch ‣ Transitions‣ Orientation ‣ Color‣ Design Grids ‣ Typography‣ Perspective‣ Dimension
  48. 48. ‣ Platform Aesthetic ‣ Interactions‣ Many Resolutions ‣ Motion‣ Pixels per Inch ‣ Transitions‣ Orientation ‣ Color‣ Design Grids ‣ Typography‣ Perspective ‣ Iconography‣ Dimension
  49. 49. p/z universal
  50. 50. p/z universalbuild a website that provided the bestpossible experience to the context.
  51. 51. p/z universalbuild a website that provided the bestpossible experience to the context. iPad magazine
  52. 52. p/z universalbuild a website that provided the bestpossible experience to the context. iPad iPhone magazine web app
  53. 53. p/z universalbuild a website that provided the bestpossible experience to the context. iPad iPhone Desktop magazine web app website
  54. 54. MADE WITH LOVE IN SEATTLE BY
  55. 55. 1x HTML5 Markup
  56. 56. 1x HTML5 Markup1x Hexadecimal CSS Framework
  57. 57. 1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework
  58. 58. 1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks
  59. 59. 1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks12x Media-Query-based Layouts
  60. 60. a hexadecimal what?
  61. 61. the hex-gridTypically when using a gridweb designers are typicallyonly using vertical units.
  62. 62. the hex-gridbut in mobile design, we must usehorizontal units as well. thismeans that any unit size mustwork vertically as well ashorizontally.
  63. 63. 61. UNDERSTAND THE MEDIUM#2. Rules for Designing Amazing Apps Brian Fling @fling Get to know the differences between mobile and other mediums. 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS 2 GET YOUR DATA DIALED Data is the new content, and it comes from Small screens don’t make things easier. They everywhere. make things a lot harder.3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.
  64. 64. 1 out of 3 projectsgo sideways because ofBAD DATA MADE WITH LOVE IN SEATTLE BY
  65. 65. MADE WITH LOVE IN SEATTLE BY
  66. 66. Content is Data and there is noDesign without Data
  67. 67. Content is Data and there is noDesign without Data
  68. 68. Creating Amazing Experiences for all Mobile DevicesCLIENTAutomatic Data ProcessingPROJECTSADP iPhone App, Mobile Web App, Content ProxySERVICES ScreenshotConcept, Strategy, Design & DevelopmentDESCRIPTION PlaceholderWe designed and developed an application for ADP customers tocomplete common tasks related to HR, payroll, and benefits in amobile context. This document contains confidential information and is provided for private review only. Do not distribute without permission.
  69. 69. “A new form of Web content that ismeaningful to computerswill unleash a revolution of new possibilities.”
  70. 70. MADE WITH LOVE IN SEATTLE BY
  71. 71. 61. UNDERSTAND THE MEDIUM Rules for Designing Amazing Apps Brian Fling @fling Get to know the differences between mobile and other mediums.2. GET YOUR DATA DIALED 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Data is the new content, and it comes from Small screens don’t make things easier. They everywhere. make things a lot harder.#3. 3 BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.
  72. 72. JARGON ALERTContextThe circumstances that formthe setting for an event,statement, or idea, and interms of which it can be fullyunderstood and assessed.
  73. 73. context addsmeaning to data MADE WITH LOVE IN SEATTLE BY
  74. 74. Radio TV Live Billboard ry Vi to su di al AuWord of Print AdMouth Kinesthetic Mobile Events Device QR
  75. 75. WAP Bluetooth Radio TV SMS SMS Live Billboard WAP ry Vi toMMS su di al Au QR Cod Word of Print Ad MouthSMS Kinesthetic SMS WAP Mobile Events Device QR Code Website MMS
  76. 76. WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live Billboardd to B nd WAP ry Vi to MMS su di a Au l W QR Code Word of Print Ad Mouth SMSify Kinesthetic No SMS WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site
  77. 77. Join Down Notify load Vote Vote Down load Notify WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live BillboardSend to Buy Friend WAP ry Vi to MMS su di al AuJoin WAP Site QR Code Word of Print Ad Mouth SMSNotify Kinesthetic Notify SMS WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site SMS Send to Friend Send to Friend Notify Notify Post WAP Site Send to Friend
  78. 78. types of contextBig IdeasLocationDeviceState of Mind
  79. 79. types of contextBig IdeasLocationDeviceState of Mind
  80. 80. types of contextBig IdeasLocationDeviceState of Mind
  81. 81. types of contextBig IdeasLocationDeviceState of Mind
  82. 82. always add value to the users context* MADE WITH LOVE IN SEATTLE BY
  83. 83. always add value to the users context* *Doing so requires a little Psych 101 MADE WITH LOVE IN SEATTLE BY
  84. 84. 6 Rules for Designing Amazing Apps Brian Fling @fling1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums.2. GET YOUR DATA DIALED #4. 4 DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Data is the new content, and it comes from Small screens don’t make things easier. They everywhere. make things a lot harder.3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.
  85. 85. interactions evoke strong feelings MADE WITH LOVE IN SEATTLE BY
  86. 86. MEDIUM (Mobile)
  87. 87. CONTEXT MEDIUM (Mobile)
  88. 88. CONTEXT MEDIUM (Mobile) INTERACTION
  89. 89. The Elements of User Experience Jesse James Garrett jjg@jjg.netA basic duality: The Web was originally conceived as a hypertextual information space; 30 March 2000but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.Web as software interface Concrete Completion Web as hypertext system Visual Design: visual treatment of text,Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel") Visual Design graphic page elements and navigational componentsInterface Design: as in traditional HCI: Navigation Design: design of interfacedesign of interface elements to facilitate elements to facilitate the users movementuser interaction with functionality Interface Design Navigation Design through the information architectureInformation Design: in the Tuftean sense:designing the presentation of information Information Design Information Design: in the Tuftean sense: designing the presentation of informationto facilitate understanding to facilitate understandingInteraction Design: development of Interaction Information Information Architecture: structural design timeapplication flows to facilitate user tasks,defining how the user interacts with Design Architecture of the information space to facilitate intuitive access to contentsite functionalityFunctional Specifications: "feature set":detailed descriptions of functionality the site Functional Content Content Requirements: definition of content elements required in the sitemust include in order to meet user needs Specifications Requirements in order to meet user needsUser Needs: externally derived goals User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc. User Needs for the site; identified through user research, ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site Site Objectives Site Objectives: business, creative, or other internally derived goals for the sitetask-oriented Abstract Conception information-oriented This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.© 2000 Jesse James Garrett http://www.jjg.net/ia/
  90. 90. Completion Web as hypertext system Visual Design: visual treatment of text,Visual Design graphic page elements and navigational components Navigation Design: design of interface elements to facilitate the users movementrface Design Navigation Design through the information architecturermation Design Information Design: in the Tuftean sense: designing the presentation of information to facilitate understandingeraction Information time Information Architecture: structural designign Architecture of the information space to facilitate intuitive access to contentnctional Content Content Requirements: definition of content elements required in the sitecations Requirements in order to meet user needs User Needs: externally derived goals User Needs for the site; identified through user research, ethno/techno/psychographics, etc.ite Objectives Site Objectives: business, creative, or other internally derived goals for the site Conception information-oriented
  91. 91. Web as software interface ConcreteVisual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel") Visual DesigInterface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionality Interface Design NavInformation Design: in the Tuftean sense:designing the presentation of information Information Desito facilitate understandingInteraction Design: development of Interaction Infapplication flows to facilitate user tasks,defining how the user interacts with Design Architsite functionalityFunctional Specifications: "feature set":detailed descriptions of functionality the site Functional Cmust include in order to meet user needs Specifications RequirUser Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc. User NeeSite Objectives: business, creative, or otherinternally derived goals for the site Site Objectivestask-oriented Abstract
  92. 92. JARGON ALERTNeedsThe circumstances in whichsomething is necessary, or thatrequire some course of action.
  93. 93. Abraham Harold Maslow(April 1, 1908 – June 8, 1970)was an American psychologist.He is noted for his concept-ualization of a "hierarchy ofhuman needs", and isconsidered the founder ofhumanistic psychology.
  94. 94. CONTEXT MEDIUM (Mobile) INTERACTION
  95. 95. ?CONTEXT MEDIUM (Mobile) INTERACTION
  96. 96. JARGON ALERTSkeuomorph A derivative object that retains ornamental design cues to a structure that was necessary in the original.
  97. 97. http://www.flickr.com/photos/youraccount/sets/72157619967702538/with/3642814120/
  98. 98. great interactions evoke feelings MADE WITH LOVE IN SEATTLE BY
  99. 99. “Unlike personality, attitudesare expected to change as afunction of experience.”
  100. 100. Affect
  101. 101. AffectThe emotional response that expresses anindividuals degree of preference for an entity.
  102. 102. AffectBehavior
  103. 103. AffectBehaviorThe verbal indication or typical behavioraltendency of an individual.
  104. 104. AffectBehaviorCognition
  105. 105. AffectBehaviorCognitionThe evaluation of the entity that constitutes anindividuals beliefs about the object.
  106. 106. 6 Rules for Designing Amazing Apps Brian Fling @fling1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums.2. GET YOUR DATA DIALED 4. DESIGN FOR INTERACTION #5. 5 A gift for pixel perfection and psych degree can come in handy. FOCUS ON THE DETAILS Data is the new content, and it comes from 1. Small screens don’t make things easier. They everywhere. make things a lot harder.3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.
  107. 107. details matter MADE WITH LOVE IN SEATTLE BY
  108. 108. design @ 1600% MADE WITH LOVE IN SEATTLE BY
  109. 109. 6x Navigation & Toolbars
  110. 110. 6x Navigation & Toolbars3x Alerts & Modals
  111. 111. 6x Navigation & Toolbars3x Alerts & Modals26x Types of Views
  112. 112. 6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls
  113. 113. 6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls13x Application Controls
  114. 114. 6x Navigation & Toolbars3x Alerts & Modals26x Types of Views15x View Controls13x Application Controls9x Animations & Transitions
  115. 115. 6 Rules for Designing Amazing Apps Brian Fling @fling1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums.2. GET YOUR DATA DIALED 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Data is the new content, and it comes from Small screens don’t make things easier. They everywhere. make things a lot harder.3. BE A MASTER OF CONTEXT #6. 6 ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.
  116. 116. there are few tools or processes that suit mobile MADE WITH LOVE IN SEATTLE BY
  117. 117. DESIGNERS DEVELOPERS
  118. 118. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
  119. 119. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
  120. 120. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
  121. 121. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
  122. 122. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
  123. 123. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
  124. 124. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
  125. 125. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
  126. 126. Planning Interactions Design Integration Development Testing Fixes Deployment DESIGNERS DEVELOPERS
  127. 127. Mobile Design is Web Design
  128. 128. Mobile Design is Web Design
  129. 129. Mobile Design is Software Design
  130. 130. Mobile Design is Software Design
  131. 131. A Fully Agile Agency From Start to FinishThis document contains confidential information and is provided for private review only. Do not distribute without permission.
  132. 132. This document contains confidential information and is provided for private review only. Do not distribute without permission.
  133. 133. This document contains confidential information and is provided for private review only. Do not distribute without permission.
  134. 134. Process
  135. 135. DefineProcess
  136. 136. Define DataProcess
  137. 137. Define Data InteractionProcess
  138. 138. Define Data Interaction DesignProcess
  139. 139. Deliverables Define Data Interaction Design Process
  140. 140. Deliverables Project Brief Define Data Interaction Design Process
  141. 141. JourneysDeliverables Project Brief Define Data Interaction Design Process
  142. 142. Context Map JourneysDeliverables Project Brief Define Data Interaction Design Process
  143. 143. Context Map JourneysDeliverables Project Brief Content Audit Define Data Interaction Design Process
  144. 144. Context Map Journeys API AuditDeliverables Project Brief Content Audit Define Data Interaction Design Process
  145. 145. Context Map Data Modeling Journeys API AuditDeliverables Project Brief Content Audit Define Data Interaction Design Process
  146. 146. App Flow Context Map Data Modeling Journeys API AuditDeliverables Project Brief Content Audit Define Data Interaction Design Process
  147. 147. App Flow Context Map Data Modeling Journeys API AuditDeliverables Project Brief Screen Content Audit Descriptions Define Data Interaction Design Process
  148. 148. App Flow Context Map Data Modeling Journeys API Audit Zone DiagramsDeliverables Project Brief Screen Content Audit Descriptions Define Data Interaction Design Process
  149. 149. App Flow Context Map Data Modeling App Map Journeys API Audit Zone DiagramsDeliverables Project Brief Screen Content Audit Descriptions Define Data Interaction Design Process
  150. 150. App Flow Reference Design Context Map Data Modeling App Map Journeys API Audit Zone DiagramsDeliverables Project Brief Screen Content Audit Descriptions Define Data Interaction Design Process
  151. 151. App Flow Reference Design Context Map Data Modeling App Map Journeys API Audit Zone DiagramsDeliverables Project Brief Screen Content Audit Design Brief Descriptions Define Data Interaction Design Process
  152. 152. App Flow Reference Design Context Map Data Modeling App Map Journeys API Audit Zone Diagrams WireframesDeliverables Project Brief Screen Content Audit Design Brief Descriptions Define Data Interaction Design Process
  153. 153. App Flow Reference Design Context Map Data Modeling Design App Map Direction Journeys API Audit Zone Diagrams WireframesDeliverables Project Brief Screen Content Audit Design Brief Descriptions Define Data Interaction Design Process
  154. 154. App Flow Reference Design Comps Design Context Map Data Modeling Design App Map Direction Journeys API Audit Zone Diagrams WireframesDeliverables Project Brief Screen Content Audit Design Brief Descriptions Define Data Interaction Design Process
  155. 155. Asset Library App Flow Reference Design Comps Design Context Map Data Modeling Design App Map Direction Journeys API Audit Zone Diagrams WireframesDeliverables Project Brief Screen Content Audit Design Brief Descriptions Define Data Interaction Design Process
  156. 156. 6 Rules for Designing Amazing Apps Brian Fling @fling1. UNDERSTAND THE MEDIUM Get to know the differences between mobile and other mediums.2. GET YOUR DATA DIALED 4. DESIGN FOR INTERACTION A gift for pixel perfection and psych degree can come in handy. 5. FOCUS ON THE DETAILS Data is the new content, and it comes from Small screens don’t make things easier. They everywhere. make things a lot harder.3. BE A MASTER OF CONTEXT 6. ALLOW AMPLE TIME Dive into context, it is the easiest way to It takes a lot longer than you might think. level up to awesomeness.
  157. 157. EHARMONYHOME v1
  158. 158. EHARMONYHOME v2
  159. 159. EHARMONYHOME v3
  160. 160. EHARMONYHOME v4
  161. 161. EHARMONYHOME v5
  162. 162. EHARMONYHOME v6
  163. 163. Get in TouchTHANK YOU Find Out How We Can Help You.My name is Brian Fling and Brian FlingI’m a Mobile Designer Founder & Creative Director brian@pinchzoom.com +1 206 351-6060twitter.com/flingbook mobiledesign.orgcompany pinchzoom.comblog pinchzoom.com/fling
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×