Muse – ja oder nein?

Was genau ist eigentlich ein One Pager? Da ich mich sehr für das Thema Webdesign interessiere und im dritten Semester bereits einen One Pager programmieren musste, beantwortete sich diese Frage wie von selbst. Nun musste aber eine weitere wichtige Frage geklärt werden: Programmiere ich den One Pager für mein Projekt wieder selbst, oder überlasse ich den schwierigen Teil diesmal einem Programm?

Ich musste besonders früh feststellen, dass ich es in diesem Semester vor lauter Arbeit kaum schaffen würde, selbst zu programmieren. Meine Entscheidung fiel somit auf das Programm Adobe Muse, in welchem man die Elemente wie in den Grafikprogrammen Illustrator, Indesign oder Photoshop hin- und herschieben kann. Doch leichter gesagt, als getan: Das Platzieren der Elemente und das Einfügen von Bildern war kein Problem, jedoch war es unglaublich schwierig, das Layout meines One Pagers auf responsive – also an alle Geräte angepasst – einzustellen. Da mir die Zeit für lange Tutorials im Internet fehlte, musste ich an einigen Stellen schummeln. Nichts desto trotz erfüllt der One Pager nun seinen Zweck und ist zumindest auf iPad und iPhone 6, sowie allen gängigen Desktopauflösungen einigermaßen responsive.

bildschirmfoto-2017-02-04-um-22-03-42

In Zukunft möchte ich mich weiterhin mit Adobe Muse beschäftigen, auch wenn ich sehr große Probleme damit hatte. Mit ein bisschen mehr Übung und regelmäßiger Nutzung können damit sicher ein paar tolle Webprojekte entstehen und durch die Updates wird es höchst wahrscheinlich im Laufe der Zeit noch benutzerfreundlicher.

Auf meinem Weg durch die Welt der One Pager sind mir übrigens ein paar tolle Layouts aufgefallen, die ich euch natürlich nicht entgehen lassen möchte. Viel Spaß beim Anschauen und: Haltet eure Retina-Displays fest! 😉

http://www.bevisionare.com/

https://mailchimp.com/2016/

https://www.jsconfar.com/

http://brightmedia.pl/?lang=en&site=intro

Codename L1813 wird zu History life

Nachdem ich in meinen letzten beiden Blogeinträgen beschrieben habe, wie die einzelnen Elemente aufgebaut sind und angegeben habe wofür sie stehen, füge ich diese im nächsten Schritt zusammen. Und wie macht man das am besten? Für mein Projekt eignet sich am besten ein kleiner Film.

codname-leipzig-1813_storyboard_seite_1

Dies ist der erste Teil des Storyboards.

codname-leipzig-1813_storyboard_seite_2

Der zweite Teil des Storyboards.

Dieses kleine Storyboard erstellte ich um meine erste Idee für einen kleinen Promofilm zu zeigen. Während des Prozesses der Filmerstellung, wurde diese kleine Geschichte etwas überarbeitet und verändert.

Um den Film erstellen zu können, suchte ich zuerst Referenzfilme der Völkerschlacht heraus. In diesen Filmen (meist Dokus und die Jahrfeier der Völkerschlacht) bekämpfen sich die Soldaten: Alliierte gegen Napoleon. Hinzu suchte ich Geräusche einer Schlacht von 1813. Um mein Paket komplett schnüren zu können, drehte ich mit etwas Hilfe zweier Schauspieler, Herr Prove und Nina, einen kleinen Film. In diesem spielen sie die Schlacht (den 3. Tag) etwas nach. Nun mussten nur noch ich und mein neuer Laptop daran arbeiten. Ein kleines Problem musste umständlich gelöst werden. Die Abläufe umständlich korrigiert werden. Mein Laptop lag beim Arbeiten ächzend am Boden (naja eher Bett) und dennoch musste ich ein Element löschen in der Korrekturphase. Aber was war mein Problem?
Ganz einfach. Ich wollte aus meinem selbstgedrehten Film die Personen ausschneiden und diese in die Szenerie der Schlacht stellen. So wollte ich zeigen, wie ein weiterer Soldat die Schlacht mit und ohne Hololens sieht. Dieses Ausschneiden bei einem Film ist schwieriger, langwieriger und umständlicher als ein Bild in Photoshop zu schneiden. In After Effects ist es mir möglich mit dem Rotoscoping-Werkzeug.

