In den 1970er Jahren führte das Xerox Palo Alto Research Center in der Software Entwicklung Konzepte wie Fenster und Icons ein, die von Apple im Macintosh von 1984 bekannt gemacht wurden. Später trugen IBM, sowie Microsoft mit OS/2 und Microsoft mit der Einführung von Windows in den 1980er Jahren zur Verbreitung von GUIs bei. Auch Commodore mit dem Amiga und Atati mit dem Model ST entwickelten hervorragende GUIs.
Durch das Aufkommen des Internets mit HTML wurden in den 1990er Jahren webbasierte Oberflächen gefördert. Die mobile Revolution, angeführt durch Geräte wie Apples iPhone, prägte die 2000er Jahre mit der Entwicklung von Touchscreen-orientierten GUIs auf mobilen Geräten. Heute setzen moderne Trends in Bereichen wie KI, Augmented und Virtual Reality, sowie Responsive Design neue Maßstäbe. Dies ermöglicht eine immer nahtlosere Integration von Geräten und Plattformen.
Bei der Softwareentwicklung werden Skizzen, Wireframes, Mock-ups und Prototypen in verschiedenen Phasen des Designs verwendet, um Ideen und Konzepte zu visualisieren. Hier sind die Unterschiede:
Skizzen
Eine Skizze ist eine handgezeichnete oder grobe digitale Darstellung einer Idee. Ein Designer zeichnet schnell ein paar Striche auf ein Papier, um die grundlegende Anordnung von Elementen auf einer Seite darzustellen. In dieser frühen Phase können grundlegende Ideen gefunden werden.
Wireframes
In dieser Phase der Konzeption werden die Struktur und Funktionalität definiert. So folgt eine detailliertere, schematische Darstellung der Benutzeroberfläche in Schwarz-Weiß. Ein Wireframe zeigt die Position von Menüs, Schaltflächen und Textblöcken, aber noch ohne Farben oder Bilder.
Mock-ups
Nun wird die Designphase genutzt, um das visuelle Erscheinungsbild zu entwickeln. Eine realistische, aber statische Darstellung des Designs mit Farben, Bildern und Typografie wird gesucht. Ein Mock-up einer mobilen App zeigt, wie die Endversion aussehen könnte, ist aber nicht interaktiv.
Prototypen
Die letzte Entwicklungsphase nutzt Prototypen, um Benutzerinteraktionen zu testen und Feedback zu sammeln. Es wird eine funktionierende Simulation des Produkts, die Interaktion ermöglicht. Ein Prototyp, auf dem Nutzer klicken können, um durch die Seiten zu navigieren und erfahren, wie die GUI in der Endversion sein wird.
Fazit
Insgesamt sind diese Tools Schritte in einem Prozess, der von einer groben Idee (Skizze / Stetch) über ein strukturiertes Layout (Wireframe) und ein realistisches Design (Mock-up) bis hin zu einer funktionierenden Version (Prototyp) reicht, die die endgültige Benutzererfahrung simuliert.