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

1. Mobiles vs BADA
Règles et bonnes pratiques du design
d’application smatphone
vendredi 14 octobre 11

2. as ne
éb on en al
ti v
S B
@gentlestache
www.about.me/gentlemanmustache
vendredi 14 octobre 11

3. application = développeur
vendredi 14 octobre 11

4. NON !
vendredi 14 octobre 11

5. ergonomie & design
vendredi 14 octobre 11

6. Croire et défendre ses idées
vendredi 14 octobre 11

7. petit rappel
vendredi 14 octobre 11

8. UI, UX & UI/UX
‣ UX design traite de l'expérience globale
subjective associée à l'utilisation d'un produit
ou un service.
‣ L’UI traite de l'UX spécifique d'un produit ou
service. L'UI peut être une composante de
l’UX. mais beaucoup d’UX n'ont pas
interfaces. La conception d'une 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 design
vendredi 14 octobre 11

11. définir la cible
vendredi 14 octobre 11

12. définir le contexte d’utilisation
vendredi 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écessaire
vendredi 14 octobre 11

17. simplicité,
éviter le piège de l’overdesign
vendredi 14 octobre 11

18. vendredi 14 octobre 11

19. gérer et optimiser les espaces
vendredi 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.shtml
vendredi 14 octobre 11

22. Grille de 6 colonnes idéalement
vendredi 14 octobre 11

23. vendredi 14 octobre 11

24. ne pas oublier l’orientation de son
terminal
vendredi 14 octobre 11

25. le choix des
typos
vendredi 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.png
vendredi 14 octobre 11

27. attention particulière à la navigation
vendredi 14 octobre 11

28. penser à la taille des doigts
vendredi 14 octobre 11

29. (taille minimum des boutons 44px)
vendredi 14 octobre 11

30. ne pas avoir peur du scroll
vendredi 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 optimiser
vendredi 14 octobre 11

35. Faire des croquis
vendredi 14 octobre 11

36. tester, tester et retester sa création
dans un téléphone
vendredi 14 octobre 11

37. taille et poids des images
vendredi 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 penser
vendredi 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’applis
vendredi 14 octobre 11

41. L’interface native
vendredi 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 haut
vendredi 14 octobre 11

43. Suivre l’essentiels des guidelines
Android
http://developer.android.com/guide/practices/ui_guidelines/index.html
vendredi 14 octobre 11

44. Exemple de styles d'icônes
vendredi 14 octobre 11

45. Specs des icônes
vendredi 14 octobre 11

46. exemple de menu
vendredi 14 octobre 11

47. http://www.tapptics.com/
vendredi 14 octobre 11

48. gabarits des widgets
vendredi 14 octobre 11

49. Les vrais questions
pendant le
vendredi 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éros
vendredi 14 octobre 11

52. l’avenir...
vendredi 14 octobre 11

53. d’ici 2014,
le mobile dépassera les usages des
ordinateurs classiques
vendredi 14 octobre 11

54. Quelques liens
dribbble
fwa mobile
mobileawesomeness.com
creattica.com
designshack.net
littlebigdetails.com
vendredi 14 octobre 11

55. Merci
@gentlestache
www.about.me/gentlemanmustache
vendredi 14 octobre 11