eDOSSIER

06.2014
shop.page-online.de/
downloads

Kreative Konzepte
visualisieren
Schnell und schlüssig komplexe Ideen
greifbar machen

Techniken für Briefing, Kundenpräsentation

und Usabilty-Überprüfung

Vom Scribble über haptische und 3-D-Modelle

bis hin zum Screen-Mockup

Das PAGE eDossier 06.2014 enthält Beiträge aus PAGE 10.2012 (September 2012).
Im Text enthaltene Links wurden beim Erscheinen des eDossiers nicht mehr geprüft.
IMPRESSUM Redaktion PAGE, Borselstraße 28, 22765 Hamburg; info@page-online.de; Telefon: 040 85183-400, Fax: -449; www.page-online.de; Chefredakteurin/Publisher: Gabriele Günder, V.i.S.d.P.
Autor: Nina Kirst (nik), Thomas Gläser, Markus Jaritz, Philipp Sackl; Freie Mitarbeit: Christine Krawinkel, Rebecca von Hoff (Grafik); Anzeigenleiter: Alexander Herz; alexander.herz@page-online.de; Telefon:
+49 85183-480, Fax: -489 (verantwortlich für die Anzeigen und Promotion); PAGE erscheint in der Ebner Verlag GmbH & Co. KG, Karlstraße 3, 89073 Ulm; Geschäftsführer: Gerrit Klein, Martin Metzger (Stellver-
treter), Florian Ebner Urheberrecht: Alle Beiträge sind ur­he­berrechtlich geschützt. Alle Rechte, auch Übersetzun­gen und Zweitverwertungen, vorbehalten. Reproduk­tionen, gleich welcher Art, ob Fotokopie, Mikro­
film oder Er­fas­sung in Datenverarbeitungsanlagen, nur mit schrift­­li­cher Genehmigung des Verlages. Eine Vermietung, Verleihung sowie Verkauf oder eine sonstige Form der Zugänglichmachung an Dritte ist Ihnen
nicht gestattet. Aus der Veröffentlichung kann nicht geschlossen werden, dass die beschriebe­nen Lösungen frei von gewerblichen Schutzrechten sind. Für den Fall, dass hier unzutreffende Informationen enthal-
ten sein sollten, kommt eine Haftung nur bei grober Fahrlässigkeit des Verlages oder seiner Mitarbeiter in Betracht. Weitere eDossiers, Einzelhefte und Aboangebote gibt’s unter shop.page-online.de
002 PAGE eDossier 06.14 (Beitrag aus PAGE 10.2012)

TITEL

Für Ricordi entwarf

Atelier Brückner eine
Ausstellung mit zwei
Erzählsträngen: der
Historie des Musikverlags
und der Entstehung einer
Oper in fünf Schritten.
Teil der Vorabvisua-
lisierung war dieses
plastische 3-D-Modell
 PAGE eDossier 06.14 003

