Mein Portfolio

Idee

Seit dem ersten Semester wünschte ich mir ein eigenes Portfolio. Über das Studium hin sammeln sich einige Schulprojekte an, von welchen man die vorzeigbaren gerne gesammelt an einem Ort präsentieren möchte. Mit ersten Aufträgen und Referenzen stieg dieser Wunsch immer mehr, bis ich mich schliesslich an eine eigene Webseite gesetzt habe.

CMS & Hosting

Als Anbieter entschied ich mich wieder für Wix, da ich dort bereits meinen Reiseblog führe und sehr zufrieden mit den Features und dem simplen Baukasten-System bin. Erneut sollte mein Fokus auf der Gestaltung liegen, da ich beruflich eher in Richtung Film & Grafikdesign gehe, weswegen das Programmieren von Webseiten zweitrangig ist.

Mein Hosting liegt bei Cyon, da ich dort bereits ein Abo habe. Somit erhielt ich die Domain, wie auch eine persönliche Mailadresse für geschäftliche Anfragen & mein Portfolio.

Planung

Früh begann ich mit dem Sammeln von Desigideen und liess mich von anderen ansehnlichen Portfolios inspirieren. Jedoch schwamm ich so schnell in einem Meer aus Ideen und es entwickelte sich ein ziemliches Chaos aus zu vielen verschiedenen Kombinationen, die die Übersichtlichkeit der Webseite gefährdeten.

Ich skizzierte also den Grundaufbau der Webseite und überlegte mir, welchen Aufbau die Seite überhaupt haben sollte.

So entschied ich mich für einen One-Pager mit individuellen Seiten zu den jeweiligen Projekten.

Die Seite sollte mit einem Showreel-Video starten. Wenn man runterscrollt erscheinen Kacheln meiner bisherigen Projekte, von denen sich einige Bewegen sollen. Anschliessend folgt das Angebot, sowie der Über mich Teil und schliesslich der Footer.

Nachdem der Aufbau klarer war, konnte ich mir auch besser Gedanken machen, wie und wo ich die Gestaltungsideen, die ich im Kopf hatte, einfügen kann.

Namensfindung

Doch vor der eigentlichen Erstellung der Webseite, kam es zu einem sehr wichtigen Punkt: Der Namensfindung. Ich brainstormte erstmal. Da ein Portfolio wie eine Visitenkarte seiner selbst ist, wollte ich meinen Namen einbringen. selina.ch existierte bereits, selinaschneider.ch gefiel mir nicht, selinas.ch, selinamultimedia.ch zu lang…

Bis mir schliesslich der simple name “byselina” einfiel. “by”, made by me… quasi meine Handschrift. Der Name überzeugte mich sofort, die Domain war noch frei und als Mail-Adresse für Kontaktaufnahmen wählte ich hallo@byselina.ch

Design & Grafiken

Nachdem die ganze Grobplanung und Namensfindung vollbracht war, ging es an die Überlegung des eigentlichen Designs. Ich lege viel Wert auf Wiedererkennungswert und einer einheitlichen Gestaltung.

Da ich dunkle Portfolio-Seiten sehr ästhetisch finde, entschied ich mich für viel Schwarzraum und schwarz/weiss Fotos. Als Akzentfarbe wählte ich meine persönliche Lieblingsfarbe: Lila.

Passend zum Namen bySelina und meinem persönlichen Stil, entschied ich mich für eine Schnörkelschrift im Logo, sowie einer schnörkligen Unterschrift meines Namens. Als Kontrast dazu wählte ich eine eher gerade Standardschrift und Überschriften in Grossbuchstaben.

Logo

Am Logodesign sass ich mehrere Tage. Immer wieder schlief ich eine Nacht darüber um dann doch wieder neue Ideen zu haben oder einen neuen Favoriten. Die Wahl war wirklich nicht einfach, zumal ich auch von Anfang an so zufrieden sein wollte, dass nicht bald schon wieder ein Rebranding gewünscht ist.

Ins Logo wollte ich meinen Namen einbauen, was wegen meiner Initialen jedoch schnell unschöne Assoziationen hervorruft. Eine Schwierigkeit bestand also darin SS neutral mit einzubringen. Ich erstellte ungefähr 20 Designentwürfe und kam schliesslich auf die Idee, das S vom Nachnamen umzudrehen. Dadurch entsteht eine Art Herz, was mir sehr passend zum Portfolio schien. bySelina, von mir gemacht, mit meiner Handschrift, meine Leidenschaft und mit viel Herzblut. Ebenfalls überlegte ich mir, das Wort Multimedia mit einzubauen, damit mein Angebot schon durch das Logo klar wird. Da das Logo aber schon sehr verspielt ist, entschied ich mich gegen dieses weitere Element.

