Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Wireframes

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Wireframes

Hinter dem heutigen Adventskalendertürchen verbergen sich Wireframes. René Grassegger erklärt wie man diese nützlichen Vorabentwürfe sinnvoll nutzt.

Ein Wireframe ist eine schematische Darstellung einer Webseite. Der Wireframe (dt.: „Gittermodell“) dient zur Veranschaulichung und Planung von Elementen, die auf einer Webseite vorhanden sein sollen. Es werden die grundlegenden Elemente einer Seite dargestellt, dies hat mit dem Design der Webseite zunächst einmal nichts zu tun. Folgende Abbildung zeigt wie ein Wireframe aussehen kann:

Wireframe-Beispiel 1

Das ist ein Wireframe, der die Position der Grundelemente der Webseite anzeigt. Ist man mit der Platzierung und der Größe der einzelnen Bereiche zufrieden, dann kann man im nächsten Schritt den Wireframe schrittweise verfeinern und Stück für Stück alle benötigten Elemente platzieren. Durch die verschiedenen Graustufen der einzelnen Bereiche können Elemente hervorgehoben werden und die gewünschte Wahrnehmungsreihenfolge auch schon im Wireframing manipuliert werden.

Wireframe-Beispiel 2

Vorteile von Wireframes

Zeitersparnis

Die Entwicklung eines Wireframes benötigt nur den Bruchteil der Zeit im Vergleich zu einem traditionellem Layout/Design. Man kann mehr Schritte order Layoutszenarien durchplanen in der gleichen Zeit. Es können auch mehr Layoutvorschläge ausprobiert werden.

Die Umsetzung eines fertigen Wireframes zu einem Layout benötigt viel weniger Zeit, da die Positionierung, Größe und Form vieler Elemente schon bestimmt wurde. Auch hier wird die Effektivität erhöht und die Falschplanung vermindert.

Bessere Kommunikation mit dem Kunden

Durch die kurzen Entwicklungszyklen kann der Kunde mehr in die Entwicklung eingebunden werden und fühlt ist daher auch stärker mit dem Projekt verbunden. Es kann schneller und einfacher auf die Bedürfnisse oder Wünsche des Kunden reagiert werden. Zeitraubende Fehlentwicklungen können so reduziert werden.

Auch direkt in Meetings mit den Projektbeteiligten und Kunden können so schnell Veränderungen vorgenommen werden.

Fehlplanungen

Da man sich jede Entwicklungsstufe vom Kunden absegnen lassen kann wird die Gefahr einer Entwicklung in eine falsche Richtung reduziert. Ist eine Entwicklungstufe des Wireframes abgenommen, kann mit einer detailierten Version begonnen werden.

Behauptet der Kunden das Layout nicht so beauftragt zu haben, kann er auf abgenommene Stufen der Wireframe Entwicklung verwiesen werden.

Nachteile von Wireframes

Wenn man sich nur auf Wireframes verlässt, kann man schnell wieder in ein reines „Kästchen-denken“ zurückfallen, weil man ja meist mit rechteckigen Formen arbeitet. Abhilfe könnte hier das Vorskizzieren von Erstentwürfen vor dem eigentlichen Einsatz von Wireframes helfen.

Auch kann der Kunde sich verzetteln und so die Entwicklung künstlich aufhalten. Dieses Argument wird aber dadurch entkräftet, da dies auch bei klassichen Design-Layouts passieren kann (deren Entwicklung meist ungleich länger dauert).

Fazit

Ich verstehe gar nicht wie wir ohne Wireframing auskommen konnte. Bei vielen Projekten wurde die Qualität der Website deutlich gesteigert, wenn wir Wireframing benutzt haben. Bei einem Projekt, wo keine Zeit für Wireframes verwendet werden konnte, hatten wir im Nachhinein mit erheblichem Mehraufwand zu kämpfen. Zuviel Zeit ging mit unzähligen Designprototypen verloren, weil uns die Wireframes fehlten.

Kommentare

Gregor
am 22.12.2007 - 12:15

Ich verstehe gar nicht wie wir ohne Wireframing auskommen konnte.

Sehe ich genauso. Auch wir arbeiten bei jedem Projekt mit Wireframes. Sie dienen bei uns vor allem als Schnittstelle, zwischen Designern, Entwicklern und Kunden. Funktioniert super, setzt aber vor allem bei Designern und Kunden voraus, dass sie damit umgehen können.

