Portfolio Webseite Julián Jordi García

Ich habe eine Portfolio Webseite erstellt, um von meinem bisherigen klassischen Portfolio in Form einer PDF-Datei zu einem moderneren und professionelleren Portfolio zu wechseln. Wie ich vorgegangen bin und was das Endergebnis ist, findet ihr hier raus.

1. Konzept & Design

Inspiration

In einem ersten Schritt habe ich überlegt, was mir an meinem aktuellen Portfolio gefällt. Was sind Dinge, die mich oder meine Persönlichkeit visuell darstellen können? Mich haben grosse Buchstaben, fett geschriebene Wörter und ein simples, cleanes Design angesprochen. Um für mich dann herauszufinden wie ich das umsetzen möchte, habe ich begonnen zu recherchieren. Dabei bin ich vor allem auf untenstehende Beispiele gestossen. Mir gefällt sehr der «in your face» Schriftzug beim linken Beispiel, man weiss direkt womit man es zu tun hat. Am rechten Beispiel fiel mir die strukturierte Navigation besonders auf, wie der Header organisiert ist. Also, habe ich eine Mischung von beidem gemacht.

Konzept

Für das Konzept musste ich mich entscheiden wieviele verschiedene Designelemente ich effektiv verwenden möchte. Wie viele sind zu viel? Wann ist es nicht mehr einheitlich und kein grüner Faden zu erkennen? Wichtig war es für mich auch zu definieren welchen Inhalt ich auf der Webseite platzieren möchte. Ich möchte zeigen was ich mache, welche Projekte ich in der Vergangenheit umgesetzt habe und wer ich bin. Gleichzeitig möchte man ja auch nicht zu viel verraten. Für das Konzept habe ich mich wie beim Design auf Einfachheit konzentriert. Nicht zu viel, nicht zu wenig: Genau die Informationen, die man braucht.

Design

Als ich meine Ideen beisammen hatte und eine grobe Vorstellung wie ich vorgehen möchte, begann ich in Figma mit dem Design. In meinem aktuellen Portfolio habe ich auch einen Blauton drin, der mir bereits sehr gefällt, weshalb ich den beibehalten wollte. Mir wurde im Prozess klar, dass es nicht eine einfarbige Webseite sein soll, sondern einen Farbverlauf geben soll. Dafür habe ich ein wenig rumgespielt und verschiedene Verläufe ausprobiert. Ebenso habe ich geschaut, welche Hintergrundfarbe ich brauche, damit «JORDI» und die japanische Version davon, gut und gross sichtbar sind. Es war mir sehr wichtig meine Interessen, meinen Charakter und meine Wurzeln aus Österreich und Spanien einfliessen zu lassen. Deshalb auch die Titel im österreichischen Dialekt mit spanischer Version darunter. Ob ich zukünftig auch daran festhalte, falls ich die Seite noch auf Englisch anbieten möchte, lasse ich noch offen.

Orientiert habe ich mich generell an einer einfachen Struktur, die nicht mit viel Animationen und grossem Schnickschnack arbeitet. Als Ideenanregung habe ich mir auch eine Struktur von KI zusammenstellen lassen. Lustigerweise, hat es mir genau aufgezeigt, was ich nicht möchte. Was aber auch eine wichtige Erkenntnis war. Schritt für Schritt habe ich dann versucht meine Homepage, About und Projects Seite aufzubauen. Bis ich zu dem Punkt gekommen bin, an dem ich nicht mehr genau weiter wusste. Dort habe ich dann entschieden mit dem Code zu beginnen.

2. Umsetzung

Bei der Umsetzung habe ich hauptsächlich mit der Unterstützung von der KI Claude gearbeitet. Begonnen habe ich mit einem Screenshot meines Figma Designs und das dann direkt eingespiesen. Es war ein überraschend gute Erstversion, dafür das ich mit Claude noch gar nicht gearbeitet hatte. Von diesem Punkt an habe ich die Schriften durchgegeben, die Farben inkl. dem Farbverlauf und jegliche Instrumente, damit meine Seite «on brand» war. Im Zuge dessen ist mir nach und nach klarer geworden, wie ich den Rest meiner Seite gestalten möchte.

Als ich eine erste Version hatte, die mir gefällt und ich das Gefühl habe, die auch funktioniert, habe ich sie in meinem Umfeld für Feedback gezeigt. Zu diesem Zeitpunkt war der Inhalt, also Bilder und Text, noch nicht eingefügt. Ausserdem war die Seite noch nicht auf Mobile angepasst. Diese Feedbackschlaufe hat mir sehr geholfen. Ich wurde auf Dinge aufmerksam gemacht, die ich nicht wahrgenommen hatte, weil sie für ein objektives Auge offensichtlich waren. Mit dem Feedback habe ich meine Seite dann weiter bearbeitet und verbessert. Der grösste Schritt war die Anpassung auf Mobile. Soll es ein klassisches Burger Menü sein oder doch etwas Anderes? Ich habe mich dann für das Burger Menü entschieden und es versucht einfach zu halten.

Sobald die Seite dann auch für Mobile aufgesetzt wurde, konnte ich den Inhalt mit meinen Informationen befüllen. Dies ging dann relativ schnell. Danach ging es dann in eine zweite Feedbackrunde, um den Feinschliff zu gestalten. Dabei ist mir aufgefallen, dass je nach verwendeten Computer, bestimmte Animationen anders dargestellt wurden. Ich bin mir nicht zu 100% sicher was der Grund dafür ist, aber ich gehe davon aus, dass es sich um verschiedene Betriebssysteme handelt. Der letzte Test war dann das Überprüfen aller Links, öffnen verschiedener Projekte und das auf Desktop wie Mobile.

Meine Portfolio Webseite findet ihr hier: https://studiogarcia.ch

(mmi)