SlideShare a Scribd company logo
1 of 49
Download to read offline
Design Systems : Bench et reco sur les
outils
Digital Service Design
by Capgemini
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
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
Sommaire
1
2
3
4
5
6
Design
Prototypage
Librairies partagées UI
Versioning de composants
Outils de Hand-off
Partage et documentation
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
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
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
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
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
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
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
Les outils de design
Quelques chiffres (2017)
Source : Design Tools Survey 2017
Quel logiciel de design d’interface utilisez-vous ?
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
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
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
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
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
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.
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
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
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
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
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
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
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.
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
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
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
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
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
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
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 ?
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
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

More Related Content

What's hot

Presentatie periodiseren anno 2019
Presentatie periodiseren anno 2019Presentatie periodiseren anno 2019
Presentatie periodiseren anno 2019GuidoSeerden
 
45987751 o-projeto-estrutural-de-edificios-de-concreto-armado
45987751 o-projeto-estrutural-de-edificios-de-concreto-armado45987751 o-projeto-estrutural-de-edificios-de-concreto-armado
45987751 o-projeto-estrutural-de-edificios-de-concreto-armadozuiltonguima
 
costruzione di ponti in acciaio
costruzione di ponti in acciaiocostruzione di ponti in acciaio
costruzione di ponti in acciaioFranco Bontempi
 
costruzione di ponti in cemento armato
costruzione di ponti in cemento armatocostruzione di ponti in cemento armato
costruzione di ponti in cemento armatoFranco Bontempi
 
Cap 4 fifa el entrenador la direccion tecnica-100403165330-phpapp02
Cap 4 fifa   el entrenador la direccion tecnica-100403165330-phpapp02Cap 4 fifa   el entrenador la direccion tecnica-100403165330-phpapp02
Cap 4 fifa el entrenador la direccion tecnica-100403165330-phpapp02Oscar Pascual
 
Memorial descritivo
Memorial descritivoMemorial descritivo
Memorial descritivoLuciano Back
 
Le Guide d'entraîneur en préformation
Le Guide d'entraîneur en préformationLe Guide d'entraîneur en préformation
Le Guide d'entraîneur en préformationkamel chemek
 
NBR 9077/2001
NBR 9077/2001NBR 9077/2001
NBR 9077/2001UNIFIA
 
AW-COACH-TEACH-PHILOSOPHY
AW-COACH-TEACH-PHILOSOPHYAW-COACH-TEACH-PHILOSOPHY
AW-COACH-TEACH-PHILOSOPHYAntony Wilshaw
 
PGS - lezione 04 - MODELLAZIONI DISCRETE.pdf
PGS - lezione 04 - MODELLAZIONI DISCRETE.pdfPGS - lezione 04 - MODELLAZIONI DISCRETE.pdf
PGS - lezione 04 - MODELLAZIONI DISCRETE.pdfFranco Bontempi
 
Memorial descritivo residencial
Memorial descritivo residencialMemorial descritivo residencial
Memorial descritivo residencialMarlon Lopes
 
METODI E STRUMENTI NELLA DIAGNOSTICA DELLE STRUTTURE ESISTENTI
METODI E STRUMENTI NELLA DIAGNOSTICA DELLE STRUTTURE ESISTENTIMETODI E STRUMENTI NELLA DIAGNOSTICA DELLE STRUTTURE ESISTENTI
METODI E STRUMENTI NELLA DIAGNOSTICA DELLE STRUTTURE ESISTENTIFranco Bontempi
 

What's hot (20)

Presentatie periodiseren anno 2019
Presentatie periodiseren anno 2019Presentatie periodiseren anno 2019
Presentatie periodiseren anno 2019
 
45987751 o-projeto-estrutural-de-edificios-de-concreto-armado
45987751 o-projeto-estrutural-de-edificios-de-concreto-armado45987751 o-projeto-estrutural-de-edificios-de-concreto-armado
45987751 o-projeto-estrutural-de-edificios-de-concreto-armado
 
costruzione di ponti in acciaio
costruzione di ponti in acciaiocostruzione di ponti in acciaio
costruzione di ponti in acciaio
 
costruzione di ponti in cemento armato
costruzione di ponti in cemento armatocostruzione di ponti in cemento armato
costruzione di ponti in cemento armato
 
FC Barcelonne
FC BarcelonneFC Barcelonne
FC Barcelonne
 
Aspetti operativi della modellazione strutturale
Aspetti operativi della modellazione strutturaleAspetti operativi della modellazione strutturale
Aspetti operativi della modellazione strutturale
 
NBR ISO 9386-1/2013
NBR ISO 9386-1/2013NBR ISO 9386-1/2013
NBR ISO 9386-1/2013
 
