UI kit

Le UI kit (pour "kit d'interface utilisateur") regroupe les principaux composants graphiques du projet.

Atomic Design

Inspiré de la méthode de l'Atomic Design, nous détaillons sur un même espace :

  • les atomes (style typographique, couleur, icône, champ de saisie) ;
  • les molécules (barre de recherche, vignette produit, message d'erreur) ;
  • et certains organismes (en-tête, pied de page, navigation latérale).

Ce UI est décliné aux formats mobile, tablette, petit écran d'ordinateur et grand écran. Il précise des éléments spécifiques qui n'apparaissent pas toujours sur le web design, comme les survols ou les cas d'erreurs.

Extrait de l'UI Kit du CRM d'Appro Auto.

Une extension infinie

L'intérêt d'une telle méthode est de gagner du temps, de la cohérence et de permettre une extension quasi infinie. En effet, si de nouvelles pages sont créées, les développeurs sont en capacité de concevoir l'interface facilement et rapidement sans passer par les phases de web design et de développement front-end.

De votre côté, vous avez un avant-goût de votre site sans avoir vu toutes les pages et pouvez déjà vous projeter dans la mise en page de vos contenus. Vous pouvez par ailleurs transmettre ce document à des intervenants externes souhaitant réaliser une interface en cohérence avec le projet.

Pour chaque design pour concevons une page type regroupant tous les styles de mise en page de contenus possible.