SCHAU MAL!
Ob für Fotoshooting, Filmdreh, interaktive Anwendung oder Messebau – Designer und Konzeptioner müssen
ihre Ideen visualisieren, um Kunden zu überzeugen, das Team zu briefen und die Usability zu prüfen
004 PAGE eDossier 06.14 (Beitrag aus PAGE 10.2012)
n Die beste Idee ist nichts wert, wenn
sie nicht angemessen kommuniziert
wird. Können Kollegen, Auftraggeber
oder Dienstleister sie nicht nachvollzie­
hen, wird sie entweder gar nicht oder
falsch umgesetzt. Dementsprechend
wichtig sind Visualisierungen und Pro-
totypen im Arbeitsalltag von Kommu-
nikationsdesignern. Sie sind essenziell,
um Missverständnisse in der Briefing-
phase und daraus folgende Fehlent-
wicklungen zu vermeiden. Vor einer
auf­­wendigen – und teuren – Umset-
zung einer Idee sollten die Beteiligten
wissen, wie das Ergebnis aussehen soll.
Sonst sind am Ende Gestalter und/oder
Auftraggeber unzufrieden – schlimms­
tenfalls war alle Arbeit umsonst.
Den Anfang macht in den meisten
Fällen nach wie vor die schnelle Skizze
auf Papier. Zeichnen ist die Grundlage
aller gestalterischen Arbeit – egal, in
welchem Medium die Kreation letzt-
lich umgesetzt wird. Es ist der schnells-
te und günstigste Weg, erste Einfälle
und Konzepte festzuhalten und zu ver­
mitteln. »Gestalter sollten in der Lage
sein, jede Idee spontan skizzenhaft dar­
zustellen«, sagt Uwe Brückner, Gründer
des Szenografiestu­di­os Ate­lier Brück-
ner aus Stuttgart (siehe rechts). Diese
ersten Visualisierungen helfen auch
dem Designer selbst: Dank ihnen kann
er die Funktionalität und Machbarkeit
seiner Entwürfe abschätzen, mögliche
Probleme frühzeitig erkennen – und
schließ­­lich mit dem meistversprechen­
den Kon­zept weiterarbeiten.
Ästhetik und Detailtreue spielen
bei frühen Scribbles keine Rolle, sie
sind auf das Wesentliche konzentriert.
Visuelle Anmutung und Design wer-
den in den meisten Fällen erst in spä-
teren Phasen der Projektentwicklung
berücksichtigt – sonst entstehen ver-
früht geschmäcklerische Diskussionen
über Oberflächen oder Farbwelten, ob­
wohl es noch um Funktionalität und
Umsetzbarkeit geht. Die weitere Visu-
alisierung hängt von der jeweiligen
Ge­staltungsdisziplin ab. In der Ausstel­
lungs- und Messestandgestaltung ent­
stehen plastische 3-D-Modelle, im Gra­
fikdesign kommen vornehmlich Rende­
rings zum Einsatz, bei der Visualisierung
von Anzeigenmotiven mitunter foto-
realistische Illustrationen.
Besonders wichtig sind Visualisierun­
gen bei Ideen, die komplex und schwer
greifbar sind, etwa bei der Filmpro-
duktion oder im Interaction Design. Im
Gegensatz zum Grafikdesign können
Ideen hier meist nicht in dem Medium
dargestellt werden, das es zu gestalten
gilt. Hier sind andere Methoden not-
wendig als Skizzen und Renderings, et­
wa Moodboards und Prävisualisierun­
gen sowie diverse Formen von Proto-
typen. Gerade wenn es um Interaktion
geht, sollten Konzepte mög­lichst früh
ausprobiert werden, etwa mit Screen-
Mockups, Wireframes oder hap­­ti­schen
Prototypen (siehe Seite 14 ff.). Sol­­che
interaktiven Modelle dienen nicht nur
der Kommunikation einer Idee, son­
dern auch ihrer Untersuchung und Be-
wertung. Sie verdeutlichen den Funk­­
tions­umfang einer Anwendung, die
Ab­­­­folge von Aktionen, den Nut­zungs­
kon­­text sowie Design und Haptik. Das
hilft im kollaborativen Entstehungspro­
zess, dient als Handlungsanweisung für
den Interface-Designer ebenso wie für
den Softwareentwickler. Nicht zuletzt
sind Prototypen notwendig, um Usabi­
lity-Tests mit Usern durchzuführen.
Entwurfsmethodik wird zwar haupt­
sächlich innerhalb des Informatik-, Ar-
chitektur- oder Städtebaustudiums ver­
mittelt, findet sich allerdings auch auf
dem Lehrplan einiger Gestaltungshoch­
schu­len, etwa im Studiengang Illustra­
tions­design an der AID Berlin oder im
Medienlabor der Hochschule für Ge-
staltung Schwäbisch Gmünd. Hier ler-
nen Studenten Visualisierungstechni-
ken und Prototyping-Methoden, die
ihnen im späteren Berufsleben in Pit-
ches und bei der Umsetzung von Auf-
trägen helfen. Sven Voelker, Profes­-
sor für Kommunikationsdesign an der
Kunsthochschule Burg Giebichenstein
in Halle, hält allerdings nichts von Prä-
visualisierungen und redet es seinen
Studenten eher aus: »Auf die virtuelle
Realität von Visualisierungen kann man
im Grafikdesign gut verzichten. Heut-
zutage kann ich einen Entwurf gleich
in einer Qualität herstellen, die dem
endgültigen Produkt entspricht.« Im
Berufsalltag sieht das jedoch in den
meisten Fällen anders aus als an der
Hochschule, räumt Sven Voelker ein –
denn der Auftraggeber will mehrere
Entwürfe sehen, deren Produktion in
finaler Qualität zu teuer käme.
»Skizzen, Scribbles, textliche Be-
schreibungen, Moodfotos und -filme
sind die Werkzeuge, mit denen wir un-
sere Ideen anreißen und präsentieren.
Die Geschichte und das Bild in unseren
Köpfen müssen für den Auftraggeber
nachvollziehbar sein. Erst dann kann
man mit rechnergestützten Visualisie-
rungen oder aufwendigen Fotoproduk­
tionen beginnen«, meint Uwe Melichar,
Managing Partner bei Factor Design.
Wie und welche Visualisierungsmetho­
den Kreative unterschiedlicher Diszip-
linen einsetzen, zeigen wir auf den
nächsten Seiten.  nik

