Wireframe mit Salz

Im Büro habe ich mit der Arbeit an einer neuen internen Anwendung begonnen, bei der es um die Verwaltung von Pfarrstellen geht. Das wurde bisher mit einem Excel-Sheet gemacht, bei dem keiner mehr durchblickt. Ein Teil der Spezifikation ist auch der UI-Entwurf, damit einerseits die Auftraggeberin (Fachabteilung) eine Idee von der Gestaltung der Benutzeroberfläche bekommt und mitreden kann, und andererseits das Entwicklungsteam sieht, wie das User Interface so ungefähr aussehen soll.

In früheren Projekten habe ich dafür das Werkzeug Bleistift verwendet, in dem man die UI als Wireframe “malt”. Da ich ein Freund von deklarativen Grafiken bin, wollte ich dieses Mal etwas anderes ausprobieren. Beim Erstellen von deklarativen Grafiken, malt man nicht, sondern beschreibt mit Text (Pseudo-Code), was gemalt werden soll. Ich habe bereits mehrere Artikel dazu geschrieben. Das Stichwort heißt PlantUML mit dem dazugehörigen Herausgeber, in dem man das ausprobieren kann. Wie der Name “PlantUML” vermuten lässt, handelt es sich überwiegend um Grafiken der Unified Modeling Language. Doch PlantUML unterstützt wesentlich mehr Formate als nur UML-Diagramme.

Eines davon hei&szligt Salz und dient dem Erstellen von UI-Wireframes. Obwohl es auf der Webseite viele Beispiele gibt, ist das Anlegen eines vollständigen Fensterentwurfs nicht offensichtlich. Deshalb nutze ich die Gelegenheit, in diesem Artikel ein Beispiel zu entwickeln. Leider bietet Salt nicht alle UI-Elemente, die man sich wünscht, aber man kann sich etwas “zurecht frickeln”.

Los geht’s. Ziel ist es, den UI-Entwurf eines typischen Anwendungsfensters zu bauen. Die nun gezeigten Beispiele habe ich alle mit dem PlantUML-Editor online erstellt.

Auf der linken Seite seht ihr den beschreibenden Text und rechts das grafische Ergebnis. Ein Salz-Diagramm beginnt immer mit @startsalt und endet mit @endsalt. Dazwischen könnt ihr mit den geschweiften Klammern Hierarchieebenen der UI-Elemente erzeugen. Die Angabe von scale vergr&ouml&szert die grafische Darstellung und title ist selbsterklärend. Das Pluszeichen nach der ersten Klammer zeichnet einen Rahmen um die in den Klammern enthaltenen Elemente.

Nun füge ich eine Kopf- und Fusszeile hinzu und erweitere den inneren Bereich.

Editor wird beim automatischen Update der Grafik umso langsamer, je mehr Inhalte man hat. Alternativ könnt ihr auch PflanzenText verwenden, der ist schneller und rendert auf Knopfdruck anstatt automatisch.

Ich baue das Beispiel nicht weiter aus; es sollte genügen, um das Prinzip zu verstehen zu können.

Fazit

Mir gefällt Salz als deklarative Sprache für UI-Mockups gut. Die gerenderte Grafik lässt sich in verschiedenen Formaten (z. B. SVG) exportieren und leicht in Spezifikationsdokumente einbinden. Wenn man den Code einmal verstanden hat, geht das Erstellen von UI-Entwürfen viel schneller von der Hand, als wenn man sie von Hand zeichnen kann. Ausserdem kann man den Code für weitere UI-Entwürfe wiederverwenden und schnell anpassen. Auch die Versionierung (Git) des Codes ist einfacher als bei einer gemalten Grafik.

Titelbild: https://pixabay.com/photos/ux-design-webdesign-app-mobile-787980/

Quellen: stehen alle im Text