Talk Drink Share - Designers et développeurs : comment réussir votre collaboration

Transcript

1. © WAX INTERACTIVE TALK DRINK SHARE Designers et développeurs :
 comment réussir votre collaboration par Jérémie Fontana #WaxTDS
2. © WAX INTERACTIVE JÉRÉMIE FONTANA Directeur Artistique 12 @skynebula
3. © WAX INTERACTIVE ET VOUS? 13 Designer? Développeur? Autre?
4. © WAX INTERACTIVE SOMMAIRE 14 •Introduction •Contexte •Solution •Adobe CC •Flux de travail •Collaboration •Points négatifs •Conclusion •Questions
5. © WAX INTERACTIVE INTRODUCTION 15
6. © WAX INTERACTIVE BUT 16 Faire gagner du temps aux designers et développeurs et améliorer/faciliter leur collaboration
7. © WAX INTERACTIVE DÉROULEMENT 17 •Quelques slides •Des exemples pratiques 
 sur logiciel •De l’interactivité •Et quelques GIFs…
8. © WAX INTERACTIVE FAUSSE QUESTION 18 “Should designers code?”
9. © WAX INTERACTIVE PHOTOSHOP 19 Photoshop CC 2015
10. © WAX INTERACTIVE PHOTOSHOP VS LE RESTE DU MONDE 20 Photoshop CC 2015 Illustrator CC 2015 Experience Design CC (preview) Sketch 3.6 et d’autres…
11. © WAX INTERACTIVE PHOTOSHOP 21 Photoshop CC 2015 Illustrator CC 2015 Experience Design CC (preview) Sketch 3.6
12. © WAX INTERACTIVE PHOTOSHOP VS ILLUSTRATOR 22 Photoshop CC 2015 Illustrator CC 2015 Experience Design CC (preview) Sketch 3.6
13. © WAX INTERACTIVE PHOTOSHOP VS EXPERIENCE DESIGN 23 Photoshop CC 2015 Illustrator CC 2015 Experience Design CC (preview) Sketch 3.6
14. © WAX INTERACTIVE PHOTOSHOP VS SKETCH 24 Photoshop CC 2015 Illustrator CC 2015 Experience Design CC (preview) Sketch 3.6
15. © WAX INTERACTIVE PHOTOSHOP 25 Photoshop CC 2015
16. © WAX INTERACTIVE DISCLAIMER 26 Non, cet événement n’est pas sponsorisé par Adobe :)
17. © WAX INTERACTIVE CONTEXTE 27
18. © WAX INTERACTIVE MON EXPÉRIENCE 28 Freelance Agence Client
19. © WAX INTERACTIVE CONTEXTE D’UN PROJET SIMPLE 29 Client VD Dev
20. © WAX INTERACTIVE CONTEXTE D’UN PROJET SIMPLE 30 Client VD Dev
21. © WAX INTERACTIVE CONTEXTE D’UN PROJET PLUS COMPLEXE 31 Client VD Dev PM
22. © WAX INTERACTIVE CONTEXTE D’UN PROJET PEU COMPLEXE 32 Client VD Dev PM
23. © WAX INTERACTIVE CONTEXTE D’UN PROJET TRÈS COMPLEXE 33 Client CD PM Prestataire UX VD Dev
24. © WAX INTERACTIVE CONTEXTE D’UN PROJET TRÈS COMPLEXE 34 Client CD PM Prestataire UX VD Dev
25. © WAX INTERACTIVE SOLUTION 35
26. © WAX INTERACTIVE 36 SOLUTION
27. © WAX INTERACTIVE ADOBE CREATIVE CLOUD 37
28. © WAX INTERACTIVE ADOBE CREATIVE CLOUD 38
29. © WAX INTERACTIVE ADOBE CREATIVE CLOUD 39 Applications desktop Applications mobiles Services
30. © WAX INTERACTIVE FONCTIONNALITÉS UTILES POUR NOUS 40 •Liens dynamiques •Compositions de calques (dynamiques) •Device Preview •Bibliothèque de symboles partagée •Generator •Assemblage •CC Assets •CC Extract
31. © WAX INTERACTIVE COMPTE ADOBE ID 41 → adobe.com •Payant pour les designers (60CHF)
 - Toutes les applications et services
 - Stockage 20 GB •Gratuit pour les développeurs
 - Que certains services
 - Stockage 2 GB