Uwe Brückner zeich-
nete für jede Station
diverse Skizzen in un-
terschiedlicher Detail-
treue. Zum Abschluss
des Projekts publizierte
das Atelier ein Buch
mit seinen Skizzen
Von der Partitur zur Ausstellung
Atelier Brückner: Ricordi (Bertelsmann)
n Die 200-jährige Geschichte des Mu-
sikverlags Ricordi mit rund 200 Expo-
naten sowie die Entstehung einer Oper
vom Libretto bis zur Aufführung – die-
se beiden Erzählstränge galt es im No­
vem­ber 2008 in der Ausstellung »That’s
Opera« unterzubringen. Dieses Projekt
zeigt exemplarisch die Arbeitsabläufe
bei Atelier Brückner, wo Visualisierun-
gen zu jedem Zeitpunkt eine große
Rolle spielen. Da Kunden es in der Re-
gel nicht gewohnt sind, Pläne zu lesen,
kommen 2-D- und 3-D-Visualisierungen
Jede Station der
Ausstellung wird
in Miniatur
vorgebaut und
fotografiert
PAGE eDossier 06.14 005
zum Einsatz, um Ideen und Konzepte
der Designer verständlich zu machen.
Begonnen wird jedes Projekt mit
einem Workshop zusammen mit den
Auftraggebern, um eine gemeinsame
Sprache und Linie zu finden – von Uwe
Brückner »Debabelizing« genannt. Di-
rekt im Anschluss beginnt die thema-
tische und visuelle Recherche, deren
Ergebnisse auf einer rund 1500 Quad-
ratmeter großen Pinnfläche in den
Stuttgarter Atelierräumen festgehal-
ten werden. Um Plot, Parcours und die
einzelnen Stationen zu veranschauli-
chen, setzt Uwe Brückner im ersten
Schritt auf Skizzen und Storyboards.
»Skiz­zen sind verständlicher als Wor-
te«, so der Architekt und Bühnenbild-
ner. »Die Ausarbeitung oder ästheti-
sche Präzision erfolgen in den nächs-
ten Phasen: Zuerst geht es darum,
Verständnis zu erzeugen und eine Bot­
schaft zu transportieren – nicht um
die perfekte Darstellung. Skizzen sind
assoziativ, sie lassen Raum zur Inter-
pretation.« Brückner legt generell gro-
ßen Wert auf die handgezeichnete Vi-
sualisierung und treibt sie sowohl in
seiner Lehrtätigkeit an der Hochschu-
le für Kunst und Gestaltung Basel als
auch in internen Skizzierkursen für die
Atelier-Mitarbeiter voran. Mittlerwei-
le lässt das Szenografiestudio für je-
des Projekt Bücher mit Brückners Skiz­
zen in einer Auflage von fünfzig Exem-
plaren drucken.
Die groben Entwürfe in den Skiz-
zen konkretisiert Atelier Brückner dann
in Renderings. Ohne diese am Rechner
ausformulierten Raumeindrücke geht
es heute auch in der Szenografie nicht
mehr. Sie liefern einen vollständige-
ren Eindruck des geplanten Projekts.
Noch präziser sind die plastischen 3-D-
006 PAGE eDossier 06.14 (Beitrag aus PAGE 10.2012)
In 3ds Max erzeugte Renderings stellen die Ausstellungs­
stationen detailgenau und realistisch dar
Modelle, die Atelier Brückner oft di-
rekt nach dem Briefing und in mehre-
ren Varianten anfertigt. »Wenn man
Übung darin hat, sind sie nicht allzu
aufwendig, aber verlässlicher und we-
niger manipulativ als Renderings oder
Animationen«, erklärt Uwe Brückner.
Die Vorteile liegen auf der Hand: Die
Modelle, die zunächst meist im Ver-
hältnis 1 : 50 gebaut werden, bieten ei-
nen räumlichen Eindruck, den weder
Skizzen noch Renderings liefern kön-
nen. Sie dienen der plastischen Ver-
mittlung von Ideen, machen sie im
wahrsten Sinne des Wortes begreiflich.
So stärken sie auch das Vertrauen in die
Machbarkeit eines Projekts. Anders for­
muliert: Mit ihnen kann man schlecht
tricksen. Im Zuge der Projektentwick-
lung werden immer neue Modelle an-
gefertigt, bis hin zu Mock-ups und Pro-
beaufbauten im Maßstab von 1 : 1.
Ein weiteres wichtiges – und ein-
zigartiges – Instrument der Visualisie-
rung bei Atelier Brückner ist die soge-
nannte Partitur. Wie in der Oper stellt
sie das ganze »Orchester« dar: Worum
geht es? Wer sind die Protagonisten?
Wer und was kommt wann zum Ein-
satz? In der Partitur fließen alle Fäden
in Form einer Matrix zur Blaupause des
Projekts zusammen. Sie setzt räumliche
und inhaltliche Aspekte in Beziehung,
dokumentiert Aufbau und Ablauf der
Ausstellung samt aller Einzelbereiche
und dient somit als Handlungsanwei-
sung für alle Beteiligten – vom Baulei-
ter über den Dramaturgen und den
Komponisten bis hin zum Filmemacher
und Softwareentwickler. Die Partitur
hängt analog an der Agenturpinnwand
und ist zudem für alle in einer digita-
len Version einsehbar. Für die Ricordi-
Ausstellung etwa umfasst sie neben
dem Raum-, Inhalts- und Designkon-
zept auch mehrfache Visualisierungen
der einzelnen Teile. Für jede Station
wurde die räumliche Atmosphäre in
Skizzen festgehalten, die Szenografie
in Modellfotos und Renderings. Ein Mix
aus Skizze und Rendering beschreibt
die Inhalte die Multimediastationen.
Mit dieser Kombination aus Skizzen,
Renderings, Modellen und Matrizen
macht das Stuttgarter Studio Ideen und
Konzepte für Kunden, Teamkollegen
und Dienstleister begreifbar und bietet
konkrete Handlungsanweisungen – so­
dass keine Missverständnisse oder teu-
re Fehlentwicklungen entstehen. Das
Verfahren – von Atelier Brückner »Cre­a­
tive Structure« genannt – ist für jedes
Projekt gleich. »Die Größe ist egal – ob
120 oder 70 000 Quadratmeter, wir ar-
beiten immer nach den gleichen Krite-
rien und Parametern«, so Brückner.
008 PAGE eDossier 06.14 (Beitrag aus PAGE 10.2012)
Mit einem Zeitrafferfilm visua-
lisierte Factor Design für den
Möbelhersteller Casala das Kon-
zept des Zusammensitzens
Am Moodboard in der Agentur wurden die
Visualisierungen gesammelt
Vom Film zur Broschüre
Factor Design: Casala
n Bewegtbild ist ein eindrucksvol­les
Mittel, um Ideen zu visualisieren – so-
gar wenn es sich um grafische Aufträ-
ge wie zum Beispiel die Gestaltung ei-
ner Broschüre handelt. Um die zentra-
le Idee des Zusammensitzens für das
Rebranding des niederländischen Ob­
jekt­mö­bel­her­­stellers Casala zu vermit­
teln, drehte Factor Design aus Ham-
burg einen kurzen Zeitrafferfilm. Die-
ser zeigt, wie ein leerer Saal für eine
Veranstaltung bestuhlt wird, sich mit
Menschen füllt und nach dem Event
wieder ausgeräumt wird. »An dem Film
sind alle wichtigen Parameter für spä-
tere Bildwelten abzulesen«, erläutert
Daniel Sorge, Head of Design bei Fac-
tor Design in Hamburg: etwa die Funk-
tionalität der Möbel, der einfache und
schnelle Auf- und Abbau und eben
das Zusammensitzen.
Um die Motive für die Kommunika-
tionsmaßnahmen einzugrenzen, arbei­
teten die Designer mit Moodboards,
die die Atmosphäre der späteren Fo-
tografien zeigen. Das konkrete Bild
entwickelten sie über einfache Strich-
zeichnungen. Für Produktdarstellun-
gen skizzierten sie Aufstellungen und
Perspektiven der Möbel und kolorier-
ten sie grob. Nach ersten Abstimmun-
gen mit Casala fertigte Factor Design
detailreichere Zeichnungen an sowie
erste Grobrenderings ohne Licht und
Texturen. Im nächsten Schritt ent-
stand ein weiteres Rendering, das Ein-
zelheiten, Oberflächen und Schatten
visualisiert und als verbindliche Vorla-
ge für die finale Ausarbeitung diente.
Darüber hinaus fertigte Factor Design
selbst Locationbilder und deutete auf
ihnen mit leichtem Strich Personen
an. Nach der erneuten Absprache mit
dem Kunden erstellten die Gestalter
daraus ein Briefing für den Fotogra-
fen, das Raumsituation, Perspektive
und Möblierung umfasste. »Das end-
gültige Foto entsteht allerdings im-
mer erst in der Situation zwischen An-
lass und Mensch«, betont Daniel Sor-
ge. Bei der Casala-Broschüre sind die
Unterschiede zwischen dem Fotogra-
fen-Briefing und finalem Motiv jedoch
nur äußerst gering.
Unterschiedlich
ausgearbeitete
Renderings dienten
als Vorstufe und
Briefing für das
Shooting. Visuali-
sierung (oben)
und finale Um-
setzung zweier
Motive aus der
Casala-Broschüre
 PAGE eDossier 06.14 009