Bei der Anwendung dieses Werkzeugs, lernte ich neben weiße Figuren sind besser vom Hintergrund zu trennen als dunkle, dass es einfacher gewesen wäre den Film mit Hilfe eines Greenscreen zu drehen. Außerdem stellte sich die Schwierigkeit Elemente wie einen Holzstock mit zu extrahieren.

Nun denn, es ist im Grunde gut, dass After Effects dieses Werkzeug hat, aber warum muss ich jedes Bild bei viel Bewegung und bei wenig mindestens alle 10 Bilder die Figur neu ausschneiden? Und warum ist es  so oder so ungenau? Denn der Rand bewegt sich trotzdem und alles kann man nicht von der Figur lösen. Daher bitte ich um des Friedens willen für alle Cutter, erstellt ein einfacheres Tool. Aber eines muss ich zum Werkzeug Rotoscoping loswerden: Auch wenn ich 3 Tage und Nächte damit verbracht habe 3 Personen vom Hintergrund zu lösen: Es macht hammermäßig Spaß. Man weiß nie so genau was rauskommt. So habe ich mich zum Beispiel in einen schwebenden Kopf verwandelt 😀

bildschirmfoto-2017-02-02-um-00-44-37

Das Rotoscoping-Werkzeug in der Anwendung. Oh Mann, das war eine Aktion.

bildschirmfoto-2017-02-02-um-00-49-11

Dies ist ein ausgeschnittener MProve.

bildschirmfoto-2017-02-03-um-10-11-09

Zu ihm kommen Nina und einige Filmszenen hinzu.

bildschirmfoto-2017-02-02-um-00-46-09

So wären beide Schauspieler in der Szenerie eingesetzt. Doch hier noch an der falschen Stelle platziert.

bildschirmfoto-2017-02-02-um-15-37-43

Noch ein paar Texte und Sounds gesellen sich den Szenen.

Das einfachste war es alle Elemente in die Datei zu bringen. Damit After Effects schnell arbeiten kann, erkannte ich, dass die ausgeschnittenen Personen ausgeblendet sein müssen. Der Nachteil hierbei: Ich konnte nicht die Personen, die Schlachtszenen und die Sounds gleich aufeinander abstimmen. So musste ich vorm abstimmen und meiner Korrektur die Datei als Video rendern. Der Film dauert 3:23 Min. und allein das Rendern hat Stunden in Anspruch genommen. Oh mann, dieser doofe Effekt des Rotoscoping nervt mich auch noch am Ende.

bildschirmfoto-2017-02-02-um-20-50-25

Und das Rendern. Es dauert und dauert. Nach 10 Stunden ist der erste Versuch immer noch nicht fertig gerendert.

Also auf ein Neues… Der Film kommt später.

One Page, One Chance

Das World Wide Web bietet viel Platz für unendlich viele Ideen. Tagtäglich setzten Träumer und Visionäre ihr hart erarbeitetes Gedankengut auf die nackten Oberflächen der Portale und müssen dann feststellen…

…, dass man mal zum Punkt kommen muss! Anscheinend kann auch ein OnePager begrenzt sein. Diese Erfahrung musste ich kürzlich machen. Im Nachhinein betrachtet stellt dieser endliche Raum eine wunderschöne Metapher dar:


Auch die Aufmerksamkeit ist begrenzt!


Die Idee in wenigen Worten und prägnanten Bildern zu fassen scheint ähnlich anspruchsvoll, wie die Ausarbeitung. Dabei stellt sich wiederum die Frage, wer sich das Resultat ansieht und warum er in das Projekt investieren sollte. Nach eingänglicher Recherchearbeit fiel auf, dass bei Crowdfunding-Projekten nicht nur das Nehmen, sondern auch das Geben eine Rolle spielt. Obwohl dieser Ansatz bei einem fiktiven Projekt unrelavant scheint, kann der Gedanke / eine Belohnung für eine gewisse Zuwendung zu erhalten / eine positive Einstellung fördern!

Es kommen also mehrere Faktoren zusammen, die den Erfolg eines Projektes lateral steuern. Da dieser Beitrag wert darauf legt, die Aufmerksamkeitsspanne seiner Leser nicht zu strapazieren, endet er mit der ungeschriebenen goldenen Regel, die es bei Präsentationen, aber auch in vielen anderen Lebensbereichen zu erfüllen gilt:


Das Publikum will unterhalten werden!

Große Augen

GoOnMon – Entertainment sells?!


 

 

Merken

Illustriertes Storytelling