Cap 4 fifa el entrenador la direccion tecnica-100403165330-phpapp02
Cap 4 fifa   el entrenador la direccion tecnica-100403165330-phpapp02Cap 4 fifa   el entrenador la direccion tecnica-100403165330-phpapp02
Cap 4 fifa el entrenador la direccion tecnica-100403165330-phpapp02
 
Laudo de reforma residencial
Laudo de reforma residencialLaudo de reforma residencial
Laudo de reforma residencial
 
SOCCER TRAINING
SOCCER TRAININGSOCCER TRAINING
SOCCER TRAINING
 
Memorial descritivo
Memorial descritivoMemorial descritivo
Memorial descritivo
 
Le Guide d'entraîneur en préformation
Le Guide d'entraîneur en préformationLe Guide d'entraîneur en préformation
Le Guide d'entraîneur en préformation
 
Nbr 13281 2005
Nbr 13281 2005Nbr 13281 2005
Nbr 13281 2005
 
NBR 9077/2001
NBR 9077/2001NBR 9077/2001
NBR 9077/2001
 
Costruzione di Ponti - Ceradini
Costruzione di Ponti - CeradiniCostruzione di Ponti - Ceradini
Costruzione di Ponti - Ceradini
 
AW-COACH-TEACH-PHILOSOPHY
AW-COACH-TEACH-PHILOSOPHYAW-COACH-TEACH-PHILOSOPHY
AW-COACH-TEACH-PHILOSOPHY
 
PGS - lezione 04 - MODELLAZIONI DISCRETE.pdf
PGS - lezione 04 - MODELLAZIONI DISCRETE.pdfPGS - lezione 04 - MODELLAZIONI DISCRETE.pdf
PGS - lezione 04 - MODELLAZIONI DISCRETE.pdf
 
Memorial descritivo residencial
Memorial descritivo residencialMemorial descritivo residencial
Memorial descritivo residencial
 
METODI E STRUMENTI NELLA DIAGNOSTICA DELLE STRUTTURE ESISTENTI
METODI E STRUMENTI NELLA DIAGNOSTICA DELLE STRUTTURE ESISTENTIMETODI E STRUMENTI NELLA DIAGNOSTICA DELLE STRUTTURE ESISTENTI
METODI E STRUMENTI NELLA DIAGNOSTICA DELLE STRUTTURE ESISTENTI
 
Projeto casa 42m2
Projeto casa 42m2Projeto casa 42m2
Projeto casa 42m2
 

Similar to Design systems : Bench et reco sur les outils

Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Idean France
 
Des poneys à Liberation.fr
Des poneys à Liberation.frDes poneys à Liberation.fr
Des poneys à Liberation.frliberation_dev
 
Comparatif des outils de prototypage
Comparatif des outils de prototypageComparatif des outils de prototypage
Comparatif des outils de prototypageGianni Polito
 
20131024 qualité de code et sonar - mug lyon
20131024   qualité de code et sonar - mug lyon20131024   qualité de code et sonar - mug lyon
20131024 qualité de code et sonar - mug lyonClement Bouillier
 
PRESENTATION_webclient.pptx
PRESENTATION_webclient.pptxPRESENTATION_webclient.pptx
PRESENTATION_webclient.pptxAleskaVargas2
 
Faire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic DesignFaire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic DesignLoïc Vanderschooten
 
Les nouveautés d'Unity 2018
Les nouveautés d'Unity 2018Les nouveautés d'Unity 2018
Les nouveautés d'Unity 2018Yannick Comte
 
Py osv newsletter-062018
Py osv newsletter-062018Py osv newsletter-062018
Py osv newsletter-062018FabMob
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet DrupalAdyax
 
Usine logicielle à Orange Labs
Usine logicielle à Orange LabsUsine logicielle à Orange Labs
Usine logicielle à Orange LabsEmmanuel Hugonnet
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphiqueIdean France
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...ENSIBS
 
Conférence Shinken à SophiaConf2012 (Jean Gabès)
Conférence Shinken à SophiaConf2012 (Jean Gabès)Conférence Shinken à SophiaConf2012 (Jean Gabès)
Conférence Shinken à SophiaConf2012 (Jean Gabès)Jean Gabès
 
Présentation d'OpenOffice.org Impress
Présentation d'OpenOffice.org ImpressPrésentation d'OpenOffice.org Impress
Présentation d'OpenOffice.org ImpressJean-Etienne Poirrier
 
Décourvir les logiciels libres
Décourvir les logiciels libresDécourvir les logiciels libres
Décourvir les logiciels libresIsabelle Motte
 
Méthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketMéthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketmichael_bailly
 
TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummiesMicrosoft
 

Similar to Design systems : Bench et reco sur les outils (20)

Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
 
Des poneys à Liberation.fr
Des poneys à Liberation.frDes poneys à Liberation.fr
Des poneys à Liberation.fr
 
Comparatif des outils de prototypage
Comparatif des outils de prototypageComparatif des outils de prototypage
Comparatif des outils de prototypage
 
20131024 qualité de code et sonar - mug lyon
20131024   qualité de code et sonar - mug lyon20131024   qualité de code et sonar - mug lyon
20131024 qualité de code et sonar - mug lyon
 
PRESENTATION_webclient.pptx
PRESENTATION_webclient.pptxPRESENTATION_webclient.pptx
PRESENTATION_webclient.pptx
 
Faire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic DesignFaire du design par composant avec l'Atomic Design
Faire du design par composant avec l'Atomic Design
 
Logiciels 3d-112-ktcufc
Logiciels 3d-112-ktcufcLogiciels 3d-112-ktcufc
Logiciels 3d-112-ktcufc
 
Les nouveautés d'Unity 2018
Les nouveautés d'Unity 2018Les nouveautés d'Unity 2018
Les nouveautés d'Unity 2018
 
Py osv newsletter-062018
Py osv newsletter-062018Py osv newsletter-062018
Py osv newsletter-062018
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
 
Usine logicielle à Orange Labs
Usine logicielle à Orange LabsUsine logicielle à Orange Labs
Usine logicielle à Orange Labs
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
Etude materiel
Etude materielEtude materiel
Etude materiel
 
Conférence Shinken à SophiaConf2012 (Jean Gabès)
Conférence Shinken à SophiaConf2012 (Jean Gabès)Conférence Shinken à SophiaConf2012 (Jean Gabès)
Conférence Shinken à SophiaConf2012 (Jean Gabès)
 
Présentation d'OpenOffice.org Impress
Présentation d'OpenOffice.org ImpressPrésentation d'OpenOffice.org Impress
Présentation d'OpenOffice.org Impress
 
Décourvir les logiciels libres
Décourvir les logiciels libresDécourvir les logiciels libres
Décourvir les logiciels libres
 
Méthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketMéthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to market
 
TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummies
 
test
testtest
test
 

More from Idean France

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineIdean France
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Idean France
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy GigonIdean France
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas FontaineIdean France
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Idean France
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléIdean France
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangIdean France
 
UI Design Trends for 2017
UI Design Trends for 2017UI Design Trends for 2017
UI Design Trends for 2017Idean France
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Idean France
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineIdean France
 
Sirikit par Julien Coudsi
Sirikit par Julien CoudsiSirikit par Julien Coudsi
Sirikit par Julien CoudsiIdean France
 
A developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqA developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqIdean France
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David YangIdean France
 
Messages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineMessages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineIdean France
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqIdean France
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}Idean France
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Idean France
 
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}Idean France
 
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...Idean France
 
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...Idean France
 

More from Idean France (20)

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a Machine
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy Gigon
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas Fontaine
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre Harlé
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David Yang
 
UI Design Trends for 2017
UI Design Trends for 2017UI Design Trends for 2017
UI Design Trends for 2017
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas Fontaine
 
Sirikit par Julien Coudsi
Sirikit par Julien CoudsiSirikit par Julien Coudsi
Sirikit par Julien Coudsi
 
A developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqA developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey Hacq
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David Yang
 
Messages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineMessages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas Fontaine
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey Hacq
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}
 
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}App groups, faire communiquer ses applications {Cocoaheads Montpellier}
App groups, faire communiquer ses applications {Cocoaheads Montpellier}
 
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
FLUPA - UX Days 2016 : "Quand les militaires se prennent au jeu du Design Spr...
 
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
Cocoaheads Montpellier Meetup : La programmation réactive sur iOS avec Réacti...
 

Design systems : Bench et reco sur les outils

  • 1. Design Systems : Bench et reco sur les outils Digital Service Design by Capgemini
  • 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 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 Sommaire 1 2 3 4 5 6 Design Prototypage Librairies partagées UI Versioning de composants Outils de Hand-off Partage et documentation
  • 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 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 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 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 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 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 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 Les outils de design Quelques chiffres (2017) Source : Design Tools Survey 2017 Quel logiciel de design d’interface utilisez-vous ?
  • 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. 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 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 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 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 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 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 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 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. 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 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 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 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 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 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. 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 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 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 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 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 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. 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 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 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 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 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 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. 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. 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 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 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. 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 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 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 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. 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. 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