Pour une passation réussie entre team créa et front, le starter pack.
Dans un monde idéal où chacun travaille côte à côte tout au long du projet, la réalité terrain est bien souvent différente. Délaissée pour des raisons de planning ou budgétaire, la passation Créa/Front se fait généralement dans un flou désagréable où la perte d’information est considérable.
Soucieux de produire un travail de qualité debout en bout et d’optimiser les échanges pour se concentrer sur ce qui compte, nous avons déployé une méthodologie simple et efficace sur l’ensemble des projets réunissant créa & front : le Starter Pack.
- Starter Pack, c’est quoi?
- A quels besoins répond le Starter Pack ?
- Quand l’utiliser ?
- Comment l’utiliser ?
- Anatomie du Starter Pack
- Epilogue
Starter pack, c’est quoi?
Le Starter pack est un document à mi chemin entre guide de style et design system. Il se veut simple et facile d’utilisation.
A quels besoins répond le Starter Pack ?
Pensé pour fluidifier les échanges entre la team créa et les front dev, il rassemble l’ensemble des éléments graphiques majeurs de vos projets et permet de donner une vision globale des templates de vos interfaces.
- Document de référence graphique : les projets s’étirent dans le temps et il y a souvent de petits écarts graphiques qui se glissent dans les maquettes. Le Starter Pack est une réponse à ces incohérences en sanctuarisant les éléments une bonne fois pour toute.
- Gain de temps : plus besoin de perdre du temps à aller chercher une couleur en particulier ou bien la typo de telle maquette, le Starter Pack donne accès à l’ensemble des assets graphiques aux front dev.
- Vue globale du projet par template : le Starter Pack permet de trier et classer par blocs l’ensemble des templates de votre projet. L’idée est de rassembler les templates ayant les mêmes structures pour cartographier les éléments de votre interface dans le but de faciliter leurs intégrations et animations. On pense macro.
- Durabilité accrue : le Starter Pack est plus facile à maintenir dans le temps que l’ensemble des maquettes liées à un projet. Couplé avec une logique de maker/user, vous pouvez facilement décliner le document en design system.
- Diminuer la perte d’information : Rien ne remplacera la collaboration étroite entre le créa et le front mais, dans le cas où ce n’est pas possible ou peu possible, le starter pack permet de répondre à l’avance aux questions basiques et de poser les bases solides pour une intégration propre.
Quand l’utiliser ?
Le Starter Pack se construit idéalement lors de la validation client des principes graphiques et la fin du projet. Il doit faire la passerelle entre la fin de la création et le début de l’intégration. Cela permet de faire une repasse sur l’ensemble du projet et de verrouiller les éléments graphiques.
Comment l’utiliser ?
La partie créa qui réalise le Starter Pack est qualifié de MAKER. C’est elle qui mettra à jour le starter et qui se charge de transmettre l’information aux développeurs.
La partie front utilise le starter, ce sont les USERS. Ils ne peuvent pas modifier le document mais, peuvent demander des ajustements en fonction de leurs besoins, par exemple un état en plus, une couleur en plus etc.
Le Starter Pack peut être transmis comme un fichier normal mais, la meilleure solution reste l’hébergement sur un service type dropbox (couplé à Sketch) ou bien encore INVISION et l’outil inspect.
Anatomie du Starter Pack
Le Starter Pack se veut rapide et extrêmement simple d’utilisation. Il se présente en 6 parties, chacune bien définit avec un usage précis.
01 — Desktop
Liste de l’ensemble des templates de blocs, triés par usages et structure. Permet d’avoir une vue globale des blocs qui composent le projet.
02 — CTAs
Liste de l’ensemble des CTAs avec leurs différents états.
- Etat défaut
- Etat hover
- Etat select
03 — Fonts et couleurs
Liste de l’ensemble des couleurs et font + lien de la font du projet.
- Couleurs principales
- Styles des textes (sketch)
- Typo + lien de téléchargement
04 — Formulaire
Liste de l’ensemble des éléments d’un formulaire.
- Champs
- Liste déroulante
- Checkbox
- Bouton radio
- Date picker
- Différents états valide/non valide
- Texte area
05 — Pictogrammes
Liste de l’ensemble des pictogrammes du projet.
06 — Single
Page regroupant l’ensemble des styles présent dans une page de contenu :
- Titre de l’article
- Chapô
- Texte
- Citation
- Pièce jointe
- Liste à puce
- Liste à chiffre
- Tableau
- Différents niveaux de titre
- Lien dans un article
NB : Pas besoin d’un mise en page précise, l’idée est d’abord d’avoir l’ensemble de ces éléments !
Epilogue
Le Starter Pack ne remplacera jamais la relation entre la partie Créa et Front qui doit être construite tout au long du projet. Cette méthode permet d’assurer une livraison propre et standard aux demandes Créas tout en facilitant le travail des développeurs.
Le travail en équipe est la clé d’un projet réussi, mais se donner les bons outils en est la méthode.
Si vous avez aimé cet article, vous aimerez :
Hey, I’m Bertrand, Art Director @beAPI an amazing web agency who craft some digital happiness !