Unsere Semesterprojekte müssen Anfang Februar in Form eines One Pagers präsentiert werden. Die Websites dienen zur Promotion unserer Ideen und sollen die Projekte in möglichst wenigen Worten erklären.

Ich habe mir tatsächlich das ganze Semester lang darüber den Kopf zerbrochen, wie ich das anstellen könnte. Da ich ein Mensch bin, der viele Worte benötigt um etwas zu erklären, gestaltete sich diese Aufgabe besonders schwierig. Während ich die letzten Wochen darüber nachdachte, fiel mir beim Nutzen meines Smartphones auf, dass ich (wie viele von uns) sehr oft Emoticons, also kleine Bilder bzw. Symbole nutze, um meine Gedanken zu erklären und meine Worte zu unterstreichen.

Auswahl an Emoticons auf dem iPhone

Auswahl an Emoticons auf dem Smartphone

Und zack, da war sie: die Idee, das Projekt in Form von Illustrationen zu erklären. Ich überlegte erst, dazu ein kleines Video in Adobe After Effects zusammenzuschneiden, allerdings konnte ich mir nicht vorstellen, dies zeitlich noch auf die Reihe zu kriegen. Aber eines war klar: die Idee mit den Illus steht.

Ergänzend dazu überlegte ich mir ein kleines Szenario mit meiner Persona, um das Projekt mithilfe von Storytelling Schritt für Schritt zu beschreiben. Die Illustrationen sollen nach und nach einzeln mit einem jeweiligen kleinen Textabschnitt gezeigt werden, um so mehr Spannung in das Storytelling zu bringen. Außerdem eignet sich ein One Pager dafür besonders gut und so machte ich mich schließlich an die Arbeit …

1_dasistpascalneu-01

 2_liebtvideospiele-01

3_undveranstaltet-01

weitere Bilder folgen 😛 🙂 🙂

Ein „verplanktes“ Projekt

„Für jedes Problem gibt es eine Lösung.“

Unter diesem Motto haben Designer und andere Kreative im Laufe der Zeit unendlich viele Methoden entwickelt, um die Probleme einer Idee oder eines Projekts zu lösen. In unserem CLIC-Seminar haben wir eine dieser Methoden genau angeschaut und diese auf unsere Projekte angewendet oder um genau zu sein: Wir haben unsere Projekte „verplankt“ – nach einem Modell aus dem „Interaction Design Sketchbook“ von Bill Verplank. In diesem Blogpost werde ich genanntes Modell anhand meines verplankten Projekts zeigen und erläutern.

Das Modell setzt sich aus insgesamt acht Schritten eines Frameworks zusammen, die keine festen Vorgaben darstellen, aber die Hauptanliegen des Projekts ansprechen sollen:

Modell: Framework für Interaction Design von Bill Verplank.

Modell: Framework für Interaction Design von Bill Verplank.

Schauen wir uns nun einmal mein Projekt unter diesen Schritten an:

modell-verplank

Die IDEA beschreibt den Grundgedanken hinter meinem Projekt. Bei METAPHOR musste das Prinzip der Idee in einen bildhaften Ausdruck umgewandelt werden, also „Welches bereits vorhandene Prinzip nutzt mein Projekt?“. Zu meiner Idee lässt sich zusätzlich ergänzen, dass sie auch auf dem Konzept des Karussells basiert, da die gezeigten Veranstaltungen immer wieder wechseln und in einer Endlosschleife präsentiert werden.

IDEA: Teilen von privaten Veranstaltungen und Aktionen durch eine App und mehrere Urban Screens.

 

METAPHOR: Plakatanzeigen und Leuchtreklame.

Als nächstes ging es um das MODEL – welche Interaktion findet auf welche Weise statt? Unter DISPLAY habe ich anschließend die geplante Umsetzung und Darstellung der Idee erläutert.

MODELL: Interaktion durch App / durch Sensor an den Screens.

 

DISPLAY: Newsfeed der Veranstaltungen wird auf großen Screens an belebten Orten in der Stadt gezeigt.

Nun ging es weiter mit ERROR: Welche Probleme möchte ich lösen? Im sechsten Punkt SZENARIO wurde die Situationen beschrieben, die meinen Zielgruppen den Anlass geben, mein Produkt zukünftig zu nutzen.

ERROR: 1. Ich veranstalte ein Event, aber niemand kommt. 2. Ich möchte etwas unternehmen, weiß aber nicht wo in der Stadt etwas los ist.

 

