Hi, I’m Shawna.

Multimedia Producer sind gefragte Leute. Sie produzieren Kurzfilme, führen Interviews, schreiben Texte und kennen sich sogar mit Programmiersprachen aus! Ein guter Grund also, sich auf Instagram, LinkedIn & Co. von seiner besten Seite zu präsentieren und sich so von allen anderen abzuheben. Aber wie sieht es eigentlich mit der eigenen Website aus?

Wenn ich lese, was ich da gerade schreibe, muss ich ein wenig schmunzeln – denn ich würde mich so nie im Leben, face-to-face, vorstellen. Ich würde höchstens sagen: «Hallo, ich heisse Shawna und studiere zurzeit Multimedia Production.» So würde ich aber bestimmt niemanden von mir und meinen Fähigkeiten überzeugen. Also setzte ich mich mutig an meinen Laptop und baute mir meine ganz persönliche Webseite – so, wie ich sie schon immer haben wollte.

Ich wusste von Anfang an, dass ich mich nicht mit dem Erstbesten zufriedengeben würde. Daher wollte ich nicht einfach eine Website mit meinen bisher erlernten Kenntnissen aus den ersten zwei Semestern «Interaktive Medien» erstellen, sondern wollte sie genauso bauen, wie ich es mir in meinem Kopf ausmalte. Ich wollte aber auch nicht einfach eine Wix.com-Website, wie jeder andere Nicht-Multimedia-Producer sie auch erstellen könnte. Ich entschied mich also für eine WordPress Website und kaufte mir das Divi-Theme. Dieses ermöglichte es mir, meine Website von Grund auf selbst aufzubauen und unterstützte mich dort, wo ich das Know-How noch nicht hatte. Entstanden ist nun mein Portfolio – so, wie ich es schon immer haben wollte. Elegant, minimalistisch und trotzdem aussagekräftig.

Du findest es unter www.shawna.ch.

(spu)

Kritik
von Shawna Küffer

Domain/Host/etc.

Zu aller erst musste ich mich um meine Domain, das Hosting und die Datenbank kümmern. Mein Vater kaufte vor einigen Jahren die Domain shawna.ch, welche nun endlich gebraucht werden konnte. Das war eine sehr tolle Investition, denn nicht viele können von sich behaupten, eine solche Domain zu besitzen – so kurz, so persönlich, so einzigartig, wobei ja jede Domain einzigartig ist ;-).

Preloader

Ich erstellte zudem einen eigenen Preloader, welche ich in Adobe After Effects selber erstellte. Ich exportierte die Animation danach als GIF und fügte dieses wiederum in meinen Code ein und definierte, wie lange er jeweils angezeigt werden soll. Es wurde mir einmal mehr bewusst, dass solche Details wirklich selbst von Multimedia Producern erstellt werden können, und das fühlt sich toll an. Wir lernen so viele verschiedenen Sachen, welche wir in einem solchen Projekt dann auch gleich anwenden und einbinden können. Ausserdem versuchte ich, eine eigene Animation in After Effects zu erstellen, was mir wirklich nicht leichtfiel, da ich viele Adobe Produkte lieber habe, als After Effects. Jedoch stellte ich mir auch dieser Hürde, denn ich hatte ein Ziel vor Augen.

Homepage

Die Homepage ist sozusagen mein «Baby», in welches ich sehr viel Zeit investiert habe. Die Grundidee für dieses Design holte ich mir durchs Durchstöbern von verschiedenen, ausgezeichneten Seiten auf awwwards.com. Die Homepage soll meine neusten, oder besten Projekte zeigen. Alle anderen Projekte habe ich dann auf der Subpage «All works» aufgeführt. Da aber der erste Eindruck zählt, steckte ich viel Zeit und Arbeit in die Homepage. Ich wusste von Anfang an, dass ich einen Foto-Slider wollte. Daraus entwickelte sich die Idee, ein unendlich langes Caroussel zu machen. Ich wollte, dass der Slider, bzw. das Caroussel nicht per Klick, sondern per horizontalem Scroll zu bewegen ist. Ausserdem wollte ich, dass der Slider mittig zentriert ist. All diese Anforderungen und Aufgaben, galt es nun umzusetzen. Erstmals versuchte ich so weit wie möglich mit Divi zu kommen. Als es aber dann doch einmal nicht mehr weiterging, machte ich mich im Internet schlau. Ich untersuchte diverse Webseiten, welche so ca. meine Ideen umgesetzt hatten und ich bastelte aus verschiedenem Code selbst etwas zusammen. Schlussendlich habe ich es wirklich geschafft, alle meine Ideen umzusetzen – mit Ausnahme des Caroussels. Ich erstellte in gefühlten 10 Stunden tatsächlich eine JavaScript-Funktion, welche mir das unendliche Scrollen ermöglichte. Jedoch stellte ich fest, dass es nur mit Google Chrome funktionierte und auf dem Handy leider auch nicht. Ich musste mich nun also von meiner Traumvorstellung trennen und wandelte meine Idee um. Nun ist der Slider kein Caroussel mehr und somit nicht mehr unendlich. Ich finde die Homepage nun aber trotzdem sehr toll und habe ausserdem eine Aufgabe, an welcher ich in meiner Freizeit weiterarbeiten kann und meine Website weiter optimieren kann – jedoch ausserhalb dieses Projektes, da dies schon so, viel mehr Zeit in Anspruch genommen hat, als Anfangs ausgemalt.