32. © WAX INTERACTIVE FLUX DE TRAVAIL 42
33. © WAX INTERACTIVE BRIEF 43 olympics Réaliser le design d’un mini-site pour le Mouvement Olympique
34. © WAX INTERACTIVE FLUX DE TRAVAIL : AVANT 44 Découpe Validation Design Exports Intégration
35. © WAX INTERACTIVE FLUX DE TRAVAIL : AVANT 45 Découpe Validation Design Exports Intégration
36. © WAX INTERACTIVE FLUX DE TRAVAIL : MAINTENANT 47 Validation Design Exports Intégration
37. © WAX INTERACTIVE KICKOFF 48 •Définition des contraintes techniques avec les devs •Choix d’une grille
 (ou d’un framework) •Définition des types d’assets requis (fichiers images)
38. © WAX INTERACTIVE ORGANISATION DES PSD 49 "There is no design without discipline. There is no discipline without intelligence." — Massimo Vignelli
39. © WAX INTERACTIVE ORGANISATION DES PSD 50 Démo Compréhensible par le commun des mortels, et surtout par vos collègues (designers et développeurs) → github.com/skynebula/psd-boilerplate
40. © WAX INTERACTIVE PSD BOILERPLATE 51 → github.com/skynebula/psd-boilerplate Démo Pour toujours partir d’une base saine
41. © WAX INTERACTIVE NOMMAGE DE FICHIERS 52 Client_Projet_Format_Page_A1.psd
42. © WAX INTERACTIVE NOMMAGE DE FICHIERS 53 Client_Projet_Format_Page_A1.psd
43. © WAX INTERACTIVE NOMMAGE DE FICHIERS 54 Client_Projet_Format_Page_A1.psd
44. © WAX INTERACTIVE NOMMAGE DE FICHIERS 55 Client_Projet_Format_Page_A1.psd Large Medium Small
45. © WAX INTERACTIVE NOMMAGE DE FICHIERS 56 Client_Projet_Format_Page_A1.psd Large Medium Small
46. © WAX INTERACTIVE NOMMAGE DE FICHIERS 57 Client_Projet_Format_Page_A1.psd Large Medium Small Piste
47. © WAX INTERACTIVE NOMMAGE DE FICHIERS 58 Client_Projet_Format_Page_A1.psd Large Medium Small Piste Iteration
48. © WAX INTERACTIVE NOMMAGE DE FICHIERS 59 Olympics_Site_Large_Home_A1.psd
49. © WAX INTERACTIVE NOMMAGE DE FICHIERS 60 Olympics_Site_Large_Home_B1.psd Olympics_Site_Large_Home_A1.psd
50. © WAX INTERACTIVE NOMMAGE DE FICHIERS 61 Olympics_Site_Large_Home_B1.psd Olympics_Site_Large_Home_A1.psd Olympics_Site_Large_Home_B2.psd
51. © WAX INTERACTIVE NOMMAGE DE FICHIERS 62 Olympics_Site_Large_Home_B1.psd Olympics_Site_Large_Home_A1.psd Olympics_Site_Large_Home_B2.psd Olympics_Site_Large_Home_B3.psd
52. © WAX INTERACTIVE NOMMAGE DE FICHIERS 63 Olympics_Site_Large_Home_B1.psd Olympics_Site_Large_Home_A1.psd Olympics_Site_Large_Home_B2.psd Olympics_Site_Large_Home_B3.psd
53. © WAX INTERACTIVE NOMMAGE DE FICHIERS 64 Olympics_Site_Small_Home_B1.psd Olympics_Site_Medium_Home_B1.psd Olympics_Site_Small_About_B1.psd Olympics_Site_Medium_About_B1.psd Olympics_Site_Large_About_B1.psd
54. © WAX INTERACTIVE DESIGN DE LA HOME 65 Démo
55. © WAX INTERACTIVE LIENS DYNAMIQUES 66 Démo •Utiliser les mêmes ressources dans tous vos PSD •Rapidité de mise à jour
56. © WAX INTERACTIVE COMPOSITIONS DE CALQUES (DYNAMIQUES) 67 Démo Avoir plusieurs variantes dans un seul et même fichier. Utile pour : •Les menus •Les boutons …
57. © WAX INTERACTIVE DEVICE PREVIEW 68 Démo Prévisualiser en temps réel votre design sur tablette 
 & mobile
58. © WAX INTERACTIVE BIBLIOTHÈQUE 69 Démo Rassembler vos différents éléments graphiques à un endroit, partageable en ligne •Nuances de couleurs •Icônes •Images …
59. © WAX INTERACTIVE GENERATOR 70 Démo Exporter automatiquement et en continu tous vos assets graphiques, pour tous les devices •Icônes vectorielles et bitmap •Images •En résolution standard 
 et Retina
