PenPot

Veröffentlicht am von

Was ist Penpot?

PenPot ist eine OpenSource Software, welche für das Anfertigen eines Designs und die Erstellung von Prototypen einer Anwendung genutzt werden kann. PenPot ist OpenSource Software, was bedeutet, das Programm ist komplett kostenlos zugänglich und auch der Quellcode ist einsehbar, die Entwicklung des Programms kann also sehr transparent verfolgt werden.

Design

Penpot bietet eine umfassende Auswahl an Designwerkzeugen, mit denen UI/UX-Designer digitale Anwendungen entwerfen können. Zu den angebotenen Features zählen leistungsstarke Vektorwerkzeuge, anpassbare Layout-Raster und ein flexibles Auto-Layout-System, die zusammen ein präzises und effizientes Design ermöglichen.

Ähnlichkeit zu CSS

Bei den Gestaltungsmöglichkeiten orientiert sich Penpot stark an den in CSS verfügbaren Funktionen. Dies erleichtert die Einbettung der Designs in Webanwendungen. Es werden zum Beispiel Layout Optionen wie Flex und Grid angeboten, mit welchen Webdesigner schon vertraut sein sollten und es ermöglichen responsive Anwendungen zu gestalten.

Wiederverwendbare Komponenten

Die Möglichkeit, wiederverwendbare Komponenten zu erstellen, erlaubt eine durchdachte Strukturierung des Designsystems. Diese Komponenten können in verschiedenen Varianten angepasst werden, was zu einem konsistenten Design innerhalb eines Projektes beitragen kann. Änderungen an einer Hauptkomponente werden automatisch auf alle Instanzen übertragen, was den Designprozess optimiert und die Zusammenarbeit im Team erleichtert.

Vielseitige Exportfunktionen

Fertige Designs können in gängigen Formaten wie HTML & CSS oder SVG exportiert werden. PenPot dient also nicht nur zur rein prototypischen Entwicklung ein es Designs, in PenPot erstellte Entwürfe können direkt in der Implementierung der entwickelten Software genutzt werden. Durch das Wegfallen der händischen Implementierung einzelner Frontend-Elemente wird die Effizienz der entsprechenden Frontend-Entwickler gesteigert.

Prototyping

Neben dem Anfertigen von Frontend Designs kann PenPot auch zum prototypischen Testen dieser Entwürfe genutzt werden. Mit Hilfe des in PenPot integrierten Protoypings können einfache Interaktionen zwischen verschiedenen Designs erstellt werden und so für Testsubjekte vor Fertigstellung der softwareseitigen Implementierung zur Verfügung stehen. 

Beispielhaft für dieses Protoyping wäre die Zuweisung verschiedener Aktionen zu gewissen Design Elementen die später einmal als Knopf genutzt werden sollen. Diesen Schaltflächen können nun verschiedene Verhaltensweisen zugeordnet werden, wie beispielsweise das wechseln der gesamten Anzeige, aber auch dem einblenden eines Overlays.

Durch cleveren Einsatz dieser Funktionen kann bereits die Navigation durch die gesamte Anwendung simuliert werden, so bekommen testende Nutzer einen sehr realitätsnahen Eindruck vom späteren Aufbau der Software, außerdem kann bereits das Zusammenspiel verschiedener Designs betrachtet werden.

Zusammenarbeit von Teams in Penpot / Collaboration

PenPot bietet Designern die Möglichkeit, gemeinsam in Echtzeit an einem Design zu arbeiten und eignet sich daher hervorragend für Teams, die einen hohen Wert auf Kollaboration legen. Es ist mehreren Designern möglich auf ein Projekt zuzugreifen und durchgeführte Änderungen werden direkt mit allen beteiligten Teammitgliedern geteilt. Es können auch Kommentare im Design hinterlassen werden, welche zur asynchronen Kommunikation innerhalb des Teams genutzt werden können. Diese Kommentare können direkt an einzelne Design-Elemente angeknüpft werden, um so detailliertes Feedback zwischen Designern zu ermöglichen.

Implementierung / Open Source

PenPot ist als WebApp implementiert und wird im Browser verwendet  , damit kann das Werkzeug unabhängig vom Betriebssystem genutzt werden. Außerdem ist es möglich kollaborativ an Projekten zu arbeiten, dass bedeutet es können gleichzeitig mehrere Personen an einem Design arbeiten um dieses zu perfektionieren (vgl. Google Docs). 

Der Quellcode von PenPot wird auf GitHub der Allgemeinheit zur Verfügung gestellt, (https://github.com/penpot/penpot) es ist Entwicklern also möglich, persönlich gewünschte Änderungen an der Software vorzunehmen. 

Alternativen

Figma

Eine weitverbreitete Alternative zu PenPot ist die kommerzielle Software namens „Figma“. Figma gilt als Marktführer im Bereich des Design und Prototypings. Da es sich bei Figma um proprietäre Software handelt, kann Figma Nutzern einen höheren Funktionsumfang bieten. Demgegenüber steht jedoch der höhere finanzielle Aufwand, der mit der Nutzung von Figma einhergeht. Figma hebt sich von PenPot durch erweiterte Funktionen für Echtzeit-Kollaboration, umfassendes Prototyping und eine Vielzahl an Plugins und Integrationen, die es für größere Teams und komplexe Projekte besonders attraktiv machen ab. Zudem ermöglicht es die einfache Verwaltung von Design-Systemen und die cloud-basierte Speicherung, was den Zugriff und das Teilen von Projekten erleichtert.

Direkter Vergleich

Penpot Figma
Lizenzmodell Open Source Proprietär
Plattform Browser Browser, Desktop-App
Funktionsumfang Gute Grundfunktionen für Design und Prototyping, aber noch nicht so viele Automatisierungen Voll ausgereifte Design-, Prototyping- und Kollaborationsfunktionen, mit Animationen, Komponenten, Auto-Layout und einem starken Plugin-Ökosystem
Preis Kostenlos nutzbar (Open-Source) Kostenlos für Einzelpersonen mit Einschränkungen, kostenpflichtige Pläne für Teams und erweiterte Features
Plugins Wachsende, noch kleine Nutzerbasis, deshalb noch geringe Anzahl an Plugins Große Auswahl an Plugins und Drittanbieter-Integrationen
Performance & Stabilität Noch in der Entwicklung, gelegentliche Bugs und Performance-Probleme, aber kontinuierliche Verbesserungen Sehr stabil, da es seit Jahren optimiert wird und weltweit von Design-Teams genutzt wird

Fazit

Penpot ist eine Open-Source-Plattform für Design und Prototyping. Sie bietet eine benutzerfreundliche Oberfläche und ermöglicht es mehreren Nutzern, gleichzeitig an Designs zu arbeiten. Als Open-Source-Tool stellt Penpot eine flexible und kostenfreie Alternative zum Marktführer „Figma“ dar, die besonders für Teams geeignet ist, die eine Open-Source Strategie verfolgen und dennoch eine umfangreiche und kollaborative Designumgebung benötigen.

Quellen