User-Interface-Design mit Wireframes
In einer fachlichen Spezifikation ist das geschriebene Wort – wie auch in anderen Bereichen – dehnbar. Aus diesem Grund wird in Spezifikationen gerne visualisiert, beispielsweise durch den Einsatz von UML. Für die Beschreibung von User Interfaces (UI) bietet es sich hier an, die Spezifikation mit Grafiken anzureichern. Für die Erstellung dieser UI-Grafiken wird gerne Photoshop benutzt. Dies hat jedoch zum einen den Nachteil, dass dies sehr aufwändig sein kann und zum anderen wird gerne zunächst die Ästhetik diskutiert. Wir alle kennen die Aussage „die Farben gefallen mir aber noch nicht so sehr“ obwohl in diesem frühen Stadium zuerst das Fachliche geklärt werden sollte. Aus diesem Grund benutzen wir bei exensio zuerst Wireframes. Diese werden dann – wenn die fachlichen Fragen in Bezug auf das UI geklärt sind – mittels Photoshop reingezeichnet bzw. als HTML Prototyp umgesetzt.
Was sind Wireframes?
Ein Wireframe ist die konzeptionelle Darstellung eines UI-Prototypen. Diese werden bewusst in schwarzweiß gehalten, um ästhetische Fragen zu unterbinden. Wireframes können per Hand oder toolunterstützt gezeichnet werden. Wir bei exensio benutzen hierzu das Tool Balsamiq Mockups [1]. Es erlaubt die Gestaltung von sehr komplexen UIs mit einer einfachen und intuitiven Oberfläche.
Links
[1] Balsamiq Mockups