Icons

Für die gesamte Webseite kreierte ich eigene Icons, die ich mit Sketchbook skizzierte und designte und anschliessend in Illustrator sauber aufbereitete.

Webseitenaufbau

Im Header der Seite befindet sich mittig mein Logo. Die Navigation führt mittels eingebauter Anker zum jeweiligen Bereich des One-pagers. Das Logo verlinkt wieder auf die Startseite.

Sehr präsent ist das Showreel-Video, welches ich extra fürs Portfolio zusammengeschnitten habe. Es war sehr aufwändig, die einzelnen Aufnahmen aus den verschiedenen Projektordnern zusammenzutragen und überhaupt Aufnahmen auszuwählen und mich auf eine gewisse Auswahl zu beschränken. Zusätzlich habe ich mein Logo neu animiert, um dies jeweils in Intro oder Outro zukünftiger Videos einzubauen.

Bei der Auswahl meiner Projekte wählte ich eine chronologische Reihenfolge aus – das neuste Projekt zuoberst links. Damit die Seite mehr Dynamik erhält, erstellte ich für einige Videoreferenzen bewegende Vorschaubilder in Premiere Pro. Hierfür musste ich recherchieren, wie man so ein Sonderformat überhaupt im Programm einstellt. Zusätzlich baute ich bei den Referenzen einen Mouseover Effekt ein, der einem den Titel und einen kurzen Beschrieb zum Projekt erscheinen lässt.

Per Mausklick gelangt man dann noch auf die individuelle Projektseite, denen ich auch ein einheitliches Design verpasst habe und die das Endprodukt,nähere Informationen zum jeweiligen Projekt und teilweise behind-the-scene Einblicke geben.

Im Hintergrund des Angebot Teils habe ich ein Scrollover Bild eines Auges eingefügt. Dafür habe ich versucht, Closeup Aufnahmen meines eigenen Auges zu machen, was jedoch nicht so gelungen ist. Ich hätte wohl ein anderes Objektiv und eine bessere Kamera für Makroaufnahmen benötigt, was mir ein extra Mieten für nur einen Shot jedoch nicht wert war.

Beim Angebot hatte ich grosse Mühe, den Text zu definieren. Mein Portfolio soll eher einen Einblick in meine Projekte und Arbeiten zeigen und nicht unbedingt in Richtung Selbständigkeit gehen. Trotzdem habe ich mich bemüht, meinen Hauptfokus und meine Skills aufzulisten. Dafür habe ich mich an unseren Studiumsinhalten orientiert.

Abschliessend kommt ein Über mich Teil, der mich und meinen Fokus kurz vorstellt und mit einem Button auf die statische über-mich Seite weiterleitet, wo ein genauerer Beschrieb über mich geschrieben ist. Bei der Gestaltung habe ich wieder lila Elemente mit Überlappungen auf die Fotos eingebaut. Extra für mein Portfolio habe ich mir die Blackbox in der HKB gemietet und an einem Vormittag mit einer Freundin zusammen die Fotos geknipst. Ich hatte bereits genaue Vorstellungen davon, was für Bilder ich haben möchte. Die Umsetzung war etwas schwierig, da wir für meine Vorstellungen sehr mit Licht arbeiten mussten, was uns nicht auf Anhieb gelang. Dafür haben wir unsere Fotografierskills gleich mitaufgebessert. Zudem fühle ich mich vor der Kamera nicht besonders wohl, weswegen wir uns genügend Zeit genommen und sehr oft abgeknipst haben. Der entsprechende Grossaufwand kam dann in der Nachbearbeitung, bei der ich erstmals die Menge an Fotos aussortieren musste und die Bilder mit Photoshop & Lightroom nachbearbeitet habe und die gewünschten schwarz/weiss und Abdunklungseffekte noch verstärkt oder nachträglich eingefügt habe. Mit den Ergebnissen bin ich sehr zufrieden.

Auf der ganzen Seite habe ich einen nach-oben Button eingerichtet, sowie eine Fusszeile, nochmals abschliessend mit einem Foto sowie Zitat, meiner Unterschrift, sowie den Social-Media Icons und einem Copyright Vermerk.

