Le prototypage rapide enfin viabilisé grâce aux frameworks CSS

J’ai eu une discussion très intéressante ce matin avec Joël Berne, qui enseigne le web design, au sujet de la tendance générale à l’uniformisation graphique des interfaces web. Nous sommes tombés d’accord sur le fait qu’avec l’avènement du responsive design, et la mode du flat / material design, les sites web finissaient tous par se ressembler. Force est de constater que les contraintes des terminaux mobiles forcent les designeurs à alléger les chartes graphiques (cf. La revanche des interfaces textuelles).

Je serais bien incapable de prédire la longévité de cette « mode » du minimalisme, mais le fait est que nous devons nous y conformer à minima pour les 2 ou 3 prochaines années. Pour vous en convaincre, il vous suffit de parcourir les différents sites d’information qui ont tous adopté une mise en page minimaliste (avec le menu hamburger de rigueur) pour favoriser la lecture sur les smartphones. Je précise au passage que ce mouvement de simplification / uniformisation est fortement facilité par l’adoption croissante des frameworks CSS comme Bootstrap ou Foundation qui permettent d’accélérer de façon spectaculaire les développements front office (cf. The 5 Most Popular Frontend Frameworks of 2014 Compared).

La page d'accueil minimaliste des Echos
La page d’accueil minimaliste des Échos

À partir du moment où les mises en page et les traitements graphiques sont simplifiés à l’extrême et que le code HTML / CSS est standardisé, nous pouvons relancer légitimement le débat sur les techniques de prototypage rapide (cf. À la recherche de l’outil de conception idéal). Cette réflexion m’a été inspirée par un article publié sur UIE qui revient sur l’utopie du « Designing in the Browser« . Popularisée il y a quelques années par Andy Clarke, cette approche consiste à faire du prototypage rapide directement dans un éditeur HTML / CSS (Walls Come Tumbling Down). Certes, cette idée n’est pas neuve, mais différents signaux faibles me font dire que cette utopie devient petit à petit une réalité viable.

En s’appuyant sur les fameux frameworks front office et sur une nouvelle génération d’outils de prototypage, nous disposons maintenant d’interfaces graphiques très simples à utiliser permettant de concevoir des prototypes HTML en quelques clics et de générer du code de grande qualité. J’ai ainsi découvert récemment Pingendo, un éditeur visuel gratuit qui permet de créer des interfaces web en s’appuyant sur le framework Boostrap.

Interface de Pingendo
Interface de Pingendo

Comme vous pouvez le constater, cet outil est très simple à prendre en main et permet de concevoir ou d’adapter des gabarits HTML à l’aide de composants d’interface que l’on glisse et que l’on repositionne. Cerise sur le gâteau : dans la mesure ou l’outil s’appuie sur Bootstrap, il suffit de récupérer des templates pour gagner encore plus de temps. Certes, cet outil n’est pas très sophistiqué, il ne gère pas encore les arborescences et l’héritage des templates, mais permet de réaliser ou d’adapter des maquettes en un temps record. Il existe d’autres éditeurs comme Jetstrap ou Bootply (cf. Top 15+ Bootstrap Visual Editors For Web Designers), mais ils sont payants.

Est-il bien raisonnable de faire de la conception dans un éditeur HTML ? Si vous devez concevoir une application en ligne ou un portail d’envergure, très clairement, non. En revanche, si vous disposez d’un temps limité pour concevoir un « petit » site ou boutique en ligne, alors cet outil se révèle redoutablement efficace.

Exemple de boutique en ligne dans Pingendo
Exemple de boutique en ligne dans Pingendo

Ne vous méprenez par sur mon propos : je ne suis pas en train de vous dire que les méthodologies de conception sont intégralement à revoir, mais de vous expliquer que le contexte actuel nous pousse vers ce type de raccourcis. Ça tombe bien, l’outil et les templates sont gratuits !

Si vous avez un retour d’expérience à partager sur le prototypage rapide à partir de Bootstrap ou foundation, je suis preneur…

Un commentaire pour “Le prototypage rapide enfin viabilisé grâce aux frameworks CSS”

  1. Posté par Netcooking a dit : le

    Bonjour,
    Pour nous qui mettons en place des sites simples pour TPE et PME, ou qui proposons des optimisations SEO dans le cadre de missions de référencement, ce type d’outils est très attrayant, et pourrait compléter des outils que nous utilisons déjà comme Balsamiq Mockup, pour travailler sur des zonings ou encore des balisages HTML orientés SEO.
    Je m’attendais à un outil dans le Cloud, mais non ! Il s’agit d’une application à installer, avec une version Mac :)