En ce moment, c’est une bonne période pour se lancer dans de nouveaux projets… Pourquoi pas créer une nouvelle application ou un nouveau site web ?

Seulement voilà, il faut le prototyper, c’est à dire faire d’abord un cahier des charges, mais également des maquettes. Ça permet de se repérer et de visualiser ce qu’on veut faire… Ça évite de partir dans tous les sens.

D’ailleurs comment vous le faites votre prototypage ? Moi en général, je le dessine sur une feuille de papier, ou alors je prototype direct en HTML, mais ça prend un peu de temps. Mais il existe des outils de prototypage qui sont pour la plupart payant… C’est pourquoi aujourd’hui, je vous invite à découvrir Penpot.

Il s’agit d’un outil de design et de conception graphique totalement open source, fonctionnant sur tous les systèmes d’exploitation et utilisant 100% de technologies web, dont le SVG. Dans Penpot, vous pouvez donc dessiner des zones de travail aux dimensions de l’écran visé (smartphone, tablette, PC…etc.) et y ajouter des images, des rectangles, des cercles, du texte…etc. Et paramétrer chacun de ces éléments pour mettre une jolie couleur, un style de police particulier, une ombre, une bordure…etc.

C’est hyper basique et l’outil ne propose pas d’éléments prédéfinis (comme des icônes ou des champs de formulaires…etc.), mais vous pouvez assembler vos propres bibliothèques d’éléments (composants ou images) au fur et à mesure. À vous donc d’enrichir cet outil en fonction de vos besoins comme vous pouvez le voir sur l’animation ci-dessous.

Un des gros plus de Penpot c’est qu’il permet de travailler en équipe, donc de collaborer sur des designs, et de commenter les maquettes.

Une fois vos maquettes designées, vous pouvez rendre interactives vos maquettes en liant les boutons ou d’autres composants avec vos zones de travail. Cela vous permettra ensuite de tester visuellement la navigation dans votre future application. Vous pouvez bien sûr détourner cet usage pour réaliser des présentations façon PowerPoint, des quizz ou des histoires dont vous êtes le héros.

Penpot est utilisable en ligne via ce site, mais vous pouvez également le déployer sur votre propre machine en allant récupérer les sources sur Github et en le déployant sur Docker.