Fondamentaux design d'applications mobiles

  • 2,239 views
Uploaded on

Initiation au design d'applications mobiles par Sebastien Bonneval. …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,239
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobiles vs BADA Règles et bonnes pratiques du design d’application smatphonevendredi 14 octobre 11
  • 2. as ne éb on en al ti v S B @gentlestache www.about.me/gentlemanmustachevendredi 14 octobre 11
  • 3. application = développeurvendredi 14 octobre 11
  • 4. NON !vendredi 14 octobre 11
  • 5. ergonomie & designvendredi 14 octobre 11
  • 6. Croire et défendre ses idéesvendredi 14 octobre 11
  • 7. petit rappelvendredi 14 octobre 11
  • 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. 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. Le designvendredi 14 octobre 11
  • 11. définir la ciblevendredi 14 octobre 11
  • 12. définir le contexte d’utilisationvendredi 14 octobre 11
  • 13. un style graphique adaptévendredi 14 octobre 11
  • 14. s’adapter aux guidelines des OS (et mises à jour)vendredi 14 octobre 11
  • 15. utiliser des standards et pousser les «métaphores réelles»vendredi 14 octobre 11
  • 16. ne garder que le nécessairevendredi 14 octobre 11
  • 17. simplicité, éviter le piège de l’overdesignvendredi 14 octobre 11
  • 18. vendredi 14 octobre 11
  • 19. gérer et optimiser les espacesvendredi 14 octobre 11
  • 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. la grille de construction (les lignes de forces) http://www.journaldunet.com/developpeur/tutoriel/theo/060403-design-conception-grille.shtmlvendredi 14 octobre 11
  • 22. Grille de 6 colonnes idéalementvendredi 14 octobre 11
  • 23. vendredi 14 octobre 11
  • 24. ne pas oublier l’orientation de son terminalvendredi 14 octobre 11
  • 25. le choix des typosvendredi 14 octobre 11
  • 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. attention particulière à la navigationvendredi 14 octobre 11
  • 28. penser à la taille des doigtsvendredi 14 octobre 11
  • 29. (taille minimum des boutons 44px)vendredi 14 octobre 11
  • 30. ne pas avoir peur du scrollvendredi 14 octobre 11
  • 31. jouer avec les gestures http://www.zeldman.com/2010/04/20/touch-gesture-reference-guide/vendredi 14 octobre 11
  • 32. les boutons «physiques» de certains terminaux (Bada et android)vendredi 14 octobre 11
  • 33. penser que chaque bouton à 3 états : normal, onTouch, touched (pas de «survol»)vendredi 14 octobre 11
  • 34. anticiper et optimiservendredi 14 octobre 11
  • 35. Faire des croquisvendredi 14 octobre 11
  • 36. tester, tester et retester sa création dans un téléphonevendredi 14 octobre 11
  • 37. taille et poids des imagesvendredi 14 octobre 11
  • 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. 2/ et les BADAs dans tout ça...vendredi 14 octobre 11
  • 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. L’interface nativevendredi 14 octobre 11
  • 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. Suivre l’essentiels des guidelines Android http://developer.android.com/guide/practices/ui_guidelines/index.htmlvendredi 14 octobre 11
  • 44. Exemple de styles dicônesvendredi 14 octobre 11
  • 45. Specs des icônesvendredi 14 octobre 11
  • 46. exemple de menuvendredi 14 octobre 11
  • 47. http://www.tapptics.com/vendredi 14 octobre 11
  • 48. gabarits des widgetsvendredi 14 octobre 11
  • 49. Les vrais questions pendant levendredi 14 octobre 11
  • 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. Nous ne sommes pas des Superhérosvendredi 14 octobre 11
  • 52. l’avenir...vendredi 14 octobre 11
  • 53. d’ici 2014, le mobile dépassera les usages des ordinateurs classiquesvendredi 14 octobre 11
  • 54. Quelques liens dribbble fwa mobile mobileawesomeness.com creattica.com designshack.net littlebigdetails.comvendredi 14 octobre 11
  • 55. Merci @gentlestache www.about.me/gentlemanmustachevendredi 14 octobre 11