Wireframe, Mockup, Software-Entwicklung, GUI-Elemente, Oberfläche
Visuelle Kommunikation zwischen Kunde und Software-Entwicklung
Ein Software-Projekt wird nur dann erfolgreich verlaufen, wenn der Kunde und der Software-Entwickler eine gemeinsame Sprache finden. Am Anfang der Zusammenarbeit ist dies besonders wichtig, aber so kurz nach dem ersten Kennenlernen auch schwierig.
Ein Software Projekt startet mit der Aufnahme der Anforderungen. Dabei eignet sich der Software-Entwickler viel Fachwissen von seinem Kunden an. Anschließend setzt er das gelernte um und gestaltet ein neues Programm. Neben technischen Aspekten spielt hierbei das Aussehen der Software eine übergeordnete Rolle.
Wireframes
Tatsächlich führt eine klar strukturierte und durchdachte Oberfläche oft auch zu einem funktional überzeugenden Programm. Als Hilfsmittel kommen hierbei die sogenannten Wireframes zum Einsatz. Es handelt sich hierbei um Bilder, die das Aussehen der späteren Software visualisieren. Dabei unterscheidet man Wireframes und Mockups. Wireframes (englisch: Drahtgerüst) beschränken sich ähnlich wie das Drahtgittermodell einer Form auf die Anordnung und die Funktion der GUI-Elemente.
Mockups
Im Unterschied dazu kommen Mockups einem visuellen Prototyp der zu erstellenden Software nahe. Sie vermitteln einen Eindruck für die Funktion und das Aussehen eines Programms. Dabei spielt es keine Rolle, ob es sich um eine Desktop- eine Web- oder eine mobile Anwendung handelt.
Von Anfang an gut geplant
Interaktive Wire Frames und Mockups
Wire Frames und Mockups sind in erster Linie Bilder, die zwischen dem Kunden und dem Software-Entwickler ausgetauscht und besprochen werden können. Man kann auf die Elemente der Bilder zeigen und darüber diskutieren. Das erleichtert die Kommunikation. Bei dynamischen Wireframes oder Mockups sind zusätzlich auch klickbare Bereiche markiert. Damit lässt sich beispielsweise simulieren, dass bei einem Klick auf einen Button eine neue Webseite geöffnet wird. Damit kommt man der User Experience der späteren Anwendung schon recht nah.
Die folgende Tabelle enthält einige Programme, die das Erstellen von Wire Frames und Mockups unterstützen:
| Name | URL | Vor- und Nachteile |
| Evolus Pencil | https://pencil.evolus.vn/ | + Kostenlose Desktop-Anwendung.
+ Klickbare Bereiche. – Muss installiert werden. |
| InVision | https://www.invisionapp.com/
|
+ Ein kostenloses Projekt.
+ Klickbare Bereiche. + Mockups werden klickbar im Web zur Verfügung gestellt. |
| Axure RP | https://www.axure.com/ | + Installierbare Desktop-Anwendung
+ Teilweise programmierbares Verhalten – 30-Tage-Testversion, danach kostenpflichtig (teuer). |