{"id":1381,"date":"2021-05-29T14:56:30","date_gmt":"2021-05-29T12:56:30","guid":{"rendered":"urn:uuid:b3d03ed3-7633-4490-a94f-b1eb902ea367"},"modified":"2022-11-03T11:24:26","modified_gmt":"2022-11-03T10:24:26","slug":"wireframes-layouting","status":"publish","type":"post","link":"https:\/\/blog.fhgr.ch\/uxblog\/2021\/05\/29\/wireframes-layouting\/","title":{"rendered":"Wireframes & Layouting"},"content":{"rendered":"\n

Wenn man ein Webangebot prototypen m\u00f6chte, kommt man um die Begriffe \u201cWireframe\u201d und \u201cLayouting\u201d nicht herum. Doch was ist damit \u00fcberhaupt gemeint? Dies und noch einige weitere Infos zu diesen Themen gebe ich dir in diesem Blogbeitrag.<\/p>\n\n\n\n\n Was sind Wireframes?<\/span><\/h3>\n \n\n\n\n\n

Das Wort Wireframe<\/strong> bedeutet auf Englisch soviel wie \u201cDrahtger\u00fcst\u201d. Du fragst dich jetzt bestimmt, was das mit Websites zu tun hat. Nun, im Zusammenhang mit Webentwicklung, eine ganze Menge. Genauer gesagt steht hinter den meisten professionell erstellten Websites ein Wireframe. <\/p>\n\n\n\n\n

<\/p>\n\n\n\n\n

Die Erstellung von Wireframes ist eine Methode, welche w\u00e4hrend der Design- und Prototyping-Phase des User-centered Design-Prozesses<\/a> angewendet wird. Bei Wireframes geht es darum, das Layout und die wichtigsten Elemente graphisch, als eine Art \u201cDrahtger\u00fcst\u201d<\/strong>, lediglich mit Hilfe von Linien und Boxen darzustellen. Es geht dabei grunds\u00e4tzlich um die Frage was \u00fcberhaupt dargestellt wird und noch nicht darum, wie etwas dargestellt wird. Das tats\u00e4chliche visuelle Design wird bei diesem Schritt noch aussen vor gelassen. Wireframes k\u00f6nnen aus Papierprototypen, aber auch direkt aus Use-Cases, User-Stories oder Szenarien<\/a> entstehen.\u00a0<\/p>\n\n\n\n\n

F\u00fcr die Erstellung von Wireframes gibt es verschiedene Tools. Eine empfehlenswerte und g\u00e4ngige M\u00f6glichkeit ist die Verwendung des Prototyping-Tools \"Figma\".<\/p>\n\n\n\n Was macht ein gutes Wireframe aus?<\/span><\/h3>\n \n\n\n

Bei der Erstellung eines guten Wireframes sind Raster<\/strong> unverzichtbar. Raster sind dazu da, Ordnung zu schaffen und die Harmonie der Elemente untereinander zu garantieren. Weiterhin sind Raster dazu da, Proportionen festzulegen und so Koh\u00e4renz innerhalb der Website zu generieren. Dennoch sollen Raster kein autorit\u00e4res, strikt festgelegtes System sein, sondern als Hilfestellung dienen. Zu Beginn wird in der Regel ein Floorplan erstellt, welcher die Grundstruktur aufzeigt und auf dessen Basis das Wireframe durch st\u00e4ndige Iteration weiter ausgearbeitet werden kann. <\/p>\n\n\n\n\n

<\/p>\n\n\n\n\n

Ein gutes Wireframe ist ausserdem mit Annotationen<\/strong> versehen, welche Erkl\u00e4rungen zu den Verhaltensweisen der einzelnen Elemente liefern. Oftmals sind diese nicht sofort erkennbar, weshalb eine solche Hilfestellung durchaus sinnvoll ist. <\/p>\n\n\n\n\n

In der heutigen Zeit, in welcher die meisten Menschen sowohl ein Smartphone, als auch einen Laptop besitzen, ist ein responsives Design,<\/strong> also ein Design, welches sich dem Display des Endger\u00e4ts anpasst, mit einzuplanen. Dies wirkt sich schlussendlich positiv auf die User-Experience der Website aus. Mehr dazu aber sp\u00e4ter. <\/p>\n\n\n\n\n

Bei wiederkehrenden Problemstellungen im Bereich der Webentwicklung lohnt es sich, sogenannte UX-Patterns<\/strong> zu benutzen, um das Problem nach einem standardisierten Muster l\u00f6sen zu k\u00f6nnen. Darin sind auch Wireframes enthalten. F\u00fcr Designer und Designerinnen entsteht dadurch ein schnellerer Designprozess. Oftmals werden auch ganze UX-Pattern-Libraries angelegt. Ein zus\u00e4tzlicher Vorteil besteht darin, dass die User mit den Designl\u00f6sungen bereits vertraut sind, was die Usability der Website steigert. <\/p>\n\n\n\n Wireframes vs. Sketches: Ist das nicht das gleiche?<\/span><\/h3>\n \n\n\n

Du fragst dich nun vielleicht, was der Unterschied zwischen Wireframes und (GUI-)Sketches<\/strong> ist. Schliesslich geht es ja bei beiden Methoden darum, den geplanten Webauftritt zu skizzieren. Der Unterschied liegt dabei im Detaillierungsgrad, wobei der \u00dcbergang von Sketches zu Wireframes im Prinzip nahtlos ist. W\u00e4hrend Sketches dazu da sind, eine erste Idee des Layouts zu skizzieren und nur die wichtigsten Features und Interaktionsm\u00f6glichkeiten anzeigen, geht das Wireframe weiter und zeigt bereits eine fortgeschrittene Darstellung des Layouts, welches als Grundlage f\u00fcr die Entwicklung des Endprodukts benutzt werden kann.\u00a0<\/p>\n\n\n\n Was versteht man unter Layouting?<\/span><\/h3>\n \n\n\n

Der Begriff Layouting<\/strong> kommt urspr\u00fcnglich aus dem Printmedienbereich und befasst sich damit, wie der vorhandene Raum auf der Website genutzt wird. Wie du wahrscheinlich bereits richtig erahnt hast, spielen Wireframes in der Konzeption des Layouts eine wichtige Rolle. Bei der Erstellung des geeigneten Layouts gibt es verschiedene Faktoren, welche mit einzubeziehen sind. <\/p>\n\n\n\n Welche Layouts gibt es?\u00a0<\/span><\/h3>\n \n\n\n

Im Folgenden aufgelistet sind die m\u00f6glichen Layout-Typen und wie sie sich voneinander unterscheiden: <\/p>\n\n\n\n\n