Collaboration de conception open source avec Penpot

Lorsqu’une équipe de concepteurs travaille ensemble sur un projet, l’un des objectifs les plus importants est la cohérence. Que vous ayez besoin d’un look cohérent en raison d’une identité d’entreprise ou simplement pour une cohésion visuelle, l’apparence et la disposition des pages et des écrans doivent être raisonnablement similaires dans un projet donné. C’est déjà assez difficile de le faire en tant qu’artiste solo, et cela devient plus complexe avec des contributeurs supplémentaires. Cela devient une tâche monumentale lorsque plusieurs maquettes d’une équipe de conception doivent être approuvées par un client, signées par un expert en accessibilité, puis traduites par une équipe de programmeurs. C’est difficile mais gérable avec le bon outil, et l’outil open source pour le travail est Penpot.

Penpot est un espace de travail de conception en ligne où les concepteurs peuvent créer ou importer des éléments graphiques, créer des maquettes et partager ces maquettes avec des clients et des collaborateurs. Il est open source et s’appuie sur des formats ouverts tels que SVG, ce qui signifie que vos contributeurs ont beaucoup de choix quant aux outils qu’ils utilisent pour contribuer aux actifs. Pour essayer Penpot, rendez-vous sur Penpot.app et créez un compte.

Premiers pas avec Penpot

Après vous être connecté, vous êtes présenté avec le Projets page. Il y a quelques fichiers de démonstration ici, conçus pour vous donner un aperçu de l’interface Penpot. Un projet dans Penpot peut avoir plusieurs pages. Sélectionnez une page à afficher dans le Pages panneau.

Une page dans Penpot n’est pas comme une page dans le monde réel. Une page Penpot est un canevas infini. Cliquez avec le bouton du milieu et faites glisser pour déplacer le canevas.

Pour effectuer un zoom avant et arrière, appuyez sur Ctrl sur votre clavier, puis utilisez la molette de votre souris ou effectuez l’action équivalente sur le trackpad ou la tablette que vous utilisez.

Le zoom est une convention particulièrement utile car Penpot est souvent utilisé pour concevoir du contenu pour des écrans destinés à défiler et non à paginer.

Créer un plan de travail

Un canevas infini signifie que vous pouvez utiliser le même espace de travail pour afficher plusieurs options différentes pour le même type de page. Vous pouvez concevoir un thème clair et sombre, une version mobile et une version de bureau, puis plusieurs itérations différentes de chacun. Parce que tout est sur le canevas, vous avez besoin d’un moyen de définir une zone pour votre conception, et dans la terminologie des applications de conception, c’est un plan de travail. Un plan de travail est un conteneur (considérez-le comme un div, en termes CSS) pour une maquette. C’est la partie de la toile que vous montrerez à quelqu’un lorsqu’il demandera à voir vos idées de conception.

Pour créer un plan de travail, cliquez sur l’icône Plan de travail dans la barre d’outils de gauche ou appuyez simplement sur UNE sur votre clavier.

Cliquez et faites glisser sur la toile pour créer un plan de travail. Si vous concevez pour un écran ou une taille de page spécifique, vous pouvez le représenter avec votre plan de travail. Si vous avez besoin de tailles très spécifiques, vous pouvez ajuster les dimensions de votre plan de travail dans le panneau des propriétés sur le côté droit de l’interface Penpot.

Vous pouvez également effectuer des calculs de base dans les champs de texte. Par exemple, si vous savez que la taille de votre conception est de 1920 par 1080, mais que vous devez permettre le défilement vers le bas de l’équivalent de cinq écrans, entrez 1080*5 comme hauteur, et Penpot le convertit en 5400 pour vous.

Dessiner à Penpot

Penpot utilise principalement SVG (Scalable Vector Graphics) pour ses éléments de conception. SVG est un format structuré et ouvert que les développeurs Web peuvent facilement traduire en code. Grâce à cette fonctionnalité, dessiner dans Penpot est aussi simple que dessiner dans Inkscape et, tout aussi important, il est facile à aligner, dupliquer, réutiliser et exporter pour une utilisation dans n’importe quelle autre application.

Dans Penpot, vous disposez de ces outils de dessin :

• Rectangle (R): dessinez des rectangles et ajustez les coins arrondis et les remplissages dans le panneau des propriétés
• Ellipse (E): dessiner des ellipses et des cercles
• Texte (T): créer des éléments de texte
• Image (Maj+K): importer une image bitmap
• Courbe (Maj+C) : un stylo aux courbes de Bézier
• Chemin (P): un outil stylo

Vous pouvez ajuster tous les éléments de conception dans le panneau des propriétés à droite de l’interface. Presque tout ce qui peut être ajusté correspond également à une propriété CSS, donc d’une certaine manière, vous concevez pour le Web dans une interface graphique, ce qui signifie qu’il est beaucoup plus facile pour l’équipe de développement de traduire avec précision la conception en implémentation.

Les atouts

L’un des moyens les plus simples d’assurer la cohérence de la conception consiste à réutiliser les actifs. Moins un concepteur doit dessiner essentiellement le même bouton, moins il y a de chances qu’un coin arrondi soit oublié ou que la taille soit fausse. Construisez une bibliothèque d’éléments de conception et faites-en le vocabulaire de vos concepteurs.

La création d’une bibliothèque de composants pour votre projet est simple. Une fois que vous avez conçu un élément, faites un clic droit dessus et sélectionnez Créer un composant. L’élément est ajouté à la bibliothèque d’actifs de votre projet.

Vous pouvez accéder à votre bibliothèque de ressources en appuyant sur Alt+I sur votre clavier ou en cliquant sur l’icône Actifs dans le coin inférieur gauche de l’interface.

Commentaires et retours

Une boucle de rétroaction saine est vitale pour la collaboration, et une façon de fournir une rétroaction de manière asynchrone est le commentaire (C) outil. À l’aide de l’outil Commentaire, les collaborateurs d’un projet peuvent publier en toute sécurité des questions et des observations n’importe où dans l’espace de travail. Les commentaires sont enfilés, donc une conversation se déroule dans un bloc de commentaires, et un fil de commentaires peut être supprimé lorsqu’un problème a été résolu.

Prototype

La conception pour les médias interactifs est différente de la conception d’une publicité dans un magazine ou d’un panneau d’affichage. Les choses changent en fonction des choix des téléspectateurs et de l’état de l’application. Pour capturer les différents états que votre conception peut traverser lorsqu’un utilisateur interagit avec elle, vous pouvez créer un prototype, sans codage requis.

Un prototype vous permet de définir n’importe quel élément de conception comme déclencheur pour détecter un événement de clic ou de souris et pour effectuer une action telle que la navigation vers un autre plan de travail ou l’ouverture d’une superposition. Votre application ne fonctionnera pas réellement, mais elle ressemblera et agira comme si elle fonctionnait.

Utiliser l’open source pour la conception

Penpot est un outil étonnant et amusant, non seulement en tant que plate-forme de conception et de prototypage, mais également en tant qu’application d’illustration SVG en ligne. Utilisez Penpot pour simuler une application afin de comprendre l’interaction de l’utilisateur avant d’écrire du code, utilisez-la pour encourager la contribution à la conception et permettre la collaboration entre les équipes.