Kommentare zu: Grafiklayout, Styleguide oder HTML-Prototyp?

Von: Ralph

Ralph — Mon, 14 Apr 2008 19:35:05 +0000

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

Von: Nils Pooker

Nils Pooker — Thu, 27 Dec 2007 18:37:17 +0000

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

Von: Mot

Mot — Thu, 27 Dec 2007 16:52:17 +0000

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.

Von: Frank

Frank — Wed, 12 Dec 2007 21:20:51 +0000

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.

Von: Bastian

Bastian — Tue, 11 Dec 2007 01:33:08 +0000

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.

Von: Nils Pooker

Nils Pooker — Mon, 10 Dec 2007 09:00:46 +0000

@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.

Von: Ole

Ole — Mon, 10 Dec 2007 08:26:03 +0000

@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…

Von: Tim Neugebauer

Tim Neugebauer — Sun, 09 Dec 2007 21:06:25 +0000

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.

Von: Gregor

Gregor — Sat, 08 Dec 2007 15:08:36 +0000

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.