#Prototype : 5 outils « no-code » pour créer votre maquette de site web ou d’appli mobile sans coder (idéal pour un hackathon)

Vous avez besoin d’avoir un rendu visuel d’un projet de site web ou d’application ? Ces outils vous aideront à créer une maquette de site web ou d’appli sans coder.

• Vous êtes au début d’un projet et vous voulez vous projeter rapidement dans le rendu final ?
• Votre vision du résultat final est claire et vous voulez le faire comprendre à un prestataire ?
• Vous êtes développeur web et vous voulez (devez) faire une maquette à votre client avant de commencer à développer ?
• Vous avez une idée de plateforme ou d’appli et vous devez l’expliquer à d’autres personnes (cas d’un hackathon par exemple) ?

Dans chacune de ces situations et bien d’autres, il vous faut une maquette de site web ou d’appli mobile rapidement.

J’ai participé à pas mal de hackathon ces dernières années : hack4good, Datathon sur le changement climatique, Energy Hack, et dernièrement au challenge Africa VS Virus.

La question qui revient toujours c’est : comment créer une démo de l’idée de plateforme web ou d’appli sur laquelle on travaille?

Pour expliquer le contexte, un hackathon (contraction de hack et marathon) est un concours d’innovation qui se tient sur une courte période. Les plus stricts se tiennent sur 48h (vendredi soir à dimanche soir) avec très peu d’heures de sommeil ^^. C’est très stimulant comme expérience, mais assez épuisant aussi.

Toujours est-il qu’on démarre le vendredi soir avec une idée d’un porteur de projet et il faut rendre dimanche vers 15h, un prototype fonctionnel qu’un jury pourra évaluer. Entre temps, il faut avoir détaillé le projet, pensé à l’expérience et au parcours utilisateurs, au business model, puis imaginé et conçu le prototype. Il est donc souvent difficile d’utiliser une méthode classique de création de site ou d’appli mobile. 

L’intérêt des outils « no code »

Heureusement, les outils de programmation visuelle se développent et sont de plus en plus intuitifs. De plus, ces outils sont maintenant pour la plupart accessibles directement en ligne sans besoin d’installer quoi que ce soit.
Dans la cadre de dernier hackathon sur la rénovation énergétique des bâtiments auquel j’ai participé, j’ai découvert un ensemble d’outils de prorotypage pour créer rapidement une maquette de site web et/ou d’application mobile. Je ne les ai pas encore tous testés, mais je vous les partage déjà. Si vous en avez déjà utilisé, vos retours sont les bienvenus en commentaires.

Avant de commencer, je précise que tous ces outils sont gratuits ou ont une version gratuite. Cette version gratuite est suffisante pour réaliser une première maquette de son projet. Certains proposent des plans payants avec plus de fonctionnalités pour aller plus loin.

Si cela vous intéresse, je vous propose prochainement des outils no code pour créer des sites web complets et entier.

Sans plus tarder, découvrons ces 5 outils.

#1 : Marvel

Marvel permet de prototyper rapidement une interface d’application mobile ou de site internet.

Sans besoin de compétences en codage, l’interface se crée par glisser-déposer des éléments structurant le contenu. L’outil propose un suivi de l’interaction de bêta-testeurs sur le prototype ainsi que la possibilité d’avoir des retours et commentaires pour l’améliorer. L’outil est gratuit pour 1 projet et 1 utilisateur, suffisant pour réaliser votre projet.

#2 : Adobe XD

Adobe XD fournit à peu près les mêmes fonctionnalités que Marvel, à la différence d’être disponible sous la licence Adobe.

Cela lui permet une intégration et des passerelles avec les autres logiciels de la suite. L’application est également gratuite mais nécessite une installation sur Windows ou Mac.

3- Glide

Glide est un service gratuit qui permet de créer une application mobile à partir d’un google sheet en 5 minutes.

Les Google Sheet sont des feuilles de calcul (comme des fichiers Excel), mais disponibles dans Google Drive. Vous pouvez donc par exemple y stocker des informations (liste de lieux, inventaire produits, etc…). Glide se connecte aux fichiers et intègre leur contenu pour créer une application mobile en quelques minutes. De plus, l’application peut mettre à jour le contenu du Google Sheet, ce qui en fait une application interactive et suffisante pour certains usages basiques. Une démo est consultable à ce lien https://mypeeps.glideapp.io/

4- Bubble

Bubble est une autre solution pour créer un site internet sans avoir à coder.

L’interface permet de construire de manière visuelle et donner vie à son idée en s’affranchissant des contraintes du codage. La maquette produite est un mini-site intégrant les liens entre pages et interactions via les boutons. On peut en effet créer un workflow pour ajouter des événements à différentes actions des utilisateurs. Il est même possible de publier le prototype créé afin de le rendre accessible rapidement pour avoir des retours.

Une démo que vous pouvez modifier pour tester est accessible à ce lien : https://bubble.io/page?id=meta_public

#5 : Webflow 

Comme les outils vus précédemment, Webflow permet de prototyper un site web.

Son interface « glisser-déposer » ou Drag n’ Drop rend son utilisation très intuitive. Un autre aspect intéressant de Webflow est la possibilité, si besoin, d’aller au delà du simple prototype avec des pages statiques. En effet, il est possible d’y créer des base de données pour stocker du contenu dynamique comme du texte et des images. On peut ainsi en faire un outil de CMS comme Wordpress ou l’utiliser pour prototyper un site e-commerce. 

Avez-vous d’autre outils orientés webdesign no-code pour prototyper rapidement un site ou une appli mobile à ajouter à cette liste ? Avez-vous des retours/compléments suite à l’utilisation d’un des outils cités ?