Alle Beiträge von Laura Reinke

PAGE goes Forward!

Morgen, am 5. Juli 2018, findet in Hamburg zum ersten Mal das Forward Festival statt. Einige bekannte Speaker kommen auf die Bühne und PAGE ist dabei!

Forward Festival Hamburg

Am Donnerstag geht’s los, zum ersten Mal findet das Forward Festival auch in Hamburg statt! Und wie in Zürich, Wien und München steht auch im Norden einiges auf dem Programm des Kreativ-Festivals: Stefan Sagmeister und Erik Kessels sprechen, außerdem Alexander Nowak und Felix Richter von Droga5 (hier im Interview) sowie Ina Behrendt von der Miami Ad School. Außerdem holt Ladies, Wine & Design Hamburg Ann Eckert, Anna T-Iron und Friederike Hantel auf die Bühne… (mehr Infos dazu hier)

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:

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 sind hier noch 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

Big News: PAGE auf dem ADC Festival 2018!

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!

Interface Design in der Praxis

Wie gestaltet man Autokataloge informativ und multimedial, um End­konsumenten 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 digita­len Plattformen sucht er alle relevanten Details zum gewünschten Modell heraus, bevor er das erste Mal beim Autohändler vorbeischaut, dort in gedruckten Katalo­gen 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 Desk­top 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älti­gen Ansprüchen gerecht zu werden, die Menschen heutzutage an Informationen rund um Neuwagen haben, entwickelte Ser­viceplan Content Hamburg für die Verkaufsliteratur von BMW ein umfangrei­ches neues Konzept. Das Ziel: eine multimediale, zeitgemäße Lösung, die auf al­len Kanälen funktioniert. Die Serviceplan-Tochterfirma am Standort Hamburg arbeitet bereits seit acht Jahren für BMW im Bereich Verkaufsliteratur. Insgesamt gestalten 45 Mit­arbeiter, darunter Interface Designer, technische Redakteure, Digital­spezialisten, 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 Endkonsumen­ten als auch an BMW-Händler. Zu allen Fahr­zeugmodellen entstehen unzäh­lige In­hal­te, die auf unterschiedlichen Kanälen in die verschiedenen Märkte gespielt werden. Etliche dieser Inhalte spre­chen gleich mehrere Zielgruppen an. Das Serviceplan-Team suchte nach einem Weg, den Content nur einmalig produzieren, aber mehr­fach 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-Baukas­ten­systeme 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ück­genomme­nes aus, statt protzig zu sein« Jakob Ulrich, Head of Digital Art, Serviceplan Content Hamburg

Die neue Struktur setzte Serviceplan zu­nä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 The­menseiten sind wie eigenständige One-Pager aufgebaut und durch die Module individuell anpassbar«, erklärt Jakob Ulrich.

Nachdem die Entscheidung für ein mo­dulares Prinzip gefallen war, legte das Team im nächsten Schritt das iPad als Master­gerät fest, für dessen Seitenverhältnisse sämtliche Inhalte im Querformat angelegt werden sollten. »In der alten App stell­ten 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 umdreh­te. »Durch den Digital-First-Ansatz richten sich jetzt alle Medien nach dem 4:3-Format der iPad-App – auch die Printproduk­te«, sagt Ta. Auf diese Weise lassen sich Fotos und andere Bildinhalte ohne Format­anpassungen 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 Servi­ces«. 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 Ser­vi­ces«-Kategorie werden nur Endkonsumen­ten 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 Argumen­ten punk­ten zu können. Auch von Land zu Land unterscheiden sich die Module teilweise: Einige Inhalte sind für alle Regio­nen relevant, andere – wie etwa techni­sche 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, mitt­wochs 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 unterschiedli­che Tools zum Ein­satz: So recherchierte das Team online und in Fachzeit­schriften, scribbelte mit Pa­pier und Stiften, nutzte in den Designphasen Sketch, Photo­shop und das Anima­tions­programm 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 um­setzen«, erklärt Jakob Ulrich. »Um die Pro­grammierung hat sich hauptsächlich die Entwicklerin gekümmert, aber mittler­wei­le 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 hin­ein, 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 Mar­ke transportiert werden: »Die Wer­te von BMW schwingen im Interface Design stets mit. Die Marke ist hochwertig, sie strahlt etwas Zurückgenommenes aus, statt prot­zig 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 De­signprozess das Atomic-Design-Prinzip. Das heißt: Jedes Designelement wurde von Anfang an detailliert gestaltet, statt mit groben Skizzen zu arbei­ten (siehe »Atomic Design«, unten).