Bei uns setzen Wireframes z.B. nicht die Positionierung der Elemente fest, das ist Aufgabe des Designers. Damit haben wir auch nicht das Problem des Kästchendenkens.

FROHE WEIHNACHTEN ALLERSEITS!

Permanenter Link

Jan
am 30.12.2007 - 07:52

Guter Artikel.

Wichtig ist halt, dass Wireframes vor der eigentlichen Designphase kommen. Sie dienen der Kommunikation, nach Aussen wie nach Innen.

Es sollte auch stets drauf geachtet werden, dass der Kunde sich bewusst ist, dass er keinen Designentwurf vor sich sieht.

Permanenter Link

paulinepauline
am 30.12.2007 - 22:33

@gregor bei mir gibt es wireframes, die sehr genau die position bestimmter elemente festlegen. es gibt aber auch wireframes, bei denen der designer sehr frei arbeiten soll. kommt immer drauf an, wie wichtig die anordnung der elemente für die usability ist. muss man dann aber beim briefing des designers genauestens dazusagen. eine methode, im wireframe kenntlich zu machen, was fix und was frei ist, habe ich noch nicht gefunden.

Permanenter Link

Wilfried J. Klein
am 02.01.2008 - 09:12

Hallo und allen ein gutes Neues Jahr,

was gibt es für empfehlenswerte Tools fürs Wireframing?

Gruss aus Mittelhessen
Wilfried

Permanenter Link

/T
am 02.01.2008 - 09:40

»…was gibt es für empfehlenswerte Tools fürs Wireframing?«

OmniGraffle

Permanenter Link

paulinepauline
am 02.01.2008 - 16:20

fürn PC: Visio

Permanenter Link

larsen
am 02.01.2008 - 21:25

Ich finde das mit der verbindlichen Positionierung u.U nicht ganz unproblematisch … es kommt darauf an wer die Wireframes macht.

Dass aber z.B ein Konzeptioner oder Projektmanager im Trubel des Kunden-Nahkampfs Elemente an danach verbindliche Positionen schieben halte ich für gefährlich; damit werden (schon) Designentscheidungen getroffen, die sich dann später im Zweifelsfall nicht vernünftig umsetzen lassen.

So bekommt der Designer einen Ganzkörpergibs angelegt, und soll trotzdem noch Salsa tanzen … 

Ich finde Wireframes (nur) dann sinnvoll wenn:
- Sie Design-Unverbindlich sind
- Der Designer mit wireframet (das nimmt der Lösung aber ein Stück der Schnelligkeit)
- Es schon einen (per Styleguide und/oder fertigen Grund-Raster/-Modulen) vordefinierten Gestaltungskanon gibt

P.S: Mein Software-Tipp: "Keynote"

Permanenter Link

paulinepauline
am 03.01.2008 - 00:13

hm, was genau ist denn dann der job eines konzepters oder informationsarchitekten, wenn der designer die elemente immer frei durch die gegend schieben kann? für die usability ist es oftmals von entscheidender bedeutung, ob der button oben links oder unten rechts sitzt. und schließlich hat sich auch der konzepter / ia sine gedanken dazu gemacht ...

Permanenter Link

paulinepauline
am 03.01.2008 - 00:18

keynote? das ist doch sowas wie powerpoint? also für einfache wireframes ist das sicherlich ok, aber nicht für ne richtig umfangreiche datei. dafür ist visio wesentlich besser geeignet, da man hier module als shapes anlegen kann. wenn sich nämlich ein modul ändert, das bereits auf 80 wireframes eingebunden ist, ändert man einfach nur das skape und plopp ist das modul auf allen 80 wireframes geändert. auch kann man in visio mit layern arbeiten, um bestimmte module zu gruppieren.

Permanenter Link

larsen
am 03.01.2008 - 21:53

@ paulinepauline (1)
Da hast Du definitiv recht! Aber solange noch kein Design steht (und damit auch nicht z.B. Spaltenzahl/-breiten) nützt es nicht wenn man mit dem Kunden im Wireframe alles festklopft, und sich dann erst später herausstellt dass das alles so nicht zusammen passt (z.B wegen Textmenge/-länge) …
Deswegen meine ich ja dass der Konzeptioner gerne frei schieben kann, wenn vorher doch schon definiert ist was er schiebt (Rahmenbedingungen, beispielsweise "200px breite Box mit Arial 12px entspricht einer Spalte"), oder besser noch im Team mit dem Designer.
Ich habe die Erfahrung gemacht dass der Konzeptioner alleine (und mit totaler Freiheit ausgestattet) schon mal gerne etwas 'pfuscht' und beispielsweise mit zu kleiner Schrift arbeitet, damit es in den Wireframnes passt / gut aussieht; dann passt es nachher aber nicht mehr.

