An dieser Stelle sollen einige Punkte abgearbeitet werden, die nach der Präsentation angesprochen wurden. 

Zum Video

Um es kurz zu halten: Beim Video habe ich keine Änderung vorgesehen. Während der Präsentation gewann ich den Eindruck, dass das Video das durch die Teilnehmer und Teilnehmerinnen am besten bewertete Element meiner Projektarbeit darstellt. 

Zur Website

Im Bezug auf die Usability trug der Kollege Schleimer per Blogkommentar den Vorschlag heran, dass ich den Menüpunkt, auf dem sich der User befindet, hervorheben könne. Ich habe mich letztlich dagegen entschieden, dies umzusetzen. Zum einen hängt dies mit der Tatsache zusammen, dass mein eigener Codeaufbau einer aufwändigeren Überarbeitung bedarf, um dieses Vorhaben umzusetzen. Zum anderen sehe ich keine echte Notwendigkeit, da die einzelnen Bereiche der Seite eine meiner Ansicht nach klare Identität vorweisen.

Der Kollege Guttmann meinte, dass der Ersteindruck der Website noch nicht ganz klar macht, dass es sich um eine Singlepage handelt, und dass man dies durch ein Pfeilchen verdeutlichen könne. Gesagt getan - der Vorschlag wurde umgesetzt. Unter dem Video befindet sich nun ein kleiner Pfeil. 

Zur Dokumentation

Bei der Dokumentation der Website wurde nun auch auf einzelne Codebits eingegangen. Dies hatte bisher im Beitrag gefehlt. 

Zur visuellen Gestaltung

Im Zuge der Videogestaltung sollten aufgrund der fiktiven Existenz des Restaurants keine Aufnahmen rund um das Restaurant selbst entstehen. Vielmehr wurde mit einem Imagevideo geplant. Hierbei entstanden dreierlei Konzepte, von denen im Anschluss ein Video tatsächlich umgesetzt wurde. Die Videos sollten sich stilistisch in ihrer Skurrilität und industrielle-schroffen Darbietung stark an die 2005 produzierten Hornbach-Werbevideos mit Blixa Bargeld von den Einstürzenden Neubaten anlehnen.

Konzept 1 - Hier gibts keine Rohkost.

Konzept eins - das ich dann umgesetzt habe - beinhaltet die Erläuterung der Inhaltsstoffe des KRAFTSTOFF-Wurstgulasch. Hierbei habe ich selbst, anstatt die Inhalte zu erläutern, vor laufender Kamera in die rohen Zutaten gebissen. Zum Beginn erscheint eine Kurzerklärung, was im Video zu sehen ist, zum Ende folgt der Slogan "Fleischfrei, sauber, schmeckt. Korrekt."

Das konkrete Drehbuch sah folgendermaßen aus:

Vorspann: Schriftzug "Das KRAFTSTOFF Gulasch" zu kalter, elektronischer Musik. 

Szene 1: Beginnend mit der Beschreibung der Zutat (inkl. einem passenden Werkzeuggeräusch) , anschließend sieht man den Protagonisten (mich) in die Zutat beißen.

Szene 2-8: Exakt gleiche Abfolge wie bei Szene 1.

Abschluss: Schriftzug "Bei uns gibts keine Rohkost.", im Anschluss der Slogan, gefolgt vom Logo mit der gleichen Musik vom Vorspann.

Aufgrund meiner bescheidenen Zeichenkünste wurde beim Storyboard hauptsächlich Grundlegendes festgehalten. 

Im tatsächlichen Video kam es in Szene 8 dazu, dass ich mich aufgrund der rohen Zwiebel beinahe übergeben musste. Ich fand das unterhaltsam und ließ die Szene von meinen Kampf, die Zwiebel unten zu behalten etwas länger laufen. Dies ist das entstandene Video:

Konzept 2 - Salat? Nein Danke.

Konzept zwei war ein wesentlich kürzeres Video, indem ich selbst einen Dialog mit dem Video führe. Auf dem Video werden auf schwarzem Hintergrund in weißer Schrift diverse Lebensmittel abgefragt. Diese sind meist "fleischiger" Natur, es geht um Bratwürste, Entenbrust, Schnitzel, etc., die die Person im Video (also ich) - auf verschiedenen Geländen im VÖEST-Gelände stehend - allesamt mit einem lauten "JAWOLL" beantwortet. Im Anschluss wird nach Salat gefragt, was die Person dazu führt, mit fassungslosem Blick das Videobild zu verlassen. Dies soll vor allem das Anti-"Gras- und Körndlfresser"-Image des Restaurants unterstreichen.

