GUI Prototyping auf dem Desktop und im Web 4 kostenfreie Mockup-Tools

Anbieter zum Thema

PresseBox - unn | UNITED NEWS NETWORK GmbH

Windhoff Group

Confluent Germany GmbH

Bevor es ans Programmieren geht, muss man eine Anwendung möglicherweise präsentieren. Erste GUI-Entwürfe – sprich Mockups – helfen, Kollegen, Partner oder Kunden von der Idee zu überzeugen. Mit den passenden Tools geht das Erstellen von Mockups aber recht einfach von der Hand.

Wozu eigentlich Mockup-Tools? Als passionierter Entwickler sitzen Sie vielleicht seit zehn Jahren vor einem Bildschirm mit einer grafischen IDE, beispielsweise Qt oder Visual Studio. Dann können Sie Ihren schnellen Prototypen auch weiterhin in deren Design-Modi erstellen. Für alle anderen bieten Mockup-Tools die Möglichkeit, Anwendungen schnell, einfach und vor allem ohne jeglichen Code zu gestalten.

Für die eigene Arbeit ist kann so eine „Kulisse“ ebenfalls nützlich sein, schließlich haben GUIs Einfluss auf den darunterliegenden Code. Dabei ist es egal, ob es eine Smartphone-App, eine Webseite oder eine ausgewachsene Desktop-Software sein soll.

Es gibt Dutzende Werkzeuge in dieser Kategorie, die meisten kostenpflichtig. Aber es gibt einige Gratis-Tools, die auch ad hoc schnelles Prototyping erlauben. Einige Tools beschränken sich tatsächlich rein auf die Optik, andere erstellen anklickbare Oberflächen und zeigen so zum Beispiel auch Workflows und Klickpfade.

Mit Pencil und draw.io stellen wir Ihnen unten zwei komplett kostenlose und voll funktionsfähige Lösungen vor. Wireframe.cc bietet zwar nur eine eingeschränkte Version kostenfrei an, die aber kann wirklich nützlich sein, wenn es um Performance geht. Auch MockFlow verfährt nach dem Konzept: Sie können nur ein Projekt mit maximal zwei Reviewern bearbeiten und auch nicht alle Funktionen nutzen – aber immer noch mehr als bei den meisten anderen Tools!

Pencil

Mit Pencil gibt es zumindest eine echte Open-Source-Lösung für den Desktop – wenn auch mit einer typischen „Open-Source-Macke“: Optisch macht Pencil selbst nicht viel her, die ganze GUI ist etwas altbacken. Dafür bekommen Sie eine ansehnliche Menge grafischer Elemente wie sie typisch für iOS, Android oder auch Windows sind (oder leider eher waren).

Darunter befinden sich zum Beispiel leere Standard-Windows-Fenster, Radio-Buttons und Checkboxen, diverse Menüs, Knöpfe jeglicher Art, Smartphones und Tablets, (Mobile-)Tastaturen und so weiter. Hinzu gesellen sich Elemente für Flussdiagramme, um auch gleich Workflows zu visualisieren. Wenn das nicht genügt, soll die integrierte OpenClipart.org-Suche Zugang zu weiterem Material erleichtern, diese blieb im Test aber ohne Funktion.

Wirklich nützlich wird Pencil vor allem durch den Export: Projekte können aus mehreren Seiten (Websites, Dialoge, Fenster) bestehen und Elemente wie Buttons lassen sich mit den Unterseiten verlinken – dies erlaubt es, durch die Anwendung zu navigieren und die Nutzererfahrung zu präsentieren. Dazu wird das Ganze einfach als HTML-Website exportiert.

Pencil läuft, und zwar sehr stabil, unter Windows, OS X und Linux. Aktuell scheint es allerdings nicht mehr aktiv weiterentwickelt zu werden, die letzten Commits stammen aus 2017.

draw.io

Die Online-Anwendung draw.io ist nicht unbedingt als waschechtes Mockup-Tool bekannt, sondern eher als Werkzeug für Flussdiagramme – aber das täuscht! Die Software läuft direkt im Browser und ist kostenlos nutzbar, sogar ohne jegliche Anmeldung. Zu Beginn soll man sich für eine Art von Projekt entscheiden, Sie können diesen Wizard aber einfach durchklicken und anschließend neue Projekte über die Hauptoberfläche beginnen.

Die Elemente für Mockups müssen Sie jedoch zunächst einblenden: Über die „More Shapes“-Schaltfläche bekommen Sie Zugriff auf eine enorm große Grafiksammlung. Hier gibt es zum einen allgemeine GUI-Elemente wie Buttons, Fenster und Menüs sowie Bausteine für Flussdiagramme – also das, was auch Pencil bietet, allerdings deutlich mehr und aktueller als der Desktop-Konkurrent.

Zum anderen gibt es aber im Bereich „Software“ Unterkategorien wie Mockup, Android, iOS, UML oder gar einen eigenen Bereich für Atlassian-Anwendungen (zum Beispiel Jira). In weiteren Shape-Bereichen warten Symbole zu Themen wie Container, Cloud, Networking oder auch konkret zu Firmen wie Cisco, IBM oder Citrix.

