{"id":2248,"date":"2021-01-07T12:00:04","date_gmt":"2021-01-07T11:00:04","guid":{"rendered":"https:\/\/www.sortlist.de\/blog\/?p=2248"},"modified":"2023-01-02T11:36:57","modified_gmt":"2023-01-02T10:36:57","slug":"wireframes","status":"publish","type":"post","link":"https:\/\/www.sortlist.de\/blog\/wireframes\/","title":{"rendered":"Erfolgreiches Webdesign durch Wireframes"},"content":{"rendered":"\n

Wireframes<\/strong> befassen sich mit der Visualisierung grundlegender Konzepte im Designprozess f\u00fcr Websites. Der Begriff bedeutet \u00fcbersetzt so viel wie Drahtmodell oder Drahtger\u00fcst, ein wichtiger Teil bei der Entwicklung<\/a> von Informationsarchitektur und Navigation.<\/p>\n\n\n\n

Mit der Erstellung eines solchen Grundger\u00fcstes lassen sich sp\u00e4ter Layout und Design viel leichter entwerfen.<\/p>\n\n\n\n

Hauptfokus liegt bei der Darstellung des Contents<\/strong>, Platzierung von Formularen, Texten oder auch Bildmaterial. Diese Phase des Designprozesses wird in der Branche nicht nur Wireframing<\/a> genannt, sondern ist auch unter den Namen Screen Blueprint, Website-Ger\u00fcst oder Page Schematics<\/strong> bekannt.<\/p>\n\n\n\n

Wie wichtig ist Wireframing f\u00fcr den Designprozess?<\/h2>\n\n\n\n

Mit gut geplanten Wireframes wird der komplette Designprozess<\/a> f\u00fcr die Erstellung einer neuen Website erleichtert. Mit diesen ersten konzeptionellen Entw\u00fcrfen werden vorrangig die Positionen und die Anordnung der einzelnen Elemente festgelegt.<\/p>\n\n\n\n

Das trifft sowohl f\u00fcr die Konzeption<\/strong> von einer Homepage oder Website zu als auch bei den einzelnen Webseiten. In dieser Phase ist eine genaue gestalterische Umsetzung noch nicht notwendig.<\/p>\n\n\n\n

So ist es nicht verwunderlich, dass viele Wireframes in schwarz-wei\u00df angelegt werden. Werden die Navigation und die Struktur einer Website bei einem Wireframe nicht deutlich, so wird es h\u00f6chstwahrscheinlich auch Schwierigkeiten geben, wenn die Website in Farbe<\/a> daherkommt.<\/p>\n\n\n\n

Ein gutes Grundger\u00fcst<\/strong> und eine gelungene Benutzerf\u00fchrung erkennt der Nutzer auch ohne Farben und Spezialeffekte.<\/p>\n\n\n\n

Welche Arten von Wireframes gibt es?<\/h2>\n\n\n\n

Papier-Wireframes<\/h3>\n\n\n\n

Eines der grundlegenden Techniken f\u00fcr Designer ist das Skizzieren<\/strong> mit Bleistift und Papier. Auch in der heutigen Zeit, wo digitale Software viele Aufgaben \u00fcbernehmen kann, sollte sich niemand vor den Papier-Wireframes<\/strong> f\u00fcrchten. Hier k\u00f6nnen schnell erste Ideen niedergeschrieben oder gezeichnet werden.<\/p>\n\n\n\n

Sie k\u00f6nnen hier in der Gestaltung<\/strong> viel ausprobieren, denn diese Skizzen sind noch keine fertigen Entw\u00fcrfe. Sammeln Sie Ideen und Inhalte oder ver\u00e4ndern Sie intuitiv die Position der Elemente. Die unfertigen Wireframes motivieren, um eine Diskussion oder einen Austausch zu starten, die neue Wege und Ideen aufzeigen k\u00f6nnen.<\/p>\n\n\n\n

Mit wenigen \u00dcbungen handgezeichnete Wireframes erstellen<\/h3>\n\n\n\n

Die Ausrede, dass man nicht zeichnen k\u00f6nne, zieht bei den skizzenhaften<\/strong> Papier-Wireframes nicht. Mit ein paar wenigen \u00dcbungen lassen sich Techniken erlernen, die jedem bei der Erstellung von diesen ersten Wireframes unterst\u00fctzen.<\/p>\n\n\n\n

Dabei wird gar kein Perfektionismus erwartet. Sie m\u00fcssen nur Ihre Ideen<\/strong> verdeutlichen. Die Angst vor dem wei\u00dfen Blatt ist v\u00f6llig unbegr\u00fcndet.<\/p>\n\n\n\n

F\u00fcr Einsteiger empfiehlt es sich, einen Rahmen zu ziehen, um den Arbeitsraum auf dem Blatt zu definieren. Diese k\u00f6nnen die Dimensionen einer Desktopwebsite<\/strong> oder eines Smartphonebildschirms<\/strong> nachempfinden. Raster geben weiteren Halt und erleichtern das Zeichnen der verschiedenen Inhalte f\u00fcr unge\u00fcbte H\u00e4nde.<\/p>\n\n\n\n

Ein blutiger Anf\u00e4nger \u00fcbt sich vielleicht erst einmal beim Nachzeichnen von bereits bestehenden Websites. Nachdem Sie so drei bis vier Websites skizziert<\/strong> haben, starten Sie einfach mit eigenen Ideen. Jetzt sollten die Wireframes mit Bleistift und Papier kein Problem mehr darstellen.<\/p>\n\n\n\n

Digitales Wireframing<\/h3>\n\n\n\n

Wireframes lassen sich auch gut mit digitaler Software<\/strong> erstellen. Hiermit werden Papier-Wireframes vertieft und mit zus\u00e4tzlichen Details versehen. Mit einem digitalen Tool k\u00f6nnen Details viel besser umgesetzt werden. Abst\u00e4nde werden besser eingehalten und die Gestaltung kommt der endg\u00fcltigen Version ziemlich nahe.<\/p>\n\n\n\n

Der gro\u00dfe Vorteil beim Einsatz von digitalen Wireframing-Tools<\/strong> ist, dass die diversen Software-Programme bereits vorgefertigte Buttons, Bilder oder Navigationselemente besitzen, aus denen der Designer sch\u00f6pfen kann. Unleserliche Abschnitte und Inhalte, die bei Skizzen auftreten k\u00f6nnen, werden so vermieden.<\/p>\n\n\n\n

Low-Fidelity-Wireframe<\/h3>\n\n\n\n

Bei Low-Fidelity-Wireframes werden die Elemente auf das Notwendigste<\/strong> reduziert. Dieser Wireframe wird nicht f\u00fcr den Kunden erstellt, um das Projekt zu verkaufen, vielmehr dient er den Entwicklern und Designern<\/strong> zur Diskussion und Weiterentwicklung.<\/p>\n\n\n\n

\"\"
Beispiel f\u00fcr einen Low-Fidelity-Wireframe (Quelle: ProtoShare<\/a>)<\/figcaption><\/figure>\n\n\n\n

Werden die Vorgabe des Auftraggebers erf\u00fcllt, so l\u00e4sst sich die Low-Fidelity-Wireframe in einen konkreten Entwurf umarbeiten, den High Fidelity-Wireframe. Danach kann ein Prototyp<\/strong> oder ein Mockup<\/strong> genutzt werden.<\/p>\n\n\n\n

High-Fidelity-Wireframe<\/h3>\n\n\n\n

W\u00e4hrend bei einem Low-Fidelity-Wireframe noch einiges an Vorstellungskraft vom Kunden erwartet wird, so ist der High-Fidelity-Wireframe ein vollst\u00e4ndiger Entwurf der Website<\/strong>. Hier werden die Funktionen und die Optik der Website viel besser kommuniziert. Diese Gestaltung ist schon nah dran an einem Mockup.<\/p>\n\n\n\n

\"\"
Beispiel f\u00fcr einen High-Fidelity-Wireframe (Quelle: ProtoShare<\/a>)<\/figcaption><\/figure>\n\n\n\n

Mit speziellen Wireframe-Tools<\/strong> kann die zeitintensive Erstellung reduziert werden. Diese Werkzeuge und Tools arbeiten meist mit standardisierten Bibliotheken, die die unterschiedlichsten Elemente zur Darstellung enthalten.<\/p>\n\n\n\n

Low Fidelity- und High Fidelity-Wireframes k\u00f6nnen dabei die folgenden Inhalte wiedergeben:<\/p>\n\n\n\n