Image
Insights 2014 | Person sitzt vor dem Bildschirm

Wireframes für Webseiten und Apps

Wireframes skizzieren den Aufbau und die wichtigsten Funktionen einer Website. Sie klären für Entwickler und Kunde frühzeitig das, was eine Internetpräsenz leisten soll. In der Konzeptionsphase für eine neue Website stehen Überlegungen zu Struktur, Seitentypen und Funktionalitäten im Vordergrund. Diese Daten werden gemeinsam mit dem Kunden zum Beispiel in einem Workshop erarbeitet und im Anschluss in Wireframes visuell skizziert.
Freitag, 21. März 2014

Wireframes definieren alle Elemente, die eine Website enthalten soll: Navigation, Inhaltsbereiche, logischer Aufbau von bestimmten Funktionen und die Anordnung dieser Elemente – was ist wichtig und was muss prominent platziert werden. Dabei geht es noch nicht darum, wie die neue Website aussehen soll. Farben, Schriftarten, Texte, Bilder, Video, etc. spielen in diesem Prozess noch keine Rolle. Der Kunde kann sich damit voll und ganz auf den Inhalt der Webseite konzentrieren, ohne vom Design abgelenkt zu werden.

Wireframes sind jedoch nur für spezielle Seiten notwendig – bspw. Startseite, Gabelseiten, Bildergalerien, Newsletter-Anmeldung (Formularseiten). Einfache Textseiten ergeben sich aus der Grundstruktur der entwickelten Wireframes und müssen nicht zusätzlich skizziert werden.

In unserer Konzeptphase arbeiten wir überwiegend mit statischen Wireframes. Dafür gibt es unterschiedliche Tools wie zum Beispiel Balsamiq, Grafikprogramme wie Photoshop oder aber auch Paperprototyping, wo mit Papier, Stift und Schere Elemente ausgeschnitten und skizziert werden.

Image
Insights 2014 | Wireframe Skizze

Bei Letzterem werden einzelne Vorgänge/Funktionen in Originalgröße (bspw. für Mobile) nachgebaut und haptisch nacherlebt. Das ist vor allem bei der App-Gestaltung wichtig, um den Weg des Klickens zu erfassen und die Usability zu testen.

Wireframes dienen zur Ergänzung oder Vorarbeit für die Erstellung eines Pflichtenheftes, das sämtliche strukturelle und technische Funktionen einer Websites enthält. Das Pflichtenheft dient als Vorlage für die Programmierung und das Design. Grundsätzlich sind die Wireframes verbindlich und müssen vom Kunden freigegeben werden. Die Entwicklung einer Website ist jedoch kein statischer Prozess. Nicht immer sind alle Situationen in der Konzeptionsphase abdeckbar. Kleinere Änderungen sind auch in der Design- und Programmierphase möglich, wo die Wireframes angepasst werden.

Wireframes auf einen Blick:

  • neue Strukturen und Interfaces können unkompliziert veranschaulicht werden
  • das Verhalten von Responsive Webdesign kann einfach simuliert und erklärt werden
  • schnelleres Anpassen der Struktur einzelner Seiten (da keine umständlichen Layoutanpassungen am fertigen Design nötig sind)
  • klare Vorgaben für den Gestalter
  • dient zur Absicherung für Kunden und Agentur, um Missverständnisse und doppelte Arbeit zu vermeiden
  • sind die Wireframes abgenommen, können im nächsten Schritt Design und die funktionale Programmierung parallel laufen
Autorin: Daria Schrader (Senior UX/UI Designerin)

Katja Karina Kapelle

Katja schreibt, konzipiert und kontaktet im publicgarden. Hier bloggt sie zu Themen und Fragestellungen aus der Projektarbeit, die für Kunden im Print- und Onlinebereich immer wieder relevant sind.

Image
Katja bei publicgarden