Nous vous partageons cette présentation sur la recette graphique, réalisée par Aurélie Radom, Directrice Artistique / UI Designer chez Backelite. Au programme : La collaboration entre Designers et Développeurs - Qu'est-ce qu'une recette graphique ? - petite définition - Une check-list non exhaustive (à destination des UI / UX / Dev) des éléments à vérifier lors d'une phase de recette, que vous pourrez étoffer / compléter - Une liste d'outils (extensions web et apps) facilitant la recette du côté des designers et du côté des devs avec des fonctionnalités inspect, détection de typos, couleurs, superposition de maquettes en overlay, screenshots full page etc. - Les bonnes pratiques avec le process idéal du côté des UI

1. The information contained in this presentation is proprietary
©2017 Capgemini. All rights reserved. Rightstore® is a trademark belonging to
Capgemini.
Recette graphique

2. Sommaire
01
Prérequis
Tout ce qu’il vous faut
savoir avant de vous
lancer
02
Check-list
Liste non-exhaustive
des éléments à vérifier
03
Outils
Extensions et apps
facilitant la recette
04
Méthodologie
Le process idéal
du côté des UI

3. 3
Collaboration UI / Dev
Travailler ensemble rend le processus de conception et la transmission des feedbacks
plus simple. Le fait de partager les objectifs et les contraintes de chacun, profite à l’équipe
en terme de temps, de ressources et d’efforts. Même à distance, cela rend également l’exercice
de la recette graphique beaucoup plus rapide, attrayant et innovant.

4. 4
01 Prérequis
Garder l’utilisateur à l’esprit
Quand il y a un objectif commun
sur lequel se concentrer, il est plus simple de
partager la même vision entre designer et
développeur. Lors d’un désaccord, l’objectif
à garder à l’esprit est que toutes les
décisions prises affectent l’utilisateur.

5. 5
01 Prérequis
Qu’est-ce qu’une
recette graphique ?
Il s’agit d’évaluer la conformité
graphique et fonctionnelle du
projet vis-à-vis du résultat attendu
en développement.

6. 6
01 Prérequis
Avant de se lancer
Avant de se lancer dans une phase de
recettage, il est nécessaire de se munir
des éléments dits “référentiels” qui
serviront de base comparative
( Styleguide / Sympli / SFD / Sketch )

7. 7
01 Prérequis
Les navigateurs
Lorsqu’il s’agit d’un site web, il est conseillé
de le tester sous plusieurs navigateurs
(Chrome, Safari, Firefox, Opéra, IE9…) afin de
détecter des différences d’affichage en
raison de leurs interprétations différentes
des styles de CSS.

8. The information contained in this presentation is proprietary
©2017 Capgemini. All rights reserved. Rightstore® is a trademark belonging to
Capgemini.
02 Check-list

9. 9
02 Check-list
Eléments à vérifier
● Alignements :
- Alignements des blocs / images / boutons
- Margins / paddings / blancs tournants
- Espaces : titres reliés aux paragraphes, listes
numérotées, listes à puces
● Typographie :
- Fonts utilisées
- Hiérarchie typographique : H1, H2, H3, italic…
● #Couleurs :
- Codes hexa du background, des textes, des
boutons...

10. 10
02 Check-list
● Affordance :
- Les différents états des composants ( boutons /
liens / cards etc >> normal / hover / cliqué)
- Les interactions des menus / tab bars / nav
- Les liens correspondants ont-ils été ajoutés ?
- Comment s’affichent les différents états des
champs de formulaire ? (Erreurs, champs
obligatoires, dropdown, focused, typing…)
- Le déroulement des dropdown-menus (était-il
prévu qu’ils aient un aspect spécifique ?)
- Les champs de formulaire ont-ils la bonne taille
?

11. 11
02 Check-list
● Médias :
- Vérifiez les photos utilisées
- La taille des images / banners hero / icônes
- Le défilement des images dans le cas
d’un carrousel
- La lecture des vidéos (images et son)
● Langue :
- S’il s’agit d’un site multilingue vérifiez
l’affichage lors de la modification de la langue
(Ex: Tenir compte des règles d’affichage des
dates selon les langues. Le passage d’une
langue à une autre peut impacter l’affichage
des composants).

12. The information contained in this presentation is proprietary
©2017 Capgemini. All rights reserved. Rightstore® is a trademark belonging to
Capgemini.
03.1 - Outils côté créa

13. 13
03 Outils
CSS Peeper
C’est une extension Chrome ayant 3
fonctionnalités majeures :
Général : Donne toutes les informations CSS de
la page, avec un focus sur les fonts et une
fonctionnalité inspect des éléments
Colors : Propose un aperçu de toutes les
couleurs présentes dans la page et leurs codes
hexa, dégradés compris
Assets : Offre la possibilité de télécharger tous
les assets présents dans la page
https://csspeeper.com/

