Premiers pas avec les modules et le développement frontal modulaire

Tout le monde connaît et aime les briques Lego. J'étais accro aux Legos quand j'étais enfant, et je les aime toujours aujourd'hui. Vous pouvez assembler votre jouet à partir de toutes sortes de Legos de toutes sortes de façons, une pièce à la fois. Vous pouvez ensuite recommencer et construire un jouet différent à partir de ces mêmes pièces. Les possibilités sont infinies.

Les modules sur un site Web ressemblent beaucoup à des Legos. Considérez les modules comme des pièces de Lego qui vous permettent de créer votre site Web. Lorsque vous les connectez correctement, ils forment des pages Web. Pour créer des sites Web comme Legos, vous devez considérer les sites Web comme une collection de modules indépendants. Cet article vous aidera à faire exactement cela avec votre développement et votre conception front-end.

Collages de modules

Lorsque j'entre dans la phase de conception d'un projet, j'ai tendance à commencer par assembler des collages d'inspiration de conception et des collages de modules. C'est un processus un peu comme celui de Dan Mall, qui appelle ces livrables de conception de collages pour une ère post-comp. Les collages d'inspiration sont des collections de captures d'écran que je présente au client, juste pour avoir une idée générale de la direction visuelle dans laquelle nous nous dirigeons. Ce sont simplement des captures d'écran de sites Web que moi et le client aiment.

Une fois que nous avons la confirmation que nous sommes sur la même page en termes de style, je peux sauter dans mon éditeur graphique (je préfère Sketch) et créer des collages de modules. Ces collages sont des collections des modules les plus couramment utilisés - boutons, formulaires, en-têtes, paragraphes, listes, images, etc. Les collages de modules me permettent de créer rapidement des éléments de ce à quoi ressemblera le site Web.

Voici une partie d'un collage de module récent, un exemple de bouton que j'ai conçu dans Sketch au début d'un projet :

Peut-être vous demandez-vous quand les compositions statiques et la présentation de conceptions parfaites au pixel près au client entrent en jeu. Ils ne le font pas - je les saute presque entièrement dans mon processus. Sauter cette partie du processus me permet d'entrer dans le code très tôt dans le projet et les prototypes de code (j'y reviendrai bientôt), ou en d'autres termes, la conception dans le navigateur. Voici quelques-uns des avantages de la conception dans le navigateur :

• Le navigateur est l'environnement naturel d'un site Web, et s'en tenir aux idées faites dans un éditeur graphique peut se retourner contre vous. Il est naturel de tester et de prendre des décisions de conception dans les navigateurs. Vous l'avez déjà entendu, vous l'entendrez encore - il ne s'agit pas de son apparence, mais de son fonctionnement.

• Il y aura toujours des incohérences de conception entre les simulations statiques et ce que vous obtenez dans le navigateur une fois qu'elles sont traduites en code. Pour éviter ces incohérences, sautez dans l'éditeur de code et le navigateur pour résoudre de vrais problèmes de conception.

• Les compositions statiques peuvent ne pas faire passer le bon message. L'aspect et la convivialité seront très différents une fois que vous aurez intégré l'interactivité, comme les états de survol, les transitions et les animations.

• Au lieu de passer des heures et des heures à concevoir plusieurs maquettes statiques pour plusieurs résolutions, je peux gagner beaucoup de temps en entrant tôt dans le code. Ajuster le CSS me permet de démontrer rapidement les changements et l'aspect réactif au client sur divers appareils - smartphones, tablettes, etc.

Alors, gagnez du temps et ouvrez votre éditeur de code et le navigateur pour commencer à créer l'UX le plus tôt possible. D'après mon expérience, la plupart des clients demanderont une maquette complète d'une page ou deux avant de pouvoir procéder au codage, et c'est tout à fait correct. Il est important que le client ait une bonne idée de la conception future. J'utilise habituellement InVision, qui est un excellent outil pour suivre les premières maquettes, les modifications, les commentaires, etc. Cependant, il est très important que les clients comprennent que Sketch et InVision ne les mèneront pas très loin.

Construire les modules pour le développement frontal

Une fois que le client est satisfait du collage de modules et des maquettes que j'ai conçues, je peux commencer à coder et définir l'apparence réelle de ces éléments.

La conception modulaire est étroitement liée au développement modulaire dans un processus itératif. Je code un module, puis je l'essaie dans le navigateur pour voir comment cela fonctionne, puis je le répète si nécessaire. Encore une fois, ce processus ressemble beaucoup à la construction des Legos - vous concevez et développez en même temps et essayez différentes variantes jusqu'à ce que vous vous sentiez bien.

Je commence souvent le développement des modules par la construction de quelque chose de simple, comme un bouton. Imaginez que vous en construisiez un vous-même et que vous deviez coder un bouton orange, généralement utilisé pour un formulaire de contact. Voici ce que vous pourriez trouver :

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

Assez simple, non? Vous appliqueriez la classe .submit-button à votre code HTML et cela résoudrait votre problème actuel. Maintenant, que se passerait-il si vous deviez créer un nouveau bouton, comme celui-là, mais avec une couleur de fond bleue ? Vous copierez probablement cette classe exacte, puis changerez le nom de la classe et la couleur d'arrière-plan. Rapide et sale. Maintenant, imaginez que vous deviez utiliser le même bouton, mais avec un fond orange. Vous pouvez voir où cela se passe - vous pouvez vous retrouver avec beaucoup de CSS répétés. Sur un très petit projet, cela peut ne pas devenir un vrai problème, mais sur les plus grands, cela le deviendra probablement. Avant que vous ne vous en rendiez compte, votre CSS devient gonflé et difficile à maintenir.

