Ein Wireframe ist eine Art Grundriss einer mobilen oder Desktopanwendung. Er bildet die strukturell wichtigen Elemente der Anwendung mit simplen Formen (Rechteck, Kreis etc.) ab. Alle Elemente sind zudem meist in Schwarz-, Weiß- und Grautönen eingefärbt. Auf diese Weise kann unabhängig von einem konkreten Design auf das Layout und die User Experience (UX) einer Seite geachtet werden. Dies ist besonders praktisch, wenn es noch keinen finalen Styleguide gibt, an den man sich halten könnte.
Generell bietet ein Wireframe eine gute Möglichkeit mit dem Team oder dem Auftraggeber über das Produkt ins Gespräch zu kommen. So können ein gemeinsames Verständnis erreicht und zentrale Punkte, wie z.B. der Interaktionsablauf oder die Navigation, geklärt werden. Wenn der Auftraggeber Änderungswünsche hat, können diese in der Wireframing Phase leicht aufgenommen werden.
Mit einem Wireframe können zudem bereits erste User Tests durchgeführt werden. Diese frühen User Tests unterstützen das Team darin, ein gutes Produkt zu entwickeln, da früh Verbesserungspotenzial und problematische Stellenerkannt werden.
Die Erstellung und Bearbeitung von Wireframes geht aufgrund der fehlenden Detailtiefe recht schnell und ist somit kostengünstig. Damit bietet es sich an, möglichst viele Tests und Änderungen bereits in dieser Projektphase durchzuführen.
Erstellung eines Wireframes
Was ist der Unterschied zwischen einem Wireframe und einem Mockup?
Wireframes und Mockups unterscheiden sich in erster Linie darin, wie realistisch sie ein Produkt repräsentieren.
Ein Wireframe (dt. Draht(gitter)modell) ist eher realitätsfern und konzentriert sich nur auf das Layout der einzelnen Elemente. Im englischen Sprachgebrauch wird von einer "low fidelity" (niedriger Realitätsnähe) gesprochen. Ein Wireframe kann mit Stift und Papier oder mit einfachen Programmen erstellt werden. Er bildet die Elemente in schwarz, weiß und grau ab.
Ein Mockup (dt. Modell / Nachbildung) ist im Gegensatz dazu realitätsnah und bildet nicht nur das Layout, sondern auch das Design ab. Dies wird als "high fidelity" (hohe Realitätsnähe) bezeichnet. Ein Mockup wird mit Designprogrammen wie z.B. Adobe Photoshop entworfen. Alle enthaltenen Elemente werden im realen Produktdesign dargestellt. Wenn bereitsein finales Design existiert, wird dies übernommen, ansonsten kann ein solches über die Mockups entwickelt werden. Dies bietet zudem den Vorteil, dass die Designelemente direkt im Kontext überdacht werden können (Harmonieren die Farben? Ist die Schrift gut lesbar?). Da das finale Design sowohl das Produkt als auch die Firma repräsentiert, sollte hier erneut auf die Nutzbarkeit, aber auch auf die Wirkung des Produkts geachtet werden.
Insgesamt fokussiert sich ein Wireframe also auf das Layout, während ein Mockup das gesamte Design repräsentiert. Aus diesem Grund wird ein Wireframe eher von einem UX- und ein Mockup eher von einem UI-Designererstellt.
Zwei weitere Punkte, in denen sich die beiden unterscheiden, sind Kosten und Änderbarkeit. Aufgrund der Einfachheit des Wireframes ist dieses günstiger zu entwerfen und leichter zu ändern. Ein Mockup nimmt beim Erstellen und Anpassen mehr Zeit in Anspruch und ist somit teurer.
Auch wenn die Begriffe Wireframe und Mockup oft synonym verwendet werden, so sind es doch zwei recht verschiedene Darstellungsweisen. Da das Design einen erheblichen Einfluss auf die User Experience nimmt, nach Wireframes auch immer noch Mockups zu erstellen. Mit diesen können dann dieselben User Tests erneut durchgeführt werden, bevor in die nächste Phase des Projekts übergegangen wird.
Beispiel Wireframe
Wie erstelle ich ein Wireframe?
Das Grundprinzip beim Erstellen eines Wireframes ist "keep it simple". Fast alles kann mit einfachen Formen wie Rechtecken, Kreisen und Strichen dargestellt werden. Auf Icons und detaillierten Text sollte weitestgehend verzichtet werden. Das Ziel ist es, die Platzierung und Größe der einzelnen Elemente zu bestimmen, Designfragen lenken hier nur ab.
Oft ist es sinnvoll, ein Wireframe zuerst mit Papier und Stift zu entwerfen. Später kann dann auch eine digitale Form mit einfachen Programmen erstellt werden.
Da Wireframes nur aus grundlegenden Formen bestehen, können diese von jedem gezeichnet werden. Bei einem ersten Durchlauf geht es zudem nicht darum, direkt das perfekte Layout zu treffen. Vielmehr sollen verschiedene Anordnungen aufgemalt werden, um so Ideen zu generieren. Um diesen Ideenfindungsprozess weiter zu unterstützen, kann man die Kreativmethode „Crazy8“ zur Hilfe nehmen. In dieser wird ein Blatt Papier zunächst dreimal in der Mitte gefaltet, sodass acht gleich große Rechtecke entstehen. Danach werden innerhalb von acht Minuten alle Rechtecke mit unterschiedlichen Layouts gefüllt.
Je nach Projekt und Ziel kann diese Methode natürlich auch angepasst werden (mehr Zeit, weniger Rechtecke etc.). Aus den so entstandenen Varianten können im Anschluss Favoriten herausgesucht werden. Diese können dann im weiteren Verlauf verfeinert und konkretisiert werden. Das kann entweder erneut mit Stift und Papier oder unter der Zuhilfenahme eines Programms durchgeführt werden.
Eine digitale Version ist nicht nur einfacher an Kollegen oder Kunden zu versenden, sie ist auch leicht änderbar und unter Umständen besser verständlich. Wichtig ist hierbei, dass der Fokus nicht auf pixelgenaues Design gelegt wird. Es handelt sich immer noch um eine grobe Darstellung des Layouts und nicht um eine Nachbildung der fertigen Seite.
Es gibt verschiedene kostenpflichtige und kostenlose Programme, die die Erstellung eines Wireframes ermöglichen. Im Folgenden werden drei kostenlose Varianten beschrieben, die zudem alle für die gleichzeitige Bearbeitung von verschiedenen Personen ausgelegt sind.
Eine sehr einfache und einsteigerfreundliche Möglichkeit ist das Online Tool Excalidraw. Die Designmöglichkeiten sind hier zwar begrenzt, aber genau das macht dieses Tool so gut für Wireframes, da man sich nicht zu sehr mit Details aufhalten kann.
Ein weiteres Programm ist Miro, dass man nach kostenloser Registrierung nutzen kann. Miro hat seine eigene Wireframe Library, in der viele grundlegende Elemente sind. Damit ist es gut möglich ein Wireframe zusammenzustellen. Hier sollte man jedoch darauf achten, sich nicht zu sehr in Designfragen zu verlieren.
Eine dritte Option stellt Figma dar, für das ebenfalls eine kostenlose Registrierung möglich ist. Figma ist ein Tool mit sehr vielen Möglichkeiten, mit denen auch ganze Prototypen erstellt werden können. Damit ist es nochmal wichtiger, sich selbst im Design einzuschränken.
Wireframes mit den Tools Excalidraw, Miro und Figma
Fazit
Insgesamt lässt sich sagen, dass die Erstellung von Wireframes eine sehr zentrale Rolle in der Entwicklung einer Anwendung einnimmt. Wireframes bilden eine gute Gesprächs- und Testgrundlage, wodurch das konkrete Layout schnell überprüft und anschließend überarbeitet werden kann. Im weiteren Entwicklungsverlauf kann es dem Team zudem als Orientierung dienen und verkürzt damit den Entwicklungsprozess.
Der nächste Schritt im UX Prozess ist die Erstellung eines Prototyps.
Generell bietet ein Wireframe eine gute Möglichkeit mit dem Team oder dem Auftraggeber über das Produkt ins Gespräch zu kommen. So können ein gemeinsames Verständnis erreicht und zentrale Punkte, wie z.B. der Interaktionsablauf oder die Navigation, geklärt werden. Wenn der Auftraggeber Änderungswünsche hat, können diese in der Wireframing Phase leicht aufgenommen werden.
Mit einem Wireframe können zudem bereits erste User Tests durchgeführt werden. Diese frühen User Tests unterstützen das Team darin, ein gutes Produkt zu entwickeln, da früh Verbesserungspotenzial und problematische Stellenerkannt werden.
Die Erstellung und Bearbeitung von Wireframes geht aufgrund der fehlenden Detailtiefe recht schnell und ist somit kostengünstig. Damit bietet es sich an, möglichst viele Tests und Änderungen bereits in dieser Projektphase durchzuführen.
Erstellung eines Wireframes
Was ist der Unterschied zwischen einem Wireframe und einem Mockup?
Wireframes und Mockups unterscheiden sich in erster Linie darin, wie realistisch sie ein Produkt repräsentieren.
Ein Wireframe (dt. Draht(gitter)modell) ist eher realitätsfern und konzentriert sich nur auf das Layout der einzelnen Elemente. Im englischen Sprachgebrauch wird von einer "low fidelity" (niedriger Realitätsnähe) gesprochen. Ein Wireframe kann mit Stift und Papier oder mit einfachen Programmen erstellt werden. Er bildet die Elemente in schwarz, weiß und grau ab.
Ein Mockup (dt. Modell / Nachbildung) ist im Gegensatz dazu realitätsnah und bildet nicht nur das Layout, sondern auch das Design ab. Dies wird als "high fidelity" (hohe Realitätsnähe) bezeichnet. Ein Mockup wird mit Designprogrammen wie z.B. Adobe Photoshop entworfen. Alle enthaltenen Elemente werden im realen Produktdesign dargestellt. Wenn bereitsein finales Design existiert, wird dies übernommen, ansonsten kann ein solches über die Mockups entwickelt werden. Dies bietet zudem den Vorteil, dass die Designelemente direkt im Kontext überdacht werden können (Harmonieren die Farben? Ist die Schrift gut lesbar?). Da das finale Design sowohl das Produkt als auch die Firma repräsentiert, sollte hier erneut auf die Nutzbarkeit, aber auch auf die Wirkung des Produkts geachtet werden.
Insgesamt fokussiert sich ein Wireframe also auf das Layout, während ein Mockup das gesamte Design repräsentiert. Aus diesem Grund wird ein Wireframe eher von einem UX- und ein Mockup eher von einem UI-Designererstellt.
Zwei weitere Punkte, in denen sich die beiden unterscheiden, sind Kosten und Änderbarkeit. Aufgrund der Einfachheit des Wireframes ist dieses günstiger zu entwerfen und leichter zu ändern. Ein Mockup nimmt beim Erstellen und Anpassen mehr Zeit in Anspruch und ist somit teurer.
Auch wenn die Begriffe Wireframe und Mockup oft synonym verwendet werden, so sind es doch zwei recht verschiedene Darstellungsweisen. Da das Design einen erheblichen Einfluss auf die User Experience nimmt, nach Wireframes auch immer noch Mockups zu erstellen. Mit diesen können dann dieselben User Tests erneut durchgeführt werden, bevor in die nächste Phase des Projekts übergegangen wird.
Beispiel Wireframe
Wie erstelle ich ein Wireframe?
Das Grundprinzip beim Erstellen eines Wireframes ist "keep it simple". Fast alles kann mit einfachen Formen wie Rechtecken, Kreisen und Strichen dargestellt werden. Auf Icons und detaillierten Text sollte weitestgehend verzichtet werden. Das Ziel ist es, die Platzierung und Größe der einzelnen Elemente zu bestimmen, Designfragen lenken hier nur ab.
Oft ist es sinnvoll, ein Wireframe zuerst mit Papier und Stift zu entwerfen. Später kann dann auch eine digitale Form mit einfachen Programmen erstellt werden.
Da Wireframes nur aus grundlegenden Formen bestehen, können diese von jedem gezeichnet werden. Bei einem ersten Durchlauf geht es zudem nicht darum, direkt das perfekte Layout zu treffen. Vielmehr sollen verschiedene Anordnungen aufgemalt werden, um so Ideen zu generieren. Um diesen Ideenfindungsprozess weiter zu unterstützen, kann man die Kreativmethode „Crazy8“ zur Hilfe nehmen. In dieser wird ein Blatt Papier zunächst dreimal in der Mitte gefaltet, sodass acht gleich große Rechtecke entstehen. Danach werden innerhalb von acht Minuten alle Rechtecke mit unterschiedlichen Layouts gefüllt.
Je nach Projekt und Ziel kann diese Methode natürlich auch angepasst werden (mehr Zeit, weniger Rechtecke etc.). Aus den so entstandenen Varianten können im Anschluss Favoriten herausgesucht werden. Diese können dann im weiteren Verlauf verfeinert und konkretisiert werden. Das kann entweder erneut mit Stift und Papier oder unter der Zuhilfenahme eines Programms durchgeführt werden.
Eine digitale Version ist nicht nur einfacher an Kollegen oder Kunden zu versenden, sie ist auch leicht änderbar und unter Umständen besser verständlich. Wichtig ist hierbei, dass der Fokus nicht auf pixelgenaues Design gelegt wird. Es handelt sich immer noch um eine grobe Darstellung des Layouts und nicht um eine Nachbildung der fertigen Seite.
Es gibt verschiedene kostenpflichtige und kostenlose Programme, die die Erstellung eines Wireframes ermöglichen. Im Folgenden werden drei kostenlose Varianten beschrieben, die zudem alle für die gleichzeitige Bearbeitung von verschiedenen Personen ausgelegt sind.
Eine sehr einfache und einsteigerfreundliche Möglichkeit ist das Online Tool Excalidraw. Die Designmöglichkeiten sind hier zwar begrenzt, aber genau das macht dieses Tool so gut für Wireframes, da man sich nicht zu sehr mit Details aufhalten kann.
Ein weiteres Programm ist Miro, dass man nach kostenloser Registrierung nutzen kann. Miro hat seine eigene Wireframe Library, in der viele grundlegende Elemente sind. Damit ist es gut möglich ein Wireframe zusammenzustellen. Hier sollte man jedoch darauf achten, sich nicht zu sehr in Designfragen zu verlieren.
Eine dritte Option stellt Figma dar, für das ebenfalls eine kostenlose Registrierung möglich ist. Figma ist ein Tool mit sehr vielen Möglichkeiten, mit denen auch ganze Prototypen erstellt werden können. Damit ist es nochmal wichtiger, sich selbst im Design einzuschränken.
Wireframes mit den Tools Excalidraw, Miro und Figma
Fazit
Insgesamt lässt sich sagen, dass die Erstellung von Wireframes eine sehr zentrale Rolle in der Entwicklung einer Anwendung einnimmt. Wireframes bilden eine gute Gesprächs- und Testgrundlage, wodurch das konkrete Layout schnell überprüft und anschließend überarbeitet werden kann. Im weiteren Entwicklungsverlauf kann es dem Team zudem als Orientierung dienen und verkürzt damit den Entwicklungsprozess.
Der nächste Schritt im UX Prozess ist die Erstellung eines Prototyps.