14. 14
03 Outils
Visual Inspector
C’est une extension Chrome qui a plusieurs
fonctionnalités :
Inspect : Permet d’analyser les alignements et
positionnements des composants. On a aussi la
possibilité de modifier du texte ou de bouger
des éléments directement dans la page pour
voir le rendu.
Colors : Donne un aperçu de toutes les couleurs
présentes dans la page et leurs codes hexa
Assets : Offre la possibilité de télécharger tous
les assets présents dans la page
https://www.canvasflip.com/visual-inspector/

15. 15
03 Outils
Pastel
C’est une application web qui permet de
laisser des commentaires dans la page,
exactement à l’endroit où la correction doit
être effectuée.
On a notamment la possibilité de partager
ensuite la page avec ses commentaires à
la team projet.
https://usepastel.com

16. 16
03 Outils
Flawless App
C’est une application mac OS permettant
de faire des recettes graphiques sur des
applications iOS. Voici le mode d’emploi :
1/ Sélectionnez la maquette qui vous intéresse
en format .jpg .png .gif .tiff ou .sketch et glissez
la dans la fenêtre de l’app.
2/ Choisissez votre mode de comparaison :
overlay ou split
3/ Vérifiez grâce au mode sélectionné si la
réalisation en dev coïncide avec les maquettes
https://flawlessapp.io/

17. 17
03 Outils
Awesome screenshot
Cette extension Chrome et Safari permet de
réaliser des screenshots de pages entières
(scroll compris) de sites desktops et mobiles
mais aussi d’enregistrer l’écran de son device
pour montrer un bug lors d’une interaction.
Elle permet notamment de faire des
annotations en direct sur le screenshot, de
flouter les infos sensibles et de le partager à la
team projet.
https://www.awesomescreenshot.com

18. 18
03 - Outils
Pixel Perfect
by WellDoneCode
C’est une extension Chrome qui permet de
superposer des maquettes à la pré-prod du
site en développement en overlay afin de faire
des ajustements au pixel perfect.
http://www.welldonecode.com/perfectpixel/

19. 19
03 - Outils
Trello
C’est un outil de gestion de projets en ligne. Il est
basé sur une organisation des projets en planches
listant des cartes, chacune représentant des tâches.
Dans le cadre d’une recette graphique, on peut créer
des planches « A faire », « En cours », « Corrigé » avec à
l’intérieur des cartes contenant les retours graphiques.
Dans chaque carte il y a la possibilité d’uploader
des screenshots avant / après et d’y ajouter des
commentaires.

20. The information contained in this presentation is proprietary
©2017 Capgemini. All rights reserved. Rightstore® is a trademark belonging to
Capgemini.
03.2 - Outils côté devs

21. 21
03 Outils
Sympli for developers
Les extensions Sympli pour les développeurs
(Xcode pour iOS et Androïd Studio) disposent d’un
simulateur leur permettant de superposer les
maquettes à l’app en cours de développement.
Cette superposition peut se faire en overlay ou
en split et permet de vérifier le positionnement
des éléments au pixel perfect.
https://app.sympli.io/download

22. 22
03 Outils
Zeplin
C’est une application mac OS et Windows.
Elle se compose de 2 onglets principaux :
● Le dashboard qui permet d’accéder
aux artboards importés via Sketch
ou Photoshop
● Le styleguide qui répertorie les fonts,
les espacements, les couleurs et autres
infos utiles pour les développeurs
La team projet a aussi la possibilité de
commenter les maquettes et discuter au sein
même de l’outil.
https://zeplin.io/

23. 23
03 Outils
Inspect by inVision
Inspect est une fonctionnalité d’inVision qui
permet de générer du code CSS à partir du
styleguide et des maquettes.
Elle permet d’obtenir des infos sur le
styleguide (fonts, couleurs, positions...) et aussi
de télécharger les assets présents dans les
maquettes.
Enfin, elle inclut une fonctionnalité de
conversation au sein même des maquettes.
https://www.invisionapp.com/feature/inspect

24. 24
03 Outils
Les plus entre
Sympli, Zeplin
& Inspect
Sympli Zeplin Inspect
Dispose d’un
simulateur d’app qui
permet de superposer
les maquettes en
overlay ou en split
Génère un styleguide
exhaustif que les devs
peuvent exporter en
objective-C ou en
Swift
Génère du code CSS
propre et utilisable à
partir du styleguide et
des maquettes

25. 25
03 Outils
Jira software
Créez
des tickets
Affectez
des tâches
Livrez vos
apps / sites
Suivez
l’évolution
C’est un outil de développement logiciel permettant le suivi de bugs et de tickets.

26. The information contained in this presentation is proprietary
©2017 Capgemini. All rights reserved. Rightstore® is a trademark belonging to
Capgemini.
04 - Méthodologie

27. 27
04 Méthodologie
Le process idéal du côté UI
Vérifiez la version d’OS ou celle du navigateur utilisé
Vérifiez la version de build lorsqu’il s’agit d’une app
Faites un screenshot de l’anomalie
Accompagnez-le d’un commentaire précis
Ajoutez un visuel de la maquette attendue
Transmettez le tout aux développeurs

28. The information contained in this presentation is proprietary
©2017 Capgemini. All rights reserved. Rightstore® is a trademark belonging to
Capgemini.
Merci
Recette graphique
Par Aurélie Radom