Konzept 3 - Ode an Blixa Bargeld

Konzept drei sah ausdrucksvolle Lektüre (im oben beschrieben Stil des Blixa Bargeld) kraftstoffbezogener Fachliteratur vor industrieller Kulisse vor. Aufgrund des bescheidenen Mikrofon-Equipments und der fehlenden Sprachkompetenz meiner Person für eine solche Darbietung ließ ich von diesem Vorhaben ab.

Zur technischen Gestaltung

Das Video wurde mit der Videofunktion meiner digitalen Spiegelreflexkamera und einem Stativ gedreht. Hierbei war es vor allem Schwierig, die Beleuchtung so zu gestalten, dass die Bildqualität einheitlich blieb. Aufgrund der Einfachheit des Videodrehs an sich konnten die meisten Clips relativ reibungslos gedreht werden.

Bei der Bearbeitung der Videodatei erhielt ich eine kurze Einschulung in Final Cut Pro für den Mac durch meine Lebensgefährtin. Der Lerneffekt war durch die neben mir sitzende erfahrenere Person entsprechend gut. Für die teilweise musikalische Untermalung im Video habe ich entsprechende Werke im Free Music Archive gefunden und eingesetzt.

Link zur fertigen Website

Zur visuellen Gestaltung

Das Websitedesign für KRAFTSTOFF wurde im Erstvorschlag bereits mit Hilfe von Photoshop skizziert. In der Umsetzung wurden allerdings entscheidende visuelle Aspekte der Webseite geändert. 

Das Menü auf der linken Seite musste weichen. Dies passierte aufgrund von Überlegungen, die das Layout auf mobilen Endgeräten betreffen. In der vertikalen Ansicht wurde durch diese Art der Navigation wertvoller Platz genommen. Zwar wäre es durch ein Media Query denkbar gewesen, die Menüführung für unterschiedliche Endgeräte auch unterschiedlich zu gestalten, jedoch hielt ich das für unnötig. Von der ästhetischen Seite her war mir eine fixierte Navigation am oberen Ende der Website genau so recht. Aufgrund dessen bevorzugte ich die einheitliche Lösung.

Wie beschrieben blieb ich beim One-Page-Layout. Jede Einzelne "Seite" wurde mit einem Hintergrundbild versehen, das thematisch an die entsprechende Überschrift angelehnt ist.

Bei der farblichen Gestaltung wurden anhand entsprechender Suchkriterien bestehende usergenerierte Farbpaletten der Website colourlovers.com in Anspruch genommen.

Zur technischen Umsetzung

Technisch wurde die Website teilweise anhand des Dreamweavers vorgenommen, wobei allerdings vordergründig der Codebereich gewählt und vom komfortablen Wechsel zwischen .html- und .css-Datei Gebrauch gemacht wurde. Zur besseren Übersicht verwendete ich auf meinem heimischen Schreibtisch zwei Bildschirme. Auf dem einen war der Code ersichtlich, während auf der anderen die entsprechende Websitefile mithilfe der Google-Chrome-Erweiterung Easy Auto Refresh regelmäßig aktualisierte. 

Die technische Umsetzung des One-Page-Layouts gestaltete sich erwartet schwierig, da es dieser Art von Website zueigen ist, dass der Code unübersichtlich werden kann. Dieser Problematik konnte ich einigermaßen erfolgreich mittels Kommentarsetzung und der Tatsache, dass ich den Code zu 99% händisch verfasst habe, entgegenwirken.

Eine Herausforderung für die Umsetzung der Website war die Einbindung eines Javascripts zur Erreichung des Smooth Scroll-Effektes. Hierbei wurde ein Open-Source-Template per Reverse Engineering zerlegt, um Verständnis für die Implementierung zu erreichen. Anschließend wurden die notwendigen Codezeilen und Verweise in das eigene Dokument übernommen. Dies wurde gleich zu Beginn der Website-Gestaltung erledigt, da ich denke, dass sich eine nachträgliche Änderung nur durch schwerwiegende Änderungen im Grundgerüst erreichen lässt.