Der Editor selbst ist angenehmer, moderner und wesentlich umfangreicher als bei Pencil. Ein tolles Feature: Elemente wie Menüs oder Schaltflächen können jederzeit „ausgefahren“ werden, um verschachtelte Menüstrukturen oder Klickpfade aufzuzeigen. Ähnlich wie bei Pencil funktioniert wieder die Interaktion: Buttons & Co. können auf Unterseiten Ihres Projekts verweisen. Und auch der Export als HTML ist wieder möglich.

Allerdings bietet draw.io zudem eine Import- und Export-Anbindung an Services wie GitHub und Trello. Insgesamt ist draw.io aufgrund der vielen Funktionen und der riesigen Bibliothek mit etwas mehr Einarbeitung verbunden als Pencil, aber in jeder Beziehung besser – sofern Arbeit online im Browser für Sie in Ordnung ist.

Wireframe.cc

Wireframe.cc läuft ebenfalls kostenfrei direkt im Browser, richtet sich aber auch nur an Entwickler für Browserinhalte, sprich Webseiten. Der Name verrät es, es handelt sich hier um recht schlichtes Wireframing, um Layouts von Webseiten zu visualisieren.

Konzept und Elemente sind dabei voll und ganz auf Geschwindigkeit getrimmt: Sie ziehen ohne jegliche Werkzeugauswahl einen Bereich auf und wählen erst dann, was dieser Bereich repräsentieren soll: Paragraf, Liste, Bild, Texteingabe, Titel, Text, eine Box, Scrollbar, Combobox oder Fortschrittsbalken.

Achtung: Einige Elemente, etwa der Fortschrittsbalken, stehen nur zur Verfügung, wenn Ihr gezeichneter Bereich in etwa der Form entspricht – der Fortschrittsbalken taucht als Option nicht auf, wenn Ihr Bereich schmal und hochkant ist.

Mit diesen wenigen Möglichkeiten lassen sich keine großen Projekte bewerkstelligen und klickbar ist so ein Wireframe ebenfalls nicht – dafür müssten Sie die Bezahlvariante nutzen. Aber um mal eben für ein Meeting ein paar Varianten von Website-Layouts zu produzieren, ist das kostenfreie Wireframe.cc durchaus ein Gewinn.

MockFlow

Zu guter Letzt zeigt MockFlow noch einmal das typische Preismodell von Software auf, die sich an Profis wendet: Die Arbeit an einem Projekt ist kostenfrei, alles andere läuft per Abo. Dank einer großen Bibliothek lohnt sich ein Blick für einzelne, kleinere Projekte aber dennoch.

Die Arbeit entspricht weitgehend draw.io: Auf mehreren Seiten/Bildschirmen verteilen Sie Schaltflächen, Menüs, Formulare, Material-Design-Elemente, Windows-10- oder Flow-Chart-Bausteine – das Angebot ist mehr als ausreichend. Auch klickbare Mockups sind im kostenfreien Modus inbegriffen.

MockFlow entspricht in der kostenlosen Version weitgehend draw.io. Allerdings gibt es hier noch ein rudimentäres Kanban-Board, nützlich zum Organisieren der eigenen Arbeit. Die Anbindung an Online-Dienste wie GitHub gibt es allerdings nicht, der Export ist hier konventionell gehalten: Office, PDF und HTML.

Alles in allem ist MockFlow selbst in der Gratisversion noch ein mächtiges Werkzeug, die Benutzeroberfläche allerdings bisweilen jedoch etwas verwirrend, die Darstellung der vielen Elemente in der Bibliothek unübersichtlich. Dafür gibt es nette Kleinigkeiten.

Ein Beispiel: Die digitalen Post-It-Gegenstücke zum Anpinnen verfügen über zwei Pfeile, die direkt auf grafische Elemente gezogen werden können – wird ein Klebezettelchen oder Element verschoben, bleibt die Pfeilspitze dennoch auf dem Element. Ein schönes Feature, das draw.io allerdings auch beherrscht.

Wer mockupt am besten?

Alle Tools haben Ihre Daseinsberechtigung, aber es ist vor allem draw.io, das wirklich gefällt: Die Bibliothek hat wirklich einige Highlights, die Nutzung ist extrem simpel und vor allem ist draw.io echte Freeware. Wireframe.cc zieht seinen Reiz vor allem aus der brutalen Einfachheit, schneller bekommt man ein vernünftig aussehendes Website-Layout vermutlich nicht hin.

Pencil kann zwar nicht ganz mit dem Funktionsumfang geschweige denn den Bibliotheken von draw.io und MockFlow mithalten, ist aber der einzige Kandidat, bei dem Ihre Daten lokal auf Ihrem Rechner bleiben und der Quellcode offen liegt. MockFlow wiederum könnte höchstens dann erste Wahl sein, wenn Sie gegebenenfalls vor haben, auf eine Bezahlversion umzusteigen, da dann einige Features hinzukommen – allerdings bekommt MockFlow jede Menge Konkurrenz, wenn tatsächlich Geld fließen darf.

Letztlich unterscheiden sich die Tools vor allem in Kleinigkeiten und der Bibliothek. Die grundsätzliche Bedienung ist bei allen Kandidaten weitgehend identisch und auch die möglichen Ergebnisse ähneln sich sehr. Draw.io sollten Sie sich aber auf jeden Fall anschauen, da es auch für viele Aufgaben abseits von Mockups perfekte Tools bietet.

(ID:46176044)