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
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
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
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
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
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