--- title: Permettre à une idée de prendre vie tags: hackathon, support robots: noindex, nofollow author: Julien Noyer --- # Permettre à une idée de prendre vie *Prototypage, à quoi ça sert et comment faire ?* ![](https://i.imgur.com/4wLvfp7.png) Tout être humain est en capacité d’avoir des idées, bon nombre d’entre elles n’ont pas nécessairement besoin d’être matérialisées alors que certaines, quand elles sont plus bénéfiques à d’autres qu’à nous-même, se doivent de voir le jour. Mais comment transformer une idée en projet ? Faut-il attendre la conceptualisation définitive de cette idée avant de la concrétiser ? S’il est important d’avoir une vision claire de son idée, il n’est pas pour autant essentiel de répondre à toutes les questions qu’elle soulève avant de la matérialiser. Certaines idées peuvent changer le monde, Sir Tim Berners Lee n’a pas attendu le concept de Blockchain pour créer le Web, mais il à changer le monde avec une première version. Un prototype du Web qui à changer notre façon de vivre. <br/> <br/> # Si j’avais un marteau, je construirais le prototype de ma maison ![](https://i.imgur.com/Pkb41rE.png) Une chose est certaine, nous ne sommes pas capables de vivre dans une maison haute de 20 cm faite en Lego, mais en construisant cette maquette nous comprendrons l'intérêt d’une porte d’entrée, d’une chambre, d’un salon. Une fois finie, et même sans penser pouvoir y vivre, nous aurons envie de la présenter. Les avis positifs nous flatteront, et si nous sommes capables d’écouter les critiques, les avis négatifs nous feront grandir, si tant est qu’ils soient objectifs. C’est pourquoi la réalisation d’un prototype est très importante dès qu’une idée est suffisamment mûre pour en avoir une vision globale. Le prototype se doit d’être avant tout un outil qui permet de valider une idée avant de la produire, si vous pensez qu’en agitant rapidement les bras vous pouvez voler, je vous conseille d’essayer en sautant d’une chaise avant de sauter d’un avion. Cela peut vous paraître évident, mais Henry François Reichelt a pensé le 4 février 1912 qu’il en était capable, il a sauté du premier étage de la tour Eiffel. Il ne s’est pas envolé, le pauvre homme est décédé ce jour-là. Nous n’allons pas pour autant devenir frileux face à nos idées, nous allons rendre hommage à tous ses pionniers en continuant à inventer des projets, tout en ayant conscience des risques potentiels qu’ils peuvent provoquer. <iframe width="100%" height="350" src="https://www.youtube.com/embed/IYlBA3GTFO0?si=mLXtfcR3oCcF_mF2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> <br/> <br/> <br/> # Concrétiser un projet par l’idéation ![](https://i.imgur.com/pyBKjNC.png) L’idéation est un mécanisme de pensée qui permet d’explorer au maximum le potentiel d’une idée. Appelée également “Brainstorming”, cette pratique est à l’origine de toutes créations, qu’elle soit individuelle ou collective, car elle permet de laisser libre court à toutes pensées, de la plus pragmatique à la plus délirante. Il est important lors de la phase d’idéation de ne pas s’auto-censurer, ni de brimer par principe une idée, il faut qu’elles soient toutes exprimées librement afin de déterminer précisément l’objectif que nous souhaitons atteindre. Mettre à plat ses idées il est important de choisir le bon outil, nous avons eu tendance à utiliser les fameux Post-It, ce que je déconseille fortement car ils sont à la fois très chers et génèrent un impact écologique dont nous pouvons nous passer. Le principe de l’idéation est qu’elle évolue, il est donc essentiel de la rendre dynamique, mauvais point pour les Post-It, est l’un des outils que vous pouvez utiliser est Canva (https://www.canva.com), il vous permettra de créer un “Carte de Pensées” - ou “Mind Map”- sur laquelle vous pouvez placer toutes vos idées avec pour objectif de les relier ensemble. Vous verrez au fur et à mesure votre projet se concrétiser naturellement, ce qui vous permettra d’identifier les premières tâches à mettre en place et de savoir par ou commencer pour matérialiser votre projet. <iframe width="100%" height="350" src="https://www.youtube.com/embed/C0O169EbTg4?si=Qb0OlZxFQ2D9Upzi" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> <br/> <br/> <br/> # Organiser une idée par tâches ![](https://i.imgur.com/SbOEi5J.png) Une fois votre phase d’idéation terminée, ou pour le moins, dès que vous avez identifié le type de projet que vous voulez réaliser, il vous faut passer à l’organisation des tâches que vous devez réaliser pour produire votre projet. Pour ce faire, vous devez être capable de découper en plusieurs tâches la réalisation de votre projet, afin de rendre facile à comprendre la réalisation de chacune d’elles. Avant de marcher sur la Lune, il vous faut un moyen de transport, et pour réaliser ce moyen de transport il vous faut un moteur, un système pour le faire décoller, le faire alunir, … Un des outils le plus répandu est Trello (https://trello.com) qui permet de mettre en place des espaces de travail collaboratif organisé sur le principe de tableau. L’utilisation de Trello est très simple, vous avez la possibilité de partir d’un exemple de tableau pour vous organiser ou-bien mettre en place le votre qui potentiellement pourrait mieux correspondre à votre projet. De plus, Trello vous propose d’associer à vos tableaux des modules, comme celui qui permet d’estimer le temps alloué à chaque tâche ou leur importance, ce qui vous permet de savoir quelles tâches sont à prioriser pour mettre en place votre projet. <iframe width="100%" height="350" src="https://www.youtube.com/embed/Gf47x50d254?si=otnnohbBkYhLx-5s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> <br/> <br/> <br/> # Prototyper un site Web ![](https://i.imgur.com/6inGBJ7.png) Une fois que vous avez défini les grands axes de votre projet, vous pouvez passer à l’action en vous lançant dans la création de votre prototype. Nous prenons dans ce paragraphe l’exemple d’un site Web, première étape de l’apprentissage des métiers du Web. Avant toute chose, gardez en tête que le prototype de votre site ne doit pas intégrer la totalité des pages du site définitif que vous prévoyez de créer, votre prototype doit présenter les informations les plus pertinentes. Si vous souhaitez créer un site Web de formation, inutile de créer 10 pages de formation, vous n’avez besoin que d’en faire une, à vous de choisir celle qui représente le mieux votre intention pédagogique. Pour ce type de site Web, je vous conseille de créer la page d’accueil dans laquelle vous présentez votre activité, et une page pour présenter une formation. Pour un prototype, inutile également de prévoir de mettre en place un système de paiement, proposez simplement une prise de contact par email par exemple, vous aurez tout le temps ensuite de développer un tunnel de paiement. Votre prototype doit créer de l’engagement, toute la partie technique n’est pas visible par vos utilisateurs, c’est la raison pour laquelle vous devez en priorité travailler sur le contenu que vous allez mettre en ligne, ainsi que sur le design de votre site Web. Les projets techniquement très complexes ne plaisent qu’aux techniciens, alors que les projets design sont eux plus à même de faire connaître votre projet. Prenez le temps de bien réfléchir à votre charte graphique et faites attention à ne pas en faire trop. Comme on dit dans le métier : “Less is More”. <iframe width="100%" height="350" src="https://www.youtube.com/embed/YDTkOCmlcVQ?si=fAhpUzypI4GiSLdL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> <br/> <br/> <br/> # Prototyper une application Web ![](https://i.imgur.com/NQVdVJa.png) On différencie un site Web d’une application Web sur un critère simple : un site est à destination d’utilisateurs passifs, une application d’utilisateurs actifs. Nous pouvons simplifier cette approche en disant que l’on lit un site Web et que l’on crée avec une application Web. Prenons des exemples. Si vous naviguez sur l’adresse https://www.atmaryseproject.org, vous constaterez que la seule action disponible est celle de la lecture, vous pouvez naviguer sur les différentes pages pour découvrir l’activité de l’association grâce à différents articles. Si à présent vous naviguez sur l’adresse https://www.instagram.com, vous constaterez que vous êtes obligé de vous connecter, pour ensuite avoir accès au contenu que vous pouvez aimer et commenter, et vous pourrez également diffuser votre propre contenu. Nous parlons donc pour Maryse Project d’un site Web, alors que Instagram est une application Web, nous sommes passif sur le premier et actif sur la seconde. Comme pour un site Web, inutile de prototyper toutes les fonctionnalités de votre application, inutile également de développer un système d’inscription. La première version d'Instagram permettait uniquement de publier des images avec quelques filtres, au fur et à mesure Instagram à intégrer la possibilité de publier des vidéos, de créer des campagnes de publicité, etc… Instagram n’aurait jamais vu le jour s'il avait fallu tout développer dès la première version, pensez à l’essentiel pour que votre projet voit le jour car il à toute la vie devant lui pour évoluer. <iframe width="100%" height="350" src="https://www.youtube.com/embed/XTA04_hcEWM?si=PyZElpvBOPJnrqR3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> <br/> <br/> <br/> # Les outils pour prototyper votre idée ![](https://i.imgur.com/ZFiXQnc.png) Il existe un grand nombre d’outils pour prototyper un projet de site ou d’application Web, qui sont plus ou moins accessibles selon vos compétences techniques. Avant de vous lancer dans l’utilisation d’un outil de prototypage, vous devez garder en tête qu’il ne sera pas votre projet définitif. L’objectif de votre prototype est de faire en sorte que votre projet soit validé et votre idée porteuse. <br/> ## Landing page : Carrd Une landing page est une page Web unique qui à pour objectif de présenter l’information la plus importante de votre projet et susciter des prises de contacts par email ou via le réseaux sociaux. Le site Carrd.co - https://carrd.co/build - permet de realisé des landing pages, soit en vous basant sur des modèles, directement en ligne que vous pouvez ensuite diffuser et partager. <iframe width="100%" height="350" src="https://www.youtube.com/embed/RRSnnJl7IUY?si=PDCQupqAU5xzWVpq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> [Plus d'informations sur **Carrd**](https://carrd.co) <br/> ## Boutique en ligne : Shopify Le site Shopify - https://www.shopify.com - est une plateforme qui héberge des boutiques en ligne. Il dispose d’une suite d’outils complète pour gérer des produits et créer des pages. La création de boutique est un travail assez délicat qui demande à la fois des connaissances technique et stratégique, ce qui rend l’utilisation de Shopify relativement compliqué. Mais une fois que vous aurez en main Shopify, les boutiques que vous créerez seront tout à fait professionnelles. <iframe width="100%" height="350" src="https://www.youtube.com/embed/uC_pEAUIOic?si=0Wup5a9-jfZsF00O" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> [Plus d'informations sur **Shopify**](https://www.shopify.com) <br/> ## Site Web complet : Wordpress Le site Wordpress - https://wordpress.com/fr/ - est également une plateforme, mais cette fois-ci pour créer des sites Web très complets. Wordpress est un outil professionnel utilisé dans de très nombreux cas, il est basé sur l’utilisation d’une interface relativement simple qui vous permet d’organiser différentes pages. Avec Wordpress vous pouvez profiter d’extensions très puissantes qui vous permettent d’ajouter différents types de fonctionnalités. <iframe width="100%" height="350" src="https://www.youtube.com/embed/71EZb94AS1k?si=F0MC96ECdOaf1Si8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> [Plus d'informations sur **Wordpress**](https://hackmd.io/@teach-supports/wordpress-support) <br/> ## Application Web : Glide Le site GlideApp - https://www.glideapps.com - propose un outil associé à GoogleSheet qui permet de développer une application Web très facilement. Avec une interface simple, GlideApp permet de prototyper une application plus ou moins complexe et offre l’avantage d’apporter un niveau de connaissance intéressant sur l’utilisation d’une base de données. Attention néanmoins, GlideApp est devenu très cher mais vous pouvez tout à fait l’utiliser pour créer votre prototype. <iframe width="100%" height="350" src="https://www.youtube.com/embed/t5UqouXcH5U" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> [Plus d'informations sur **Glide**](https://hackmd.io/@teach-supports/glideapp-support) <br/> ## Objet physique : Carton, ciseaux, et vos deux mains Un prototype n’est pas forcément un projet informatique, il est digital : dans tous les cas vous aurez besoin de votre cerveau et de vos mains. Vous pouvez tout à fait décider d’utiliser de la matière palpable pour créer votre prototype en vous inspirant par exemple de la technique de l’origami. Et vous pouvez même prototyper un sit pu une application Web avec du papier ! <iframe width="100%" height="350" src="https://www.youtube.com/embed/y20E3qBmHpg?si=M1wdyeN69p0GLyZN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> <br/> <br/> <br/> # Quel est la place de l'intelligence artificielle ? ![](https://i.imgur.com/rpverU4.png) Des outils de plus en plus puissants sont développés pour aider au développement d’un projet, mais l’erreur principale est de penser que la réponse de l’IA est juste à 100%. Le principe de base pour entraîner une IA et chercher à lui faire faire le moins d'erreurs possibles. C’est à dire qu’il faut considérer qu’une IA se trompe avant de penser qu’elle à raison. Ce n’est pas pour autant qu’il ne faut pas utiliser les IA, mais d'aiguiser son esprit critique pour les utiliser comme une aide à la prise de décision. La prochaine fois que vous utiliserez une IA pour répondre à une question, une fois que vous avez une réponse, répondez à l’IA qu’elle se trompe, et vous verrez qu’il vous donnera une réponse différente. Cette pratique de la contradiction avec les IA vous permet d’agir de la même manière que lorsque vous discutez d’un sujet avec une personne, vous confrontez vos idées jusqu’à faire évoluer votre pensée initiale. Il en va de même avec une IA, la réponse qu’elle vous donne n’est pas forcément la bonne mais vous permet de faire évoluer votre pensée sur un sujet précis. <iframe width="100%" height="350" src="https://www.youtube.com/embed/videoseries?si=TM7IHwlLO802o4Xb&amp;list=PLDyuailkzLlp5JTH8N-Oj3ATkCfmhdBqQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> [En savoi plus dur l'**intelligence artificielle**](https://hackmd.io/@dws-workshop/HJD4_t1KF)