60. © WAX INTERACTIVE ASSEMBLAGE 71 Démo Réunir tous vos fichiers dans un seul dossier, facilement partageable (et ne plus avoir de dépendance manquante en ouvrant un PSD)
61. © WAX INTERACTIVE ICÔNES AVEC GENERATOR 72 Exporter simplement tous les fichiers d’icônes pour mobile
62. © WAX INTERACTIVE ICÔNES AVEC GENERATOR 73 Démo → github.com/skynebula/ios-icon-template
63. © WAX INTERACTIVE COLLABORATION 74
64. © WAX INTERACTIVE CREATIVE CLOUD FILES 75 Vos fichiers de travail synchronisé dans le cloud 
 et avec toute votre équipe
65. © WAX INTERACTIVE CREATIVE CLOUD ASSETS 76
66. © WAX INTERACTIVE PARTAGE 77 Partage de lien public
67. © WAX INTERACTIVE COLLABORATION 78 Démo Collaboration active
 (lecture et écriture)
68. © WAX INTERACTIVE CREATIVE CLOUD EXTRACT 79
69. © WAX INTERACTIVE CREATIVE CLOUD EXTRACT 80 Démo Inspection des fichiers PSD directement en ligne •Tailles de éléments •Positions et marges •Gamme de couleurs •Fonts utilisées •Exports d’assets •Code CSS
70. © WAX INTERACTIVE AUTRES FONCTIONNALITÉS CREATIVE CLOUD 81 Démo •Versioning •Commentaires simples
71. © WAX INTERACTIVE POINTS NÉGATIFS 82
72. © WAX INTERACTIVE POINTS NÉGATIFS 83 Photoshop •Mauvaise gestion des plans de travail •Export SVG vectoriel limité aux formes vectorielles
 (et pas aux objets, liens ou symboles dynamiques) CC •Système de commentaires très limité par rapport à la concurrence •Téléchargement des assets laborieux
73. © WAX INTERACTIVE CONCLUSION & TAKEAWAYS 84
74. © WAX INTERACTIVE TAKEAWAYS POUR LES DESIGNERS 85 1 Rangez vos PSD
75. © WAX INTERACTIVE TAKEAWAYS POUR LES DESIGNERS 86 2 Vraiment, rangez vos PSD
76. © WAX INTERACTIVE TAKEAWAYS POUR LES DESIGNERS 87 3 Nommez vos calques et dossiers dès le début
77. © WAX INTERACTIVE TAKEAWAYS POUR LES DESIGNERS 88 4 Faites des calques vectoriels
78. © WAX INTERACTIVE TAKEAWAYS POUR LES DESIGNERS 89 5 Utilisez les liens dynamiques
79. © WAX INTERACTIVE TAKEAWAYS POUR LES DESIGNERS 90 6 Utilisez les compositions de calques
80. © WAX INTERACTIVE TAKEAWAYS POUR LES DESIGNERS 91 7 Facilitez la vie des développeurs
81. © WAX INTERACTIVE TAKEAWAYS POUR LES DÉVELOPPEURS 92 8 N’hésitez pas à poser des questions à vos designers
82. © WAX INTERACTIVE TAKEAWAYS 93 1. Rangez vos PSD 2. Vraiment, rangez vos PSD 3. Nommez vos calques et dossiers dès le début 4. Faites des calques vectoriels 5. Utilisez les liens dynamiques 6. Utilisez les compositions de calques 7. Facilitez la vie des développeurs 8. Posez des questions à vos designers
83. © WAX INTERACTIVE TAKEAWAYS 94 1. Rangez vos PSD 2. Vraiment, rangez vos PSD 3. Nommez vos calques et dossiers dès le début 4. Faites des calques vectoriels 5. Utilisez les liens dynamiques 6. Utilisez les compositions de calques 7. Facilitez la vie des développeurs 8. Posez des questions à vos designers
84. © WAX INTERACTIVE MERCI! 96 jfontana.fr @skynebula → Twitter → Dribbble → GitHub
85. © WAX INTERACTIVE SUIVEZ-NOUS! 100 @wax_ch wax-interactive.ch /waxinteractivech /waxinteractivech #WaxTDS #
86. © WAX INTERACTIVE WAX-INTERACTIVE.CH digital agency of