Lebenslauf

Zusätzlich zum Portfolio habe ich auch endlich mal einen neuen Lebenslauf erstellt. An diesem sass ich ebenfalls lange. Das Problem war, dass ich alles auf eine A4 Seite packen wollte und aufgrund meiner Ausbildung und meines beruflichen Werdegangs kaum genügend Platz war. Dies habe ich gelöst, indem ich die Schulzeit durch selbst erstellte Icons und einen Balken auf eine Zeile packte. Für den Lebenslauf haben wir auch in der Blackbox neue Bewerbungsfotos gemacht und dabei mit weissem und schwarzem Hintergrund sowie etwas unklassischeren Fotos, lässig auf einem Stuhl experimentiert. Letztere sind aber bei mir nicht so gelungen und liegen deshalb unbenutzt in einem Ordner auf meinem Laptop.

Linkedin

Um auch auf Linkedin präsent zu sein, habe ich einen Header-Balken mit meinen Webseitenfarben, sowie dem Logo in Photoshop erstellt.

Youtube Kanal

Auf meinem Privaten Youtube Kanal habe ich zwar auch alle Projekte hochgeladen, jedoch befinden sich dort auch meine Reisevideos, die nichts auf meinem Portfolio verloren haben, sondern eher zu meinem Reiseblog gehören. Deswegen habe ich mich entschieden, einen neuen Youtube Kanal extra fürs Portfolio zu erstellen. Auch hierfür habe ich ein Profilbild geshooted. Schwierigkeiten hatte ich beim Erstellen des Headers, da Youtube zwar ein Format vorgibt, dieses jedoch nochmals für Web & Mobile zugeschnitten wird. Daran sass ich etwas lange, bis optisch alles aufging und ich zufrieden war. Etwas unzufrieden bin ich noch mit dem eingefügten Foto von mir, da ich die Ränder zwar etwas mit dem Hintergrund verschmiert habe, dies sich jedoch noch nicht perfekt einfügt. Dies kann zukünftig sicher optimiert oder erneuert werden.

Schliesslich lud ich die Auswahl an Videos hoch und gestaltete einheitliche Thumbnails. Ausserdem ordnete ich die verschiedenen Videoformate nach Playlists und textete Videobeschriebe. In Youtube lässt sich zudem das Logo als Wasserzeichen einfügen.

Für Youtube und meine Webseite textete ich noch Beschriebe für die Besucher, damit die gleich wissen, worum es überhaupt geht und wer ich bin.

Mobile Version

Eine grosse Baustelle war die Mobile Version des Blogs. Wix bietet hier einen sehr praktischen Wechsel von der Desktop auf die Mobile Ansicht an. Bereits bei der ersten Seite wurde jedoch schnell klar, dass die Elemente zwar für die kleinere Webseitenansicht übernommen werden, jedoch alles völlig deformiert ist. So musste ich jede einzelne Seite auch für die Mobile Version anpassen und gewisse Elemente verkleinern oder sogar komplett weglassen. Auch beim Burgermenu war eine Optimierung notwendig.

SEO

Um auch auf Google auffindbar zu sein, habe ich mich zum ersten Mal mit SEO befasst. Dafür bin ich einer Anleitung die ich im Internet gefunden habe gefolgt und habe die Punkte nacheinander durchgearbeitet.

Weiteres im Corporate Design

Was auf dem Portfolio nicht sichtbar ist, mir jedoch auch sehr wichtig war, sind die weiteren Dinge im Corporate Design, die ich im Rahmen dieses Projektes erstellt habe. Diese beinhalten:

• Rechnungsvorlage (ebenfalls in Indesign gestaltet)
• Visitenkarte (mit Photoshop und Indesign erstellt)
• Offertenvorlage (im Indesign gestaltet)
• Mailsignatur (direkt in Cyon erstellt, Grafiken mit Photoshop)

Fazit

Bei diesem Projekt konnte ich wieder einmal einige Programme und Gelerntes aus dem Studium hervorkramen und auffrischen. Designtechnisch habe ich viele neue Inspirationsseiten, Programme und Möglichkeiten entdeckt, auf die ich zukünftig zurückgreifen kann. Zusätzlich habe ich mich mit dem Thema SEO befasst, was wir im Studium nicht wirklich angeschnitten haben.

Aber am wichtigsten: Endlich habe ich ein vorzeigbares Portfolio, mal wieder anständige Bewerbungsfotos und bin bereit für die Berufswelt.