Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Design systems : Bench et reco sur les outils

835 vues

Publié le

Cette liste d’outils permet de donner une bonne vision d’ensemble de ce qui existe aujourd’hui sur le marché. Les outils de design sont en évolution constante et rapide ces dernières années donc il faut s’attendre à beaucoup d’autres nouveautés. Pour en savoir plus, visionnez cette présentation réalisée par Audrey Hacq, Lead Designer chez Backelite

Publié dans : Design
  • Soyez le premier à commenter

Design systems : Bench et reco sur les outils

  1. 1. Design Systems : Bench et reco sur les outils Digital Service Design by Capgemini
  2. 2. 2 Préambule Cette liste d’outils permet de donner une bonne vision d’ensemble de ce qui existe aujourd’hui sur le marché. Les outils de design sont en évolution constante et rapide ces dernières années donc il faut s’attendre à beaucoup d’autres nouveautés. Le but va être de mettre en place un écosystème d’outils en fonction de chaque contexte projet.
  3. 3. 3 Ces outils doivent permettre de... DESIGNER (en basse et/ou haute fidélité) PROTOTYPER (en basse et/ou haute fidélité) PARTAGER (entre designers) VERSIONNER (des fichiers, des composants…) TRANSMETTRE (aux équipes de dev) DOCUMENTER (les connaissances, les guidelines, …)
  4. 4. 4 Sommaire 1 2 3 4 5 6 Design Prototypage Librairies partagées UI Versioning de composants Outils de Hand-off Partage et documentation
  5. 5. Place your description here (between 2 and 4 lines). The block should never be moved. The style of text should remain the same (Montserrat light, 28pt, dark gray, leading 1.3). Place your long title here on 3 lines maximum. Backelite - Digital Service Design by CapgeminiBackelite - Digital Service Design by Capgemini Les outils de design 5
  6. 6. 6 Les outils de design À quoi ça sert ? Les outils de design permettent de démontrer les hypothèses de conception et de valider des choix avant de les développer. Beaucoup de nouveaux logiciels adaptés au design d’interfaces ont vu le jour ces dernières années. Ces logiciels ont l’avantage de proposer aux designers une conception par composants.
  7. 7. 7 Les outils de design Sketch Les + ● Fait pour travailler par composants (symboles atomic, factorisation, responsive…) ● Librairies partagées natives ● Beaucoup de plugins et de compatibilités avec des outils externes (Zeplin, Marvel, Invision, Sympli, Craft etc…) ● Grosse communauté derrière pour faire évoluer ces plugins ● Peu coûteux Les - ● Dispo uniquement sur Mac ● Ne va pas jusqu’au prototypage poussé Pourquoi, quand et comment l’utiliser 80 € / an
  8. 8. 8 Les outils de design Invision studio Les + ● Permettrait d’avoir un seul outil/suite d’outils pour tout faire (design, prototypage, hand-off…) Les - ● Encore en version beta → à surveiller de près. Les premiers retours que j’ai entendus : prometteur mais encore un peu léger en fonctionnalités et possibilités par rapport à sketch. Encore en Beta
  9. 9. 9 Les outils de design Figma Les + ● Fait pour travailler par composants ● Versioning et librairies intégrés (puisque le concept même du logiciel est le travail collaboratif) ● Encore plus adapté que sketch pour faire de l’atomic design (override de texte, de couleur et de style beaucoup plus simple) ● En ligne, donc pour MAC & PC ● Possibilité d’importer facilement des fichiers Sketch Les - ● Pas de prototypage poussé ● Les .fig enregistrables en local ne sont pas ouvrables par d’autres logiciels ● Obligation d’avoir une connexion internet voir le site 10 € par mois
  10. 10. 10 Les outils de design UxPin Les + ● Seul outil existant aujourd’hui et proposant une expérience globale (wireframes + prototypage + UI design + specs + documentation) ● Fonctionnalité pour créer ou importer des design systems et gérer des designs cross- plateformes. Les - ● Pas identifié aujourd’hui comme logiciel de design (plutôt en complément de Sketch) ● Courbe d’apprentissage plus longue ● Pas de possibilité d’enregistrer en local ● Obligation d’avoir une connexion internet Uxpin et design system 24 € par mois
  11. 11. 11 Les outils de design Adobe Xd Les + ● Disponible sur Mac & PC ● Grosse société derrière (Adobe) ● Prototypage plus poussé que sur Sketch (animations) ● Bonnes performances Les - ● Vient de sortir : manque encore plusieurs fonctionnalités importantes (responsive, dev handoff) ● Gestion des symboles encore limitée ● Library partagée adobe limitée 24 €/mois (ou 60€/mois pour toutes la CC)
  12. 12. 12 Les outils de design Quelques chiffres (2017) Source : Design Tools Survey 2017 Quel logiciel de design d’interface utilisez-vous ?
  13. 13. 13 Les outils de design Mon avis Je déconseille les logiciels Photoshop et Illustrator qui ne sont pas faits pour travailler par composants. Ils doivent cependant être conservés pour de la production de contenus (illustrations, photomontage et retouches etc…) Je favoriserais Sketch, qui pour le moment est en avance sur les autres logiciels, mais il faut garder en tête que tout cela bouge très vite. Il faut trouver des workflows qui soient plus ou moins indépendants d’un logiciel de design en particulier.
  14. 14. Place your description here (between 2 and 4 lines). The block should never be moved. The style of text should remain the same (Montserrat light, 28pt, dark gray, leading 1.3). Place your long title here on 3 lines maximum. Backelite - Digital Service Design by CapgeminiBackelite - Digital Service Design by Capgemini Les outils de prototypage 14
  15. 15. 15 Les outils de prototypage À quoi ça sert ? Les outils de prototypages servent à pouvoir tester rapidement un parcours ou un écran en situation réelle. On distinguera 2 types de proto : Simples : un proto simple se réduira à une suite d’écrans avec quelques transitions Complexes : un proto complexe pourra intégrer des animations plus poussées, des variables avec de la vraie saisie de texte etc.
  16. 16. 16 Les outils de prototypage Invision Les + ● Simple et rapide ● Bonne synchronisation avec Sketch via le plugin Craft ● Idéal pour avoir tout de suite quelque chose à tester, même très tôt dans la conception Les - ● Prototype très simple avec peu d’autres interactions que celle de “clic&go” ● Pas de notion de variables ● Pas d’animations poussées Voir les prix Invision
  17. 17. 17 Les outils de prototypage Principle Les + ● Assez facile à prendre en main ● Possibilité de tester des gestures (drag&drop, swipe…) ● Permet de régler assez finement des micro animations ● Bonne compatibilité avec Sketch Les - ● Peut vite s’avérer complexe pour animer tout un parcours ● Pas forcément très adapté pour du test utilisateur poussé ● Mac only Principle For Mac Prix : 110 €
  18. 18. 18 Les outils de prototypage Flinto Les + ● Prise en main rapide. ● Animations propres et fluides. ● Gestion simple des comportements, micro-interactions sur des éléments. ● Bonne compatibilité avec Sketch. ● Fichier .flinto généré en local. ● Voir sur son mobile son travail en cours. Les - ● ... Flinto Prix : 83 €
  19. 19. 19 Les outils de prototypage Proto.io Les + ● Prototype hébergé en ligne donc accessible depuis n’importe où. ● Permet de prototyper de la VR Les - ● Les fichiers sources sont hébergés en ligne et ne sont plus accessibles une fois la période d’essai expirée. ● Lenteurs observées sur du prototypage complexe. → attention, les protos créés en version d’essai ne sont plus récupérables si on ne passe pas en payant Proto.io Prix : de 20 à 135 € / Mois
  20. 20. 20 Les outils de prototypage Axure Les + ● Le top pour faire des tests utilisateurs poussés avec beaucoup de règles d’affichage et de variables Les - ● Outil complexe à prendre en main et qui a un peu vieilli ● Mieux adapté au web qu’à des proto mobiles Axure 25 € par mois ou 402 € à l’achat
  21. 21. 21 Les outils de prototypage Framer Studio Les + ● Prototypage très poussé qui permet tous les types d’interactions ● Intégration de données et de variables ● Intégration de code ● Possibilité de l’utiliser aussi en outil de design Les - ● Courbe d’apprentissage plus longue ● Mac only Prix : entre 10 € et jusqu’à 700 € / mois Framer
  22. 22. Place your description here (between 2 and 4 lines). The block should never be moved. The style of text should remain the same (Montserrat light, 28pt, dark gray, leading 1.3). Place your long title here on 3 lines maximum. Backelite - Digital Service Design by CapgeminiBackelite - Digital Service Design by Capgemini Librairies partagées UI (pour les designers) 22
  23. 23. 23 Les librairies partagées À quoi ça sert ? Les librairies permettent aux designers d’aller chercher à un seul endroit tous les éléments principaux (couleurs, grilles, templates, icônes, composants…) qui leur permettront de construire le/les produit(s). Les composants sont accessibles directement depuis l’outil de design (intégration totale dans leur workflow). Tous les composants sont synchronisés à cette librairie.
  24. 24. 24 Les librairies partagées Librairies Sketch Les + ● Native au logiciel Sketch (pas de coût supplémentaire) ● Possibilité de choisir le serveur de stockage des librairies (cloud, drive, dropbox…) ● Beaucoup de passerelles avec des plugins pour avoir un workflow complet (versioning, documentation etc…) Les - ● Pas de gestion des styles de typos ● Pas de vision online des composants ● Workflow peut vite devenir complexe à gérer ● Sketch onlySketch libraries 0 € (Intégré dans sketch)
  25. 25. 25 Les librairies partagées Lingo Les + ● Visibilité du système en ligne en un clic ● Contrôle des permissions (qui peut éditer ou non le système) ● Gestion ultra puissante des icônes (réutilisables sur tous les logiciels) Les - ● Composants stockés sur leurs serveurs ● Pas d’inspection codée des composants ● Pas de versioning de composants ● La documentation des composants reste très simple (partie “note”) Lingo Entre 23 € par mois (5 users) et 121 € (50 users)
  26. 26. 26 Les librairies partagées DSM invision Les + ● Visibilité du système en ligne en un clic ● Documentation directement depuis le système (avec mise en forme, possibilité d’intégrer des gif etc…) ● Possibilité de gérer plusieurs versions du système en parallèle (versionning) ● Mise à dispo des design tokens Les - ● Encore en beta ● Pas d’inspection codée des composants ● Les assets se récupèrent un par un et on ne peut pas venir ramener dans sketch tous le design system d’un coup Design System Manager - Invision Inclus dans l’abonnement invision
  27. 27. 27 Les librairies partagées Mon avis Les librairies partagées sont un fabuleux outil pour se partager des assets entre designers. Cela permet d’avoir une seule source pour aller chercher les composants et être sûr que tout le monde est à jour. Attention tout de même car cela demande d’avoir une certaine rigueur dans les process de travail et une librairie mal rangée, mal nommée ou mal entretenue peut vite devenir contre-productive.
  28. 28. Place your description here (between 2 and 4 lines). The block should never be moved. The style of text should remain the same (Montserrat light, 28pt, dark gray, leading 1.3). Place your long title here on 3 lines maximum. Backelite - Digital Service Design by CapgeminiBackelite - Digital Service Design by Capgemini Les outils de versioning (pour les designers) 28
  29. 29. 29 Les outils de versioning À quoi ça sert ? À partir du moment où plusieurs designers vont travailler avec des composants communs (via les librairies partagées) le versioning va leur servir à monitorer les changements et organiser leur workflow. Il faut distinguer le versionning du système (et des composants) et le versionning des fichiers de travail des designers.
  30. 30. 30 Les outils de versioning Plant.io Les + ● Directement depuis Sketch (pas d’outil en plus) → + intégré au workflow des designers ● Très simple Les - ● Pas de vision du projet en ligne (donc seuls les designers peuvent voir les changements) → Autre modèle = Pas de branches, pas de commit. Est-ce vraiment adapté aux gros projets ? Plant 10 € par mois
  31. 31. 31 Les outils de versioning Abstract Les + ● Outil le plus en vogue du marché sur ces problématiques ● Basé sur un workflow similaire à celui des dev (commit/branches/Merge) ● Prise en compte des librairies sketch ● Commentaires et annotations Les - ● Nécessite une vraie organisation d’équipe autour de ce logiciel ● Obligation d’ouvrir les fichiers sketch depuis Abstract (Oblige tout le monde à passer par cet outil = Dépendance à abstract) ● Pas de versioning par composant (le versionning se fait par plan de travail donc par écran). Go Abstract Entre 7 et 12 € par mois
  32. 32. 32 Design File Versioning Kactus Les + ● Open source. Possibilité de contribuer ● Intégration avec Github (centralisation des livrables dev et design) Les - ● Nécessite une bonne connaissance de github (peu de designers le maîtrise) ● Très peu visuel → bien pour des petits projets avec des profils de designers très “tech” Kactus 4 € par mois
  33. 33. 33 Design File Versioning Mon avis Abstract est aujourd’hui le logiciel qui semble s’imposer pour le versionning. Ces logiciels de versionning sont utiles si l’on part sur un système ultra synchronisé (librairies partagées Sketch) OU si on sait que beaucoup de personnes différentes seront amenées à collaborer sur les mêmes fichiers Sketch. A noter qu’un outil comme le DSM d’invision par exemple permet le versionning du système de composants UI mais pas le versionning et le merging des fichiers Sketch en eux-mêmes.
  34. 34. Place your description here (between 2 and 4 lines). The block should never be moved. The style of text should remain the same (Montserrat light, 28pt, dark gray, leading 1.3). Place your long title here on 3 lines maximum. Backelite - Digital Service Design by CapgeminiBackelite - Digital Service Design by Capgemini Les outils de “Hand-off” (Faciliter le passage en dev) 34
  35. 35. 35 Les outils de hand-off À quoi ça sert ? Tant que le pont entre design et code ne sera pas tombé, les composants devront exister côté UI (sur sketch, figma...) ET côté dev (vrais composants codés). Les outils de “hand-off” facilitent le passage en développement front en permettant de récupérer des couleurs, styles de typos, positions, tailles… directement en code. Ils permettent également aux développeurs de télécharger les assets graphiques dont ils ont besoin.
  36. 36. 36 Visualization & Handoff Sympli Les + ● Plugins Sketch et photoshop ● Des plugins pour les dev natifs (android, iOS) ● Intégration Jira ● Commentaires, annotations ● Possibilité de voir les différentes versions et l’historique des changements ● Permet de prototyper directement dans l’outil Les - ● Le développeur ne reçoit pas d’alerte lorsqu’il y a un changement sur un écran. ● Le rendu des typographies peut parfois poser problèmeSympli 12 € par mois
  37. 37. 37 Visualization & Handoff Inspect by InVision Les + ● Plugins Sketch et photoshop ● Écosystème invision qui permet avec un seul abonnement de couvrir la plupart des besoins en outils ● Combiné à l’outil de prototypage (une seule source à regarder pour les développeurs) ● Intégration Jira et Intégration Slack Les - ● Pas de plugins pour les dev natifs → connexion avec invision design studio ? avec le DSM ? Inspect Inclus dans l’abonnement invision
  38. 38. 38 Visualization & Handoff Zeplin Les + ● Plugins Sketch, Figma, XD et photoshop ● Intégration Jira et Intégration Slack ● Génération automatique de Style Guide (mais souvent pas optimale car prend en compte TOUS les éléments des écrans comme des couleurs d’illustration par exemple qui ne font pas partie du système) Les - ● Pas de plugins pour les dev natifs Zeplin 12 € par mois
  39. 39. 39 Visualization & Handoff ZeroHeight Les + ● Va beaucoup plus loin que les autres outils en proposant une vision par composants ● Propose la visualisation d’un style guide en ligne facile à documenter ● Rattaché aux librairies partagées Sketch ● Historique des versions pour chaque composant Les - ● Pas de commentaires possibles ● Pas de plugin pour les dev natifs ZeroHeight 400 € par mois
  40. 40. 4 0 Les outils de design Mon avis Tous ces logiciels de hand-off se valent plus ou moins. Zéro Height est un bon candidat car en plus d’une vision intelligente et factorisée des composants, il permet de créer un style guide en ligne sur la base du fichier Sketch (design only) et d’avoir très rapidement une première ébauche de design system.
  41. 41. Place your description here (between 2 and 4 lines). The block should never be moved. The style of text should remain the same (Montserrat light, 28pt, dark gray, leading 1.3). Place your long title here on 3 lines maximum. Backelite - Digital Service Design by CapgeminiBackelite - Digital Service Design by Capgemini Partage et documentation 41
  42. 42. 42 Partage et documentation À quoi ça sert ? L’objectif est d’avoir un seul endroit, connu de tous pour trouver toute la matière “officielle” pour commencer ou reprendre un projet digital. C’est une sorte de hub qui peut rediriger vers d’autres liens, d’autres outils. Cette source doit être : - facile à mettre à jour (le + automatique possible) - bien organisée (par exemple par profil ou type de produit) - facile d'accès par les équipes (trouvable et diffusée largement)
  43. 43. 43 Frontify côté design Les + ● Possibilité de gérer plusieurs marques sous un même compte ● Tout le monde peut venir éditer la documentation (pas juste les profils tech) ● Possibilité de créer une page "landing" pour mettre des news et faire vivre le style guide ● Espace de commentaires pour échanger/itérer sur le projet et suivre les évolutions (versioning) Les - ● Pas de lien entre Sketch et Frontify (pas de remplissage automatique du style guide) ● Tout est sur leurs serveurs (comment cela se passe si on veut récupérer la documentation?) ● Pas de possibilité de customisation (on prend l’outil tel qu’il est et on s’intègre dedans). Frontify Partage et documentation
  44. 44. 4 4 Frontify côté tech Les + ● Hébergement géré par Frontify ● La pattern librairie est synchronisée avec le projet des développeurs ● Modèle déjà réfléchi en atomic design ● Le back office est déjà tout fait et facile à prendre en main Les - ● Tout est sur leurs serveurs ● Pas de possibilité de customisation Frontify Pattern library 2500 € par mois Partage et documentation
  45. 45. 45 Le site custom Les + ● Permet d’afficher tout ce qu’on veut, de la manière dont on le souhaite. ● Pas dépendant d’une solution existante qu’il faudra payer tous les mois. ● Possibilité de prévoir un back office pour l’alimenter ● Possibilité de développer des passerelles entre les composants codés/designés et le système (mise à jour automatique, plugins…) Les - ● Plus long (et plus coûteux ?) à réaliser → ça peut être la vision long terme Prix à définir Un site entièrement custom Partage et documentation
  46. 46. 46 Partage et documentation Storybook Storybook peut être une solution pour des projets web afin d’avoir rapidement un endroit où partager les assets entre développeurs. Les + ● Populaire et gratuit ● Bibliothèque de composants générée à partir des composants React/Angular. ● Intégré au projet de dév, donc versionné. ● Notion de playground, qui permet de tester les paramètres d’un composant “en live”. Les - ● Très orienté “composants dev”, pas idéal pour de la documentation UX/UI ● Styleguide maintenable uniquement par les développeurs. Storybook Gratuit (open source)
  47. 47. 47 Partage et documentation Google drive Material.io Google a sorti récemment une nouvelle version du site Material.io Toute leur documentation est rédigée sur des Google doc partagés et ils ont créé un outil qui lit ces documents et vient alimenter automatiquement le front de leur Design System… Cela permet à tous de pouvoir éditer et modifier la documentation. Malin non ?
  48. 48. 4 8 Mon avis Le sujet du partage et de la documentation est épineux et dépend de beaucoup de paramètres. Les outils seront différents si le produit est amené à vivre uniquement sur du web ou si au contraire il sera multi- plateformes. Dans tous les cas, l’idée est de commencer par la méthode, les outils à mettre à dispo des équipes et la montée en compétences de chacun. Le lieu pour stocker toute cette matière doit pouvoir changer et évoluer énormément au cours du projet. La single source of truth
  49. 49. Place your description here (between 2 and 4 lines). The block should never be moved. The style of text should remain the same (Montserrat light, 28pt, dark gray, leading 1.3). Place your long title here on 3 lines maximum. Backelite - Digital Service Design by Capgemini Pour toute question audrey.hacq@backelite.com The information contained in this presentation is proprietary. © 2018 Capgemini. All rights reserved. 49

×