La distance entre une maquette et la page finale se cache souvent dans une question: les deux suivent-elles les memes regles de mise en page.

Ouvrir le navigateur et commencer

Penpot est une plateforme de design libre. La page d accueil la presente comme un outil de design libre pour les equipes qui doivent collaborer, et la page de presentation ajoute qu il s agit d un outil de design sur le web, fait pour relier les designers et les developpeurs. En pratique, la difference la plus immediate est qu un navigateur suffit pour entrer dans le projet: pas de client lourd a installer d abord, et pas d environnement a reconstruire en changeant de machine.

La mission est dite clairement: offrir une plateforme libre qui suit des standards ouverts, et faire avancer la collaboration entre design et developpement. Cette phrase explique les choix faits sur les formats de fichiers et les regles de mise en page, car un travail de design doit etre facile a reprendre par l etape suivante avant que la collaboration ne signifie quelque chose.

Travailler dans un navigateur a aussi un cout, et il faut le nommer. Une surface avec des centaines de cadres, d images et de composants repose sur la machine et sur la connexion, et un projet reste ouvert toute la journee ne se comporte pas comme un projet ouvert pour une relecture. Les equipes qui manipulent de gros fichiers apprennent a les decouper, et cette habitude releve plus d une decision de conception que de la technique.

Mettre en page avec les regles du web lui-meme

Le modele de mise en page est ce qui distingue cet outil. La page d accueil annonce la possibilite de concevoir des interfaces avec la grille CSS et la mise en page flexible, soit les regles que le front utilise reellement. Les espacements et les alignements de la maquette peuvent donc correspondre au code final, et une couche de conversion manuelle disparait a la livraison.

Cote systeme de design, le projet offre des composants, des variables de design natives et des bibliotheques partagees. Les variables sortent des valeurs comme la couleur et la taille de texte en entrees reutilisables, donc un changement a un endroit arrive partout; les composants et les bibliotheques tiennent plusieurs pages ensemble. Pour une interface entretenue pendant des annees, cette combinaison epargne bien plus que des retouches page par page, et les schemas et prototypes interactifs couvrent la plage de la structure a la demonstration.

L emplacement des donnees appartient a l utilisateur

Le deploiement est l autre point que le projet ne cesse de soulever. La page sur l hebergement propre indique que la plateforme tourne dans un nuage prive, sur du materiel local ou meme dans un reseau isole, l emplacement des donnees de design et les droits d acces restant entierement entre les mains de l utilisateur. Pour une equipe dont les donnees ne doivent pas sortir du reseau interne, cela pese generalement plus qu une liste de fonctions, et ce n est possible que sous une forme libre.

La page des tarifs dit la meme chose avec les mots du projet: le palier gratuit est complet, sans limite de nombre et sans fonction retenue; des paliers payants existent pour les grandes organisations et couvrent les besoins de gouvernance et de processus. Le code est publie sous Mozilla Public License 2.0 dans un depot public, donc la source peut etre obtenue, compilee et deployee, et le travail de design appartient a ceux qui l ont fait.

Deux consequences suivent de cette combinaison, une bonne et une a prevoir. Rien n impose un demenagement quand un fournisseur change ses conditions, et rien n impose non plus une mise a jour, ce qui veut dire que la version sur laquelle tourne une instance devient une decision que quelqu un doit assumer. L hebergement propre est peu couteux au depart et reste un service a entretenir, donc il vaut mieux decider tot qui s en occupe.

Mettre les standards des fichiers et de la mise en page dans la main de l utilisateur donne a la collaboration un sol stable.

Quelques conseils. Fixer d abord les entrees de base des variables de design et de la bibliotheque de composants, les pages ajoutees ensuite iront bien plus facilement. En migrant un ancien projet, verifier d abord si les regles de mise en page correspondent au front, pour que la livraison ne refasse pas le travail. Si les donnees doivent rester dans le reseau, essayer tot un deploiement propre et planifier comptes et droits en meme temps.