Portfolio: Das Schaufenster meiner Arbeit

von

Wie viele andere MMP-Studierende habe auch ich es nun gewagt, eine eigene Portfolio-Website zu erstellen. 

Bei der Erstellung meiner Website war eines von Anfang an klar: Das Portfolio soll einerseits meine Arbeiten darstellen, andererseits meine Persönlichkeit sowie Arbeitsweise widerspiegeln. Ich musste mich deshalb mit einigen essentiellen Fragen auseinandersetzen, wie zum Beispiel:

  • Was ist der Zweck meiner Website? Dient sie als reine Projektablage, als Teil meines Bewerbungsdossiers oder doch schon als Freelancer-Plattform?
  • Habe ich eine spezifische Zielgruppe, die ich ansprechen möchte?
  • Wie soll mein Personal Branding aussehen (neues Logo, Corporate Design)? 
  • Wie kann ich meine Arbeitsweise und Persönlichkeit in einem Design darstellen?

Nicht nur war mir das Design wichtig, sondern auch die multimedialen Inhalte, welche die Website befüllen. Aus diesen Gründen habe ich viel Zeit in die Konzeption gesteckt. Jedoch musste ich in der Umsetzung wegen technischen Hindernissen einige Kompromisse in der künstlerischen Ausgestaltung eingehen. Mehr darüber erfährst du in der Kritik.

Werfe einen Blick auf meine Online-Visitenkarte:  www.nadine-hauser.ch.

(dbo)

Zweck der Website
Zu Beginn des Projektes wollte ich eine Website als Projektablage und für zukünftige Bewerbungen erstellen. Da ich jedoch in den letzten Monaten einige selbständige Projekte für Firmen durchführen durfte, änderten sich meine Bedürfnisse. Also entschied ich mich für eine Website, die sich an potenzielle Kunden richtet.

Nachdem ich meine Zielgruppe geändert habe, hatte ich plötzlich Schwierigkeiten beim Texte schreiben. Denn ich wollte meinen ersten Kunden die «Schoggiseite» präsentieren aber immer noch bescheiden bleiben und deutlich vermitteln, dass ich mich noch in der Ausbildung befinde.

Personal Branding
Bevor ich die Website erstellte, habe ich ein persönlicher Styleguide erstellt. Ich konnte mich schnell auf die Farben und Schriftart einigen. Da mein personal Branding meiner strukturierten Arbeitsweise entsprechen soll, entschied ich mich für geometrische Linien als Schmuckstück der Website. Auch mein neues Logo basiert auf geraden und sauberen Linien. Über den Sprachstil habe ich mir ebenfalls einige Gedanken gemacht und bin zum Entschluss gekommen, dass die Texte persönlich und unkompliziert wirken sollen (z. B. anhand der Du-Ansprache).

Webflow
Anfangs wollte ich die Website ohne vorgefertigte Vorlagen programmieren. Doch ich habe auf Youtube oft Werbung von Webflow erhalten, welche meine Neugier weckte. Darauf habe ich verschiedene Website Anbieter verglichen wie z. B. WordPress, Wix, Squarespace und Webflow. Obwohl Webflow ein bisschen teurer war, sprach mich die visuell angelegte Benutzeroberfläche sehr an. Also fing ich an mit Webflow zu arbeiten. Das Produkt überzeugte mich ziemlich: die Server-Verbindung ist einfach einzurichten und stabil, die Webflow-Tutorials wurden professionell und mit Humor produziert, das visuelle Interface ist intuitiv und man hat die Möglichkeit den HTML, CSS und JS Code zu exportieren. Jedoch bringt es auch seine Nachteile mit sich: Das Hosting und die Abonnemente sind teurer als andere Plattformen, einige Features haben noch Programmierfehler und es hat wenige kostenlose Website-Vorlagen.

