Und PAGE ist auch dabei! Redakteurin Laura Reinke wird in unseren neuen PAGE Job Talks unter dem Motto »Von Wikingern und Marshmallows« drei Gesprächspartner von PAGE-Connect-Partneragenturen zu ihrem Berufsalltag interviewen: Was sind die Aufgaben einer UX-Designerin, wie arbeitet ein Interaction Designer und mit womit genau beschäftigt sich ein Creative Engineer? Was nervt dabei manchmal und was macht besonders viel Spaß? Bei uns gibt’s echte Einblicke und handfeste Informationen statt Buzzwords und Blabla!
Auf die Bühne kommen:
Christopher Baumbach, Senior Creative Engineer, Demodern (VR Design)
Was es mit den Wikingern und Marshmallows auf sich hat, verraten wir natürlich auch… Wir freuen uns sehr, wenn viele PAGE-Leser im Publikum dabei sind! Das ganze Programm des Forward Festivals ist hier zu sehen. Ein paar letzte Tickets für Spontane sindhiernoch erhältlich.
Alle Eckdaten:
WAS? PAGE Job Talks – von Wikingern und Marshmallows. Mit Christopher Baumbach, Jasmin Fayad und Daniel Kränz, moderiert von PAGE-Redakteurin Laura Reinke
WANN? Donnerstag, 05.07.2018, von 16:00 Uhr bis 16:55 Uhr
WO? Living Room Stage, Millerntorstadion, Hirtenstraße 21A, 20535 Hamburg
Nächste Woche, am 18. und 19. April 2018, findet in Hamburg das ADC Festival statt – und PAGE ist dabei. Was wir vorhaben, verraten wir hier.
●Nächsten Mittwoch geht’s los: Auf dem ADC Festival in Hamburg werden die besten Arbeiten aus Werbung und Design ausgestellt und ausgezeichnet. Auf dem Kongress teilen Speaker wie Illustrator Christoph Niemann ihre Visionen. Im neuen Open Space geht’s um anwendungsbezogene Themen. Beispielsweise wird Sabina Hesse, Kreativdirektorin von Crispin, Porter + Bogusky in L. A., erzählen »Wie man als Italiener den Super Bowl gewinnt«.
Und dort ist auch…
PAGE mit am Start! Redakteurin Nina Kirst wird in unseren neuen PAGE Job Talks unter dem Motto »Von Wikingern und Marshmallows« drei Gesprächspartner von PAGE-Connect-Partneragenturen zu ihren Berufen interviewen: Was machen eigentlich ein Interaction Designer, ein VR Designer oder ein Informationsdesigner den ganzen Tag? Was ist besonders toll, was nervt manchmal? Und was sollte man beachten, wenn man eine dieser Richtungen einschlagen möchte? Echte Einblicke und handfeste Informationen statt Buzzwords und Blabla!
Auf die Bühne kommen:
Daniel Kränz, Head of Interaction Design, deepblue networks (Interaction Design)
Christopher Baumbach, Senior Creative Engineer, Demodern (VR-Design)
Jan Schwochow, Gründer und Geschäftsführer, Infographics Group (Informationsdesign)
Auch was es mit den Wikingern und Marshmallows auf sich hat, werden die Zuschauer natürlich erfahren. Wir freuen uns, möglichst viele PAGE-Leser im Publikum zu sehen – die auch gern Fragen stellen dürfen! Die Tickets für den Open Space sind sogar kostenlos zu haben (hier bestellen).
Alle Eckdaten:
WAS? PAGE Job Talks – von Wikingern und Marshmallows. Mit Daniel Kränz, Jan Schwochow und Christopher Baumbach, moderiert von PAGE-Redakteurin Nina Kirst
WANN? Mittwoch, 18.04.2018, von 11:20 Uhr bis 12:05 Uhr
WO? Open Space auf dem ADC Festival (Kampnagel, Jarrestraße 20, 22303 Hamburg)
Außerdem unterstützt PAGE als Hauptsponsor die ADC Junior Preisverleihung. (Am 18.04. um 18 Uhr. Die Teilnahme ist ebenfalls kostenlos).
Das ganze ADC-Programm sowie Tickets sind hier zu finden.
Für alle PAGE-Leser haben wir noch eine weitere Aktion geplant. Guckt am Mittwoch unbedingt auf unserem Facebook-, Instagram- oder Twitter-Account vorbei -> @PAGEmag
Übrigens: Unsere Job Talks wird es auch auf der TYPO Berlin am 18.05.2018 geben – dort geht es dann um die Themen UX Design, Service Design und Informationsdesign. Mit spannenden Gesprächspartnern von Aperto, SinnerSchrader und Infographics Group. Mehr Details dazu demnächst hier!
Wie gestaltet man Autokataloge informativ und multimedial, um Endkonsumenten und Händler in 135 Ländern zu erreichen? Für BMW konzipierte Serviceplan eine neue modulare App für iPad und Smartphone.
●Wer in unseren Tagen mit dem Gedanken spielt, sich ein neues Auto zu kaufen, informiert sich höchstwahrscheinlich zuerst online. Auf den verschiedenen digitalen Plattformen sucht er alle relevanten Details zum gewünschten Modell heraus, bevor er das erste Mal beim Autohändler vorbeischaut, dort in gedruckten Katalogen blättert oder eine Probefahrt vereinbart. Bis die finale Kaufentscheidung fällt, greift der Interessent immer wieder auf unterschiedliche digitale Informationsinhalte zurück – unterwegs auf dem Smartphone, in der Mittagspause am Desktop oder zu Hause auf dem Tablet. Er kommt also auf etlichen Wegen und Geräten immer wieder mit der Automarke seiner Wahl in Berührung.
»Interface Designer müssen nicht coden können. Sie sollten aber verstehen, was technisch möglich ist, damit die Ideen, die sie entwickeln, auch umsetzbar sind« Brian Ta, Senior Art Director Digital, Serviceplan Content Hamburg
Um diese Begegnungen möglichst ansprechend zu gestalten und den vielfältigen Ansprüchen gerecht zu werden, die Menschen heutzutage an Informationen rund um Neuwagen haben, entwickelte Serviceplan Content Hamburg für die Verkaufsliteratur von BMW ein umfangreiches neues Konzept. Das Ziel: eine multimediale, zeitgemäße Lösung, die auf allen Kanälen funktioniert. Die Serviceplan-Tochterfirma am Standort Hamburg arbeitet bereits seit acht Jahren für BMW im Bereich Verkaufsliteratur. Insgesamt gestalten 45 Mitarbeiter, darunter Interface Designer, technische Redakteure, Digitalspezialisten, Analogexperten, Texter und Konzepter, gemeinsam die Inhalte – Fotos, Videos und Texte.
Die Herausforderung dabei: BMW kommuniziert als globale Marke in 135 Ländern in 40 Sprachen und richtet sich mit der Verkaufsliteratur sowohl an Endkonsumenten als auch an BMW-Händler. Zu allen Fahrzeugmodellen entstehen unzählige Inhalte, die auf unterschiedlichen Kanälen in die verschiedenen Märkte gespielt werden. Etliche dieser Inhalte sprechen gleich mehrere Zielgruppen an. Das Serviceplan-Team suchte nach einem Weg, den Content nur einmalig produzieren, aber mehrfach ausspielen zu können. »Uns war dabei wichtig, dass alles wie aus einer Hand wirkt«, erklärt Jakob Ulrich, Interface Designer und Head of Digital Art bei Serviceplan Content Hamburg.
Modular geht’s leichter
Die Interface Designer konzipierten eine Tablet- und Smartphone-App sowie einen digitalen Argumentationsleitfaden für BMW-Händler, die wie Content-Baukastensysteme funktionieren. Für jedes BMW-Modell gibt es mehrere Kategorien, die flexibel mit Content-Modulen gefüllt werden können. Hinter jedem Modul verbergen sich weiterführende Inhalte.
»Die Werte von BMW schwingen im Interface Design immer mit: Die Marke ist hochwertig, sie strahlt etwas Zurückgenommenes aus, statt protzig zu sein« Jakob Ulrich, Head of Digital Art, Serviceplan Content Hamburg
Die neue Struktur setzte Serviceplan zunächst für die 5er-Limousine um, alle weiteren BMW-Modelle passt die Agentur nach und nach an. Für die 5er-Limousine entstanden zunächst 18 Module, die sich mit Themen rund um den Wagen befassen – zum Beispiel dem Exterieur, dem Interieur oder der Geschichte des Modells. »Die Themenseiten sind wie eigenständige One-Pager aufgebaut und durch die Module individuell anpassbar«, erklärt Jakob Ulrich.
Nachdem die Entscheidung für ein modulares Prinzip gefallen war, legte das Team im nächsten Schritt das iPad als Mastergerät fest, für dessen Seitenverhältnisse sämtliche Inhalte im Querformat angelegt werden sollten. »In der alten App stellten die Printkataloge unsere Vorlage für die digitale Umsetzung dar«, sagt Brian Ta, Senior Art Director Digital bei Serviceplan Content Hamburg und vor allem verantwortlich für alle visuellen Inhalte. Die alte Vorgehensweise erforderte einen hohen Arbeitsaufwand und war einfach nicht mehr zeitgemäß, weswegen das Serviceplan-Team den Ansatz komplett umdrehte. »Durch den Digital-First-Ansatz richten sich jetzt alle Medien nach dem 4:3-Format der iPad-App – auch die Printprodukte«, sagt Ta. Auf diese Weise lassen sich Fotos und andere Bildinhalte ohne Formatanpassungen sowohl in der App als auch in der Printbroschüre nutzen. Die App ist responsiv, sie zeigt die Inhalte am Smartphone im Hochformat an.
Das Team definierte unterschiedliche Kategorien, um die Module zu clustern: »Highlights«, »Innovation und Technik«, »Ausstattung« und »Special und Services«. Weil die meisten Informationen zur 5er-Limousine sowohl für Händler als auch für Endkonsumenten relevant sind, finden sich diese in beiden Anwendungen. Lediglich die Themen der »Special und Services«-Kategorie werden nur Endkonsumenten gezeigt. Händler erhalten stattdessen Informationen zu vergleichbaren Autos von Wettbewerbern, denn in Zeiten umfassend informierter Kunden müssen Autohändler sich unbedingt einen Wissensvorsprung aneignen, um auf jede erdenkliche Frage vorbereitet zu sein und im
Verkaufsgespräch mit guten Argumenten punkten zu können. Auch von Land zu Land unterscheiden sich die Module teilweise: Einige Inhalte sind für alle Regionen relevant, andere – wie etwa technische Details – können variieren.
Ein Design Sprint pro Woche
Drei Monate arbeitete Jakob Ulrich mit einer Entwicklerin, einem Konzepter und einem Digitalberater an der Erstellung der Module. »Wir haben uns in sogenannten Design Sprints organisiert«, sagt er. »Jede Woche haben wir ein Modul entwickelt – immer nach dem gleichen Ablauf: Montags wird recherchiert, dienstags skizziert, mittwochs designt, donnerstags programmiert und freitags getestet.« Am Ende der Woche präsentierten sie die Ergebnisse und den Entstehungsprozess ihren Teamleitern.
»Als Interface Designer versetzt man sich immer wieder in den User hinein, um die ideale Schnittstelle zwischen Mensch und Gerät zu gestalten. Ist die Bedienung so logisch, intuitiv und selbsterklärend wie möglich? Fühlt der Nutzer sich jederzeit gut orientiert?« Jakob Ulrich, Head of Digital Art, Serviceplan Content Hamburg
Abhängig vom jeweiligen Wochentag kamen sehr unterschiedliche Tools zum Einsatz: So recherchierte das Team online und in Fachzeitschriften, scribbelte mit Papier und Stiften, nutzte in den Designphasen Sketch, Photoshop und das Animationsprogramm After Effects sowie Framer für das Erstellen von Prototypen. »Framer ist ein tolles Tool, weil es zweigeteilt funktioniert: Man kann damit nicht nur interaktive Prototypen erstellen, sondern auch gleich ein Interface designen und umsetzen«, erklärt Jakob Ulrich. »Um die Programmierung hat sich hauptsächlich die Entwicklerin gekümmert, aber mittlerweile können wir Prototypen oder Klickdummys auch selbst bauen«, erklärt er. Brian Ta ergänzt: »Interface Designer müssen nicht zwangsläufig coden können. Sie sollten aber verstehen, was technisch möglich ist, damit die Ideen, die sie entwickeln, auch umsetzbar sind.«
Zwischen Nutzer und Marke
Als nach drei ungemein intensiven Design-Sprint-Monaten im April 2016 die Module fertig waren, erstellte das Team eine große Sitemap für die App. Hier legte es fest, wie die Module angeordnet werden und wo welche Inhalte gezeigt werden sollen. Anschließend ging es an die Umsetzung: Jede Themenseite wurde wie eine eigene Webseite programmiert und mit von Serviceplan Content Hamburg produzierten Fotos, Videos und Texten bestückt.
Während des gesamten Prozesses hatte das Team stets die künftigen Nutzer im Blick: »Als Interface Designer versetzt man sich immer wieder in den User hinein, um die ideale Schnittstelle zwischen Mensch und Gerät zu gestalten. Ist die Bedienung so logisch, intuitiv und selbsterklärend wie möglich? Fühlt der Nutzer sich jederzeit gut orientiert?«, so Jakob Ulrich. Zusätzlich müssen die Qualitäten der Marke transportiert werden: »Die Werte von BMW schwingen im Interface Design stets mit. Die Marke ist hochwertig, sie strahlt etwas Zurückgenommenes aus, statt protzig zu sein. Entsprechend konzentriert sich auch das Design auf das Wesentliche.«
Um von Anfang an ein Gefühl für den Look der neuen BMW Dynamic Sales Media zu bekommen, nutzte das Serviceplan-Team im Designprozess das Atomic-Design-Prinzip. Das heißt: Jedes Designelement wurde von Anfang an detailliert gestaltet, statt mit groben Skizzen zu arbeiten (siehe »Atomic Design«, unten).
Digitales Blättern
In der fertigen App fallen sofort die klare Struktur und die großen Bilder auf: Die Kategorien zur 5er-Limousine sind unterei-
nander angelegt, sodass man beim Durchscrollen bereits die ersten Module auf dem Bildschirm sieht, durch die man seitwärts swipen kann. So können Nutzer von Inhalt zu Inhalt blättern, ohne zwischendurch eine Navigationsleiste zu bedienen – wie in einer gedruckten Broschüre. Findet man ein Modul interessant und tappt darauf, kommt der gesamte Inhalt zum Vorschein – inklusive Videos, Fotogalerien und Texten.
Da die Module für die iPad-App von Anfang an responsiv entwickelt wurden, war keine Anpassung für andere Geräte mehr nötig. »Die Inhalte sind identisch, reagieren aber teilweise auf dem Smartphone dynamischer als auf dem Tablet«, sagt Brian Ta. »Das war bei der Entwicklung eine der großen Herausforderungen – bei Tabellen beispielsweise noch mehr als bei Text-Bild-Kombinationen.« Auf dem Smartphone sind alle Inhalte im Hochformat sichtbar, Fotos und Videos sind wie am iPad im Querformat gehalten und nehmen die volle Breite des Smartphone-Displays ein. Die zugehörigen Printkataloge sind ebenfalls im neuen 4:3-Format gestaltet, sodass die Fotos die gleichen Seitenverhältnisse haben wie in der App.
Als nach zehn Monaten die neuen BMW Dynamic Sales Media für die 5er-Limousine fertig waren, blickte das Team auf eine ausgesprochen intensive und lehrreiche Zeit zurück: »Vor allem in den Sprintwochen habe ich mich sehr weiterentwickelt. Wir haben gelernt, die Fühler auszustrecken – in alle möglichen Richtungen«, sagt Jakob Ulrich. Und mit der fertigen App ist das Team sehr zufrieden, wie Brian Ta berichtet: »Sie macht Spaß! Obwohl es sehr viel Inhalt ist, lässt er sich angenehm konsumieren.«
Was ist eigentlich Atomic Design?
Die Webdesign-Methode hilft bei der Gestaltung komplexer Projekte.
Der amerikanische Webdesigner Brad Frost erfand 2013 das Prinzip, das als iterativer Gestaltungsansatz für Websites dient und wie ein Baukastensystem funktioniert: Man entwickelt zuerst die Designgrundbestandteile und baut diese nach und nach zu immer größeren Einheiten zusammen. Los geht es mit den kleinsten anzunehmenden Einheiten, Atome genannt. »Bei den BMW Dynamic Sales Media gehörten Icons, Fotos, Schriftarten oder die Hintergrundfarbe Weiß zu den Atomen«, erklärt Jakob Ulrich, Head of Digital Art bei Serviceplan Content Hamburg.
Im zweiten Schritt setzt man die Atome zu Molekülen zusammen – so entstehen beispielsweise Text-Bild-Kombinationen. Mehrere Moleküle sind wiederum Organismen. Diese bildeten die Module für die BMW Dynamic Sales Media. Kombiniert man Organismen beziehungsweise Module, entwickeln sich daraus Templates und im letzten Schritt komplette Seiten.
Die Vorteile der Methode: Man arbeitet so kleinteilig, dass Details direkt erkennbar sind und die Richtung vorgeben. »Im Vergleich wirken Skizzen oder Wireframes eher grob, denn dort sind nur die nötigsten User-Interaktions-Möglichkeiten zu sehen«, sagt Jakob Ulrich. Durch die Unterteilung in Atome, Moleküle et cetera ergibt sich zudem eine logische Struktur, die einen guten Überblick über ein Projekt gewährt. Für komplexe Großprojekte wie die BMW-Verkaufsliteratur ist Atomic Design daher gut geeignet – für einen One-Pager lohnt sich die aufwendige Methode hingegen eher nicht.
Von kleinen Elementen zum großen Ganzen statt andersherum. Das Ergebnis ist konsistentes, durchdachtes Design.
Alle weiteren PAGE-Connect Artikel zum Thema Interface Designer finden Sie hier.
Zum Download des PAGE Connect eDossiers »Das macht ein Interface Designer bei Serviceplan« geht’s hier.
Martin Luthers Thesenanschlag jährt sich 2017 zum 500. Mal. Zu diesem Anlass gestaltete die Infographics Group fürs Landesamt für Denkmalpflege und Archäologie die umfangreiche digitale Ausstellung »Here I Stand«.
Posterfinale Creative Director Jakub Chrobok überprüft die letzten Details an einem der dreißig Poster.
●Mit seinen 95 Thesen gegen den Ablasshandel begründete Martin Luther 1517 die Reformation. Er läutete damit einschneidende historische Veränderungen ein, die unsere Welt immer noch prägen. Dennoch wissen viele nur wenig über Luther und die Reformation. Wie lässt sich die Fülle an Informationen über sein Leben, sein Wirken und seine Zeit ansprechend darstellen? Wie eröffnet man im Digitalzeitalter den Zugang zu historischen Quellen auf spannende Weise? Wie begeistert man eine junge Zielgruppe mit einer recht kurzen Aufmerksamkeitsspanne für Geschichte?
Zum 500-jährigen Reformationsjubiläum ließ sich das Landesamt für Denkmalpflege und Archäologie Sachsen-Anhalt mit dem Deutschen Historischen Museum in Berlin und weiteren Partnern eine außergewöhnliche Antwort auf diese Fragen einfallen: eine digitale Luther-Ausstellung, für die man nicht ins Museum muss. Zusätzlich sollten dreißig Poster alles Wissenswerte über den berühmten Reformator darstellen – downloadbar, sodass man mit den ausgedruckten Plakaten sogar eine eigene kleine Schau organisieren könnte.
Von Anfang an war klar, dass Infografiken ein zentraler Bestandteil der Ausstellung sein sollten: Sie vermitteln Informationen ebenso anschaulich wie abwechslungsreich, benötigen nicht viel Text und ermöglichen auch jungen Betrachtern einen schnellen Zugang zu komplexen Themen. Infografiken funktionieren sowohl auf Plakaten als auch in Büchern und lassen sich in digitaler Form darüber hinaus mit Animationen anreichern.
»Die Illustrationen sind modern, die Animationen involvieren den Betrachter zusätzlich. So schaffen wir es, auch junge Leute für Luther zu begeistern« Jan Schwochow, Gründer und Geschäftsführer der Infographics Group in Berlin
»Hier stehe ich, ich kann nicht anders«
Als die Berliner Infographics Group von der Ausschreibung des Museums erfuhr, waren der Gründer und Geschäftsführer Jan Schwochow und seine Mitarbeiter sofort begeistert. »Uns faszinierte, dass das Projekt alle Facetten unserer Arbeit umfasste – von der Datenvisualisierung über Landkarten und Illustrationen bis zu Animationen und 3D-Objekten«, so Jan Schwochow.
Diese Leidenschaft überzeugte den Auftraggeber. Nach gewonnenem Pitch arbeiteten die zwanzig Mitarbeiter der Infographics Group ein Jahr an der Planung und Umsetzung des Projekts mit dem Titel »Here I Stand« aus dem angeblichen Schlusssatz der Rede Luthers vor dem Reichstag zu Worms. Dafür nutzten sie ihre ganze Werkzeugkiste: von Excel und diversen Google-Tools für die Projektplanung über Illustrator zum Skizzieren und Illustrieren bis OpenRefine und Sublime Text zum Programmieren der Datenvisualisierungen, dazu Cinema 4D und Sketchfab für die 3D-Objekte, After Effects und Hype zur Animation, QGIS zur Erstellung von Karten sowie klassische, keineswegs zu vernachlässigende Skizzenbücher und Stifte für Scribbles und Entwürfe.
Die Infographics Group, 2007 als Golden Section Graphics gegründet, besteht größtenteils aus Informationsdesignern, die verschiedene Schwerpunkte von Illustration bis 3D-Animation haben und teils auch Data Visualists sind – also große Datenmengen mittels eigener Programmierungen individuell darstellen können. Zudem gehören zwei Projektmanager dazu. Maßgeblich unterstützt wurde die Berliner Agentur bei diesem Projekt von wissenschaftlichen Mitarbeitern des Deutschen Historischen Museums, die den Großteil der Recherche übernahmen.
Kick-off: 30 Themen, unzählige Tools
In einem ersten Workshop sprachen das Projektteam des Museums sowie einige Teammitglieder der Infographics Group im Detail über die bereits festgelegten Themen für die Poster. Neben grundlegenden Aspekten wie der Herkunft Martin Luthers, seinen Aufenthaltsorten oder den politischen Geschehnissen dieser Zeit gehörten dazu auch die Konflikte zwischen den und die Netzwerke der Reformatoren, die damalige Rolle der Frau und die Visualisierung besonderer Ereignisse wie der berühmten Rede in Worms oder Luthers Bibelübersetzung.
»Der Fokus auf Infografiken ohne viel Text stand von vornherein fest – ergänzend wollten wir Animationen und 3D-Objekte einbinden«, erklärt Jan Schwochow. Alle Motive sollten auf Plakatformaten von A3 bis A1 funktionieren, aber auch für das Buch »Lutherbound« sowie die responsive »Here I Stand«-Microsite gestaltet beziehungsweise angepasst werden. Und das auf Deutsch und auf Englisch, da die Ausstellung in ihrer digitalen Form überall auf der Welt verständlich sein sollte. Später kamen noch viele weitere Sprachen hinzu.
»Die große Chance, alles zu zeigen, was wir können, reizte uns an dem Projekt sehr« Jan Schwochow
Nachdem sie die vorgesehenen Themen genauer kennengelernt hatten, verschafften sich Jan Schwochow und sein Team zusammen mit den Mitarbeitern des Deutschen Historischen Museums einen Überblick über die vorhandenen Informationen: Ölgemälde, Holzschnitte, Kupferstiche, Landkarten, Fotomaterial, Texte in Form von Briefen aus der Zeit und zahlreiche Bücher dienten als Quellen.
Daraufhin entwickelten die Informationsdesigner der Infographics Group erste Skizzen und Konzepte. Eine der größten Herausforderungen dabei: Die enorme Vielfalt an Reformationsthemen trifft auf ebenso vielfältige Visualisierungsmöglichkeiten – doch was passt zusammen? Wo ist die Informationsmenge derart groß, dass eine Datenvisualisierung sinnvoll wäre? Welcher Bereich eignet sich für Illustrationen, und an welcher Stelle könnte man Animationen am besten einsetzen?
In diesem frühen Stadium sind laut Jan Schwochow Bleistift-Scribbles hilfreich, mit denen die Designer ausprobieren, was passen könnte. So reifte zum Beispiel die Idee, Schlüsselszenen als Comic darzustellen. Auf den Plakaten und im Buch bestehen diese aus Bildfolgen, die die Informationsdesigner detailliert illustrierten. Für die Onlineversion verwandelten sie ihre Illustrationen über eingebundene Animationen in eine Scrollgrafik, sodass der Betrachter mit seiner Maus das Erzähltempo der Sequenz selbst vorgibt. Dafür nutzten sie Adobe After Effects und Edge Animate sowie Tumult Hype. Nach ersten Storyboards folgten Animationsstichproben in Animatics. Dann entwickelten sie Illustrationen und Figuren, die sich bewegen können. »Die Illustrationen sind modern, die Animationen involvieren den Betrachter zusätzlich. So schaffen wir es, auch junge Leute für Luther zu begeistern«, so Jan Schwochow. »Der Gedanke, mit dieser Ausstellungsform die ganze Welt zu erreichen, hat uns angetrieben.«
»Je nach Medium und dessen Größe muss ein Thema unterschiedlich erzählt werden, da der Lesefluss des Betrachters sich ändert« Jan Schwochow
Recherche: alte Quellen, neue Wege
»Die Arbeit mit den historischen Quellen war herausfordernd für uns, da meistens keine Belegmaterialien zur Verifizierung existierten«, sagt Jonas Parnow, der als Informationsdesigner und Data Visualist an dem Projekt beteiligt war. »So gibt es beispielsweise etliche unterschiedliche Zeichnungen von der Tür, an die Luther seine Thesen angeschlagen hat – wie sie wirklich aussah, lässt sich nicht herausfinden. Daraus entstand die Idee, eine Grafik mit den verschiedenen Darstellungen der Tür zu erstellen, um auf diese Art und Weise zu vermitteln, dass nicht alles eindeutig überliefert ist.«
Neben den Luther-Postern entstanden zwanzig 3D-Objekte, die nicht nur für die digitale Ausstellung gedacht waren, sondern sich auch mit einem 3D-Drucker produzieren lassen. Über einen Link zur 3D-Sharing-Plattform Sketchfab kann man zum Beispiel eine Ablasstruhe oder einen Krug aus dem 16. Jahrhundert ansehen und die Daten für den 3D-Druck bestellen. Die bereitgestellten Objekte bearbeiteten die 3D-Experten der Infographics Group in erster Linie mittels Cinema 4D. Damit erweiterten sie ihre Kenntnisse um die Gestaltung realer 3D-Objekte.
»Auch in Sachen Allgemeinbildung haben wir einiges dazugelernt«, freut sich Jan Schwochow. »Etwa wie damals eine Bibel entstand, dass Bücher in Fässern transportiert wurden, wie sehr Luther die deutsche Sprache geprägt hat und wie die Welt um 1500 aussah. So versteht man Zusammenhänge, die man vorher nicht kannte.«
Manche Plakate erforderten mehr Detailverliebtheit als andere: Einer der Informationsdesigner baute zum Beispiel die Stadt Wittenberg basierend auf alten Plänen nach. Dafür nutzte er ebenfalls Cinema 4D. »Allein für die Dächer haben wir Tage gebraucht«, berichtet Jan Schwochow. »Man hat ja lediglich alte Holzschnitte und Stadtansichten, nach denen man sich richten kann.« Und doch entspricht gerade diese Detailversessenheit einem der obersten Gebote der Infographics Group: dem gestalterischer Korrektheit.
Workflow: Viele Aufgaben, ein Ziel
Die Infographics Group arbeitete immer an mehreren Plakaten gleichzeitig – je nach Aufwand und Art der Visualisierung in Zweier- oder in Dreierteams pro Poster sowie mit einem Hauptverantwortlichen. »Klare Strukturen sind bei der Umsetzung großer und langwieriger Projekte wichtig, sonst wird es schnell unübersichtlich«, so Jan Schwochow.
Die Projektmanager organisierten sich hauptsächlich mit Google-Anwendungen und ausgedruckten Kalenderplänen, in denen sie auch die Zusammenarbeit mit dem Museumsteam koordinierten und festhielten, wann welches Plakat fertig sein sollte. Denn parallel dazu arbeitete die Infographics Group auch an der Entwicklung der Microsite www.here-i-stand.com und der Adaption der Poster für diese.
Eine weitere Herausforderung bestand in den unterschiedlichen Formaten beziehungsweise in deren Anpassung: Poster, Buchdoppelseite oder interaktive Webvisualisierung. Eine Infografik, die für ein DIN-A1-Plakat konzipiert ist, kann man nicht einfach auf ein Buchformat verkleinern. »Je nach Medium und dessen Größe muss ein Thema ganz unterschiedlich erzählt werden, da der Lesefluss des Betrachters sich ändert«, erklärt Jan Schwochow.
Auch die Responsivität der Microsite erforderte mehr Aufwand, als sie zunächst erwartet hatten. Jede einzelne Grafik wurde in Illustrator in vier Versionen umgebaut und in den unterschiedlichen Breiten und Höhen angelegt. Später wurden Skripte genutzt, die diese Versionen in browserkompatible Formate umwandelten. »Wir hätten auch einfach PDF-Dateien hochladen können, in die jeder selbst reinzoomen kann«, sagt Jan Schwochow. »Doch das erfüllt nicht den Anspruch, den wir an unsere Arbeit haben.«
Die Detailliebe der Infographics Group hat sich gelohnt: Die Poster werden seit Oktober 2016 weltweit für Luther-Ausstellungen eingesetzt, etwa in Polen, Estland, Japan oder auf den Philippinen. Viele der Besucher teilen ihre Eindrücke unter dem Hashtag #hereistand in den Social Media. Luther ist also definitiv im Digitalzeitalter angekommen.
Brieffreund Martin Luther
So bereiteten Historiker und Informationsdesigner den umfangreichen Briefverkehr Luthers auf
Für die Infografik »Reformation VIPs« recherchierte eine wissenschaftliche Mitarbeiterin des Deutschen Historischen Museums Berlin monatelang in antiken Büchern, um Licht in den Briefwechsel Luthers mit weiteren Reformatoren sowie Politikern und Humanisten der Jahre 1503 bis 1560 zu bringen. Allein von Luther fanden sich rund 4300, von Melanchthon gar 7500 Schriftstücke, wobei die Quellen bis ins Jahr 1872 reichten. »Zur Visualisierung entschieden wir uns für eine Netzwerkgrafik, die auf einen Blick zeigt, welcher Reformationsprotagonist welchem Zeitgenossen schrieb. Begleitend stellten wir in einem Zeitstrahl dar, in welchem Jahr die Briefe verschickt wurden«, erklärt Jan Schwochow. Für die Datenvisualisierung nutzte das Team zunächst die Open-Graph-Viz-Plattform Gephi und gestaltete dann in Illustrator die Printvariante. Für die Onlineversion kam die JavaScript-Library Sigma.js zum Einsatz.
Das Expertenwissen der Historiker war für die Recherche essenziell: »Mehr als 500 Jahre alte Handschriften zu entziffern ist extrem schwierig, wenn man sich damit nicht auskennt. Außerdem benötigt man viele Hintergrundinformationen, um zu verstehen, um wen es überhaupt geht«, erklärt Jan Schwochow. »Das Know-how der Geisteswissenschaftler war unabdingbar, doch es fiel ihnen nicht immer leicht, sich vorzustellen, wie die Infografik am Ende aussehen würde – deswegen konnten sie die Daten nicht entsprechend für uns vorbereiten. Für uns war es wiederum schwer, ihnen ohne vorhandene Daten zu beschreiben, was wir vorhaben«, ergänzt Informationsdesigner und Data Visualist Jonas Parnow.
So mancher Datensatz wurde mehrmals zwischen der Infographics Group und dem Museum hin- und hergeschickt, bis die Datenvisualisierung oder Infografik entstehen konnte. Auch aus diesem Grund recherchieren die Informationsdesigner der Infographics Group bei vielen ihrer Projekte selbst, sofern Zeit und Budget es erlauben.
Alle weiteren PAGE-Connect Artikel zum Thema Informationsdesign finden Sie hier.
Zum Download des PAGE Connect eDossiers »Das macht ein Informationsdesigner bei der Infographics Group« geht’s hier.
»Interface Design verändert sich konstant, sodass meine Arbeit sehr abwechslungsreich bleibt« sagt Kevin Eschweiler, Creative Director Digital bei Plan.Net in Hamburg. Was man sonst noch über das Berufsfeld wissen sollte …
●Kevin Eschweiler, 36, ist als Creative Director Digital bei der Serviceplan-Digitalagentur Plan.Net auf Interface Design spezialisiert. Wir sprachen mit ihm darüber, welche Aufgaben ihn tagtäglich beschäftigen – und welche Fähigkeiten für einen Interface Designer besonders wichtig sind.
Wie kamst du darauf, dich auf Interface Design zu spezialisieren? Eschweiler: Interface Design ist ein weites Feld und birgt noch viel Potenzial. Jeder kommt täglich mit Interfaces in Berührung. Das Internet ist natürlich kein Neuland mehr, doch trotzdem scheint es an einigen Stellen nicht komplett durchdacht zu sein. Als Nutzer fragt man sich oft: »Warum verhält sich das nicht so, wie ich es erwarte?« Man hat ein konkretes Bild davon, wie Berührungspunkte sich verhalten sollen, doch das wird nicht immer erreicht. Viele stürzen sich momentan auf fancy Disziplinen wie Virtual oder Augmented Reality, dabei sind die Basics noch ausbaufähig: Wie bediene ich das Interface? Wie lasse ich die Marke entsprechend mitschwingen?
»Es kommen fortwährend neue Formen von Interfaces hinzu. Auch für Dinge, an die heute noch niemand denkt«
Was hast du wo studiert? Eschweiler: Vor meinem Studium habe ich eine Ausbildung im Bereich Verpackungsdesign und Verkaufsförderung in meiner Heimatstadt Aachen gemacht. Das hat sich schnell ausgereizt angefühlt – man wird es zwar immer brauchen und es bietet Raum für kreative Ideen, doch es passiert wenig Innovatives. Mir erschien der Spielraum online dann einfach größer, sodass ich noch ein Studium angeschlossen habe: Communication & Multimedia Design. Der internationale Studiengang gliedert sich in ein Grundstudium an der Fachhochschule Aachen und ein Hauptstudium an der Universität Maastricht. Die Studenten und Dozenten stammten aus aller Welt, was ich sehr gut fand – auch, weil andere Nationalitäten und Kulturen ganz anders mit Designthemen umgehen. Mir hat außerdem gut gefallen, dass es möglich war, die Richtung der Spezialisierung selbst vorzugeben, sodass ich mich früh auf Interface Design fokussieren konnte.
Hat dich das Studium gut auf deinen jetzigen Job vorbereitet? Eschweiler: Eigentlich schon. Vor allem, weil man eben viel selbst gestalten konnte. Was außerdem sehr geholfen hat: Im Hauptstudium wurden reale Kunden eingebunden. Man hat von Anfang an echte Projekte angestoßen. Das war sehr lehrreich. Jedes Tool kann man lernen, jeden Prozess und jede Mechanik kann man sich aneignen, aber der Umgang mit Kunden und richtigen Projektabläufen ist etwas anderes – da hilft nur Erfahrung.
Was machst du in deinem Job bei Plan.Net genau? Eschweiler: Meine wichtigste Aufgabe ist es, die Bedürfnisse des Kunden zu verstehen und für diese mit dem Team eine Lösung zu entwickeln – vieles ist Übersetzungsarbeit. Ich habe je nach Projekt unterschiedliche Rollen, was daran liegt, dass wir momentan noch ein kleines Team aus sieben Leuten sind. Es kann also sein, dass ich selbst ein Interface gestalte. Bei einem anderen Projekt betreibe ich hingegen Kreativdirektion und führe das Team dahin, etwas zu erarbeiten. Parallel steuert man meist zwei bis vier Projekte.
»Mit Interface Design kommt jeder täglich in Berührung«
Wie läuft die Zusammenarbeit bei euch im Team? Eschweiler: Die Abstimmung untereinander ist total wichtig, wir sind ständig im Austausch. Gerade im Digitalbereich überschneiden sich die Gewerke stark, zum Beispiel Design, Konzept und Entwicklung. Niemand kann oder weiß alles, dafür hat man Experten in den verschiedenen Fachbereichen, aber alle müssen das gleiche Vokabular haben. Programmierer sollten auch ein bisschen Designverständnis mitbringen und andersherum. Wir sitzen meist auf Rufweite zusammen, ansonsten kommunizieren wir über Slack. Da wir derzeit noch ein kleines Team sind, haben wir sehr flache Hierarchien. Wir haben genug Arbeit, um zu wachsen, und werden uns planmäßig bis zum nächsten Jahr mindestens verdoppeln. Je größer wir werden, desto mehr hierarchische Zwischenebenen wird es dann geben.
Wie arbeitet ihr mit Kunden zusammen? Eschweiler: Kunden beauftragen keine Interfaces, sondern Lösungen für Anforderungen. Gute Interfaces sind Teil dieser Lösung, weswegen es sehr wichtig ist, die Anforderungen genau zu verstehen. Das funktioniert gut in Workshops, in denen wir im Dialog aus dem Kunden herauskitzeln, worauf es ihm bei einem Projekt genau ankommt. So haben wir ihn direkt eingebunden und schaffen gemeinsam eine Grundlage, was die Zusammenarbeit erleichtert. Wenn wir mit Projekten loslegen, versuchen wir, schnell in Prototypen zu arbeiten. Der Kunde wird dadurch unmittelbar eingebunden und kann jederzeit sehen, was sich verändert. Er ist immer auf dem aktuellen Stand, ohne dass Dokumentation und Kommunikation überproportional viel Zeit beanspruchen.
Ohne welche Tools wärst du absolut aufgeschmissen? Eschweiler: Sketch hat sich wirklich etabliert und löst gerade viele andere Tools ab. Das Programm unterstützt inzwischen nahtlos Arbeitsschritte vom konzeptionellen Wireframing bis zum fertigen Design. Es entstehen sogar einigermaßen brauchbare Codeschnipsel, mit denen der Entwickler etwas anfangen kann. Man hält damit die Kommunikationswege kurz und schafft es, Sachen schnell auf die Straße zu bringen. Für komplexere Animationen, die Sketch nicht abbilden kann, nutze ich After Effects. Die Adobe-Palette taucht auch immer wieder auf, für Bildbearbeitungen kommt man beispielsweise an Photoshop nicht vorbei. Alles andere kann Sketch schon ganz gut.
Wie lange arbeitest du üblicherweise an einem Projekt? Eschweiler: Das unterscheidet sich stark. Manchmal nur ein bis zwei Wochen, wenn es ganz schnell gehen muss. Bei solchen Projekten geht es dann natürlich eher um Ideenskizzen als um fertige Produkte. Viele Projekte haben kein Ende, da sie sich ständig weiterentwickeln.
»Klassische Werbung kommuniziert einseitig über Kampagnen. Doch wirklich mit der Marke in Berührung – im wahrsten Sinne des Wortes – kommt man über das Interface«
Was gefällt dir besonders gut an deinem Job? Eschweiler: Das Phänomen Interface verändert sich konstant, sodass meine Arbeit sehr abwechslungsreich bleibt. Interface bedeutet so viel mehr, als auf Screens zu klicken oder auf Smartphones herumzutippen. Durch die Digitalisierung kommen fortwährend neue Formen von Interfaces hinzu, auch für Dinge, an die heute noch niemand denkt. Auch Kunden wechseln und entwickeln sich weiter, das Team wächst. Es ist eine angenehme Form der Unbeständigkeit, die einen wissen lässt, dass man morgen nicht das Gleiche tun wird wie heute.
Wie bleibst du bei all den neuen Entwicklungen am Ball? Eschweiler: Man muss wirklich eine Begeisterung für das Thema haben. Im Team hat jeder unterschiedliche Interessen und hält die anderen über neue Entwicklungen auf dem Laufenden – zum Beispiel, was neuerdings technisch möglich ist oder wenn man etwas Innovatives im Interface- oder Designbereich gesehen hat. Wenn dann ein neues Projekt oder Problem auftaucht, erinnert man sich wieder daran und hat direkt einen Lösungsansatz parat. Und auch Messen und Konferenzen bringen uns weiter.
Welche Projekte machen dir besonders viel Spaß? Eschweiler: Die Projekte, bei denen das gleiche Verständnis herrscht, das ich auch habe. Dass Interfaces nicht nur Schnittstellen zwischen Mensch und Maschine sind, sondern auch zwischen Kunde und Marke. Nur wenn sie gut funktionieren und sich so anfühlen, wie die Marke spricht, ist es ein gutes Interface. Klassische Werbung kommuniziert einseitig über Kampagnen. Doch wirklich mit der Marke in Berührung – im wahrsten Sinne des Wortes – kommt man über das Interface.
Und was sind die besonderen Herausforderungen? Eschweiler: Es gibt da diesen berühmten Stolperstein: Zu viele Köche verderben den Brei. Das gilt besonders dann, wenn man mit Partnern oder anderen Agenturen zusammen an einem Projekt arbeitet, die ein anderes Verständnis, einen anderen Anspruch oder andere Ziele haben. Wenn man in unterschiedliche Richtungen läuft, wird es schwierig, das kann nicht wirklich zu guten Ergebnissen führen. Vielmehr frustriert es – spornt aber auch an, bessere Argumente zu finden.
Ist es üblich, mit anderen Agenturen und externen Dienstleistern zusammenzuarbeiten? Eschweiler: Ja, man hat mittlerweile nicht mehr die eine Lead-Agentur, die sich um alles kümmert. Dafür gibt es heute zu viele unterschiedliche Expertisen.
»Interface Designer müssen lösungsorientiert denken, da sie immer wieder vor das Grundproblem gestellt werden: Was muss ich der Maschine sagen, damit sie tut, was ich möchte?«
Was macht einen Interface Designer aus? Eschweiler: Interface Designer müssen lösungsorientiert denken, da sie immer wieder vor das Grundproblem gestellt werden: Was muss ich der Maschine sagen, damit sie tut, was ich möchte? Es sollte da sofort ein konkretes Bild entstehen, wie es funktioniert – und diese Lösung sollte sehr klar sein, selbsterklärend und intuitiv. Auf der anderen Seite sollte Markenverständnis vorhanden sein – ein Gespür für die ganz eigenen Werte der Marke, denn diese müssen sich in jedem Interface wiederfinden. Als Eckpfeiler ebenfalls wichtig: ästhetisches Verständnis und die Bereitschaft sowie die Fähigkeit, mit all den anderen beteiligten Gewerken zu kommunizieren.
Welche persönlichen Eigenschaften sind besonders wichtig? Eschweiler: Man sollte Prioritäten setzen können und in der Lage sein, abzuwägen, wann man abstrahieren sollte und wann es nötig ist, sich ins Detail zu stürzen. Sonst verzettelt man sich schnell.
Und was braucht es an fachlichem Know-how? Eschweiler: Da wir sehr viel mit Sketch arbeiten, wäre es schon ganz gut, das Tool bereits genutzt zu haben. Doch das Programm ist glücklicherweise nicht so komplex, in seinen Grundzügen versteht man es schnell. Jeder, der schon mal mit anderen Tools gearbeitet hat, wie Illustrator und Photoshop, findet sich gut zurecht.
Sollte man Digitalerfahrung mitbringen? Eschweiler: Nicht zwangsläufig. Gerade Berufsanfänger, die in der digitalen Welt aufgewachsen sind, finden sich üblicherweise schnell in unsere digitale Arbeitsweise ein. Wichtiger sind Konzeptionsstärke, Offenheit und Flexibilität.
Was meinst du, wie sich das Berufsbild in Zukunft entwickeln wird? Eschweiler: Es wird immer mehr Berührungspunkte geben, über die man digital mit Marken kommuniziert oder Services abruft. Und alle diese Berührungspunkte brauchen Interfaces. Allmählich kommt auch immer mehr das Bewusstsein hinzu, dass Markenkommunikation eben auch über das Interface geschehen muss. Dass es die unmittelbarste Verbindung ist, die man mit dem potenziellen Kunden eingehen kann. Interface Design ist ein wachsender Markt, und dadurch werden in Zukunft viele Interface Designer gebraucht werden.
Alle weiteren PAGE-Connect Artikel zum Thema Interface Designer finden Sie hier.
Zum Download des PAGE Connect eDossiers »Das macht ein Interface Designer bei Serviceplan« geht’s hier.
