La 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.

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).

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.

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.

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

La recette graphique

Idean France

La recette graphique