Designers
et développeurs
UNE MEILLEURE COLLABORATION
POUR DE MEILLEURES APPS
Hello!!! …world
Les designers vs les développeurs
QUI SOMMES NOUS ?
créative minutieux
organiséimpulsive
analysteempathique
Les armes de chacun
BLEND N’EST PAS PHOTOSHOP…
Les armes de chacun
Designer
 Guidelines
 Sets d’icônes, Kuler
 Balsamiq, outils de wireframing
 lllustrator (icônes, ...
Pourquoi sommes nous différents ?
C’EST PHYSIQUE… ?
Le fonctionnement du cerveau humain
Main gauche
Œil gauche
Pied gauche
Main droite
Œil droit
Pied droit
Neuro-droitiers
30%
Neuro-gauchers
70%
La répartition dans la population
Un environnement qui s’adapte
Des apps qui s’adaptent
Des atouts différents
L’UNION FAIT LA FORCE…
+
Minutieux
Evaluateur
Précis
Organisé
Conservateur
Rationnel
Persévérant
Cohérent
Analytique
Sensible
Perfectionniste
Adapt...
Minutieux
Evaluateur
Précis
Organisé
Conservateur
Rationnel
Persévérant
Cohérent
Analytique
Sensible
Perfectionniste
Adapt...
Minutieux
Evaluateur
Précis
Organisé
Conservateur
Rationnel
Persévérant
Cohérent
Analytique
Sensible
Perfectionniste
Adapt...
L’un sans l’autre ne devrait pas exister
TV d’Orange
VDM
SFR TV
Jeuxvideo.com
Super
Appli
Minutieux
Précis
Organisé
Analytique
Perfectionniste
Global
Empathique
Imaginatif
L’union fait la force…
Les bonnes pratiques
CHACUN PEUT FAIRE UN PAS VERS L’AUTRE…
hiiiiiii
Designer Développeur
LUI FACILITER L’IMPLÉMENTATION…
PS Etiquette
Quelques exemples
 Grouper les calques par dossier
pour mieux s’y retrouver
Quelques exemples
 Privilégier les méthodes non
destructives (masques)
Quelques exemples
 Mettre les polices utilisées à
disposition du développeur
Quelques exemples
 Créer un fichier pour les
éléments d’interface
 Proposer des motifs qui se
répètent
Quelques exemples
Pensez aux états
La pipette n’est pas mon amie
Et pourquoi pas apprendre à coder ?
 http://www.codecademy.com/fr
 https://www.codeschool.com/
COMPRENDRE ET APPRENDRE À S’EXPRIMER
I .
Pantone
Développeur Designer
L’inspiration
 Dribbble
 Behance
Montrer ce qu’on veut reproduire
 http://capptivate.co/
Un menu qui tombe
comme un papillon!
Wut?
50 niveaux de gris
 http://colorschemedesigner.com/
 http://design-seeds.com/
 http://colourco.de/
 Kuler
Faire confiance en Kuler
Apprendre les bases
 Typographie : http://imwillryan.com/typefun01/
 Apprendre les bases du design : http://hackdesign.o...
Collaboration ne veut pas dire sacrifice
ON PEUT AVOIR UNE RELATION WIN-WIN
Ça te fera de la pub…
 http://salut-l-artiste.tumblr.com/
Oui mais je n’ai pas d’argent…
 Echange de bons procédés…
• Echange de connaissances
• Points DVLUP
 Si application avec...
Oui mais je n’ai pas d’argent…
70%
30%
Peut-on être bi ?
DEVELNER
 « The web is my canvas, but I am not a painter, I am a writer and I
create digital verbs. »
 « to design an entire webs...
Nos trucs et astuces
LES PETITS PLUS QUI FONT DE GRANDES CHOSES
C’est pas la
taille qui
compte…
Lorem Ipsum
 Résultat plus naturel
 http://www.lipsum.com
 Schnapsum
Comment tourner un path sous
Blend comme un boss
SVG vers Expression Blend
 Inkspace
 XAML
Des logos plus Métro
DEUX SPEAKERS, DEUX STYLES
Photoshop : des logos plus W8 like
 Baguette magique
 Incrustation de couleur
Logo Métro : LayerMask style
Long shadow
Rayures
Avez-vous des questions ?
@RUDYHUYN
@JULIEGRI
SOURCES :
• Cerveau gauche, cerveau droit (Editions Hachette)
• http://www.m...
HORS-SUJET
Designers & Développeurs ; une meilleure collaboration pour de meilleures apps
Designers & Développeurs ; une meilleure collaboration pour de meilleures apps
Prochain SlideShare
Chargement dans…5
×

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

1 149 vues

Publié le

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

Présentation chez Microsoft France le 28 mars 2014

0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 149
Sur SlideShare
0
Issues des intégrations
0
Intégrations
144
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×