Ein StyleExplorer für Justinmind-Prototypen

Im Rahmen des Eurostars Forschungsprojekts „Advanced Prototyping Platform“ kurz APP entwickelt die SIC! Software GmbH ein StyleExplorer-Tool für Justinmind Prototypen.

Während der Konzeptionsphase einer Softwareanwendung werden verschiedene Konzept- und Styleguide-Dokumente für Kunden und zur späteren Implementierung für Entwickler erstellt. Diese basieren häufig auf erstellten Prototypen. Hierbei ist es immer wieder aufwendig benötigte Grafiken sowie Layout- und Styleinformationen wie Abstände, Schriftgrößen und Farben in einer aufbereiteten Form, direkt aus dem Prototypen zu extrahieren. Um diese Informationen dennoch zu erhalten muss oftmals mit exportierten Bildern oder Screenshots und weiteren Tools wie Photoshop oder Illustrator gearbeitet werden. Das ist zum einen umständlich und führt zum anderen zu erhöhten Aufwänden.

Im Prozess einer effizienten und effektiven Bereitstellung entsprechender Grafiken sowie Layout- und Styleinformationen sehen wir ein großes Optimierungspotential. Deshalb haben wir es uns im Rahmen des APP-Projekts als ein Ziel gesetzt ein StyleExplorer-Tool für Justinmind-Prototypen zu entwickeln.

Während der Anforderungsanalyse zum StyleExplorer-Tool haben wir verschiedene Ansätze zur Umsetzung evaluiert. So zum Beispiel ein programmgesteuertes automatisches oder halbautomatisches Ausfüllen von Microsoft Word-Templates zur Erstellung eines Styleguides für Prototypen direkt über den Justinmind-Prototyper. Allerdings hat sich durch Befragungen von UI-Designern und Entwicklern schnell gezeigt, dass ein solch erstellter Styleguide zu unflexibel ist, um die unterschiedlichsten Ansprüche in Kundenprojekten zu erfüllen. Darüber hinaus ist eine Fixierung nur auf Microsoft Word Dokumente für Styleguides oder Konzept-Dokumente unrealistisch, da dafür auch andere Programme wie Adobe InDesign oder Microsoft PowerPoint verwendet werden.

Aus diesen Gründen haben wir uns dagegen entschieden ein Tool zu entwickeln, welches automatisch Dokumente in einem bestimmten Format generiert. Statt dessen wollen wir mit dem StyleExplorer Designern und Entwicklern ein Werkzeug in die Hand geben, mit dem sie einfach an die nötigen Style- und Layout-Informationen und Grafiken eines Justinmind Prototypen gelangen. Darüber hinaus sollen diese Informationen und Grafiken per Drag’n’Drop oder Copy&Paste in unterschiedliche Programme wie Microsoft Word bzw. PowerPoint oder auch Adobe InDesign exportiert werden können, so dass bei der Gestaltung der benötigten Dokumente selbst keine Grenzen gesetzt sind.

Nachfolgend ist ein Scribble abgebildet, wie wir die Umsetzung der Hauptarbeitsfläche des Tools planen, um relevante Grafiken und Informationen zu einem Prototype-Screen einfach zu extrahieren.

Scribble-StyleExplorer

Die Hauptarbeitsfläche wird automatisch angezeigt, sobald ein Justinmind-Prototyp über das Tool geöffnet wird. Die Arbeitsfläche ist in drei Bereiche aufgeteilt: Toolbar oben, Screen-Anzeige links und in Informationsbereich rechts.

Für den ersten Bereich die Toolbar sind folgende Funktionen angedacht.

  • Wechseln des angezeigten Screens
  • Einstellen des Zoom-Levels zur Anzeige des Screens
  • Anpassung des Fixpunktes zur Bestimmung der Position eines Elements innerhalb des Screens
  • Freie Auswahl einer bestimmte Farbe vom Screen über einen Color-Picker

