Wer bin ich?

… und wieviel von diesem «Ich» posaune ich in das Internet hinaus? Eine von vielen Fragen, die gestellt sind, wenn man sich als Multimedia Producer mit seiner eigenen Webseite rumschlägt.

Im Leben eines jeden multimedial Produzierenden kommt der Zeitpunkt, an dem der Entschluss gefällt wird, seine Referenzen auf einer Webseite zu sammeln. Das Ganze geht heute, WordPress sei Dank, sehr einfach. Doch mit diesem Zusammenzug kommt auch die Frage: Wer bin ich? Und wie präsentiere ich mich auf der Welt? Ein einheitliches Bild muss her, das uns im besten Fall auch gebührend präsentiert. Schliesslich öffnet oder schliesst unser Portfolio so manche Tür.

Auf der Suche nach der eigenen Ich-Marke, liessen sich folgende Erkenntnisse ziehen:

1 | Kontinuität
Ob nur bei der Webseite oder auch der Visitenkarte, den Social Media-Kanälen und dem Lebenslauf. Continuity is Key! Deswegen sollte beim Kommunikationskonzept und dem Design Manual nicht gespart werden. Dabei sollte man es von von Anfang an vermeiden, bei den Farben und den Wörtern das gleiche zu rezitieren wie alle anderen.

2 | Wage es du selbst zu sein

Bis vor kurzem stand zwar überall, man solle ja nicht «sich selbst sein im Arbeitsleben». Das trifft vielleicht auf den üblichen 0815-Bürojob zu, aber auf keinen Fall auf die Ich-Marke. Wie will man sich den sonst bitte von den zig anderen Mitbewerbern abheben? Ob nun die Webseite etwas bunter oder der Text etwas frecher ist, sei dahingestellt. Die Erfahrung zeigt, dass Mut interessante Türen öffnet und vor Spiesser-Jobs schützt.

3 | Was du heute kannst besorgen…
… verschiebe ausnahmsweise nicht auf morgen. Obwohl ein Portfolio unheimlich viel nützt, wird es oft als Accessoire gesehen und auf irgendwann verschoben. Das Studium ist dann schneller beendet als man meint und am Ende steht man ohne Portfolio da. Dabei kann es im ewigen Bewerbungsprozess über Erfolg oder Misserfolg entscheiden.

Wie das ganze nun von mir umgesetzt wurde, könnt ihr HIER begutachten.

(fs)

Kritik
von Lucia Kind

Idee

Durchforstet man das Internet nach der lokalen Konkurrenz, wird eines ziemlich schnell klar. Die grosse Masse ist so kreativ wie ihre Vorgänger in Papierform. Es ist immer das übliche und simple schwarz auf weiss. Das ganze ist zwar durchaus nicht unästhetisch aber wo bleibt da bitte die Individualität? Haben wir Angst davor, fällt es uns nicht auf oder ist es uns schlichtweg egal? Mit diesem Ansatz wollte ich zwar ein schlichtes aber trotzdem indivduelles Portfolio in die Welt setzen. Inspiriert dazu hat mich primär die Webseite OnePageLove.com, hier gibt es viele kreative Lösungen für das Portfolio mit dem gewissen etwas.

Website

Ausgangslage

Schon länger wollte ich endlich mein eigenes Portfolio ins Netz stellen. Aufgrund anderer Projekte schien ich aber nie die Zeit dazu zu haben. Weswegen ich zu Beginn des Semesters entschloss, das es das ideale Projekt für Digezz ist. Schliesslich bin ich nicht die Einzige mit diesem Wunsch und meine Mitstudierenden können von meinen Erkenntnissen profitieren.

Ziel

Eine Webseite in der ich mich selbst wiederfinde. Weg vom Einheitsbrei aber trotzdem zweckmässig. Dabei möchte ich nicht mit schrillen Farben sondern mit interaktiven Mitteln das ganze aufpolieren. Dem Besucher soll die Seite auch längerfristig in Erinnerung bleiben.

Back to HTML

Warum eigentlich ohne CMS? Diese Frage haben mir ein paar Mitstudierende gestellt, weswegen ich sie hier auch nochmals beantworten möchte. Wenn ich eine Webseite für einen Kunden umsetze habe ich das Ziel, dass der Kunde es am Ende selbst bearbeiten kann. Diesen Anspruch habe ich aber nicht bei meiner eigenen Seite. Das Grundgerüst als Theme umzubauen ist zwar durchaus interessant aber bei unterschiedlichen Komponenten wäre es recht komplex ohne grossen Mehrwert geworden. In diesem Fall ist es simpler per rohem HTML neue Komponenten hinzuzufügen.

Prozess

1 | Inspiration