Lückenlose Inspiration!
EINZELHEFTE
VERSAND-
KOSTENFREI
BESTELLEN!

Solange Vorrat reicht: PAGE-Einzelhefte lassen sich in unserem

Online-Shop einfach nachbestellen. Damit Sie kein Thema verpassen.
Damit es keine Lücken in Ihrer Sammlung gibt. Oder abonnieren
Sie gleich für ein Jahr – mehr unter shop.page-online.de
010 PAGE eDossier 06.14 (Beitrag aus PAGE 10.2012)

Vom Scribble zur Anzeige

Serviceplan: BMW Motorrad

n Flucht aus dem Alltag und der wu-

seligen Stadt – das war die Grundidee
der Kampagne, die Serviceplan Mün-
chen im März für BMW Motorrad um-
gesetzt hat. Die visuelle Idee für die
Anzeigenmotive sah folgendermaßen
aus: eine hochgeklappte Stadt am Ho-
rizont, ein Fluchtpunkt und ein Motor-
rad beziehungsweise Roller auf freier
Strecke. Alles klar? Wohl eher nicht.
»Ein künstliches Motiv wie das für die
BMW-Kampagne ist schwer mit Wor-
ten zu beschreiben«, sagt Sandra Loibl,
Dieses grobe Scribble mit Anmerkungen diente als Briefing für die Illustratorin
Senior Art Director bei Serviceplan. »Für
die Präsentation haben wir in Zusam-
menarbeit mit der Illustratorin Lassal
ein gut ausgearbeitetes Scribble er-
stellt, damit sich der Kunde die Idee
vor Augen führen konnte.«
Für das Briefing der Illustratorin fer­
tigte Serviceplan ein grobes Scribble an,
versehen mit Anweisungen zur Farb­
welt (»freundlich«), Perspektive (»ge-
spiegelt«), Anmutung (»Stadt soll kein
Drecksloch sein«) et cetera. Das nach
diesen Angaben erstellte fotorealisti-
sche Scribble nutzte Serviceplan dann
auch als Briefing für den Fotografen.
Marc Trautmann schoss Gesamtan-
sichten von großen Städten vom Heli-
kopter aus, Straßen für den Vorder-
grund, Fahraufnahmen sowie Über­
gän­ge in Form von Tunneln und Brü-
cken. Aus diesen Einzelteilen schuf das
Lassal (  www.lassalmedia.com  ) fertigte daraufhin ein fotorealistisches
Team um Sandra Loibl anschließend
Scribble für die Präsentation beim Kunden an
in Photoshop das Composing-Layout
für die finale Kundenpräsentation und
für das Briefing der Postproduktion
Zerone in Hamburg.
Ein fotorealistisches Scribble ist laut
Loibl nicht immer erforderlich: »Manch­
mal genügt auch ein einziger Satz, um
eine Kampagnenidee auf den Punkt
zu bringen.« Weniger ausgearbeitete
Scribbles lassen darüber hinaus mehr
Spielraum für die finale Umsetzung
des Motivs und die Kreativität des Fo-
tografen. »In den meisten Fällen ist es
aber von Vorteil, einen genauen Fahr-
plan für das Shooting zu haben.« Im
Falle der BMW-Kampagne sehen sich
Scribble und finale Anzeige denn auch
sehr ähnlich. Geht es bei einer Kam­
pag­ne jedoch um authentische Darstel­
lung, wie beispielsweise bei Porträts
von Menschen, lässt sich das Ergebnis
nicht so genau vorab visualisieren.
Aus verschiedenen Bestandteilen setzte Serviceplan in Photoshop das Motiv für die »Hier muss man Raum für Zufälle las-
finale Präsentation beim Kunden und das Briefing der Postproduktion zusammen sen«, erklärt Loibl.

