Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Grafiklayout, Styleguide oder HTML-Prototyp?

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

Grafiklayout, Styleguide oder HTML-Prototyp?

Heute geht es um die Visualisierung von Website-Projekten. Was soll man nehmen: Grafiklayouts, Styleguides oder HTML-Prototypen? Nils Pooker erläutert die Vor- und Nachteile und worauf man bei der Auswahl achten sollte.

Der Erstellung einer Website ist – unabhängig vom Umfang – immer ein Workflow in mehreren Schritten aus Planung, Konzeption und Umsetzung. Für die inhaltliche, technische und visuelle Darstellung dieser Phasen gibt es verschiedene Möglichkeiten.

Grafische Layouts

Grafische Layouts werden vorwiegend mit Bildverarbeitungs- oder Vektorprogrammen umgesetzt. Diese Methode stammt aus dem Print-Bereich und soll die Optik einer exemplarischen Website visualisieren.

Schemazeichnung Grafiklayout

Vorteile
  • Grundlayouts sind flexibel und schnell umzusetzen
  • Einbindung der Elemente des Corporate Designs
  • Kunde kann sich "ein Bild machen" von seiner Site
Nachteile
  • Nur Einzeldokumente in fixem Gestaltungsraster
  • Aktion und Interaktion sind nicht darstellbar
  • Detaillierte Darstellungen sind nicht praktikabel

Grafische Layouts sind keine Webseiten und nur als "optische Krücke" zu gebrauchen. Primäre Eigenschaften einer Website lassen sich nicht darstellen. Sinnvoll und flexibel können grafische Layouts für die Kundenkommunikation eingesetzt werden, man sollte sich aber auf die Visualisierung von Grundgerüst, Farben und Kurzbeschreibung der Inhalte beschränken.

Eine interessante Weiterentwicklung ist die Grey-box-Methode von Jason Santa Maria. Hier liegt der Fokus auf die Einbindung webspezifischer Elemente und der Positionierung der Inhalte. Auf Layout und Farben wird verzichtet. Diese "Graukästen" bieten ein gutes Werkzeug für die interne Arbeit des Webdesigners, auch als Grundlage für grafikbasierte Layouts.

Schema des Graybox-Ansatzes

Online-Styleguides

Ein Online-Styleguide erweitert die aus dem Printbereich bekannte Darstellung von Elementen eines visuellen Basiskonzeptes um die interaktiven und webspezifischen Elemente einer Website. Beispielhaft ist der Online-Styleguide der Bundeswehr. [Anmerkung September 2011: Der Styleguide ist offenbar leider vom Netz genommen worden.]

Vorteile
  • Idealfall eines medienunabhängigen Corporate Designs
  • Einbeziehung aller Elemente der späteren Website
  • Keine Visualisierungsproblematik eines Layouts
Nachteile
  • Hoher Aufwand vor der Umsetzungsphase
  • Realisierbar nur mit detaillierter Planung aller Elemente
  • Gefahr späterer gestaltungs- und funktionsrelevanter Änderungen

Die Erstellung eines Online-Styleguides ist nur für sehr große Sites oder Portale sinnvoll. Im Idealfall ist der Online-Styleguide Teil eines Corporate Designs und berücksichtigt die spezifischen Anforderungen einer Website.

HTML-Prototypen

"Rapid Prototyping" bezeichnet die Methode, ein Website-Projekt von Beginn an als (X)HTML-Projekt umzusetzen. Die Grenzen zwischen Planung, Konzeption und Umsetzung sind kaum noch vorhanden.

Vorteile
  • Medienkonformer Workflow bezüglich Inhalt, Technik und Design
  • Flexibel einsetzbar durch Verwendung von Webstandards
  • Ideal für Usability-Kontrolle und in der Kundenorientierung
Nachteile
  • Hohe Anforderungen an das Know-how des Webdesigners
  • Ständige Wechsel zwischen Planungs- und Umsetzungsschritten
  • Notwendigkeit ständiger Kontrolle der Browserkompatibilität

Screenshot des YAML-Builders

