Mobiles vs BADA                         Règles et bonnes pratiques du design                               d’application s...
as ne                             éb on  en al                                  ti v                            S B       ...
application = développeurvendredi 14 octobre 11
NON !vendredi 14 octobre 11
ergonomie & designvendredi 14 octobre 11
Croire et défendre ses idéesvendredi 14 octobre 11
petit rappelvendredi 14 octobre 11
UI, UX & UI/UX                     ‣ UX design traite de lexpérience globale                         subjective associée à...
UI & UX                              Une mouche est dessinée dans la porcelaine. Si un                              homme ...
Le designvendredi 14 octobre 11
définir la ciblevendredi 14 octobre 11
définir le contexte d’utilisationvendredi 14 octobre 11
un style graphique adaptévendredi 14 octobre 11
s’adapter aux guidelines des OS                                 (et mises à jour)vendredi 14 octobre 11
utiliser des standards                         et pousser les «métaphores réelles»vendredi 14 octobre 11
ne garder que le nécessairevendredi 14 octobre 11
simplicité,                         éviter le piège de l’overdesignvendredi 14 octobre 11
vendredi 14 octobre 11
gérer et optimiser les espacesvendredi 14 octobre 11
souplesse pour les créations                             multi plateformes/écrans                              grâce aux «...
la grille de construction                                         (les lignes de forces)                     http://www.jo...
Grille de 6 colonnes idéalementvendredi 14 octobre 11
vendredi 14 octobre 11
ne pas oublier l’orientation de son                                      terminalvendredi 14 octobre 11
le choix des                            typosvendredi 14 octobre 11
web                                                   •   Arial/Helvetica                                                 ...
attention particulière à la navigationvendredi 14 octobre 11
penser à la taille des doigtsvendredi 14 octobre 11
(taille minimum des boutons 44px)vendredi 14 octobre 11
ne pas avoir peur du scrollvendredi 14 octobre 11
jouer avec les gestures                         http://www.zeldman.com/2010/04/20/touch-gesture-reference-guide/vendredi 1...
les boutons «physiques» de certains                               terminaux                           (Bada et android)ven...
penser que chaque bouton à 3 états :                    normal, onTouch, touched                         (pas de «survol»)...
anticiper et optimiservendredi 14 octobre 11
Faire des croquisvendredi 14 octobre 11
tester, tester et retester sa création                                   dans un téléphonevendredi 14 octobre 11
taille et poids des imagesvendredi 14 octobre 11
et enfin ... les web app :                                    - pas de flash                                 - pas de popups...
2/ et les BADAs                          dans tout ça...vendredi 14 octobre 11
=’(                     ‣ pas de guidelines graphiques                         existantes ou très (trop?) axées           ...
L’interface nativevendredi 14 octobre 11
=D                     ‣ interface similaire à Android !                     ‣ taille du fichier sources : 480x800 px      ...
Suivre l’essentiels des guidelines                                      Android                           http://developer...
Exemple de styles dicônesvendredi 14 octobre 11
Specs des icônesvendredi 14 octobre 11
exemple de menuvendredi 14 octobre 11
http://www.tapptics.com/vendredi 14 octobre 11
gabarits des widgetsvendredi 14 octobre 11
Les vrais questions                   pendant levendredi 14 octobre 11
‣ Une identité (création ou suivre                         charte) ?                     ‣ Une maquette des écrans et     ...
Nous ne sommes pas des                               Superhérosvendredi 14 octobre 11
l’avenir...vendredi 14 octobre 11
d’ici 2014,                         le mobile dépassera les usages des                               ordinateurs classique...
Quelques liens                                  dribbble                                 fwa mobile                       ...
Merci                                  @gentlestache                         www.about.me/gentlemanmustachevendredi 14 oct...
Prochain SlideShare
Chargement dans…5
×

Fondamentaux design d'applications mobiles

3 937 vues

Publié le

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

Publié dans : Technologie
0 commentaire
8 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 937
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×