Was genau sind Wireframes?
In der direkten Übersetzung aus dem Englischen stehen Wireframes für ein Drahtgerüst, eine stark vereinfachte Darstellung eines Produkts oder einer digitalen Anwendung wie einer Website oder eines Onlineshops. Meist werden die einzelnen Gestaltungselemente wie Bilder, Teaser, Texte Buttons, etc. stark vereinfacht und nur in Form eines Rahmens bzw. einer Außenlinie dargestellt.
Diese abstrakte und technische Darstellungsform dient der Darstellung der Kernfunktion sowie dem schematischen und hierarchischen Aufbau einzelner Seiten. Auch kann anhand der Wireframes bereits entschieden werden welche Inhalts-Elemente bzw. Module benötigt werden und auf welchen Seiten diese später zum Einsatz kommen.
Als Kredo in dieser Projektphase gilt: Je einfacher und abstrakter ein Wireframe ist, desto besser ist dieser.
Warum erstelle ich Wireframes?
Vermischen sich die strukturellen Überlegungen und Abstimmungen mit Fragen des Designs oder konkreter Formulierungen einzelner Absätze, verliert man schnell den Fokus und meist unnötig Zeit.
Wireframes sind durch ihre schematische Darstellungsform sehr schnell erstellt und vor allem auch sehr schnell angepasst. So ist es sehr einfach die Anforderungen an Strukturen und Inhalt zu bündeln und in Form von Modulen schematisch darzustellen. Auch für ein später folgendes Design ist es deutlich einfacher bereits alle Anforderungen an Bilder, Texte und Funktionen zu kennen, um dann entscheiden zu können welche Bildauflösungen zum Einsatz kommen oder wieweit Texte konkret laufen.
Als Marken- und Kommunikationsagentur setzen wir bei PRINZIP E im Rahmen unserer digitalen Projekte auf einen umfassenden und vor allem effizienten Workflow. Uns ist es wichtig die Grundstruktur und den Aufbau der Website oder der Webshops bereits vor dem Design auszuarbeiten und abzustimmen. Hier dienen uns die Wireframes als optimales Werkzeug im Rahmen unserer Projekte.
Wireframes auf Basis von Templates und Modulen
Wir bei PRINZIP E gehen bei der Erstellung von Wireframes gerne bereits einen Schritt weiter. Bedingt durch unsere Erfahrung in der Umsetzung komplexer Website- und Portalanwendungen in welcher oft viele CMS-Redakteure an einem zentralen System arbeiten und unterschiedliche Websites, Landingpages und Microsites generieren, wissen wir wie wichtig eine Vereinheitlichung von Inhaltselementen ist.
Wir definieren daher bereits in dieser frühen Phase eines Projekts einen Katalog an Modulen für die Darstellung unterschiedlicher Inhalte an unterschiedlichen Stellen einer Anwendung. So definieren wir Templates wie die Startseite, Content-Seiten, Produktübersichts- oder Produktdetail-seiten und weisen diesen entsprechend Module zu. So garantieren wir, dass ein Text mit Bild, falls sinnvoll möglich, auf allen Seitentypen identisch dargestellt wird.
Dies führt nicht nur zu einem einheitlichen Bild innerhalb der Anwendung, sondern spart auch Aufwände im Design sowie die Umsetzung dieser.
Vom Wireframe zum Klickdummy
Ein Klickdummy zeigt neben der Struktur sowie dem Aufbau und Umfang von Modulen, erste Interaktionen in Form von Seitenwechseln durch die Navigation und Links, funktionale Elemente wie Dropdowns oder Akkordeon-Elemente sowie bei Bedarf Scroll-Effekte.
Über das reine verlinken der einzelnen Wireframes im Rahmendes Klickdummies, wird auch das responsive Verhalten der einzelnen Elemente über die Breakpoints hinweg definiert. So kann im Rahmen dieser Konzeptphase unteranderem auch bereits die funktionale Darstellung auf mobilen Geräten entschieden werden. Bei einem so umfassenden Konzept inkl. Klickverhalten und responsiver Darstellung, spricht man auch oft von einem Prototypen.
Kurz zusammengefasst:
Wireframe: Statischer und schematischer Aufbau von Seiten mit deren Inhaltselementen und Funktionen
Klickdummy: Interaktiv verlinkte Wireframes zu einer gesamten Anwendung. Darstellung von Klick- und Hover-Verhalten des Users an einzelnen Elementen
Prototyp: zusätzlich responsive Darstellung der Elemente und Seiten im Rahmen einer schematisch dargestellten Gesamtanwendung
Du hast Fragen zu diesem Thema oder möchtest mehr Informationen zu unseren Projekten?
Dann melde Dich gerne!
