Fondamentaux design d'applications mobiles

3,937 views

Published on

Initiation au design d'applications mobiles par Sebastien Bonneval.
http://about.me/gentlemanmustache

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

No Downloads
Views
Total views
3,937
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Fondamentaux design d'applications mobiles

  1. 1. Mobiles vs BADA Règles et bonnes pratiques du design d’application smatphonevendredi 14 octobre 11
  2. 2. as ne éb on en al ti v S B @gentlestache www.about.me/gentlemanmustachevendredi 14 octobre 11
  3. 3. application = développeurvendredi 14 octobre 11
  4. 4. NON !vendredi 14 octobre 11
  5. 5. ergonomie & designvendredi 14 octobre 11
  6. 6. Croire et défendre ses idéesvendredi 14 octobre 11
  7. 7. petit rappelvendredi 14 octobre 11
  8. 8. UI, UX & UI/UX ‣ UX design traite de lexpérience globale subjective associée à lutilisation dun produit ou un service. ‣ L’UI traite de lUX spécifique dun produit ou service. LUI peut être une composante de l’UX. mais beaucoup d’UX nont pas interfaces. La conception dune UI sera fortement éclairé par la conceptionde l’UX, mais pas inversement.vendredi 14 octobre 11
  9. 9. UI & UX Une mouche est dessinée dans la porcelaine. Si un homme voit la mouche, il va la viser. Cela réduit de 80 % les « débordements » intempestifs.vendredi 14 octobre 11
  10. 10. Le designvendredi 14 octobre 11
  11. 11. définir la ciblevendredi 14 octobre 11
  12. 12. définir le contexte d’utilisationvendredi 14 octobre 11
  13. 13. un style graphique adaptévendredi 14 octobre 11
  14. 14. s’adapter aux guidelines des OS (et mises à jour)vendredi 14 octobre 11
  15. 15. utiliser des standards et pousser les «métaphores réelles»vendredi 14 octobre 11
  16. 16. ne garder que le nécessairevendredi 14 octobre 11
  17. 17. simplicité, éviter le piège de l’overdesignvendredi 14 octobre 11
  18. 18. vendredi 14 octobre 11
  19. 19. gérer et optimiser les espacesvendredi 14 octobre 11
  20. 20. souplesse pour les créations multi plateformes/écrans grâce aux «fluid layouts» http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/vendredi 14 octobre 11
  21. 21. la grille de construction (les lignes de forces) http://www.journaldunet.com/developpeur/tutoriel/theo/060403-design-conception-grille.shtmlvendredi 14 octobre 11
  22. 22. Grille de 6 colonnes idéalementvendredi 14 octobre 11
  23. 23. vendredi 14 octobre 11
  24. 24. ne pas oublier l’orientation de son terminalvendredi 14 octobre 11
  25. 25. le choix des typosvendredi 14 octobre 11
  26. 26. web • Arial/Helvetica • Arial Black + + • Comic Sans MS • Courier/Courier New • Georgia • Impact • Times/Times New Roman Apple • Trebuchet MS • Verdana android ■ American Typewriter ■ American Typewriter ■ normal (Droid Sans), Condensed ■ serif (Droid Serif), and ■ Arial Rounded MT Bold ■ monospace (Droid Sans ■ Courier New Mono). ■ Marker Felt ■ Zapfino http://slapandthink.com/wp-content/uploads/2010/12/web-safe-fonts-cheat-sheet-v2.pngvendredi 14 octobre 11
  27. 27. attention particulière à la navigationvendredi 14 octobre 11
  28. 28. penser à la taille des doigtsvendredi 14 octobre 11
  29. 29. (taille minimum des boutons 44px)vendredi 14 octobre 11
  30. 30. ne pas avoir peur du scrollvendredi 14 octobre 11
  31. 31. jouer avec les gestures http://www.zeldman.com/2010/04/20/touch-gesture-reference-guide/vendredi 14 octobre 11
  32. 32. les boutons «physiques» de certains terminaux (Bada et android)vendredi 14 octobre 11
  33. 33. penser que chaque bouton à 3 états : normal, onTouch, touched (pas de «survol»)vendredi 14 octobre 11
  34. 34. anticiper et optimiservendredi 14 octobre 11
  35. 35. Faire des croquisvendredi 14 octobre 11
  36. 36. tester, tester et retester sa création dans un téléphonevendredi 14 octobre 11
  37. 37. taille et poids des imagesvendredi 14 octobre 11
  38. 38. et enfin ... les web app : - pas de flash - pas de popups ou d’ouvertures dans de nouvelles fenêtres - pas de survols - de nombreux effets sont a proscrire ou à bien penservendredi 14 octobre 11
  39. 39. 2/ et les BADAs dans tout ça...vendredi 14 octobre 11
  40. 40. =’( ‣ pas de guidelines graphiques existantes ou très (trop?) axées développeurs ‣ plateforme peu connue... boudée par les clients et créateurs d’applisvendredi 14 octobre 11
  41. 41. L’interface nativevendredi 14 octobre 11
  42. 42. =D ‣ interface similaire à Android ! ‣ taille du fichier sources : 480x800 px et 480x720 px 150 dpi (web 320 px de large en 72 dpi) ‣ taille barre de status : 30 px de hautvendredi 14 octobre 11
  43. 43. Suivre l’essentiels des guidelines Android http://developer.android.com/guide/practices/ui_guidelines/index.htmlvendredi 14 octobre 11
  44. 44. Exemple de styles dicônesvendredi 14 octobre 11
  45. 45. Specs des icônesvendredi 14 octobre 11
  46. 46. exemple de menuvendredi 14 octobre 11
  47. 47. http://www.tapptics.com/vendredi 14 octobre 11
  48. 48. gabarits des widgetsvendredi 14 octobre 11
  49. 49. Les vrais questions pendant levendredi 14 octobre 11
  50. 50. ‣ Une identité (création ou suivre charte) ? ‣ Une maquette des écrans et fonctionnalités (mockups) ? ‣ Qui est le développeur (échanges)? ‣ Qui fait les découpes ?vendredi 14 octobre 11
  51. 51. Nous ne sommes pas des Superhérosvendredi 14 octobre 11
  52. 52. l’avenir...vendredi 14 octobre 11
  53. 53. d’ici 2014, le mobile dépassera les usages des ordinateurs classiquesvendredi 14 octobre 11
  54. 54. Quelques liens dribbble fwa mobile mobileawesomeness.com creattica.com designshack.net littlebigdetails.comvendredi 14 octobre 11
  55. 55. Merci @gentlestache www.about.me/gentlemanmustachevendredi 14 octobre 11

×