myInnovationday 2017/01 | 1
Liebe Kollegen, dies ist das Ergebnis meiner Arbeit zum MyInnovationday am Freitag, 27. Januar 2017: Bei meinem Projekt habe ich mich mit der Möglichkeit befasst, InDesign mit Issuu zu verbinden. Issuu, bei vielen als “Blätterkatalog” bekannt, bietet die Möglichkeit an, In einem zu definierenden Projekt Daten, Bilder, Texte, Anzeigen etc. zu sammeln: Issuu Collaborate. Zunächst wird das Projekt mit einem Seitenumfang angelegt. Im nächsten Schritt können dann Artikel zusammengestellt werden (bestehend aus Texten und Bildern), außerdem können Grafiken (Logos, Cliparts etc.) zugewiesen werden. Auch Anzeigen werden so platziert. Diese Elemente können dann theoretisch einem Redakteur oder Anzeigenverkäufer zugewiesen werden – so kann in einem Tool Freigaben verwaltet oder Daten aktualisiert werden. Die Anbindung an InDesign erfolgt über eine Extension, die Issuu bereitstellt. Hier verbindet man sich mit dem Issuu-Account und kann dann dort das angelegte Projekt auswählen. Der Seitenaufriss wird nun angezeigt, parallel legt man ein InDesign-Dokument im frei zu wählenden Format und mit der festgelegten Seitenzahl an. Nun können auf den geplanten Seiten die zugewiesenen Elemente platziert werden. Anschließend beginnt der eigentliche Satz der Seiten. Sind eine oder mehrere Seiten layouted, so kann der Grafiker die Seiten über einen einzelnen Mausklick wieder in das IssuuProjekt zurückgeführt werden, wo ein Projektverantwortlicher Kommentare dazu abgeben oder Seiten freigeben kann. Gibt es Änderungen an Anzeigen, Bildern oder Texten werden diese geupdatet und er Grafiker erkennt dies in seinem Indesign-Status. Er kann nun Texte aktualisieren, Anzeigen tauschen etc. und die neuen Seiten wieder bereitstellen. Auf diesem Weg wird das Projekt Seite um Seite aufgebaut und freigegeben. Ist das Projekt abgeschlossen, so wird es mit wenigen Klicks auf dem Issuu-Kanal veröffentlicht. Resümee: Issuu Collaborate ist ein sehr interessantes Tool, das sich allerdings hauptsächlich an Redaktionen, die mit Publikationen arbeiten, wendet. Wenn wir als Agentur Issuu-Versionen unserer Kundenarbeiten bereitstellen wollen, eignet sich eher der klassische Upload eines PDFs. Interessant sein könnte das Tool zum Beispiel für Blogger, die aus ihren Artikeln ein (Online-) Buch erstellen wollen. Allerdings ist der Service nicht umsonst: Für 39 Dollar im Monat können fünf Personen an einem Projekt arbeiten. Eine unlimitierte Benutzer- und Projektzahl erhält man für monatlich 299 Dollar.
myInnovationday 2017/01 | 2
<< Interaktive Video Landingpage >> Das Projekt von Felix zum 2. MyInnovationDay: Das Thema Video und Interaktion spielt bereits seit mehren Jahren eine wachsende Rolle, gerade wenn es um Produktpräsentationen auf Websites geht. Die größte Hemmschwelle stellt zumeist der bekannte Satz “Ich will das ja auch mal anfassen” dar. Genau an dieser Stelle setzt dieser Gedanke an. Wir als Agentur für OnlineMedien verstehen uns dahingehend nicht mit raffinierten Texten oder gut retuschierten Bildern ein Produkt zu vermitteln, sondern vielmehr möchten wir auf recht “fassbare” Art und Weise über ein Produkt sowohl inhaltlich als auch optisch informieren. Das Produkt “fassbar” machen mit Video, HTML, JavaScript und CSS Die größte Schwierigkeit stellt bei Videos meistens die Abspielgeschwindigkeit dar. So werden Texte manchmal zu schnell ausgeblendet, bevor man diese zu Ende lesen konnte. Um dieses Manko zu überbrücken, stellt eine gute Lösung das synchroniseren der Abspielgeschwindigkeit mit der Scrollgeschwindigkeit dar. So kann der User die Inhalte in seiner eigenen Geschwindigkeit konsumieren, hat aber auch die Möglichkeit zurückzufahren und Inhalte zu wiederholen. Um das Produkt fassbar zu machen sind Hotspots unabdingbar: Hier kann der Websitebesucher das Produkt “erkunden” und baut somit eine stärke Bindung auf, anstatt sich nur berieseln zu lassen. Um eine solche Landingpage zu erstellen, benötigt man nicht zwangsläufig Highend- Equipment. Das Wichtigste stellt wie bei jedem VideoDreh ein Storyboard dar. Gerade bei der gezeigten Sequenz war es wichtig einen fließenden Weg für alle Hotspots zu finden, der am Stück abgespielt werden kann ohne dass dieser geschnitten werden muss. Die Aufnahme wurde mit einer Mittelklasse DLSR und einem Ringblitz erstellt und später getrimmt und in die nötigen HTML5Videoformate (MP4, OGG und WEBm) konvertiert.
„Eine interaktive, emotionale Landingpage in weniger als acht Stunden.“ Das fertige Video wird dann mithilfe von JavaScript anhand der Scrollposition synchronisiert. Der restliche Aufbau der Landingpage besteht wie gewohnt aus HTML und CSS. Um InteraktiveHotspots zu schaffen, kann man sich der Toggle Standartfunktion von jQuery bedienen und so Inhalte wahlweise ein oder ausblenden. Insgesamt lässt sich so in weniger als 8h eine interaktive, emtionale Landingpage gestalten, die definitiv länger im Gedächtnis des Kunden bleibt als StandardSeiten.
myInnovationday 2017/01 | 3
<< Konzeption von Websites im Dialog mit dem Kunden >> Das Projekt von Ina zum 2. MyInnovationDay: Der Konzeptionsprozess ist Herzstück bei der Entwicklung von Websiten. Nur wenn wir hier genau verstehen, was der Kunde will und braucht, kann am Ende ein überzeugendes Ergebnis stehen. Meine Grundfrage war daher, wie wir den Konzeptionsprozess besser steuern, den Kunden dabei aktiv einbinden können und gleichzeitig einen Mehrwert für das tägliche Geschäft des Kunden schaffen können. Hierzu habe ich einen idealtypischen Ablauf der Konzeptionsphase entworfen, anhand dessen wir gemeinsam mit dem Kunden Ziele und Inhalte für die Website definieren können. Dabei habe ich auf Mittel zurückgegriffen, die wir stellenweise schon verwenden, z.B. Personas-Analyse, User Experience und KonkurrenzAnalyse. Mit Instrumenten wie der Markenpersönlichkeit und dem Card Sorting zur Inhaltsplanung erweitern wir unser Portfolio um für den Kunden spannende Instrumente, die den Kunden auf spielerische Weise einbeziehen. Insgesamt wollte ich ein Toolkit für die Konzeption schaffen, das zum einen Erkenntnisse für den Kunden und uns bietet und zum anderen auch psychologische Aspekte der Content-Planung mit einbezieht. Das Ganze stellt gewissermaßen einen „Baukasten“ für Konzeptionsworkshops mit dem Kunden dar. Jedes Modul lässt sich einzeln verwenden, es ist aber auch die Kombination aus verschiedenen Modulen denkbar. Anhand konkreter ZielDefinitionen wird die Konzeption der Website für den Kunden transparenter und er kann sich leichter in seinen eigenen Kunden oder potentiellen Mitarbeiter (die Nutzer der Website) hineinversetzen. Da gemeinsam mit dem Kunden Inhalte und Grundausrichtung der Website festgelegt werden, wird die Arbeit am Projekt insgesamt leichter: Bei Unstimmigkeiten dient dieser Katalog immer wieder als Erinnerung, in welche Richtung das Projekt sich entwickeln soll. Für den Kunden lassen sich die gewonnen Erkenntnisse auch für andere Marketing-Maßnahmen bis hin zur CSR-Arbeit nutzen. Insofern entsteht ein beidseitiger Nutzen.
<< Charakter-Generator mit AngularJS >> Das Projekt von Jana zum 2. MyInnovationDay: Um meinen Horizont zu erweitern, habe ich heute über den Tellerrand der Website-Entwicklung hinaus in den Bereich der App-Entwicklung geschaut. Bei Apps denkt man immer schnell an mobile Geräte, aber auch im Browser gibt es viele Seiten, die keine reine Informationsvermittlung, sondern Anwendungen zum Verarbeiten von Daten sind. HTML-Elemente dynamisch ändern ohne die Seite neu laden zu müssen Ein beliebtes Framework um solche Anwendungen umzusetzen und das eigentlich statische HTML dynamischer zu machen, ist AngularJS von Google. Angular ist ein JavaScript Framework, das zahlreiche, einfache Möglichkeiten bietet, HTML-Elemente dynamisch zu verändern ohne die Seite neu laden zu müssen. Um diese Möglichkeiten an einem Praxisbeispiel auszutesten, habe ich eine sehr einfache Version eines Charakter-Generators für ein Pen&Paper-Rollenspiel gebaut. Dieser Anwendungsfall eignet sich gut, weil Daten erst generiert, mit Eingaben des Benutzers verbunden und dann weiterverarbeitet werden müssen, ohne dass viele Daten von Serverseite geladen werden. Ich bin sehr zufrieden mit der schnellen, strukturierten Arbeit, die das Framework ermöglicht.
AMS 100 C:68
AMS 100 C:68
online unter: Cube.eu/AMS