SZENARIO: 1. Ich möchte viele Leute über meinen Flohmarkt informieren. 2. Ich bin gerade unterwegs und möchte wissen, was in der Stadt los ist, bzw. neue Leute kennenlernen.

Die letzten beiden Punkte – TASK und CONTROL – beschreiben die Aufgaben der Screens und wie genau ich mit diesen interagieren, bzw. wie ich sie steuern kann.

TASK: Aufstellen der Screens in der Stadt (Installation), zeigen Bilder / Videos von Veranstaltungen, Wechseln der Bilder / Videos, Sensor registriert Bewegungen, Informationen werden bei Nähe eingeblendet, Navigation durch Handbewegungen.

 

CONTROL: Kontrolle und Navigation durch Handbewegungen (Sensor) / durch App.

Das Modell lässt sich auf neue und bereits existierende Projekte anwenden und man kann auf diese Weise schauen, ob die eigenen Überlegungen funktionieren.

Stadterfahrung – Selbsterfahrung


Zu Beginn des Semesters habe ich mit den Studenten des Challenge Lab for Interactive Concepts /CLIC/ einen szenografischen Rundgang durch Schwerin veranstaltet. aufmerksam für das gewöhnliche ist eine Methode von Sven Klomp und geht auf einen UX Roundtable in Hamburg vor 3 Jahren zurück.

Nun also CLIC aufmerksam in Schwerin, das sich bereits in einigen Artikeln auf diesem Blog niedergeschlagen hat. Die urbane Expedition hatte mehrere Ziele, die auch alle sehr gut aufgegangen sind:

  • Irritation zu Beginn des Semesters als Signal, dass hier nicht alles so sein wird wie sonst
  • Bonding und Kennenlernen
  • Situatives Einfühlen in urbane Raumsituationen als Grundlage für das Generalthema Urbane Interaktionen
  • Mapping zwischen Erlebnis und Ausstellung und später noch die Repräsentation in google maps

Eine Online-Gemeinschaftsfotoausstellung bildet nun den Abschluss der Aktion. Jedes einzelne Bild ist so banal, als könnte es auch auf Insta erscheinen. Als Serie ergeben sich aber erneut überraschende Einsichten und Zusammenhänge, die wiederum eine eigene Bedeutungsebene darstellen.


Alles für die Elemente: Runde 2

Die Elemente gehen in die zweite Runde. Alle werden weiter bearbeitet, optimiert und auf eine Hololensbrille angewendet. Dafür suchte ich mir verschiedene Bilder der Hololens aus, um die Perspektive auszunutzen. Danach wird in einem weiteren Punkt die Kommunikation untersucht. Also Los geht´s.

Der Anfang der Elemente macht heute wieder der Schlachtplan für den 18.10.1813, den dritten Schlachttag. Wenn alle Elemente auf der Karte aktiviert sind wirkt sie voll, doch der Spieler sieht sie nicht unbedingt in ihrer ganzen Pracht, denn der User kann auswählen was er sehen will. Wie? Ganz einfach. Der User kann sagen, ich möchte wissen wo meine Verbündeten sind, er kann auch sagen welchen Verbündeten er sehen möchte, da dieser nach Hilfe fragte. Die Gebäude, der Baum und der Kolmberg dienen für den Spieler als Orientierungspunkte. Der Nutzer sieht folglich, nur den Punkt, den er zu sehen braucht und kann zu seinen VR-Mitspielern sagen: »Geht zur Mühle. Das ist der Ort Hallesche Vorstadt und stört die napoleonischen Kämpfer.« Mhmmm, und wie wird das Netz weniger, damit es nicht so aussieht als ob die Brille einen Sprung hat? Um die Wege auf der Karte übersichtlich zu halten, verwendete ich die wichtigsten Wege, auf denen der Nutzer sich bewegt. Dennoch sind es viele Wege, daher bauen die Wege auf denen der User sich bewegt auf. Somit sehe ich nur den Teil der Wege, welchen ich brauch. Aber wie kann ich dann meinen Verbündeten Hilfe aussenden? Wenn ich dies machen möchte, sehe ich die Wege auf denen ich mich und mein in Not geratener Verbündeter bewegen.

kartenvariante1-mit-figurenorientierungspunkte_benoetigte-elemente

Die Karte mit ihren historisch korrekten Orientierungspunkten.