Digitales Blättern

In der fertigen App fallen sofort die klare Struktur und die großen Bilder auf: Die Ka­­tegorien zur 5er-Limousine sind unterei­-
n­ander angelegt, sodass man beim Durch­scrollen 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 ei­ne Navigationsleiste zu bedienen – wie in ei­ner 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 An­fang 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 dy­namischer 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 vol­le 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-Limou­si­ne fertig waren, blickte das Team auf eine ausgesprochen intensive und lehrrei­che 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 Baukastensys­tem funktioniert: Man entwickelt zuerst die Design­grundbestandteile und baut diese nach und nach zu immer größeren Einheiten zu­sammen. Los geht es mit den kleinsten an­zunehmenden Einheiten, Atome genannt. »Bei den BMW Dynamic Sales Media gehörten Icons, Fotos, Schriftar­ten oder die Hintergrundfarbe Weiß zu den Ato­men«, erklärt Jakob Ulrich, Head of Digital Art bei Serviceplan Content Hamburg.

Im zweiten Schritt setzt man die Ato­me zu Molekülen zusammen – so ent­ste­hen beispielsweise Text-Bild-Kombina­tio­nen. Mehrere Moleküle sind wiederum Or­ganismen. Diese bildeten die Module für die BMW Dynamic Sales Media. Kombiniert man Organismen beziehungsweise Module, entwickeln sich dar­aus Templates und im letzten Schritt kom­plette Seiten.

Die Vorteile der Metho­de: 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ötigs­ten User-Inter­ak­tions-Mög­­lich­keiten zu sehen«, sagt Jakob Ulrich. Durch die Un­terteilung in Atome, Moleküle et cetera ergibt sich zudem eine logische Struktur, die ei­nen guten Überblick über ein Projekt gewährt. Für komplexe Großprojek­te 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.

[732] InterfaceDesignerCCCSP17 

 

Merken

Merken

Merken

Merken

Informationsdesign in der Praxis

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 Ab­­lass­handel begründete Martin Luther 1517 die Reformation. Er läutete damit ein­schnei­dende historische Ver­än­de­rungen ein, die unsere Welt immer noch prägen. Dennoch wissen viele nur wenig über Luther und die Re­for­mation. Wie lässt sich die Fülle an Informationen über sein Leben, sein Wir­ken und seine Zeit an­sprechend darstellen? Wie eröffnet man im Di­gi­tal­zeit­al­ter den Zugang zu histori­schen Quellen auf spannende Weise? Wie be­geistert man eine jun­ge Zielgrup­pe mit einer recht kur­zen Auf­merk­sam­keitsspanne für Geschichte?

Zum 500-jährigen Reformationsju­bi­lä­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ßer­gewöhnliche Antwort auf diese Fragen ein­fallen: eine digitale Luther-Ausstel­lung, für die man nicht ins Museum muss. Zusätzlich sollten dreißig Poster alles Wissens­wer­te über den berühmten Reformator darstellen – down­­loadbar, sodass man mit den ausgedruckten Plakaten sogar eine ei­ge­­ne 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 Animatio­nen 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 Schwo­chow und sei­ne Mitarbeiter so­fort begeistert. »Uns faszinier­te, dass das Projekt alle Facetten unserer Arbeit um­fasste – von der Datenvisualisierung über Land­kar­ten und Illustrationen bis zu Animationen und 3D-Objek­ten«, so Jan Schwo­chow.
Diese Leidenschaft überzeugte den Auf­traggeber. Nach gewonnenem Pitch ar­bei­­teten die zwanzig Mitarbei­ter der Infographics Group ein Jahr an der Planung und Umsetzung des Projekts mit dem Titel »Here I Stand« aus dem angeblichen Schluss­­satz der Rede Luthers vor dem Reichs­tag zu Worms. Dafür nutzten sie ihre ganze Werkzeugkiste: von Ex­cel und diversen Google-Tools für die Projekt­pla­nung über Illustrator zum Skizzieren und Illustrieren bis OpenRefine und Sublime Text zum Programmieren der Daten­visu­a­lisie­run­gen, dazu Cinema 4D und Sketchfab für die 3D-Objekte, After Effects und ­Hype zur Animation, QGIS zur Er­stellung von Karten sowie klassische, keineswegs zu vernachlässigende Skiz­zen­bücher und Stifte für Scribbles und ­Entwürfe.