@ paulinepauline (2)
Keynote ist das was Powerpoint vermutlich in 3-5 Jahren sein wird …  ;-)
Aber es ist natürlich in erster Linie keine Software für Wireframes (das ist eher OmniGraffle). Ich nutze Keynote aber öfter für Wireframes weil es sich einfach leicht und flink bedienen lässt.
- Eine Bibliothek für die eigenen Module gibt es in Keynote nicht, das stimmt; dafür aber Seitenvorlagen, die nach der o.g Mechanik funktionieren. Da kann man dann z.B Header, Navigation, Footer etc 'zentral' ablegen/verwalten.
- Die Frage bei sich selbst aktualisierenden einzelnen Modulen ist ja: Was passiert wenn es sich z.B in der Größe verändert — wie reagieren seinen Nachbarn auf den Seiten darauf? Überlagern sie sich? Oder werden sie verschoben? Im Zweifel muss man ja dann doch alle Seiten durchgehen und zurechtrücken, oder …?

Permanenter Link

paulinepauline
am 04.01.2008 - 12:33

@larsen da magst du sicher recht haben ... ich kenne die arbeit eines konzepters nur in enger zusammenarbeit mit dem designer. und das seitenraster müssen beide auf alle fälle in abstimmung miteinander bestimmen. auch würde ich nie wireframes mit kunden durchgehen, wenn es dazu noch kein design-entwurf gibt. allerdings definiere ich auch keine pixel-angaben oder schriftgrößen. (max. texttypen wie copytext / headline / subhead)

ich spreche von einer etwas feineren konzeption als von spalten etc. zb. wenn ich den warenkorb-button direkt neben den preis setze, dann hat das seinen grund (usability-tests/studienergebnisse), und dann hat der designer den nicht an den oberen seitenrand zu setzen. (die oben abgebildeten wireframes sind auch meiner meinung nach sehr basic.) was aber nicht heißt, dass alternativ-vorschläge nicht willkommen sind. aber am ende sollte doch immer im usability-test der user das letzte wort haben! ;)

bzgl. visio: natürlich ist auch visio nicht perfekt. leider stehen die module nicht mit ihren nachbarn in verbindung und verschieben diese. das wäre echt super!
ich kenne aber auch keynote nicht (muss ich aber unbedingt mal ausprobieren).

Permanenter Link

proxiss
am 07.01.2008 - 16:13

Ohne Wireframes geht meiner Ansicht nach gar nichts. Man kann aber durchaus verschiedene Wireframes für verschiedene Bereiche der Site verwenden.
Falls Sie Drupal verwenden lässt sich das Wireframekonzept besonders schön abbilden. Dort entsprechen die "Blocks" genau den Kästchen im Wireframe, und verschiedene Bereiche lassen sich über das Sections Modul abbilden.

Ich mache meist ein Layout in Gimp/Photoshop das die CSS Elemente klar macht und baue dann mit OO Impress die WFrames.

Permanenter Link

Alejandro Seo
am 19.01.2008 - 07:00

Wie mein Vorredner schon sagte:
"Wichtig ist halt, dass Wireframes vor der eigentlichen Designphase kommen. Sie dienen der Kommunikation, nach Aussen wie nach Innen."

Permanenter Link

Ralph
am 13.04.2008 - 22:33

Mir fehlt noch ein wichtiger Punkt für das "Pro":

Mit Hilfe von Wireframes kann ich mich mit dem Kunden gemeinsam an das endgültige Design heran arbeiten ohne das ich ihn vom ersten Entwurf an auf ein ganz bestimmtes Design "festgenagelt" habe. Damit schaffe ich also einen Rahmen, wo der Kunde auch noch die Möglichkeit hat, eigene Ideen zu entwickeln und mit einfügen kann. Somit nutze ich auch sein Ideenpool für das spätere Design. Ausserdem ist die Identifizierung mit dem endgültigen Design wesentlich höher.

Ralph

Permanenter Link

Die Kommentare sind geschlossen.