Design for mobile

Transcript

1. 1.

   DESIGN FOR MOBILE D&B Talks #2

2. 2.

   Luc Chaissac 24 • DA • lucchaissac.com • @lucchaissac

3. 3.

   Pourquoi le mobile ?

4. 4.

   de smartphones en France proximamobile.fr 19M © Bluroon

5. 5.

   d’utilisation quotidienne thinkwithgoogle.com 57%

6. 6.

   recherchent quotidiennement thinkwithgoogle.com 49%

7. 7.

   Contexte

8. 8.

   Microtasking

9. 9.

   Local

10. 10.

    Je m’ennuie

11. 11.

    Mobile vs Desktop

12. 12.

    1024x768 320x480

13. 13.

    1024x768 320x480

14. 14.

    Focus

15. 15.

    Flickr Desktop

16. 16.

    Flickr Mobile

17. 17.

    Kayak Desktop

18. 18.

    Kayak Mobile

19. 19.

    Responsive

20. 20.

    Responsive

21. 21.

    Responsive

22. 22.

    Responsive

23. 23.

    I Don't Want Your Fucking App idontwantyourfuckingapp.tumblr.com

24. 24.

    “In iPhone apps, the main function should be immediately apparent.

    Minimize the number of controls from which users have to choose.” Apple’s iPhone Interface Guidelines
25. 25.

    Google Maps

26. 26.

    Google Maps

27. 27.

    Google Maps

28. 28.

    Google Maps

29. 29.

    Google Maps

30. 30.

    Google Maps

31. 31.

    Mailbox

32. 32.

    Mailbox

33. 33.

    Mailbox

34. 34.

    Keep it simple

35. 35.

    Ergonomique

36. 36.

    © @maxvoltar

37. 37.

    None
38. 38.

    None
39. 39.

    None
40. 40.

    44px 44px 44px

41. 41.

    44px 44px 44px

42. 42.

    Workflow

43. 43.

    Wireframe

44. 44.

    None
45. 45.

    Ratchet maker.github.com/ratchet

46. 46.

    UXPin uxpin.com

47. 47.

    Brief giveabrief.com

48. 48.

    Densités teehanlax.com/blog/density-converter

49. 49.

    Density Converter bit.ly/denconverter

50. 50.

    Slicy

51. 51.

    Slicy

52. 52.

    Liveview itunes.apple.com/fr/app/liveview/id301069270?mt=8

53. 53.

    None
54. 54.

    macrabbit.com/slicy

55. 55.

    Frontify frontify.com

56. 56.

    Frontify frontify.com

57. 57.

    Native vs Web

58. 58.

    • Store • Fonctionnalités de l’OS • Expérience utilisateur Native

59. 59.

    • Multi-plateforme • Mise à jour • Coût de dev

    Web
60. 60.

    • Keep it simple • Contexte • Finger-friendly design •

    Conditions réelles
61. 61.

    DPK

62. 62.

    DPK

63. 63.

    Next ?

64. 64.

    MERCI