Nachfolgend ist häufig vom Begriff „Element“ die Rede. Dabei handelt es sich um ein Gestaltungselement auf einem Screen eines Prototypen. Das kann zum Beispiel ein Label, ein Button, eine Grafik, eine Bar oder Ähnliches sein.

Im zweiten Bereich wird der ausgewählten Screen angezeigt. Folgende Funktionen sollen unterstützt werden.

  • Annähernd originalgetreue Darstellung des Justinmind Prototype-Screens
  • Selektieren und Deselektieren von Elementen
  • Hervorhebung des selektierten Elements
  • Einzeichnen der Position abhängig vom gesetzten Fixpunkt
  • Unterstützung für Drag’n’Drop und Copy&Paste einzelner Elemente, Gruppen von Elementen und des ganzen Screens mit und ohne eingezeichneter Positionierung.
  • Freie Verschiebung des Fixpunktes zur Bestimmung der Position eines Elements

Der dritte Bereich unterteilt sich in einen Info-Bereich und die Outline. Im Info-Bereich werden die Eigenschaften des aktuell selektierten Elements angezeigt. Folgende Funktionen sollen unterstützt werden.

  • Gruppierung der Eigenschaften nach: Position und Größe, Schrift, Rahmen, Hintergrund sowie Padding
  • Darstellung der Eigenschaften als Einzelwerte
  • Zusammenfassung der Werte einer Gruppe zu einer Kurzfassung
  • Unterstützung für Drag’n’Drop und Copy&Paste von Einzelwerten sowie der Kurzfassungen

Die Outline stellt die Struktur und den Aufbau des Screens aus den unterschiedlichen Element dar. Folgende Funktionen sollen in der Outline unterstützt werden.

  • Abbildung des Screen-Aufbaus in einer Baumstruktur
  • Selektieren und Deselektieren eines Elements

Aktuell befindet sich das Tool in der Umsetzungsphase und wir hoffen bald eine erste Version präsentieren zu können. Als Plattform haben wir uns für JavaFX entschieden. So basiert das Justinmind SDK auf Java wodurch dieses einfach in das Tool integriert werden kann. Weiterhin bietet JavaFX Vorteile beim Erstellen des UIs durch bessere Tools wie den SceneBuilder gegenüber Swing zumal JavaFX der offizielle Nachfolger von Swing werden soll. Darüber hinaus ist seit Java 8 die JavaFX-Laufzeitumgebung  in der Java Runtime Environment direkt enthalten, wodurch auch schon jetzt auf vielen System JavaFX-Anwendungen direkt ausgeführt werden können. Zum Abschluss noch ein Screenshot vom aktuellen Stand. Im Hintergrund ist ein Screen eines Prototypen innerhalb Justinmind zu sehen und dieser Screen wird im StyleExplorer angezeigt.

StyleExplorer-LiveDemo

 

Über das Eurostars Forschungsprojekt „Advanced Prototyping Platform“:

Die SIC! Software GmbH ist Projektpartner des Eurostars Projekts „Advanced Prototyping Platform“ (APP). Das Ziel des Projekts ist das Entwerfen, Prototypen und Simulieren komplexer Softwareanwendungen zu vereinfachen sowie den Prozess von der Anforderungsanalyse über die Konzeptionsphase bis zur Implementierungsphase zu optimieren.

Dazu sollen auf Basis der bekannten Prototyping-Umgebung Justinmind und dem zugehörigen Justinmind SDK verschiedene Plug-Ins und Softwaretools entwickelt werden. Als weitere europäische Projektpartner arbeiten wir mit den Prototype Experten Justinmind aus Barcelona, den AI Experten Taiger aus Madrid und den OpenData-Spezialisten OpenDataSoft aus Paris zusammen.

Webseite zum APP-Projekt: http://taiger.com/APP/

advanced_prototyping_platfrom_logo eurostars_logo

Bewerte diesen Beitrag
0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

  Newsletter abonnieren (Jederzeit wieder abbestellbar)