Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designers & Développeurs ; une meilleure collaboration pour de meilleures apps

Designers & Développeurs ; une meilleure collaboration pour de meilleures apps

Présentation chez Microsoft France le 28 mars 2014

  • Login to see the comments

Designers & Développeurs ; une meilleure collaboration pour de meilleures apps

  1. 1. Designers et développeurs UNE MEILLEURE COLLABORATION POUR DE MEILLEURES APPS Hello!!! …world
  2. 2. Les designers vs les développeurs QUI SOMMES NOUS ?
  3. 3. créative minutieux organiséimpulsive analysteempathique
  4. 4. Les armes de chacun BLEND N’EST PAS PHOTOSHOP…
  5. 5. Les armes de chacun Designer  Guidelines  Sets d’icônes, Kuler  Balsamiq, outils de wireframing  lllustrator (icônes, logos)  Photoshop  Langage visuel Développeur  Modèle Vue Contrôleur  Visual Studio  Notepad ++  Blend  Langage objet ^^
  6. 6. Pourquoi sommes nous différents ? C’EST PHYSIQUE… ?
  7. 7. Le fonctionnement du cerveau humain Main gauche Œil gauche Pied gauche Main droite Œil droit Pied droit
  8. 8. Neuro-droitiers 30% Neuro-gauchers 70% La répartition dans la population
  9. 9. Un environnement qui s’adapte
  10. 10. Des apps qui s’adaptent
  11. 11. Des atouts différents L’UNION FAIT LA FORCE… +
  12. 12. Minutieux Evaluateur Précis Organisé Conservateur Rationnel Persévérant Cohérent Analytique Sensible Perfectionniste Adaptable Global Empathique Impulsif Provocateur Synthétique Imaginatif Les différences de caractère
  13. 13. Minutieux Evaluateur Précis Organisé Conservateur Rationnel Persévérant Cohérent Analytique Sensible Perfectionniste Adaptable Global Empathique Impulsif Provocateur Synthétique Imaginatif Les différences de caractère
  14. 14. Minutieux Evaluateur Précis Organisé Conservateur Rationnel Persévérant Cohérent Analytique Sensible Perfectionniste Adaptable Global Empathique Impulsif Provocateur Synthétique Imaginatif Les différences de caractère
  15. 15. L’un sans l’autre ne devrait pas exister TV d’Orange VDM SFR TV Jeuxvideo.com
  16. 16. Super Appli Minutieux Précis Organisé Analytique Perfectionniste Global Empathique Imaginatif L’union fait la force…
  17. 17. Les bonnes pratiques CHACUN PEUT FAIRE UN PAS VERS L’AUTRE… hiiiiiii
  18. 18. Designer Développeur LUI FACILITER L’IMPLÉMENTATION…
  19. 19. PS Etiquette
  20. 20. Quelques exemples  Grouper les calques par dossier pour mieux s’y retrouver
  21. 21. Quelques exemples  Privilégier les méthodes non destructives (masques)
  22. 22. Quelques exemples  Mettre les polices utilisées à disposition du développeur
  23. 23. Quelques exemples  Créer un fichier pour les éléments d’interface
  24. 24.  Proposer des motifs qui se répètent Quelques exemples
  25. 25. Pensez aux états
  26. 26. La pipette n’est pas mon amie
  27. 27. Et pourquoi pas apprendre à coder ?  http://www.codecademy.com/fr  https://www.codeschool.com/
  28. 28. COMPRENDRE ET APPRENDRE À S’EXPRIMER I . Pantone Développeur Designer
  29. 29. L’inspiration  Dribbble  Behance
  30. 30. Montrer ce qu’on veut reproduire  http://capptivate.co/ Un menu qui tombe comme un papillon! Wut?
  31. 31. 50 niveaux de gris  http://colorschemedesigner.com/  http://design-seeds.com/  http://colourco.de/  Kuler
  32. 32. Faire confiance en Kuler
  33. 33. Apprendre les bases  Typographie : http://imwillryan.com/typefun01/  Apprendre les bases du design : http://hackdesign.org/
  34. 34. Collaboration ne veut pas dire sacrifice ON PEUT AVOIR UNE RELATION WIN-WIN
  35. 35. Ça te fera de la pub…  http://salut-l-artiste.tumblr.com/
  36. 36. Oui mais je n’ai pas d’argent…  Echange de bons procédés… • Echange de connaissances • Points DVLUP  Si application avec publicité, soyez malin !
  37. 37. Oui mais je n’ai pas d’argent… 70% 30%
  38. 38. Peut-on être bi ? DEVELNER
  39. 39.  « The web is my canvas, but I am not a painter, I am a writer and I create digital verbs. »  « to design an entire website in photoshop is like making a clay model of a car. Sure, it may look great, but how do the individual parts work in relation to each other? How comfortable are the seats? What’s under the hood? How does it perform on the highway, in the city, and on winding mountain roads?”  medium.com/web-design-and-development/1d21b6e63953
  40. 40. Nos trucs et astuces LES PETITS PLUS QUI FONT DE GRANDES CHOSES C’est pas la taille qui compte…
  41. 41. Lorem Ipsum  Résultat plus naturel  http://www.lipsum.com  Schnapsum
  42. 42. Comment tourner un path sous Blend comme un boss
  43. 43. SVG vers Expression Blend  Inkspace  XAML
  44. 44. Des logos plus Métro DEUX SPEAKERS, DEUX STYLES
  45. 45. Photoshop : des logos plus W8 like  Baguette magique  Incrustation de couleur
  46. 46. Logo Métro : LayerMask style
  47. 47. Long shadow
  48. 48. Rayures
  49. 49. Avez-vous des questions ? @RUDYHUYN @JULIEGRI SOURCES : • Cerveau gauche, cerveau droit (Editions Hachette) • http://www.medecine-et-sante.com/maladiesexplications/droitiergaucher.html • http://www.cerveauetpsycho.fr/ewb_pages/a/article-droitiers-gauchers-et-oeil-dominant-19887.php • http://tpe-lateralite-cerebrale.e-monsite.com/pages/hemisphere-cerebraux/les-hemispheres-cerebraux.html
  50. 50. HORS-SUJET

×