Si vous avez déjà développé un projet de moyenne à grande envergure, vous avez sans aucun doute connu votre juste part de maux de tête. Ceux-ci peuvent avoir été causés par l'une des raisons suivantes :

• Code désordonné, incohérent, difficile à scanner et à comprendre.
• Code gonflé et fichiers CSS XXL avec beaucoup de duplication.
• Code difficile à maintenir.
• Le manque de séparation de la structure et de la peau.

Ne vous inquiétez pas, vous n'êtes pas seul. Je parierais que tous les développeurs front-end ont rencontré ces problèmes douloureux de temps en temps, et probablement bien d'autres. Je peux dire en toute sécurité que j'ai eu beaucoup de projets dans le passé où j'ai rencontré tous ces problèmes typiques.

Une façon d'éviter ou de minimiser ces problèmes est de construire de manière modulaire.

Le bouton modulaire

Comment coder ce bouton de manière modulaire ? Une approche modulaire consisterait à écrire du code que vous pouvez réutiliser. Rappelez-vous ces Legos, qui peuvent être utilisés et réutilisés à nouveau.

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

Ce que nous avons fait est une séparation intelligente des styles. La classe .button contient les styles que chaque bouton de votre projet utilise, vous n'avez donc pas à le répéter. La classe .button-orange utilise uniquement les styles pertinents pour le bouton orange. Vous feriez la même chose pour tous les autres boutons et définiriez leurs couleurs d'arrière-plan et de texte.

Votre module de boutons pourrait finir par se composer de plusieurs boutons indépendants, prêts à être utilisés chaque fois que vous en avez besoin.

Qu'en est-il des choses plus complexes ?

Vous suivez les mêmes principes pour tous les autres composants dont vous pourriez avoir besoin. L'objectif est de créer des modules qui sont des éléments autonomes, indépendants des autres modules. Une fois combinés, ces modules formeront des modèles, où vous réutiliserez simplement les modules selon vos besoins et travaillerez à compléter votre conception.

Pour en savoir plus sur le développement frontal modulaire, je recommande fortement SMACSS, qui est l'architecture que j'ai tendance à utiliser sur tous mes projets, grands ou petits.

N'oubliez pas que le processus modulaire consiste à créer, tester et itérer. Un module est d'abord produit dans votre éditeur, puis testé dans un navigateur, puis itéré si nécessaire. Répétez ce cycle chaque fois que nécessaire.

Impliquer le client

N'oubliez pas les besoins du client — il veut être tenu au courant et obtenir la confirmation qu'il en a pour son argent. La beauté de ce processus de développement est que les clients peuvent être des membres actifs de votre équipe. Vous pouvez leur montrer les modules en toute sécurité et ils peuvent ignorer le processus de développement et intervenir à tout moment pour améliorer le produit. Ils n'ont pas besoin d'attendre qu'une composition statique soit terminée ou qu'un jalon soit atteint avant de voir de réels progrès. Si vous prenez le temps d'expliquer le fonctionnement des modules à vos clients, ils comprendront et apprécieront mieux le processus de conception et le temps passé à les construire.

La façon dont je procéderais habituellement pour présenter des modules à un client ressemble beaucoup à Bootstrap - la configuration d'un module isolé avec son code est un excellent moyen d'impliquer tous les concepteurs, développeurs et clients dans le processus.

Utilisez les modules que vous avez construits comme blocs de construction pour les pages. Pour votre page d'index, vous pouvez placer le module de navigation en haut, un module héros ensuite, certains des modules de contenu ensuite, puis votre pied de page en bas. Avant de vous en rendre compte, vous avez déjà une page pour un prototype HTML. Mais qu'est-ce qu'un prototype, exactement ? J'ai toujours aimé la définition de Leah Buley d'un prototype tirée de son excellent livre The User Experience Team of One :

Exemples fonctionnels ou semi-fonctionnels de la façon dont la conception doit se comporter et fonctionner une fois mise en œuvre.

En construisant un prototype, c'est exactement ce que vous obtiendrez dans la première phase du projet - un site Web semi-fonctionnel. Là où les maquettes statiques et InVision sont insuffisantes, les prototypes HTML excellent. Le prototype sert de livrable réactif parfait pour vos clients. Et une fois que le client est d'accord avec l'aspect et la convivialité de votre prototype, tout ce que vous avez à faire est de le peaufiner jusqu'à ce qu'il fonctionne comme il se doit. Construire, tester, itérer.

Réutiliser les blocs de construction

Des modules et des prototypes vous permettront de réutiliser le code pour le projet en cours, mais aussi pour des projets futurs. Modifier un module de votre dernier projet peut vous faire gagner beaucoup de temps — les modules dont vous avez besoin dans chaque projet sont souvent similaires. J'ai une grande bibliothèque de modules que je réutilise souvent : onglets, menus de navigation, boutons, fils d'Ariane, formulaires, tableaux, pagination, listes, etc. Bien que le code de ces modules ne soit pas exactement le même dans tous les projets, de bons morceaux de celui-ci peuvent être réutilisés, ce qui me fait gagner beaucoup de temps de développement. Mon conseil pour vous est de créer des modules réutilisables pour vous aussi. Découvrez BASSCSS, Pure et Refills pour vous inspirer.

Ne vous découragez pas si le passage à la conception et au développement modulaires prend du temps. Naturellement, si les principes modulaires sont nouveaux pour vous, ils nécessiteront un ajustement de votre processus de conception et de développement, mais le changement peut s'avérer utile.

Les méthodes et techniques modulaires que j'ai abordées dans cet article ne font qu'effleurer la surface. Néanmoins, j'espère sincèrement que cet article a été utile et qu'il vous a intrigué pour vous plonger dans la conception et le développement modulaires.