In weiterer Folge wurde erst der grobe Aufbau in sections eingeteilt. Anschließend wurde die Navigation erstellt, die "Inhaltsboxen" festgelegt und mit Beispieltexten befüllt. Erst zum Abschluss folgte die Einbindung von Bildmaterial und sinnvollen schriftlichen Inhalten.

Das Video wurde auf der Startseite mithilfe des html5-Videoplayers Video.JS eingebunden. Dieser Player lieferte mir die gewünschte Freiheit im Bezug auf das Layout und entsprach meinen Vorstellungen im Bezug auf die Unaufdringlichkeit. Letztlich habe ich mich aufgrund der Skalierbarkeit dazu entschieden, die Größe des Videos anhand prozentueller Angaben zu steuern, wodurch bei manchen Auflösungen ein schwarzer Rand entstehen kann. Hier habe ich gegenüber der genauen Pixelangabe, mit der in den Rand verhindert hätte, einen Tradeoff zugunsten der Funktion hingenommen. 

Im Menüpunkt Futter wurde die Seite in ihrer Größe erweitert, sodass diese nicht nur eine, sondern zwei Bildschirmhöhen in Anspruch nimmt. Dies liegt der ausführlicheren Natur einer Speisekarte zugrunde. Hier wurde einfach mehr Platz gebraucht. In der weißen Box selbst wurde per CSS implementiert, dass die weiße Box nicht erweitert, sondern scrollbar wird. Dies wurde in den weiterern Menüpunkten ähnlich umgesetzt.

Im Menüpunkt Reservierung entstand ein Formular mit Eingabefeldern, wobei hier zwischen den Eingabefeldern "Text", "Date","Time", "Number" und "Email" unterschieden wurde. Diese input type-Variationen sorgten für eine Eingabevalidierung im Browser, weitere Einschränkungen - beispielsweise bei der Anzahl der Personen für eine Reservierung - wurden händisch festgelegt (hier: 1 bis 20). Bei erfolgreichem Versand erscheint eine Dummy-Page mit Dankesnachricht, eine weitere Funktion wurde nicht implementiert.

Weiters wurde im Menüpunkt Kontakt mithilfe des Google Maps-Dienstes eine interaktive Karte in Form eines iframes eingebunden, die dem Kunden bei der Orientierung helfen soll.

Im Bezug auf die Browserkompatibilität wurde die Website in den neuesten Versionen von Chrome, Firefox und Safari getestet. Im Internet Explorer gab es kleinere Unterschiede visueller Natur, die Funktion blieb allerdings gleich.

Grundsätzlich sollte die Funktion in verschiedenen Auflösungen gewährleistet sein, da im Design der Website vordergründig prozentuelle Angaben bei der Definition der Größen angewandt wurden. Für die Darstellung in Portraitansicht, z.B. bei mobilen Endgeräten, wurde das Logo per Mediaquery ausgeblendet, dafür befindet sich im Menü der Menüpunkt "Home". 

Hier befindet sich der grobe Aufbau der Website.

<!DOCTYPE html>

<html lang="de">

<head>...</head>

<body>

<nav>...</nav>

<section id="intro" class="intro-section"> ... </section>
<section id="futter" class="futter-section"> ... </section>
<section id="saft" class="saft-section"> ... </section>
<section id="reservierung" class="reservierung-section"> ... </section>
<section id="kontakt" class="kontakt-section"> ... </section>
<section id="impressum" class="impressum-section"> ... </section>

</body>

</html>

Im Kopf wurden Javascripts eingebunden, ebenso im Body am unteren Ende des Dokuments. Für die Navigation wurde er HTML5-Tag <nav> verwendet. Die einzelnen Bereiche wurden in Sections unterteilt und mit Inhalten befüllt. Zumindest auf Firefox und Chrome sollte hinter diesem Link der Quellcode ersichtlich sein.

Für den IK Produktion und Gestaltung interaktiver Medien habe ich im Zuge der Vorbereitung wie im Willkommensbeitrag gefordert zwei Themenvorschläge ausgearbeitet.  

