Wireframes

Als Wireframe wird der konzeptionelle, zweidimensionale Entwurf einer Internetseite während der Planungsphase bezeichnet. In einem Wireframe werden nur die nötigsten Elemente einer Homepage dargestellt. Es werden keine Farben, Bilder oder Grafiken verwendet, denn bei der Erstellung eines Wireframes geht es nicht um das Design, sondern um die Konzeption einer Website. Das Visual Design tritt beim Wireframe völlig in den Hintergrund. An dieser Stelle wird nur die Struktur und Logik des zukünftigen Internetauftritts geplant. Ziel des Wireframes ist es, die inhaltliche Struktur und den Aufbau einer Website, oder verschiedener Unterseiten, zu planen. Der Rahmenplan einer Website kann in drei Komponenten unterteilt werden: Informationsdesign, Navigationsdesign und Interface-Design. Das Seitenlayout ist der Ort, an dem diese Komponenten zusammenkommen, während das Wireframing die Beziehung zwischen diesen Komponenten darstellt.

Hintergrund: Wireframes

Es gibt zwei Arten eines Wireframes und zwar die statischen und die dynamischen Wireframes. Bei einem statischen Wireframe handelt es sich, wie der Name schon andeutet, um eine schematische Darstellung von nur einer einzelnen Webseite. Für diese eine Webseite, werden die grundlegenden Elemente festgehalten. Dynamische Wireframes bestehen aus mehr als einer Seite. Die einzelnen Seiten werden interaktiv miteinander verknüpft und bilden einen funktionellen Prototyp. Bei einem dynamischen Wireframe kannst du also von einer Seite zur nächsten navigieren.

Fakten zu Wireframes

Obwohl Wireframes von Seite zu Seite unterschiedlich sind, werden die folgenden Elemente oft als Standardelemente auf Wireframes verwendet: Logo, Suchfeld, Header, einschließlich Seitentitel wie H1 und Subheads H2-Hx, Navigationssysteme, einschließlich globaler Navigation und lokaler Navigation, Körperinhalt, Share-Buttons, Kontaktinformationen und Fußzeile. Zu den am häufigsten verwendeten Wireframe Tools gehören Sketch, Adobe XD, InVision Studio, Figma, UXPin und vieles mehr.