Von der Vektorgrafik zum Corporate Design
weissraum: Hausmann’s
n Im Oktober eröffnet Tim Mälzer mit
Patrick Rüther und Tim Plasse sein
zwei­tes Restaurant: das Hausmann’s
im Frankfurter Flughafen. Das Corpo-
rate Design stammt – wie schon das der
Bullerei – vom Hamburger Grafikdesign­
studio weissraum (siehe PAGE 01.12,
Seite 37). Dessen Gründer Lucas Buch-
holz und Bernd Brink waren von Be-
ginn an involviert. Um ihre Ideen für das
Erscheinungsbild zu vermitteln, setz­ten
die Gestalter vornehmlich auf Vektor-
grafiken. »Scribbles nutzen wir vor al­
lem intern«, so Buchholz. »Für den Kun­
den fertigen wir Vektorgrafiken an, die
ein gutes Bild der finalen Umsetzung
geben.« In der Phase der Logoentwick­
lung zeigte weissraum den Gastrono­
men sechs ausgearbeitete Entwürfe.
PAGE eDossier 06.14 011
Für das Mälzer-
Restaurant
Hausmann’s am
Frankfurter Flug-
hafen entwickelte
weissraum gleich
mehrere Logovarian-
ten. Das finale
Zeichen beinhaltet
das bereits bekannte
Mälzer-Logo aus
Besteck, die ange-
gliederte Hausbar
nimmt mit einem
Globus Bezug
auf den Standort
Für Packaging und Restaurant-Be-
schilderung von Hausmann’s fertigte
weissraum zunächst eine Mischung aus
Skizzen und Moods an, um das gene-
relle Look-and-Feel zu vermitteln. Zu-
dem arbeiteten die Gestalter mit Stock-­
Fotos sowie selbst geschossenen Bil-
dern von Bechern und Tüten, auf die sie
ihre Entwürfe als Vektorgrafiken über-
trugen. »Wir tun so als ob«, beschreibt
Buchholz das Vorgehen. Die so entstan­
denen Visualisierungen sind keine auf-
wendigen Renderings, aber dennoch
aussagekräftiger als rudimentäre Skiz­
zen. »Sie sind ästhetisch nicht perfekt,
liefern aber annäherungsweise Darstel­
lungen des fertigen Produkts, die dem
Kunden unsere Ideen verständlich ma­
chen«, so Buchholz.
Um ein Look-and-Feel vom Packaging
zu geben, stellten die Designer
Scribbles und Moods zusammen.
Fotos von Bechern und Tüten kombi-
nierten sie mit Vektorgrafiken, um
die finale Umsetzung zu simulieren
012 PAGE eDossier 06.14 (Beitrag aus PAGE 10.2012)

Vom Moodboard zum Film

Markenfilm

n Mit dem Arts & Creative Depart-

ment hat Markenfilm eine Abteilung
geschaffen, die speziell für Visualisie-
rungen von Filmideen zuständig ist.
Diese Treatments sind das Kondensat
der Vorrecherche und legen die Grund­
steine eines Films fest: Seine Atmo-
sphäre, Dynamik und Bildwelt, aber
auch Plot und filmische Mittel werden
hier in Form eines Booklets definiert.
Mit ihnen treten die Hamburger in Pit-
ches um Werbefilmaufträge an – ent-
sprechend wichtig ist es daher, dass
die Treatments die Ideen des Regis-
seurs verständlich und eindrucksvoll
kommunizieren. »Um Filmkonzepte ein­
drucksvoll und glaubwürdigzu visuali-
sieren, muss man mit dem Blick eines
Regisseurs arbeiten«, erklärt Manfred
Zozin, Head of Arts & Creative bei Mar-
kenfilm. Doch das Arts & Creative Team
braucht nicht nur fundiertes Filmwis-
sen, sondern muss sich auch mit Gra-
fik- und Editorial Design auskennen,
um Filmideen lebhaft und nachvollzieh­
bar zu Papier zu bringen. »Bei Marken-
film sind Treatments ein wichtiges kre­
atives Werkzeug und werden immer
ausgefeilter«, so Zozin.
Der erste Schritt besteht bei jedem
Projekt in der Absprache zwischen Pro­
duktionsfirma, Auftraggeber – meis-
tens Werbeagenturen – und Regisseur.
Nachdem die Agentur das Storyboard
für den Spot vorgelegt hat, diskutieren
al­le Beteiligten in einer Telefonkonfe-
renz die visuelle Grundidee. Im An-
schluss entstehen erste Notizen, Mind­
maps und Skizzen. Daraufhin beginnt
der wichtigste und aufwendigste Teil
der Visualisierungsarbeit: die Bildre­
cher­che. Dafür durchsucht das Marken­
Ganz oben: In Telefonkonferenzen zwischen Agentur, dem Arts & Creative film-Team gezielt Bücher und Zeitschrif­
Department von Markenfilm und dem Regisseur entstehen erste Notizen, Mind- ten, sichtet Filme, recherchiert im Netz
maps und Skizzen. Darunter: das Markenfilm-Team bei der Recherche-Arbeit und im hauseigenen Bildarchiv. »Man
muss wissen und entdecken wollen, wo
man das passende Material findet«,
erklärt Zozin. Um die Bildwelt eines
Films in all ihren Aspekte zu beschrei-
ben, ist eine Vielzahl an Referenzen nö­­
t­ig: Porträts und Schauspiel, Locations,
Landschaften, Licht und Atmosphäre,
Kameraarbeit, Special Effects und vie-
les mehr. Die Bilder werden in Share-
Foldern abgelegt, auf die das Team und
der Regisseur zugreifen können. Im fi-
nalen Treatment findet sich letztlich nur
ein Bruchteil des gesammelten Mate-
rials wieder – eben jene Bilder, die die
Filmidee am besten ausdrücken.
Im hauseigenen Bildarchiv in Adobe Bridge stellt das Arts & Creative Die Anforderungen an die Visuali-
Department Moodboards zu allen Aspekten eines Werbefilms zusammen sierung variieren von Projekt zu Pro-
 PAGE eDossier 06.14 013 PAGE eDossier 06.14 013