Die Infographics Group, 2007 als Golden Section Graphics gegründet, besteht größtenteils aus Informa­tions­­designern, 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 Projekt­manager dazu. Maßgeblich unterstützt wurde die Berliner Agentur bei diesem Projekt von wissenschaftlichen Mit­arbeitern des Deutschen His­torischen 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 ge­hö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 zu­sammen mit den Mitar­bei­tern des Deutschen Historischen Museums einen Überblick über die vor­han­denen Informatio­nen: Ölgemälde, Holzschnitte, Kupfersti­che, Landkarten, Fotomaterial, Texte in Form von Briefen aus der Zeit und zahlreiche Bücher dienten als Quellen.

Daraufhin entwickelten die Informa­tionsdesigner der Infographics Group ers­te Skizzen und Konzepte. Eine der größten Herausforderungen dabei: Die enorme Vielfalt an Reformationsthemen trifft auf eben­so vielfältige Visualisierungs­mög­lich­kei­ten – doch was passt zusammen? Wo ist die Informationsmenge derart groß, dass eine Datenvisualisierung sinnvoll wä­re? Welcher Bereich eignet sich für Illustratio­nen, und an welcher Stelle könnte man Ani­mationen am bes­ten 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 darzustel­len. Auf den Plakaten und im Buch bestehen die­se 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ähl­tempo 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 Figu­ren, die sich bewegen können. »Die Illustrationen sind modern, die Animatio­nen involvieren den Be­trachter 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 Zeich­nungen 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 be­reitgestellten Objekte bearbeiteten die 3D-Experten der Infographics Group in ers­ter Linie mittels Cinema 4D. Damit erweiterten sie ihre Kenntnisse um die Gestaltung realer 3D-Objekte.
»Auch in Sachen Allgemein­bildung haben wir einiges dazugelernt«, freut sich Jan Schwo­chow. »Etwa wie damals eine Bibel entstand, dass Bücher in Fässern transpor­tiert 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 In­for­mationsdesigner 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 Stadtansich­ten, nach denen man sich rich­ten kann.« Und doch entspricht gerade die­se Detailversessenheit einem der obers­ten 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 Drei­erteams pro Poster so­wie mit ei­nem Hauptverantwortlichen. »Kla­re Struk­tu­­ren sind bei der Umsetzung großer und lang­wie­riger Projekte wichtig, sons­t wird es schnell unübersichtlich«, so Jan Schwochow.
Die Projektmanager organisierten sich hauptsächlich mit Google-Anwendungen und aus­ge­druckten Kalenderplänen, in de­nen sie auch die Zusammenarbeit mit dem Museumsteam koordinierten und fest­hiel­ten, 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: Pos­ter, Buch­doppelseite oder interaktive Web­visu­alisierung. Eine Infografik, die für ein DIN-A1-Pla­kat 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 erwar­tet 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 brow­ser­­kompatible Formate umwandel­ten. »Wir hätten auch einfach PDF-Datei­en 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 Ok­tober 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 Mit­­arbeiterin des Deutschen Historischen Mu­­­seums Berlin monatelang in antiken Bü­chern, um Licht in den Briefwechsel Lu­thers mit weiteren Reformatoren sowie Politikern und Humanisten der Jahre 1503 bis 1560 zu bringen. Allein von Luther fan­den sich rund 4300, von Melanchthon gar 7500 Schriftstücke, wobei die Quellen bis ins Jahr 1872 reichten. »Zur Visu­a­li­sierung entschieden wir uns für eine Netz­werk­grafik, 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 gestal­tete dann in Illustrator die Printvariante. Für die Onlinever­sion kam die Java­Script-Library Sigma.js zum Einsatz.

