Grafische Oberflächen (GUI) entwerfen

Als jemand, der Webseiten entwickelt, Skripte mit grafischer Oberfläche für FixFoto schreibt oder hin- und wieder einfach nur eine Argumentationshilfe benötigt, um Softwareentwickler für die eigene Idee zu begeistern, habe ich lange insgeheim nach einem Tool gesucht, mit dem es einfach nur möglich ist, Oberflächen zu gestalten. Und mit den Möglichkeiten zu spielen, die entsprechenden Elemente mal hierhin und mal dahin zu schieben.

Da ich nicht wusste, wie der entsprechende Fachbegriff lautet, habe ich meine Entwürfe bisher in Programmen gemacht, mit denen es eher umständlich ist.

Vor einiger Zeit bin ich auf das Tool Pencil gestoßen, habe es installiert und ein wenig herumprobiert. Und festgestellt, dass es genau das ist, was ich brauche!

Wie ich gelernt habe, ist Pencil ein Prototyping Tool, also ein Programm, mit dem man einen Prototyp einer grafischen Oberfläche gestalten kann. Für den Screenshot habe ich mal fix die Oberfläche meines FixFoto-Skripts “Bildausschnitt” nachgebaut, um zu zeigen, was möglich ist.

Die einzelnen Elemente, wie Schaltflächen, Eingabefelder, Scrollbalken, Comboboxen, aber auch Bilder oder sonstige Formen werden im Programm als “Stencil”, also Schablone bezeichnet. Eine Collection (also Sammlung) umfasst mehrere zueinander passende Stencils.

Standardmäßig werden einige Collections mitgeliefert. Weitere können von der Programmhomepage heruntergeladen und nachinstalliert werden. Je nach Collection ist es möglich, den einzelnen Elementen Stile zuzuordnen. So können beispielsweise Eingabefelder auf inaktiv geschaltet werden oder Dialogfenster mit oder ohne Minimieren-, Maximieren- oder Schließen-Schaltfläche angezeigt werden. Oder mit Schatten.

Die Collection, die ich für den Screenshot verwendet habe, nennt sich “Sketchy GUI”. Im Gegensatz zu den anderen Collections, die beispielsweise die Standard-Windows-Elemente abbilden, zeigt diese sehr schön den Entwurfscharakter. Ich habe nämlich die Erfahrung gemacht, dass sich die Diskussion nicht mehr den Inhalt eines frühen Entwurfs dreht, sondern um die Form. Um dem entgegen zu wirken, erstellt man den Entwurf so, dass die späteren Farben und Schriften noch nicht enthalten sind. Ist im Prinzip so, als würde man den Entwurf schnell mal eben per Bleistift oder Kuli auf ein Blatt Papier kritzeln.

Pencil unterstützt die gängigen Möglichkeiten, Elemente zu positionieren, in den Vorder- oder Hintergrund zu holen, auszurichten, zu gruppieren oder zu sperren. Was ich besonders hilfreich finde, sind die Hilfslinien, die angezeigt und an die das momentan verschobene Element angedockt werden kann.

Einzelne oder gruppierte Elemente können in eigenen Collections abgelegt werden, um sie bei Bedarf schnell zur Hand zu haben. Diese Collectionen lassen sich auch exportieren und somit weitergeben.

Wer viel mit Grafiken arbeitet, wird die eingebaute Schnittstelle zur Open Clipart Library zu schätzen lernen.

Damit ist es sehr einfach möglich, eine passende Grafik aus der mittlerweile über 26000 Cliparts zählenden Sammlung zu verwenden. Einfach oben einen Suchbegriff eingeben, dann warten, bis die Vorschaubilder aufgebaut sind und die passende Grafik auf das Arbeitsblatt ziehen. da die Cliparts alle im SVG-Format vorliegen, können sie verlustfrei vergrößert und verkleinert werden.

Fertige Entwürfe können im programmeigenen Format gespeichert werden. Die einzelnen Tabs können als PNG, einzelne Website, PDF, SVG oder als OpenOffice-Dokument (*.odt) ausgegeben werden. Auch das Drucken der jeweiligen Seite ist möglich.

Pencil ist auf englisch und für Windows, Linux und Mac OS verfügbar. Es gibt auch ein Add-On für Firefox, was das Programm direkt in den Browser einbindet.

Update vom 29.11.2012:
Die neue Version 2.0.3 bringt jetzt GUI-Elemente für iOS und Android mit. Die Oberfläche wurde überarbeitet und das Programm verlangt beim Starten unter Windows 7 und 8 jetzt nicht mehr nach Adminrechten.