PAGE gibt’s übrigens

auch in RGB.
jekt. Mal existiert bereits eine recht
weit entwickelte Idee, die das Team
um Manfred Zozin visualisieren soll,
mal erarbeitet es diese erst im Laufe
der Recherche und bietet sie Agen­-
tur und Regisseur an. Schon während
dieser Phase arbeitet Markenfilm aufs
Engste mit dem Regisseur zusammen.
»Mood­scou­ting ist ein kollaborativer
Prozess«, erläutert Zozin. Immerhin
geht es bei den Treatments darum, Vi-
sion und Arbeitsweise des Regisseurs
zu vermitteln – deswegen heißen sie
auch »Di­rector’s Interpretation«. Da-
bei spricht sich das Arts & Creative De-
partment immer auch inhouse mit
dem Produktionsteam ab, das Aus-
kunft über die Kosten und Realisier-
barkeit von Ideen gibt.
Wenn die Bildauswahl getroffen ist,
geht es an die Gestaltung des Treat-
ments, das in einer Kombination von
Bild und Text ein Gefühl für den Film
vermittelt – und Agentur und Kunden
begeistern soll. Nach der Präsentation
beim Kunden und eventuellen An­pas­
sungen an seine Wünsche dient das
Treatment dem Drehteam als Hand- Das Treatment
lungsanleitung für die Umsetzung. kombiniert
»Man muss wissen, wie man in Bildern Bild und Text,
kommuniziert – zuerst, um einer Idee um die Filmidee
die Kraft zu geben, die sie braucht, überzeugend
und danach, um das Team anzulei- und spannend
ten«, so Manfred Zozin.  zu visualisieren
014 PAGE eDossier 06.14 (Beitrag aus PAGE 10.2012)

PROBIER MAL!
Von Low bis High Fidelity: Für die Entwicklung interaktiver Anwendungen und Produkte sind Prototypen unverzichtbar

Sketch
Eine Skizze ist der erste Schritt in der Produktentwicklung.
Beginnend mit User Research und Initial Idea Sketching
werden zu jedem Zeitpunkt der Ideenfindung alle Informatio-
nen und Gedankenschritte auf Papier gebannt. Letzteres
sollte in dieser Phase tonnenweise greifbar sein, sodass die
Ideen sprudeln können. Die vollgezeichneten Blätter ver-
teilt man lose vor sich, um sie dann zu kategorisieren – wie hier
die Studenten am Kopenhagener Institut für Interaction
Design. Jeder Sketch verdient einen catchy name, damit man im
Gespräch auf ihn Bezug nehmen kann. So bilden die Skizzen
zu Beginn des Projekts eine erste Diskussionsgrundlage und
schaffen Klarheit für folgende Prototypentwicklungen.

Storyboard
Mehrere Skizzen, chronologisch aneinan-
dergereiht, ergeben ein Storyboard.
Dieses kann unterschiedliche Funktionen
erfüllen. So gibt ein Experience Story-
board die allgemeine Stimmung um das
Produkt wieder und beschreibt auf
diese Weise, welches Erlebnis die Inter-
aktion auslösen soll. Ein Scenario Story-
board wie das am Kopenhagener Institut
für Interaction Design entwickelte (links)
fasst das Interfacekonzept näher ins Auge,
indem es den Anwendungsfall visuali-
siert. Und bei der Entwicklung von Websites
und Applikationen bildet meistens ein
Screen Flow Storyboard alle Abläufe ab.

Paper Prototype
Papier und Pappe sind ausgezeichnete und dazu preiswerte
Materialien, um einfache Prototypen zu gestalten. Für einen
Testlauf durch erste Interfacekonzepte reichen ein Stift und
ein paar Blatt Papier. In Verbindung mit einer Hardwarekon-
struktion bietet sich hierfür Wellpappe an, denn sie ist leicht
verformbar und überall erhältlich. Und so kommt sie auch
am Kopenhagener Institut für Interaction Design zum Ein-
satz, um Hardware-Paper-Prototypen zu bauen (rechts).
Diese Art des Prototyping ist nach dem Storyboard die güns­-
tigste Methode und liefert erste funktionierende Mo-
delle, mit denen sich bereits Usertests durchführen lassen.
 PAGE eDossier 06.14 015