Fotos

Ein grosses Learning dieses Projekts ist, wie wichtig es wirklich ist, Fotos webtauglich zu machen. Ganz am Anfang erstellte ich meine Fotos (zB. Homepage) in Adobe Illustrator und exportierte diese in der bestmöglichen Qualität raus, denn ich wollte meine Website, ja in höchstmöglicher Qualität präsentieren. Ich merkte dann aber relativ schnell, dass sich die Ladezeit der einzelnen Subpages oder schon nur der Homepage um ein Vielfaches verlängerte und der Ladevorgang der einzelnen Bilder einfach zu lang wurde. Nun musste ich also, sehr mühsam und zeitraubend, alle Fotos noch einmal richtig, das heisst webtauglich, exportieren.

Eigener Code

Ja, ich benutzte ein Wordpress-Theme. Das heisst aber nicht, dass ich nichts selber gemacht habe. Ich baute mein Portfolio, mithilfe des Divi-Builder, von Grund auf selber. Bei manchen Anliegen und Ideen half mir jedoch auch der Divi-Builder nicht mehr weiter und ich «musste» meine ganze HTML,CSS und JS-Kunst auspacken. Elemente, welche ich wirklich selbstständig coden «musste» sind zB. die Einbindung des Preloaders, die «nicht-scrollbaren» Seiten, der Slider auf der Homepage, das Menü und den Footer. Natürlich konnte ich das nicht einfach, sondern googelte mich durchs Internet, schaute den Code von ähnlichen Webseiten an und kopierte mir meinen Code zusammen. Wir sind schliesslich Multimedia Producer und müssen das längst nicht alles selbst wissen. Wir müssen nur den Code lesen können und schlau genug sein, einen Code zu schreiben, welcher schlussendlich das macht, was man will.

Datenschutz/Cookies

Zu guter Letzt widmete ich mich noch dem rechtlichen Teil des Projekts. Ich informierte mich, was auf eine Website unbedingt muss umsetzte dies um. Ich erstellte ein Impressum und aktivierte ein Cookies-Plug-In. So bin ich nun auch rechtlich gut abgestützt und der Lancierung meines Web-Portfolios steht nichts mehr im Weg.

Learnings

  • Ich habe nun keine Angst mehr vor dem Erstellen oder Programmieren eigener Webseiten, da ich nun weiss, dass ich es kann. Ich bin der Meinung, dass ich persönlich nicht von Grund auf eine Website erstellen muss, sondern es reicht, wenn ich das Gelernte aus dem Studium so (zB. mit Divi) anwenden kann, denn ich habe ein Theme, welches ich selber zusammengestellt habe, mit meinen eigenen Codeblöcken so abgeändert, wie ich es wollte – und das erfolgreich.
  • Ich habe gelernt, dass sehr viel Potential in mir liegt, da ich nicht nur eine Website machen kann, sondern auch Preloader-Animationen erstellen, ein Design konzipieren oder Fotos webtauglich machen kann. Ausserdem wurde mir klar, dass ich stolz sein kann auf meine Arbeiten, welche ich nun in meinem Portfolio aufgelistet habe. Das motiviert gleich noch mehr, neue Projekte in Angriff zu nehmen.
  • Da ich sehr perfektionistisch bin und mich nicht einfach mit dem erst Besten zufriedengebe, nahm die Erstellung des Portfolios viel mehr Zeit in Anspruch, als eigentlich geplant. Ich rechnete anfangs mit ca. 30 Stunden, habe nun aber mehr als 90h investiert. Ich hörte aber irgendeinmal auf zu zählen, da es für mich nicht mehr nur um einen Digezz-Beitrag ging, sondern um viel mehr. Ich habe nun mein eigenes Portfolio und bin so stolz auf mich! Und ich finde, dass ist das Einzige, was zählt.
  • Weiter habe ich gelernt, dass es besser wäre, wenn ich von Anfang an ein Child Theme erstellen würde, damit in Zukunft bei allfälligen Updates von Divi weniger Aufwand entsteht. Auch diese Arbeit, werde ich ausserhalb des Digezz-Projekts in Angriff nehmen.
  • Da ich noch nicht so viele Referenzen habe, habe ich mich entschieden bei ‘All works’ noch keinen Filter einzubauen. Diesen werde ich jedoch in naher Zukunft umsetzen und so Ordnung und einen besseren Überblick schaffen.
  • Ich habe mein Portfolio bewusst auf Englisch umgesetzt, da ich auf grosse Textblöcke verzichte. Die wenigen Wörter auf meiner Webseite versteht so jeder und es sieht in meinen Augen auch einfach professioneller aus. Jedoch habe ich festgestellt, dass zB. das Impressum und die Datenschutzerklärung momentan noch auf Deutsch ist. Das werde ich in naher Zukunft noch übersetzen, damit es dann einheitlich ist.

Keine Kommentare

Schreibe einen Kommentar