{"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
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 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 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 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 Im Folgenden aufgelistet sind die m\u00f6glichen Layout-Typen und wie sie sich voneinander unterscheiden: <\/p>\n\n\n\n\n Ein wichtiger Faktor bei der Erstellung des Layouts ist der Fokus des Users<\/strong>. Man m\u00f6chte ja in der Regel, dass dieser m\u00f6glichst lange auf der Website bleibt und sich unkompliziert durch den Content bewegen kann. H\u00e4ufig verwendet wird dabei der sogenannte \u201cgoldene Schnitt\u201d<\/strong> (siehe Abbildung unten). Der goldene Schnitt kommt urspr\u00fcnglich aus der Mathematik, wird aber, im Zusammenhang mit Layouting dazu benutzt, die Wahrnehmbarkeit des Contents bzw. den Fokus des Users zu beschreiben. Anhand dessen soll der Content wahrnehmbar angeordnet werden. <\/p>\n\n\n\n\n <\/p>\n\n\n\n\n Wie bereits weiter oben angedeutet, ist ein responsives Design stark zu empfehlen. Da heutzutage die meisten Leute mehrere verschiedene Endger\u00e4te mit jeweils unterschiedlichen Displays besitzen und der Markt mittlerweile sehr gross ist, kommt man um ein responsives Design fast nicht mehr drum herum. Es gibt zwar noch einige Websites, welche ein statisches Design vorweisen, jedoch werden diese immer weniger. Ein responsives Layout f\u00f6rdert die User-Experience und erh\u00f6ht auch die Chance, dass die User l\u00e4nger auf der Website verweilen.\u00a0\u00a0<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":59,"featured_media":1450,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[16,14,18,17],"acf":[],"yoast_head":"\nWas macht ein gutes Wireframe aus?<\/span><\/h3>\n \n\n\n
Wireframes vs. Sketches: Ist das nicht das gleiche?<\/span><\/h3>\n \n\n\n
Was versteht man unter Layouting?<\/span><\/h3>\n \n\n\n
Welche Layouts gibt es?\u00a0<\/span><\/h3>\n \n\n\n
Was macht ein gutes Layout aus?<\/span><\/h3>\n \n\n\n