Anstatt einfach drauf los zu designen, suche ich zuerst im Internet nach ein paar guten Lösungen. Dabei google ich oft nach den besten Jquery Plugins oder stöbere auf OnePageLove.com rum. Die Links sammle ich üblicherweise mit getpocket.com. Für ein spezifisches Design stelle ich auch gerne ein Dokument zusammen und schreibe jeweils daneben welche Komponenten ich gerne auch bei mir umsetzen möchte. Mann muss das Rad ja nicht ganz neu erfinden. Oft gefällt mir beispielsweise eine Navigation und auf dieser baue ich dann das Design auf und integriere weitere kleinere Komponenten dementsprechend.

2 |  Design

Ausnahmsweise ohne Design im Photoshop habe ich schlichtweg drauf los codiert. Ich habe zig mal versucht das Design festzuhalten nur um es dann wieder komplett zu verwerfen. Was am Ende bleibt sind Skizzen auf Fresszetteln. Jedoch bin ich überzeugt, dass es hier der richtige Ansatz war. Ich bin häufig zu Beginn total glücklich mit dem Design, nur um es ein paar Tage später als völlig miserabel in den Papierkorb abzuschieben. Vor allem habe ich gemerkt das es gut ist nicht immer alles vorab zu planen, das grenzt nur ein. Sonst hätte ich mich wohl gegen mein jetziges Kontaktformular entschieden.

3 | Umsetzung

# 1 | Ausnahmsweise stand als erstes die Startseite. Das Jquery Plugin Particles.js(http://vincentgarreau.com/particles.js/) hat mich endlich zum codieren motiviert. Das Plugin ist sehr leicht anzupassen und vor allem funktioniert es auch auf der mobilen Fassung einwandfrei.

# 2 | Auf vielen Seiten werden Laptops oder Iphones verwendet um Referenzen anzuzeigen. Ich wollte nicht wie überall einfach einen horizontalen Slider einbauen aber auch andere Darstellungsweisen haben mich nicht so überzeugt. Also einfach mal die Achse auf vertikal wechseln und mit ein paar CSS Effekten wirkt dieses alte Schema nicht so eingerostet und unkreativ.

# 3 | Die Referenzansicht, war wohl der längste Prozess des ganzen Projekts. Zuerst habe ich hier mit dem Jquery Masonry(http://masonry.desandro.com/) gearbeitet, nur um später zu merken das ich die Resultate doch Filtern wollte und auf Isotope(http://isotope.metafizzy.co/) umgestiegen bin. Nur um schlussendlich den Filter, fürs erste wegen zu wenigen Referenzen zu deaktivieren.

# 4 | Responsive heisst nicht unbedingt immer gleich mobile tauglich. Weswegen ich am Ende viele Komponenten noch für die mobile Verwendung der Webseite angepasst habe.

Schwierigkeiten

1 | Ordnung halten

Da ich viel experimentiert habe, gab es eine entsprechende Aufräumaktion am Ende. Viele .js files die ich nun nicht mehr benötige oder sonstige Code überbleibsel. Da hilft am Ende nur das saubere kommentieren des Codes damit sich auch ja kein Div zu viel oder zu wenig eingeschlichen hat.

2 | Autoplay Videos

Bei den Referenzen in der Sektion Videography kann man jeweils mit der Maus drüber fahren und das Video beginnt. Leider verschwindet in seltenen Fällen eine Referenz komplett. Trotz vielen versuchen, könnte ich dieses Problem noch nicht richtig beheben.

3 | Mobile Anpassungen

Wie bereits erwähnt Responsive, heisst nicht unbedingt gleich Mobile Friendly. Dementsprechend habe ich viel Zeit gebraucht damit die Seite auch für mobile Nutzer angenehm zu bedienen ist.

Zu Verbessern

Eigentlich habe ich mal geplant, das im Bereich „Videography“ auf der Startseite das Video wie in der Referenzansicht beim hover sich ein Video abspielt. Da es aber als Hintergrundbild eingefügt ist, habe ich aktuell noch keinen „Workaround“ dafür gefunden. Des weiteren ist das aktuelle Selbstportrait in der About Section nur ein Lückenfüller, dieses werde ich in den Sommerferien ersetzen. Generell glaube ich, dass sich das Portfolio nichts desto trotz laufend anpassen werde.

Fazit

Es stimmt, die eigene Webseite ist die grösste Herausforderung.  Man steckt seine Erwartungen sehr hoch, da dieses Portfolio schliesslich über neue Jobmöglichkeiten entscheidet. Es war ein sehr langer Prozess der mich von Semesteranfang bis –ende verfolgt hat. Ständig wurden Dinge geändert und neue Funktionen integriert. Die Webseite wird sich aber wohl auch in Zukunft laufend verändern aber für den Moment bin ich sehr zufrieden mit dem Endresultat.  Ich werde nun die wohlverdiente Sommerpause in den Aufbau meiner Referenzen investieren, die dürfen schliesslich auch nicht zu kurz kommen.

Kommentare (2)

Schreibe einen Kommentar