{"id":4063,"date":"2025-03-22T17:49:01","date_gmt":"2025-03-22T16:49:01","guid":{"rendered":"https:\/\/informatik.htwk-leipzig.de\/seminar\/?p=4063"},"modified":"2025-03-22T17:50:31","modified_gmt":"2025-03-22T16:50:31","slug":"penpot","status":"publish","type":"post","link":"https:\/\/informatik.htwk-leipzig.de\/seminar\/lehrveranstaltungen\/betriebliche-informationssysteme\/2025\/penpot\/","title":{"rendered":"PenPot"},"content":{"rendered":"

Was ist Penpot?<\/h2>\n

PenPot ist eine OpenSource Software, welche f\u00fcr 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\u00e4nglich und auch der Quellcode ist einsehbar, die Entwicklung des Programms kann also sehr transparent verfolgt werden.<\/span><\/p>\n

Design<\/h2>\n

Penpot bietet eine umfassende Auswahl an Designwerkzeugen, mit denen UI\/UX-Designer digitale Anwendungen entwerfen k\u00f6nnen. Zu den angebotenen Features z\u00e4hlen leistungsstarke Vektorwerkzeuge, anpassbare Layout-Raster und ein flexibles Auto-Layout-System, die zusammen ein pr\u00e4zises und effizientes Design erm\u00f6glichen.<\/p>\n

\"\"<\/p>\n

\u00c4hnlichkeit zu CSS<\/h3>\n

Bei den Gestaltungsm\u00f6glichkeiten orientiert sich Penpot stark an den in CSS verf\u00fcgbaren 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\u00f6glichen responsive Anwendungen zu gestalten.<\/p>\n

Wiederverwendbare Komponenten<\/h3>\n

Die M\u00f6glichkeit, wiederverwendbare Komponenten zu erstellen, erlaubt eine durchdachte Strukturierung des Designsystems. Diese Komponenten k\u00f6nnen in verschiedenen Varianten angepasst werden, was zu einem konsistenten Design innerhalb eines Projektes beitragen kann. \u00c4nderungen an einer Hauptkomponente werden automatisch auf alle Instanzen \u00fcbertragen, was den Designprozess optimiert und die Zusammenarbeit im Team erleichtert.<\/p>\n

Vielseitige Exportfunktionen<\/h3>\n

Fertige Designs k\u00f6nnen in g\u00e4ngigen <\/span>Formaten wie HTML & CSS oder SVG exportiert werden. PenPot dient also nicht nur zur rein prototypischen Entwicklung ein es Designs, in PenPot erstellte Entw\u00fcrfe k\u00f6nnen direkt in der Implementierung der entwickelten Software genutzt werden. Durch das Wegfallen der h\u00e4ndischen Implementierung einzelner Frontend-Elemente wird die Effizienz der entsprechenden Frontend-Entwickler gesteigert.<\/span><\/p>\n

\"\"<\/span><\/h1>\n

Prototyping<\/h2>\n

Neben dem Anfertigen von Frontend Designs kann PenPot auch zum prototypischen Testen dieser Entw\u00fcrfe genutzt werden. Mit Hilfe des in PenPot integrierten Protoypings k\u00f6nnen einfache Interaktionen zwischen verschiedenen Designs erstellt werden und so f\u00fcr Testsubjekte vor Fertigstellung der softwareseitigen Implementierung zur Verf\u00fcgung stehen.\u00a0<\/span><\/p>\n

Beispielhaft f\u00fcr dieses Protoyping w\u00e4re die Zuweisung verschiedener Aktionen zu gewissen Design Elementen die sp\u00e4ter einmal als Knopf genutzt werden sollen. Diesen Schaltfl\u00e4chen k\u00f6nnen nun verschiedene Verhaltensweisen zugeordnet werden, wie beispielsweise das wechseln der gesamten Anzeige, aber auch dem einblenden eines Overlays.<\/span><\/p>\n

Durch cleveren Einsatz dieser Funktionen kann bereits die Navigation durch die gesamte Anwendung simuliert werden, so bekommen testende Nutzer einen sehr realit\u00e4tsnahen Eindruck vom sp\u00e4teren Aufbau der Software, au\u00dferdem kann bereits das Zusammenspiel verschiedener Designs betrachtet werden.<\/span><\/p>\n

\"\"<\/span><\/p>\n

Zusammenarbeit von Teams in Penpot \/ Collaboration<\/h2>\n

PenPot bietet Designern die M\u00f6glichkeit, gemeinsam in Echtzeit an einem Desig<\/span>n zu arbeiten und eignet sich daher hervorragend f\u00fcr Teams, die einen hohen Wert auf Kollaboration legen. Es ist mehreren Designern m\u00f6glich auf ein Projekt zuzugreifen und durchgef\u00fchrte \u00c4nderungen werden direkt mit allen beteiligten Teammitgliedern geteilt. Es k\u00f6nnen auch Kommentare im Design hinterlassen werden, welche zur asynchronen Kommunikation innerhalb des Teams genutzt werden k\u00f6nnen. Diese Kommentare k\u00f6nnen direkt an einzelne Design-Elemente angekn\u00fcpft werden, um so detailliertes Feedback zwischen Designern zu erm\u00f6glichen.<\/span><\/p>\n

\"\"<\/span><\/p>\n

Implementierung \/ Open Source<\/h2>\n

PenPot ist als WebApp implementiert und wird im Browser verwendet\u00a0 , damit kann das Werkzeug unabh\u00e4ngig vom Betriebssystem genutzt werden. Au\u00dferdem ist es m\u00f6glich kollaborativ an Projekten zu arbeiten, dass bedeutet es k\u00f6nnen gleichzeitig mehrere Personen an einem Design arbeiten um dieses zu perfektionieren (vgl. Google Docs).\u00a0<\/span><\/p>\n

Der Quellcode von PenPot wird auf GitHub der Allgemeinheit zur Verf\u00fcgung gestellt, (<\/span>https:\/\/github.com\/penpot\/penpot<\/span><\/a>) es ist Entwicklern also m\u00f6glich, pers\u00f6nlich gew\u00fcnschte \u00c4nderungen an der Software vorzunehmen.\u00a0<\/span><\/p>\n

Alternativen<\/h2>\n

Figma<\/h3>\n

Eine weitverbreitete Alternative zu PenPot ist die kommerzielle Software namens „Figma“. Figma gilt als Marktf\u00fchrer im Bereich des Design und Prototypings. Da es sich bei Figma um propriet\u00e4re Software handelt, kann Figma Nutzern einen h\u00f6heren Funktionsumfang bieten. Demgegen\u00fcber steht jedoch der h\u00f6here finanzielle Aufwand, der mit der Nutzung von Figma einhergeht. Figma hebt sich von PenPot durch erweiterte Funktionen f\u00fcr Echtzeit-Kollaboration, umfassendes Prototyping und eine Vielzahl an Plugins und Integrationen, die es f\u00fcr gr\u00f6\u00dfere Teams und komplexe Projekte besonders attraktiv machen ab. Zudem erm\u00f6glicht es die einfache Verwaltung von Design-Systemen und die cloud-basierte Speicherung, was den Zugriff und das Teilen von Projekten erleichtert.<\/p>\n

Direkter Vergleich<\/h4>\n\n\n\n\n\n\n\n\n\n
<\/th>\nPenpot<\/th>\nFigma<\/th>\n<\/tr>\n
Lizenzmodell<\/strong><\/td>\nOpen Source<\/td>\nPropriet\u00e4r<\/td>\n<\/tr>\n
Plattform<\/strong><\/td>\nBrowser<\/td>\nBrowser, Desktop-App<\/td>\n<\/tr>\n
Funktionsumfang<\/strong><\/td>\nGute Grundfunktionen f\u00fcr Design und Prototyping, aber noch nicht so viele Automatisierungen<\/td>\nVoll ausgereifte Design-, Prototyping- und Kollaborationsfunktionen, mit Animationen, Komponenten, Auto-Layout und einem starken Plugin-\u00d6kosystem<\/td>\n<\/tr>\n
Preis<\/strong><\/td>\nKostenlos nutzbar (Open-Source)<\/td>\nKostenlos f\u00fcr Einzelpersonen mit Einschr\u00e4nkungen, kostenpflichtige Pl\u00e4ne f\u00fcr Teams und erweiterte Features<\/td>\n<\/tr>\n
Plugins<\/strong><\/td>\nWachsende, noch kleine Nutzerbasis, deshalb noch geringe Anzahl an Plugins<\/td>\nGro\u00dfe Auswahl an Plugins und Drittanbieter-Integrationen<\/td>\n<\/tr>\n
Performance & Stabilit\u00e4t<\/strong><\/td>\nNoch in der Entwicklung, gelegentliche Bugs und Performance-Probleme, aber kontinuierliche Verbesserungen<\/td>\nSehr stabil, da es seit Jahren optimiert wird und weltweit von Design-Teams genutzt wird<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Fazit<\/h2>\n

Penpot ist eine Open-Source-Plattform f\u00fcr Design und Prototyping. Sie bietet eine benutzerfreundliche Oberfl\u00e4che und erm\u00f6glicht es mehreren Nutzern, gleichzeitig an Designs zu arbeiten. Als Open-Source-Tool stellt Penpot eine flexible und kostenfreie Alternative zum Marktf\u00fchrer „Figma“ dar, die besonders f\u00fcr Teams geeignet ist, die eine Open-Source Strategie verfolgen und dennoch eine umfangreiche und kollaborative Designumgebung ben\u00f6tigen.<\/p>\n

Quellen<\/h2>\n