Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Talk Drink Share - Designers et développeurs : ...

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

Jérémie Fontana

April 13, 2016
Tweet

More Decks by Jérémie Fontana

Other Decks in Design

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 SOMMAIRE 14 •Introduction •Contexte •Solution •Adobe CC

    •Flux de travail •Collaboration •Points négatifs •Conclusion •Questions
  3. © WAX INTERACTIVE BUT 16 Faire gagner du temps aux

    designers et développeurs et améliorer/faciliter leur collaboration
  4. © WAX INTERACTIVE DÉROULEMENT 17 •Quelques slides •Des exemples pratiques

    
 sur logiciel •De l’interactivité •Et quelques GIFs…
  5. © 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…
  6. © WAX INTERACTIVE PHOTOSHOP 21 Photoshop CC 2015 Illustrator CC

    2015 Experience Design CC (preview) Sketch 3.6
  7. © WAX INTERACTIVE PHOTOSHOP VS ILLUSTRATOR 22 Photoshop CC 2015

    Illustrator CC 2015 Experience Design CC (preview) Sketch 3.6
  8. © WAX INTERACTIVE PHOTOSHOP VS EXPERIENCE DESIGN 23 Photoshop CC

    2015 Illustrator CC 2015 Experience Design CC (preview) Sketch 3.6
  9. © WAX INTERACTIVE PHOTOSHOP VS SKETCH 24 Photoshop CC 2015

    Illustrator CC 2015 Experience Design CC (preview) Sketch 3.6
  10. © 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
  11. © 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
  12. © WAX INTERACTIVE FLUX DE TRAVAIL : AVANT 44 Découpe

    Validation Design Exports Intégration
  13. © WAX INTERACTIVE FLUX DE TRAVAIL : AVANT 45 Découpe

    Validation Design Exports Intégration
  14. © 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)
  15. © WAX INTERACTIVE ORGANISATION DES PSD 49 "There is no

    design without discipline. There is no discipline without intelligence." — Massimo Vignelli
  16. © 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
  17. © WAX INTERACTIVE LIENS DYNAMIQUES 66 Démo •Utiliser les mêmes

    ressources dans tous vos PSD •Rapidité de mise à jour
  18. © 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 …
  19. © WAX INTERACTIVE DEVICE PREVIEW 68 Démo Prévisualiser en temps

    réel votre design sur tablette 
 & mobile
  20. © 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 …
  21. © 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
  22. © 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)
  23. © WAX INTERACTIVE CREATIVE CLOUD FILES 75 Vos fichiers de

    travail synchronisé dans le cloud 
 et avec toute votre équipe
  24. © 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
  25. © 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
  26. © WAX INTERACTIVE TAKEAWAYS POUR LES DESIGNERS 87 3 Nommez

    vos calques et dossiers dès le début
  27. © WAX INTERACTIVE TAKEAWAYS POUR LES DÉVELOPPEURS 92 8 N’hésitez

    pas à poser des questions à vos designers
  28. © 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
  29. © 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