Vorschlag 1 - Restaurant KRAFTSTOFF

Corporate Identity & Zielgruppe

Die Website soll das fiktives Nischenrestaurant KRAFTSTOFF am Hauptplatz in Linz präsentieren. Es handelt sich hierbei um ein veganes Restaurant, das Kraftnahrung in großen Portionen anbietet und dadurch die vermutet unmischbaren Bereiche der Arbeiter- und Kraftsportlerkultur mit dem der veganen Ernährungsweise verbindet. 

Zielgruppe dieser Website bzw. des Restaurants sind vorwiegend Kultur- und Ernährungsbewusste mit Vorliebe für Themenrestaurants. Während die Website zwar eine Nähe zur Arbeiterschaft suggeriert, wird diese Schicht durch die Botschaft der Seite nicht direkt angesprochen. Viel mehr soll ein Image eines Lokals, zu dem man auch klassische und veganskeptische Allesesser bzw. fleischverliebte Sportler einladen kann.

Farblich gestaltet sich die Website zwar farblich sachlich und schwarz-weiß, d.h. sie beinhaltet nur wenige Farbtupfer. Diese sollen jedoch wohlplatziert sein und dazu verwendet werden, den User auf bestimmte Dinge (z.B: Buttons für soziale Netzwerke) aufmerksam zu machen. 

Aus diesem Grund habe ich mich für drei Logoansätze entschieden:

A	B	C

Zu allen drei Logos kann behauptet werden, dass hier vordergründig die Einfachheit im Vordergrund steht. Der Name des Restaurants wird prominent dargestellt, auf schnörkel- und glanzvolle Darstellung wird bewusst verzichtet.

In Logo A wird das grüne X zum Erkennungsmerkmal stilisiert. Das X soll den Stilbruch verdeutlichen, zwei unterschiedliche Ansichten kreuzen sich. Des Weiteren existiert hier eine Verbindung zur Urbankulturbewegung Straight Edge, deren Anhänger neben dem Verzicht auf Alkohol, Drogen und Nikotin auch teilweise den Veganismus hinzurechnen. Das X ist hierbei eine Art Markenzeichen für die Bewegung.

In Logo B wird auf eine bildnerische Darstellung verzichtet. Hier steht der Leitspruch im Vordergrund. Das blaue "Stoff" erklärt sich durch die Verbundenheit zur Arbeiterschaft und Linz und soll entfernt an das Logo der voestalpine erinnern.

In Logo C wird auf Brennstoffe angespielt. Kraftstoffe sind Brennstoffe, deren "chemische Energie durch Verbrennung in Verbrennungskraftmaschinen (...) in Antriebskraft umgewandelt wird." ¹ Auch hier findet der weßblaue Schriftzug Verwendung. 

Die Nutzung ist für Standgeräte und Tablets vorgesehen. 

Designkonzept & Medieneinsatz

Im Vordergrund steht zum einen die Botschaft, die das Restaurant verbreitet, zum anderen soll ein Augenmerk auf die Speisen gelegt werden. Aus diesem Grund soll der User per Blick auf die Speisekarte durch für vegane Speisen ungewöhnliche Namen (Bratwurst mit Kartoffeln und Sauerkraut, Herzhaftes Chili, etc.) beeindruckt werden.

Zum anderen stehen Bilder im Vordergrund, die zwar das Ambiente nicht zwingend abbilden müssen, jedoch repräsentieren sollen. Weiteres Interesse Interesse des Kunden soll durch die visuelle Darstellung der gebotenen Speisen geweckt werden. Die Seite wird nach dem Prinzip einer Single Page-Website entstehen und sich stilistisch hierbei an folgenden Beispielen orientieren:

Farmer's Market Kitchen
San Andrea
The Black Truffle

Die Bilder werden selbst gemacht. Was das Video betrifft, wird ein Imagevideo als Lösung angedacht, wodurch sich die Schwierigkeiten, die sich durch die Fiktivität des Restaurants ergeben, verringern.

Menü, Navigation und Inhalte

 Ich habe versucht, in Photoshop einen erstes Groblayout zu erstellen:

Auf der Website werden 3 Fonts angewandt. Zum einen befindet sich die Schriftart Bebas Neue im Logo. 