Ein weiteres Element zur Orientierung stellt der Kompass dar. Dieser soll perspektivisch gezeigt werden, so als ob man ihn schräg in der Hand hält. Darüber hinaus soll er einfach sein, aussehen wie 200 Jahre alt und dem User alle nötigen Informationen bieten, damit dieser sich im Raum und durch die Welt (dem Schlachtfeld der Völkerschlacht) bewegen kann. Dazu gehört die Frage: Wie bewegt sich der User überhaupt im Raum? Wenn der User drei Schritte im realen Leben macht, bewegt sich der Kämpfer in der Hololensaanwendung 300 m weiter (nach vorne, links, rechts oder rückwärts). Darüber hinaus wird unterschieden zwischen den Schritten beim Kampf und denen beim Schleichen durch die Dörfer und Schlachtfelder. Den Unterschied erkennt der Computer, durch das anlegen der Waffen.

Nun zu einem anderen Element. Als nächstes folgt die Lebens- und die Todesanzeige. Was passt am besten zu dem Tod? Natürlich der Schierlingsbecher. Nach dem Becher folgt eine Anzeige in Form von Zahlen. Diese zeigen die Tode am jeweiligen Schlachttag, die Tode in der gesamten Schlacht und die Tode in den eigenen Reihen (Verbündete). Das Leben ist wertvoll, vor allem in so einer wichtigen Schlacht, wo alle Lebenden Krieger benötigt werden. Daher wird das Leben durch drei glänzende auf der Seite liegende Diamanten dargestellt. Wenn man schwer verletzt wird (fast schon tödlich), verliert man einen Diamanten (ein Leben). Wenn dies dreimal passiert, ist der Spieler Tod und er hat die Schlacht um seine Stellung (den Ort den er verteidigen oder einnehemen soll) verloren. Man hat die Möglichkeit ein neues Leben zu erhalten, wenn man die Schlacht um seine Stellung gewinnt. Dennoch: wenn alle Verbündeten aus einem Team sterben, ist die Völkerschlacht verloren und wenn Napoleonspieler schlau sind, können diese auch einmal in ihrem Leben die Völkerschlacht gewinnen. Die Anzeige des Lebens wird im Himmel angezeigt, folglich schaut der Spieler hinauf und die Todesanzeige ist auf den Boten zu finden, da es um die Gefallenen geht.

 

leben_benoetigte-elemente

Die Lebensanzeige.

tod-schierlingsbescher_benoetigte-elemente

Der Schierlingsbecher einmal in groß.

tod-schierlingsbescher_benoetigte-elemente

Der Schierlingsbecher mit der Todesanzeige.

Als eine kleine Belohnung, erhält man nach dem Gewinn einer Teilschlacht ein Emblem. In den folgenden Bildern sind die Emblems für den 18.10.1813 gezeigt. (PS: Die Emblems folgen im laufe der nächsten Wochen :D)

Nach den Elementen, betrachte ich die Kommunikation genauer. Hier untersuche ich mögliche Ideen, wie der User die Elemente auswählen, vergrößern, verkleinern und Hilfe aussenden kann. Dies ist vom Spieler hauptsächlich Sprachgesteuert. Kein Witz, denn der Regisseur hört alles mit, hat die Kontrolle über alle Knöpfe im Regieraum und den Computer, natürlich gehört dann das zuhören und darauf reagieren auch zu seinen Aufgaben. Der User hat einige Befehle in seinem Vokabular auf denen der Mann aus der Regie reagiert und Knöpfchen drückt. Dazu gehöhren die Worte Hilfe!, Ich helfe, mehr Mann, Angriff und Rückzug.

Der User selbst kann steuern was er sehen will: Wenn er in den Himmel schaut sieht er seine Lebensanzeige, wenn er auf den Boten schaut die Gefallenenanzeige und den Schlachtplan sieht er, wenn er seinen Blick nach weit Links oder Rechts richtet, da er auch so die Orientierungspunkte auf dem Schlachtfeld sieht, damit er weiß vor welchem Dorf er sich befindet. Der Kompass wird nur beim Laufen durch die Schlachtfelder neben den Schlachtplan angezeigt und sonst hat der Nutzer die Möglichkeit diesen anzuzeigen, wenn er die Hand offen ausstreckt so als ob dieser sich in echt auf der Hand befindet. Die Elemente kann der Nutzer durch das aufklappen von aufeinander gedrückten Daumen und Zeigefinger vergrößern und das schließen dessen verkleinert die Elemente wieder.