Die Vorteile machen das HTML-Prototyping theoretisch zur perfekten Methode mit unschlagbaren Vorteilen, Browserprobleme führten aber immer zu unkalkulierbarem Mehraufwand. Ein idealer Weg für HTML-Prototyping ist die Arbeit mit bewährten Templates oder einem Framework.

Kommentare

Gregor
am 08.12.2007 - 16:08

ich bin der Meinung, dass sich Styleguides nicht dazu eignen, sie vor der Umsetzung anzulegen. Es ist eher eine gute Form der Dokumentation und eigenet sich vor allem gut, wenn neben einer Website noch andere Dinge wie Flyer erstellt werden sollen.

Ich habe festgestellt, dass sich Wireframes und daraus generierte Klick-Prototypen sehr gut eignen, um ein Website-Konzept abzubilden und damit sowohl Entwickler und Grafik-Designer zu briefen. Es ermöglicht die Arbeit zu parallelisieren, weil der Grafiker weiß, welche Inhalte und Elemente er in seinem Design unterbringen muss und der Entwickler weiß, welche Funktionalitäten verfügbar sein müssen. Auch Kunden kann man die Wireframes zeigen und absegnen lassen, bilden sich doch die Website schon sehr gut ab.

Hier ein Klick-Prototyp basierend auf Frames, den wir mal für ein Studienprojekt erstellt haben: Schüler-Onlinezeitung. Statt den Textbalken würde ich heute eher auf Blindtext zurückgreifen.

HTML-Prototypen eigenen sich meiner Meinung nach besonders gut, wenn man Web-Appikationen konzipiert, die meistens komplexer aufgebaut sind. Für uns sind Klick-Prototypen ein tolles Werkzeug, um Ideen schnell auszuprobieren, ohne auf Entwickler zurückgreifen zu müssen. Leider kann ich hier keinen Link anbieten.

Permanenter Link

Tim Neugebauer
am 09.12.2007 - 22:06

Ich denke in den meisten Fällen geht der Weg vom Wireframe (Gerüststruktur der Informationsdarstellung einzelner ausgewählter Seiten) über die Grafikvorlage (bemaßte PSD-Datei) zum HTML-Klickmodell das dann als Templates in ein CMS überführt werden. Zumindest ist das meine Erfahrung und auch der meiner Meinung sinnvollste Weg. Ein styleguide wird m. E. n., wenn nicht vor dem Design schon aus anderen CD-Bereichen vorhanden, während der Konzeption und der Designarbeiten parallel entwickelt.

Permanenter Link

Ole
am 10.12.2007 - 09:26

@Tim
Ich sehe das genauso. Zuerst wird über die Struktur gesprochen, dann ein Wireframe angelegt, damit der Kunde ein Gefühl dafür bekommt, welche funktionalen Inhalte auf der Site auftauchen, dann geht es in die Layoutpahse und am Ende der (Nahrungs-)Kette ist dann der Webdeveloper, der einen Klickdummy auf Basis des Layouts aufbaut. Dieser Klickdummy kann dann sehr gut für Usability-Tests (z.B. rapid prototyping) verwendet werden.

Und dann geht es in die finale Produktion...

Permanenter Link
Nils Pooker

Nils Pooker (Autor)
am 10.12.2007 - 10:00

@all

Danke für Eure guten Kommentare.
Ihr beschreibt alle mögliche Vorgehensweisen des Workflows selbst, so kann es sehr gut funktionieren, das kann ich selbst auch bestätigen. Über dieses Thema könnte man ohne weiteres einen dreimal so großen Artikel schreiben. Wichtig war mir hier nur die grundsätzliche Darlegung der Vor- und Nachteile verschiedener Ansätze.

Nicht nur Grafiklayouts, auch Wireframes und ein Klick-Dummy können bei Kunden zu falschen Schlüssen bezüglich einer "echten" Website führen. Wie überall kommt es auch hier auf die Affinität, die Kenntnisse und die Vorstellungen des Kunden an, was man wie und zu welchem Zeitpunkt verwendet.