Digitaler Sketch
In fast jeder Projektphase gelangt man früher oder später an den Punkt, an dem
die weiteren Schritte am Computer erfolgen müssen. Dabei bilden erste Lay-
outs in den gängigen Grafikprogrammen eine detaillierte Basis für einzelne Screen-
designs, die im Vergleich zu von Hand gezeichneten Skizzen schon um einiges
komplexer und ausgearbeiteter sind (hier als Beispiel der Entwurf für den Com-
munity Almanac von The Open Planning Project). Mit digitalen Sketchingtools
lassen sich rohe Screenlayouts und interaktive Prototypen für Interfacedesign-
konzepte erstellen. An der University of Washington verfolgt man inzwischen
den Ansatz, das gesamte Webdesign vom Papier auf den Computer zu verlagern:
So lässt sich mit dem Tool Denim (  http://dub.washington.edu:2007/denim  )
jeder Schritt von der ersten Skizze bis zur detaillierten Seitenaufteilung in einem
Dokument verwalten. Dabei schafft die auf Stift- oder Toucheingabe ausge-
legte Benutzeroberfläche lediglich einen digitalen Rahmen für das gute, alte
Sketching auf Papier. Die Baukastensysteme Balsamiq und pidoco° erset-
zen dieses durch das Herumschieben vorgefertigter Elemente – ein enormer
Vorteil, wenn komplexe Layouts immer wieder angepasst werden sollen.

Prototyp-Video
Interfaces kommen heute kaum noch ohne Animationen
aus. Einzelne Screens lassen sich daher nicht mehr isoliert
betrachten, denn es sind gerade die Übergänge zwischen
den Zuständen, die zum Verständnis der Struktur beitragen.
So ist es konsequent, bei der Entwicklung eines Prototyps
Einzelbilder in bewegte Bilder umzuwandeln . In einem von
Mareike Graf geleiteten Seminar an der Hochschule für
Gestaltung Schwäbisch Gmünd entstand der Kurzfilm »ami –
folding the future«. In ihm zeigen Marc Osswald und Jakob
Konrad die Interaktionsmöglichkeiten faltbarer Displays,
wobei sie den Fokus weniger auf die Bedienung des
Geräts als vielmehr auf das geschaffene Szenario legten. Mit
Prototyp-Videos lassen sich Abläufe schon früh detailliert
ausgestalten und so eine Idee auch ohne den Aufwand einer
interaktiven Gestaltung verständlich präsentieren.

Simulation
Für einen schnellen Überblick über die Vorzüge einer Anwen-
dung muss eine Simulation nicht erst zeitaufwendig pro-
grammiert werden. Ausgewählte Abläufe veranschaulichen
dabei die verschiedenen Funktionen. Doch sollte man die
Vorführung gut einstudieren, damit die Illusion entsteht, es
handle sich um eine lauffähige Applikation. Für eine solche
Präsentation gibt es mehrere Möglichkeiten: Entweder lässt
man einfach ein Video vom Interface ablaufen und der
Darsteller führt die dazu einstudierten Bewegungen aus. Für
mehr Flexibilität kann ein Assistent das Video an passenden
Stellen pausieren lassen oder der Darsteller steuert es selbst.
Für das Photoshop-MT-Konzept, das in Zusammenarbeit
mit Jens Franke und Wera Reinhardt an der Hochschule für
Gestaltung Schwäbisch Gmünd entstand, wurde eine
Simulation in Flash aufgebaut, die der Präsentator selbst über
zwei kleine Fußpads für »vor« und »zurück« steuern konnte.
016 PAGE eDossier 06.14 (Beitrag aus PAGE 10.2012)

Experience Prototype
Während man im Interfacedesign auf klassische Usability-
kriterien wie Effektivität, Effizienz, Einprägsamkeit,
Erlernbarkeit oder Fehlerrate achtet, reichen diese bei
interaktiven Installationen nicht aus, um die Qualität
zu beurteilen. Hier ist vor allem das Nutzervergnügen ein
entscheidender Faktor – von Computerkünstler Zach
Lieberman auch als »Open Mouth Phenomenon« bezeich-
net. Bei dem Spielkonzept »Magic Carpet« von envis
precisely und Isabella Thaller sollte mit möglichst geringem
technischem Aufwand der Spaßfaktor getestet werden.
Dazu klebte das Team eine teppichgroße Fläche ab und
nutzte zwei Taschenlampen, um Kreise auf den Boden
zu projizieren. Der eine Kreis folgt dem User, der den an-
deren Kreis fangen muss. Die Versuche wurden gefilmt,
um die Reaktionen der Spieler auswerten zu können. Lautes
Schreien und Kichern galten innerhalb einer »Spaß-
skala« als positiv – ein ausgesprochen heiteres Testverfahren.

Behavioural Prototype Haptischer Prototyp

In Systemen, bei denen die Bewegung und das Verhalten
der einzelnen Elemente eine zentrale Rolle spielen,
möchte man diese oft gesondert beurteilen. Essenziell ist
dieses Behavioural Prototpying für generative Installatio­
nen wie etwa »Bugworld«. Bei der 2007 im User-Interface-
Design-Kurs der Fachhochschule Joanneum in Graz ent­-
wickelten Arbeit sollte das Verhalten eines oder mehrerer
Käfer zunächst mit simplen Rechtecken getestet werden.
Dies gab Aufschluss über wichtige Parameter, ohne sich zu
sehr in grafischen Details zu verlieren. So animierten die
Studenten in erster Instanz Käst­chen, um zu verfolgen, wie
sich die einzelnen Objekte im System verhalten. Das
Design war zunächst nicht wichtig, da der Fokus auf den
parameterbasierten Charakteristiken lag. In dieser Phase
bildet man typischerweise auch viele Hilfsmittel ab. Im Fal-
le von »Bugworld« gab es Indikatoren für Sichtradius,
Richtung und Zielposition, visualisiert durch weiße Hilfs-
linien, damit sich nachvollziehen ließ, wie sich Ände-
rungen am Code auf das Verhalten der Käfer und Pflanzen
auswirkten. Solche Details schaffen es nicht selten bis
in die Endversion, da sie sich als sehr nützlich erweisen.
Bei Hardwareprototypen ist es sehr wichtig, dass der Aufbau
nicht nur zu sehen, sondern auch zu fühlen ist. Die Bedeutung
des Tastsinns für die Beurteilung von Interaktionen wird immer
wieder unterschätzt. Benedikt Burgmaier und Julia Stäbler
entwickelten zusammen mit dem Forschungsteam haptICS,
bestehend aus Götz Wintergerst und Ron Jagodzinski,
eine spezielle Testreihe für Drehregler, da diese oft eine gute
Alternative zur herkömmlichen Bedienung technischer
Geräte darstellen. Ziel war es, den optimalen Regler zu bauen
und ein – im Hinblick auf haptisches und akustisches Feed-
back – passendes Interface zu entwerfen. Das Projekt gliederte
sich in mehrere Teilbereiche: Zuerst suchte das Team verschie-
denste Geräte, die Drehregler verwenden, und testete sie auf
mögliche Parameter wie Drehwiderstand, Geräusch, Haptik,
Geschwindigkeit oder Mapping. Im nächsten Schritt konstruier-
ten die Entwickler Widerstände aus unterschiedlichsten
Materialien wie Aquariumschlauch, Plastikstreifen, Milchglas,
Lochblech, Dreiecksplastik und Neusilber, um harmonische
Reglerreihen mit sechs Abstufungen von weich bis hart zu garan-
tieren. Zum Schluss erstellten sie ein simples Interface, das
eine verständliche Menünavigation mittels Drehreglern abbildet.

Die Beiträge auf den Seiten 14 bis 17 stammen aus WEAVE, dem
Interactive-Design-Magazin von PAGE (  www.weave.de  ). Die
Autoren sind Thomas Gläser, Markus Jaritz und
Philipp Sackl von envis precisely (  www.envis-precisely.com  )
PAGE eDossier 06.14 017
Interaktions-Prototyp
Auf der Suche nach Alternativen zu Maus
und Tastatur gilt es, moderne Benutzer-
schnittstellen zu gestalten, deren Inter-
aktionsmöglichkeiten den Anforderungen
der Anwendung Rechnung tragen. Wie
kann beispielsweise eine Eingabe für ein
Interface aussehen, das Wissen anschau-
lich vermitteln soll? Bei der interaktiven
Installation »Tiefsee« von Andreas
Burghart, Christian van Elten und Felix
Hohl können Besucher mit einem
alten Drehrad ein U-Boot virtuell ins Meer
abtauchen lassen. Hier griffen die
Studenten auf Baumarktprodukte wie
Metallrohre und -gitter zurück. Stößt
der Besucher auf einen Fisch, spürt er,
wie die Plattform vibriert. Ein lauter
werdender Rauschton verdeutlicht den
enormen Druck in bis zu 10 000 Meter
Tiefe. Für das haptische Feedback kam ein
Bodyshaker zum Einsatz – ein Körper-
schallgenerator, der einen fühlbaren Bass
erzeugt, den man im Idealfall nicht hört.
Den Rauschton generierte ein Subwoofer,
dessen Lautstärke über Y-Mauskoordina-
ten reguliert wird. Auf diese Weise bauten
die drei mit geringem Materialaufwand
einen eigenständigen Prototyp, der auf
klassische Eingaben verzichtet und
somit ein neues Bediengefühl vermittelt.
Demo-Prototyp
»Erkläre es mir, und ich werde es verges-
sen. Zeige es mir, und ich werde mich
erinnern. Lass es mich selber tun, und ich
werde es verstehen.« Wie schon Kon-
fuzius sagte, verläuft der Königsweg des
Begreifens über das eigene Tun. Aus
diesem Grund besteht der überzeugends­-
te Prototyp aus der funktionsfähigen
Demonstration entscheidender Teile des
finalen Produkts. Dabei kann die User
Experience im Vordergrund stehen oder
das Ziel eher sein, die Art des Feed-
backs zu begutachten. Bei dem von
Christian Perstl und envis precisely
entwickelten Multitouch-Software-Proto­
typ für das Designportfolio molecule
mt wird deutlich, wie leicht sich die Inter-
aktion mit der Anwendung am Gerät
selbst erleben lässt. Dieses Demo regt
dazu an, das Interface spielerisch zu
erforschen, etwa beim Betrachten von
Designprojekten. Visualisiert werden
diese durch vieleckige Formen – die Mole-
küle –, die sich aus einzelnen Elemen-
ten zusammensetzen. Diese stehen für
verschiedene Designkategorien und
zeigen so die Ausrichtung der Projekte.
Inspiration pur!

Gleich
zugreifen !

PAGE präsentiert die entscheidenden Trends

in Sachen Konzeption, Gestaltung & Technik.
Jetzt zugreifen: shop.page-online.de/page-mini