projet pédagogique
Objectifs
- Recetter graphiquement un travail en préprod ou en prod pour devenir autonome sur des projets en entreprise
- Préparer des interfaces prêtes à être intégrées dans un environnement de développement
- Assurer la transmission précisedes spécifications techniques nécessaires au développement
- Maîtriser l’organisation d’un fichier de design pour faciliter la collaboration avec les développeurs
Brief
Vous venez d’arriver sur le projet de Nike.
Le designer avant vous a travaillé une feature. Passer de la HP vers une PDP, choisir sa pointure et la valider Le designer a quitté le projet On compte sur vous pour cleaner le fichier, faire un bon handoff rapidement. Les devs attendent.
Attendus
Structure et organisation Figma
-
Organisation des pages et des artboards Le fichier est-il bien structuré avec des pages et des frames claires ?
-
Noms des calques et organisation Les frames, autolayout.. sont-ils correctement nommés et organisés pour faciliter la navigation ?
-
Utilisation des composants et des styles Les composants, les styles de texte et les couleurs sont-ils bien définis et réutilisables ?
Votre fichier est prêt pour le développement
-
Respect des contraintes techniques Le design est-il en conformité avec les contraintes techniques et utilisable directement par le développeur ?
-
Exportabilité des éléments (assets) Les assets (icônes, images, etc.) sont-ils exportables facilement au format adapté ?
Communication avec le développeur
-
Annotations et explications Les éléments nécessitant une attention (comportements interactifs, animations, etc.) sont-ils bien expliqués ?
-
Spécifications technique Les dimensions, marges et autres spécifications sont-elles bien définies dans Figma ?
Comportement et professionnalisme
-
Participation pendant l'intervention As-tu participé de matière active ou passive à l’intervention ?
-
Comportement et posture professionnelle durant l'intervention Tous les problèmes en préprod ont été identifiés par l'étudiant
Recette graphique
-
Respect de la méthode de recette graphiques Le template de recette graphique est compris, utilisé et clair
-
Oeil de Lynx Tous les problèmes en préprod ont été identifiés par l'étudiant
Critères d'évalution
Rendre livrable un fichier Figma pour une phase de Handoff avec un développeur.
Votre mission: Un fichier clean doit contenir
-
Une grid + gouttières (gutters 4 column sur mobile, Gutter 20, padding 20)
-
Des bons spacings sur une grid (ex grid de 8px) basée sur les assets à dispo
-
Des ratios d’image respectés
-
Bon nommage des calques
-
Autolayout laser
-
Utilisation des frames et pas des groupes
Prototype