projet pédagogique

cover du projet nike

Objectifs

  1. Recetter graphiquement un travail en préprod ou en prod pour devenir autonome sur des projets en entreprise
  2. Préparer des interfaces prêtes à être intégrées dans un environnement de développement
  3. Assurer la transmission précisedes spécifications techniques nécessaires au développement
  4. 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