Aus der Masse herausstechen
Da das Internet von Portfolio Seiten überflutet wird, ist es ziemlich schwierig mit seiner Website aufzufallen. Ich habe deshalb sehr viele Designs von professionellen Webdesignern analysiert und mich von ihren speziellen Features inspirieren lassen. Bei der Konzeption ist mir aufgefallen, dass ich plötzlich zu viele spezielle Features eingeplant habe, welche die Benutzerfreundlichkeit drastisch erschwerten. Somit wählte ich ein minimalistisches Design und beschränkte mich auf nur 2-3 «spezielle Features». Zum Beispiel erstellte ich eine einzigartige horizontale Portfolio Darstellung, welche durch ein vertikales Scrolling ausgelöst wird. Zudem wollte ich viel Bewegung in die Seite bringen mit Textanimationen und selbst illustrierten/animierten GIFs. Zum Schluss nahm ich mir vor, eine einzigartige SVG Strich-Animation in die «Über mich» Seite zu programmieren, um aus der Masse herauszustechen. Leider hatte ich hierbei technische Probleme, da die Animation nicht auf allen Endgeräten gleich funktionierte. Aus diesem Grund entschied ich mich für eine einfache «Über mich» Seite, die technisch einwandfrei funktioniert.

Was will ich in Zukunft optimieren?
Obwohl ich mit dem Endresultat einigermassen zufrieden bin, ist die Website noch lange nicht fertig. Folgende Elemente/Probleme möchte ich künftig optimieren:

  • Im «Explorer» Browser funktioniert nicht jede CSS-Funktion wie es eigentlich sollte. Dieses Problem muss ich noch beheben.
  • Das SEO Ranking ist noch unbefriedigend, obwohl ich zu jeder Webseite eine Meta-Beschreibung erstellt habe, Alt-Texte für die Bilder verfasst habe und auf Keywords achtete. Zudem habe ich die Google Search Console genutzt, um ein Crawling anzufordern. Da dies nicht reicht, muss ich in Zukunft noch mehr auf Text setzen (z. B. mit einem Blog oder mit ausführlichen Projektbeschreibungen?).
  • Da mein Konto-Name in den sozialen Medien @nadinehauserproductions lautet, fragten sich einige Website-Besucher weshalb die Seite nadine-hauser heisst. Jedoch schien mir nadinehauserproductions.ch zu lange. Ich werde in Zukunft den Domain Namen überdenken müssen.
  • Mir war es wichtig, dass die Startseite ein Video beinhaltet, da ich mich vor allem in der Video Produktion spezialisieren möchte. Jedoch habe ich noch kein Showreel zur Verfügung und musste mich für eine Zwischenlösung entscheiden. Sobald das Showreel existiert, werde ich es anpassen.
  • Da ich noch nicht weiss welche spezifischen Dienstleistungen ich anbieten möchte, sind die jetzigen Angebote sehr vage beschrieben. Sobald ich jedoch weiss welche Produktionen mich am meisten interessieren, werde ich diese Dienstleistungen detaillierter beschreiben.
  • Portfolio Seite umgestalten: Die Portfolio Seite ist momentan mühsam zum Verwalten, da ich bei jedem neuen Beitrag das Design manuell in 6 verschiedene Breakpoints anpassen muss.
  • Preloader eventuell entfernen: Sobald der User einen schlechten Internetempfang hat, lädt der Preloader mehrmals bevor die tatsächliche Startseite auftaucht. Dies verwirrte einige meiner Testpersonen.
  • Leider ist mir erst am Schluss aufgefallen, dass meine Website-Bilder nicht aufeinander abgestimmt sind. Einige haben eher Orangetöne, andere einen Blaustich. In Zukunft wird jedes einzelne Bild im gleichen Stil produzieren und mit dem gleichen Preset bearbeitet.
  • Je nachdem wie viele Beiträge auf der Portfolio Seite veröffentlicht werden, werde ich vielleicht einen Kategorie-Filter einbauen.