GUI-Entwurf

GUI-Seiten mit Wireframes und Mockups entwerfen

Im Design-Prozess einer GUI nutzen wir Wireframes für den Entwurf der Struktur und Gliederung und Mockups, um erste visuelle Eindrücke zu erhalten. In diesem Artikel werden die Rolle von Wireframes und Mockups beschrieben, gängige Bedienelemente und Darstellungsformen für Daten vorgestellt, das Skizzieren und Bewerten eines Mockups Schritt für Schritt gezeigt und einige Tools vorgestellt, mithilfe derer Wireframes und Mockups erstellt werden können.

Navigation in Benutzerschnittstellen mit UML-Zustandsdiagrammen planen

Der Ablauf des Geschäftsprozesses steht fest, jetzt geht es darum, die einzelnen Masken zu modellieren. Jede Maske repräsentiert dabei einen Zustand, den die Benutzeroberfläche einnimmt. Diese Zustände und deren Übergänge werden mit einem UML-Zustandsdiagramm geplant, hierfür gibt es einige Kniffe, um bei größeren Seitenkomplexen eine übersichtliche Modellierung sicherzustellen (Teil der Artikelserie zur Gestaltung und Entwicklung von Benutzeroberflächen für Geschäftsprozesse).