Das Expertenwissen der Historiker war für die Recherche essenziell: »Mehr als 500 Jahre alte Hand­schrif­ten 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 Schwo­chow. »Das Know-how der Geis­tes­wis­senschaftler war unabdingbar, doch es fiel ihnen nicht immer leicht, sich vorzu­stel­len, wie die Infografik am Ende aus­sehen würde – deswegen konnten sie die Daten nicht entsprechend für uns vorbereiten. Für uns war es wiederum schwer, ihnen oh­ne vorhandene Daten zu beschrei­ben, was wir vorhaben«, ergänzt Informa­tions­de­si­gner und Data Visualist Jonas Parnow.

So mancher Datensatz wurde mehr­mals zwischen der Infographics Group und dem Museum hin- und hergeschickt, bis die Da­tenvisua­lisierung oder Info­gra­fik 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.

[744] InformationsdesignCCCIGG17

Merken

Merken

Merken

Merken

Merken

Das macht ein Interface Designer bei Serviceplan

»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 Di­rector Digital bei der Serviceplan-Digital­agentur Plan.Net auf Interface Design spe­­zialisiert. Wir sprachen mit ihm darüber, welche Aufgaben ihn tagtäglich beschäfti­gen – und welche Fähigkeiten für einen In­terface 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 Neu­land 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 Aug­mented Reality, dabei sind die Basics noch ausbaufähig: Wie bediene ich das Interface? Wie lasse ich die Mar­ke entspre­chend 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 Fachhochschu­le 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 Natio­nalitä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 an­deres – 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 Kre­ativdirektion 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 untereinan­der ist total wichtig, wir sind ständig im Austausch. Gerade im Digitalbereich über­schneiden sich die Gewerke stark, zum Bei­spiel 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 plan­mäß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 ein­gebunden 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 Dokumen­tation 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 konzeptionel­len Wireframing bis zum fertigen Design. Es entstehen sogar einigermaßen brauchbare Codeschnipsel, mit denen der Entwickler etwas anfangen kann. Man hält da­­mit die Kommunikationswege kurz und schafft es, Sachen schnell auf die Straße zu bringen. Für komplexere Animatio­nen, die Sketch nicht abbilden kann, nut­ze ich After Effects. Die Adobe-Palette taucht auch immer wieder auf, für Bildbearbeitun­gen kommt man beispielsweise an Pho­to­shop 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. Vie­le Projekte haben kein Ende, da sie sich stän­dig weiterentwickeln.

»Klassische Werbung kommu­ni­ziert 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 be­deutet 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än­digkeit, 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 Entwicklun­gen 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 glei­che Verständnis herrscht, das ich auch habe. Dass Interfaces nicht nur Schnitt­­­stellen 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 Wor­tes – 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 an­de­res 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 Agentu­ren 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 vie­le unterschiedliche Expertisen.

»Interface Designer müssen lö­sungsorientiert denken, da sie immer wie­der 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 wie­der 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 Mar­kenverständnis vorhanden sein – ein Gespür für die ganz eigenen Werte der Marke, denn diese müs­sen sich in jedem Interface wiederfinden. Als Eckpfeiler ebenfalls wichtig: ästheti­sches 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 Pro­gramm 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üh­rungspunk­te geben, über die man digital mit Mar­ken kom­mu­niziert oder Services abruft. Und alle die­se Be­rüh­rungspunkte brauchen In­terfa­ces. Allmäh­lich kommt auch immer mehr das Bewusstsein hinzu, dass Markenkommunika­tion eben auch über das Interface geschehen muss. Dass es die unmittelbarste Verbindung ist, die man mit dem potenziel­len Kunden eingehen kann. Interface Design ist ein wachsender Markt, und dadurch werden in Zukunft vie­le 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.

[733] InterfaceDesignerCCCSP17 

Merken

Merken

Merken

Merken

Merken

Merken