PATTERN LIBRARY : KEZAKO ?

1. INTRODUCTION AUX PATTERN LIBRARY

Une pattern library (ou style guide) est une collection d’éléments graphiques (html/css/js) utilisé sur votre site. C’est une simple page ou un site dédié qui référence vos éléments et les documente. Vous y trouverez les couleurs, les typos, les styles de vos liens et de vos paragraphes, mais aussi des structures plus complètes comme un formulaire, un menu, un article, …

Cela repose sur la méthode d’atomic design dont Brad Frost écrit la bible ici. Pour résumer rapidement il s’agit d’intégrer du plus abstrait au plus concret avec 5 niveaux de conception : atomes, molécules, organismes, templates et pages.

L’atomic design induit l’utilisation d’autres méthodologies : OOCSS (CSS orienté objet), SMACSS (Scalable and Modular Architecture for CSS) et BEM (Block, Element, Modifier) pour la convention de nommage. Des bonnes pratiques qui solidifient vos intégrations et votre workflow.

2. AVANTAGES D’UNE PATTERN LIBRARY

• Créer des composants réutilisables: si votre client demande une nouvelle page avec tel et tel composant, c’est fait très rapidement.
• Référencer et documenter les éléments graphiques : un document de référence avec le code de chaque composant, une fois qu’on y goûte on peut plus s’en passer.
• Travailler à plusieurs en front : c’est possible je vous jure !
• Faciliter la maintenance et l’évolution : un bug à corriger ou un changement de couleur sur le bloc de droite de telle page ? Facile a retrouver, facile a corriger (ou pas).

3. WORKFLOW

Finit de sauter pieds joints dans l’intégration des maquettes ! On commence d’abord par les analyser. Les imprimer permet de mieux se rendre compte des éléments communs et de mieux les décomposer. Passez un moment à les décortiquer et n’hésitez pas à demander des précisions au graphiste sur le comportement d’un composant.

On commence l’intégration par les éléments les plus basiques : titre, liens, paragraphes, boutons, icônes, … On remonte ensuite la chaîne avec des composants comme la pagination, un fil d’ariane, un select de formulaire ou une fenêtre modale. On continue avec un article, un bloc de commentaire ou un menu puis avec le header, le footer,…

On finit par disposer de l’ensemble des éléments graphiques nécessaires pour monter nos pages. La création d’un pattern library est assez long mais l’assemblage des pages est extrêmement rapide.

Exemple de Workflow en équipe :

– Alexis commence les éléments de base de la pattern (couleurs, titres, liens, icônes, …)
– Une fois cette base écrite, Léo le rejoint sur le projet et commence à intégrer les composants de formulaires
– Alexis s’attaque parallèlement aux différents menus et fil d’ariane
– Léo continue sur le slideshow de la page d’accueil et les fenêtres modales
– Pascal vient en renfort intégrer les articles et commentaires pendant que Alexis s’occupe du header et du footer
– Léo commence à monter les pages
– …

Intégrer à plusieurs deviens plaisant et productif : on ne se marche plus dessus et on parle le même langage (il faut évidemment respecter les conventions que l’on s’est fixées sinon c’est la cata).

4. AUTOMATISER

C’est bien beau de créer et de maintenir une page html à la main mais ce n’est pas pratique du tout. Mais bon à titre perso c’est ce que je continue de faire aujourd’hui, les outils d’automatisation que j’ai testé ne me conviennent pas.

Si vous avez des retours sur un outil je suis preneur !

Une liste très complète des outils d’automatisation : https://github.com/davidhund/styleguide-generators

6. AVEC WORDPRESS ?

J’inclus ma pattern library directement dans WordPress en lui dédiant une page. Je donne accès à cette page à mon client pour qu’il voit l’avancement de l’intégration. Rien de sorcier : template de page spécifique avec droits réservés (ou pas) et processus Gulp dédié pour la génération des styles de cette page.
Exemple : http://www.associationdeviation.fr/pattern/ (un peu le bazar ici mais c’est surtout un outil perso dans ce cas)

5. A LIRE, À VOIR

http://styleguides.io/
http://alistapart.com/
http://ux.mailchimp.com/patterns
http://www.starbucks.com/static/reference/styleguide/
https://boagworld.com/design/pattern-library/
http://alistapart.com/article/creating-style-guides
http://atomicdesign.bradfrost.com/table-of-contents/
http://www.24joursdeweb.fr/2014/un-guide-qui-a-du-style/

PS : Pour connaitre les plugins que j’ai choisis pour mon wordpress, lire https://www.wpwild.fr/meilleurs-plugins-wordpress/