Wireframes

Wireframes (Drahtgestell) sind strichartig gezeichnete User Interface Ansichten. Jeder Screen enthält bereits sämtliche Bedienungselemente, nicht jedoche das fertige Design. Auf Bilder und die realen CD Farben wird bewusst verzichtet. Die interaktiven Elemente werden über Linien und Pfeile mit weiteren Screens verbunden. Dadurch entsteht ein komplettes Ablaufdiagramm. Sämtliche Screens und Dialoge sind darin enthalten. Selbst für reine Desktop Anwendungen emfehle ich die Darstellung mit Smartphone Screens. Dies erzwingt durch den Platzmangel ein besseren UX Design.

Mit vorgefertigten Sketch Elementen erstelle ich effizient Wireframes inklusive Ablaufdiagramm für mobile Apps und Web-Applikationen

Vorgehensweise bei der Entwicklung von Wireframes

Die Entwicklung der Wireframes erfolgt in mehreren Interationen. An regelmässigen Treffen mit Auftraggeber und Entwickler werden die bereits erstellten Wireframes besprochen und die nächsten Schritte geplant. Am Ende soll eine komplette Abbildung der Applikation entstehen inklusive sämtlicher Dialoge und Fehlermeldungen. Die fertigen Wireframes zeigen oft in überaschenderweise die komplexität eines UX Designs auf.

Wann braucht es Wireframes

Bei der Entwicklung komplexerer Applikationen sind Wireframs sehr hilfreich. Besonders wenn es sich um eine Neuentwicklung oder gewünschte Verbesserung eines UX Design handelt. Soll lediglich das UI Design aufgefrischt werden sind Wireframes nicht notwendig.

Die Vorteile von Wireframes

Es hat sich gezeigt dass die investierte Zeit in die Entwicklung von Wireframes beim späteren User Interface Design wieder eingespart wird. Da man sich dabei nur noch auf das Design konzentrieren muss. Das Wireframe-Ablaufdiagramm ist zudem sehr Hilfreich beim einholen von Offerten oder für die technische Umsetzung.

  • Hilfe bei der Entwicklung besserer UX Abläufe
  • Effizientere und bessere Gestaltung des UI Design
  • Festhalten und aufzeigen der kompletten Konzeption einer Applikation
  • Verwendung bei Aufwandschätzungen und Offertstellungen
  • Verwendung bei der technischen Umsetzung der Applikation

Sie erhalten von mir:

  • Vektorfile mit Wireframes
  • Gedruckte Version (bis 84.1 cm x 118.9 cm)
  • Legende, Beschreibung (Google Sheet)