Auf der Website selbst habe ich vorerst Orator verwendet. Diese Schriftart steht nicht zur freien Verwendung und kann daher weder durch Google Webfonts noch durch selbstgehostete Webfonts eingesetzt werden. Ich hab die Schrift dennoch im Entwurf gelassen, da ich mich im weiteren Verlauf nach einer ähnlichen Schrift umsehen möchte. Das gleiche gilt für die Navigation, die auch mittels einer Liste erstellt werden und einen Mouseover-Effekt beinhalten soll. 

Die Navigation wird durch den Singlepage-Character der Website vorgegeben. Auf der linken Seite befindet sich ein (fixiertes und immer "mitscrollendes") Menü, das in die Bereiche Futter, Saft, Reservierung und Kontakt gegliedert ist. 

Unter Futter und Saft befindet sich eine kleine Beschreibung, darunter die entsprechenden Speise- und Getränkekarte. Direkt daran angehängt (in Form eines Hyperlinks) befindet sich außerdem eine Tageskarte als PDF-File, die durch ein Dropbox-Hosting zur Verfügung gestellt wird, um die einfache tägliche Wartung zu gewährleisten: Es wird hiermit nur das Ersetzen der gleichnamigen PDF in den Ordner notwendig.

Reservierung bietet dem Kunden die Möglichkeit, mittels Kontaktformular einen Tisch im Restaurant zu bestellen bzw. das Restaurant für private Feiern zu buchen. Unter dem Menüpunkt Kontakt befinden sich Verlinkungen zu den entsprechenden sozialen Netzwerken, eine Mailadresse und Adresse bzw. Telefonnummer. Außerdem soll darin eine Karte enthalten sein, die der Webbeschreibung dient. Im Optimalfall ist es mir möglich, Google Maps in das Design einzubinden. Alternativ ist es als Minimalziel auch denkbar, lediglich ein Bild einzubauen. 

Quelle 1: http://de.wikipedia.org/wiki/Kraftstoff

(verworfener und nach Termin 1 nicht weiterbearbeiteter) Vorschlag 2 - Persönliches Illustrationsportfolio

Ich selbst beschäftige mich in meiner Freizeit seit längeren mit digitaler Kunst, insbesondere der Stilrichtung Pixelart. Im Zuge dessen sind einige kleine Werke entstanden, die sich unter Umständen zur Präsentation eignen. Aus diesem Grund soll Sammlung zu einem Portfolio zusammengefasst werden. 

Designkonzept & Medieneinsatz

Die Bilder selbst stehen im Vordergrund, auf der Startseite befinden sich ausgewählte Werke, Informationen zu meiner Person werden recht kurz und bündig auf der Startseite angezeigt. Dieses "Feld" soll auch entsprechende Vernetzungen zu meinen sozialen Netzwerkprofilen sowie eine E-Mailadresse enthalten.

Die visuellen Medien (Fotos, ein Video?) werden alle von mir selbst angefertigt und bereitgestellt. 

Menü & Navigation

Die Navigation sollte möglichst einfach sein. Die Menüpunkte gliedern sich durch meinen konzeptuellen Ansatz lediglich thematisch und dienen vordergründig zur Abtrennung einzelner stilistischer Merkmale in den Werken:

- Home

- Isometric
- Non-Isometric
- Scraps

Zielgruppe

Zielgruppe meiner Website sind zum einen Interessierte dieser Art von Illustration, allerdings soll dieses Portfolio auch eine Orientierung für diejenigen sein, die für ihr Projekt einen solchen Illustrator benötigen, d.h. Game Designer, andere Illustratoren, etc.

Kritische Faktoren

Nachdem die Navigation ausschließlich über die thematische Gliederung stattfindet, sollte für die Zielgruppe verständlich sein, was sich hinter den Links verbirgt. Um die User allerdings vom sofortigen Absprung abzuhalten, ist es notwendig, das Interesse des Anwenders bereits auf der Startseite durch diverse Kostproben zu wecken, um ihn zum Weiternavigieren zu verleiten. Des Weiteren soll die Vernetzung zwischen sozialen Netzwerken und Website funktionieren und Früchte tragen. 

Das bedeutet: Absprungrate niedrig halten, soziale Medien effizient einsetzen.