Wireframes als Schnittstelle zwischen Konzeption und Umsetzung
Was sind Wireframes?
Wireframes sind ein früher konzeptioneller Entwurf einer Website oder App. Mit einem Wireframe lassen sich die inhaltliche Struktur und die Interaktionsmöglichkeiten einer Einzelseite bzw. eines Screens visualisieren. Dabei geht es vor allem um die Anordnung und Positionierung der einzelnen Elemente, noch nicht um die konkrete visuelle Gestaltung. Grafische Gestaltungsmittel wie Farben, Formen, Bilder oder Typografie spielen hier noch keine Rolle. Als Schnittstelle zwischen Konzeption und Umsetzung dienen sie einerseits als Blaupause für die Umsetzung des visuellen Designs, andererseits aber auch als visuelle Hilfestellung für die Programmierung der konzipierten Funktionen.
Wireframes legen den Fokus darauf, wie eine Web-App oder Website aufgebaut ist und funktioniert, nicht wie sie aussieht.
Welche Arten von Wireframes gibt es?
Grundsätzlich kann zwischen Low-Fidelity- & High-Fidelity-Wireframes unterschieden werden. Low-Fidelity-Wireframes abstrahieren sehr stark und zeigen grafische Platzhalter anstelle von konkreten Inhalten. High-Fidelity-Wireframes sind komplexer ausgearbeitet. Hier werden z. B. realistische Textmengen und klar definierte Interaktionsflächen platziert. High-Fidelity-Wireframes können so auch für einen frühen Click-Dummy verwendet werden.
Wie setzen wir Wireframes ein?
Wir setzen bei allen Web-Apps und Websites auf die Entwicklung von Hi-Fidelity Wireframes. So können wir gemeinsam mit unseren Kunden fokussiert und effektiv die gewünschten Inhalte und Funktionen auf einer visuellen Ebene konzipieren und optimieren, bevor wir die tatsächliche Umsetzung angehen.
Wireframes sind bei uns eines der Endprodukte der Konzeptionsphase und eines der wichtigsten Zwischenergebnisse für die weitere Umsetzung unserer digitalen Produkte. Wir nutzen sie in der Regel auch als Grundlage für einen ersten klickbaren Prototypen. Im nächsten Schritt versuchen wir, gemeinsam mit unseren Kunden die Wireframes soweit wie möglich zu optimieren, um für die Umsetzung möglichst konkrete Anforderungen definieren zu können.
Wie erstellen wir unsere Wireframes?
Aktuell arbeiten wir unsere Wireframes mit der Design-Software Sketch aus. Für die effektive Visualisierung haben wir uns eine eigene umfangreiche Komponenten-Bibliothek mit flexibel wiederverwendbaren Elementen aufgebaut. Mithilfe der enthaltenen Prototyping-Funktionen erstellen wir Click-Dummys, die unseren Kunden über die Sketch-Cloud zur Verfügung gestellt werden.