Permanenter Link
Bastian Sackermann

Bastian Sackermann (Webkraut)
am 11.12.2007 - 02:33

Wenn es um Seiten geht, in denen (unaufdringliches) Javascript am Werkeln ist, dann kommt mann komme ich schon beim Planen nicht um eine HTML Umsetzung rum.

Zumindest scheitere ich in solchen Fällen an einer reinen Photoshop Umsetzung. Oben, unten, rechts und links kann ich zwar gut als Grafik darstellen.

Aber sobald per Javascript auch noch vorher und nachher mit ins Spiel kommt, reicht mir das Angucken nicht mehr aus. Da brauche ich HTML zum reinklicken.

Wäre interessant mal zu hören, ob das anderen auch so geht.

Permanenter Link

Frank
am 12.12.2007 - 22:20

Ich arbeite nur noch mit der Greybox-Methode in Form eines HTML-Prototypen, der am Anfang gleich ins CMS integriert wird. So kann der Kunde sich einen guten Eindruck von den interaktiven Funktionen verschaffen und man selbst kann bei dem Aufbau der Struktur und dem Einpflegen der Inhalte Vollgas geben. Das Einrichten des CMS mit Anlegen der Datencontainer, Eingabemasken etc. dauert ja auch.

Das Layout entsteht völlig unabhängig davon in irgendeiner Phase und wird zum Schluss auf den Prototypen draufgebaut. Dabei muss ich nur noch im CSS arbeiten, die (gute) HTML-Struktur steht ja schon und die Seite funktioniert ja seit längerer Zeit komplett. Das "Zusammenflanschen" von Design und Prototyp dauert ca. 4-6 Stunden, wenn die PSD-Datei gut reingezeichnet ist.

So kann man parallel mit mehreren Leuten an einer Seite arbeiten und am Ende fügt sich alles nahtlos zusammen.

Bei meinen letzten Projekten habe ich gute Erfahrungen damit gemacht, vor allem, wenn man den Kunden aufklärt, dass der Greybox Prototyp nichts mit dem endgültigen Design der Seite zu tun hat.

Permanenter Link

Mot
am 27.12.2007 - 17:52

Ein netter Vergleich aber vergleichsweise immer noch in alten visuellen Mustern verhaftet (vom XHTML Prototyp mal abgesehen, der aber nicht am Anfang stehen kann).

Doch womit kann Konzept, Layout und Interaktivität am besten per Stift für eine Webseite festgehalten werden? Es gibt da so ein Tool:

http://dub.washington.edu/denim/download/
http://www.youtube.com/watch?v=6gVrw1Wgdfg
http://www.youtube.com/watch?v=mxlToermEyM

Optimiert für die Bedienung mit Tablet PC und ähnlichem. Viel Spass bei der Arbeit! Ich hoffe eine nette Ergänzung zum Artikel.

Permanenter Link
Nils Pooker

Nils Pooker (Autor)
am 27.12.2007 - 19:37

Hallo Mot,

vielen Dank für Deinen Tipp, das ist tatsächlich eine nette Ergänzung. Das Tool ist schon etwas älter, eignet sich aber gut zur Visualisierung der Informationsarchitektur in der Planungsphase eines Projektes.

Heute kann das mit Web 2.0-Applikationen wie Zoho Notebook oder Powerpoint, bzw. den OpenOffice-Alternativen ähnlich umgesetzt werden. Die Möglichkeit der Verlinkung und Arbeiten mit einem Grafiktablett sprengt eventuell auch den Rahmen des zielorientierten Workflows.

Man kann am Anfang natürlich ebenso gut mit den Mitteln der Prä-Web-Ära arbeiten: Zettel und Buntstifte ;-)

Permanenter Link

Ralph
am 14.04.2008 - 21:35

Ich liebe solche Themen, wo es um die Visualisierung von Ideen geht, auch wenn ich meistens mit einem Blatt Papier und einem Bleistift anfange. Bitte mehr davon, bin ja neugierig.

Ralph

Permanenter Link

Die Kommentare sind geschlossen.