Portfolio-Design in Figma
Um sich als Freelancerin erfolgreich zu positionieren, ist ein starkes Online-Portfolio unerlässlich. Im Rahmen dieses Semesters habe ich mich um den Entwurf und die Benutzeroberfläche (UI) meiner zukünftigen Website in Figma konzentriert, da parallel ein weiteres grosses Digezz-Projekt anstand. Das fertige Mockup dient nun als exakte Blaupause für die bevorstehende technische Umsetzung im Code.
Alles begann mit einer intensiven Recherchephase. Auf Pinterest und diversen Design-Websites habe ich Inspiration gesucht und analysiert, wie andere Kreative ihre Arbeiten präsentieren. Nach einigem Ausprobieren mit verschiedenen Farbpaletten habe ich mich schliesslich auf drei effektive Kernfarben festgelegt. Passend zu diesem neuen visuellen Auftritt wurde auch mein Lebenslauf als PDF aktualisiert, damit das gesamte Branding aus einem Guss ist und als inhaltliche Grundlage für die Website genutzt werden kann.
Der ursprüngliche Plan war ein klassischer Onepager mit Header, «Über mich»-Bereich, Projektliste und Footer. Während des Gestaltens merkte ich jedoch, dass separate Unterseiten für die Bereiche «Über mich», «Projekte» und «Kontakt» dem Design mehr Struktur und Übersicht verleihen. Bei den gezeigten Arbeiten griff ich auf meine bisherigen Schulprojekte zurück. Da ich privat noch keine grossen Projekte umgesetzt habe, und vor allem keine, bei denen ich die Rechte besitze, die beteiligten Personen zu zeigen, bieten die akademischen Arbeiten die perfekte Grundlage.
Um das Design zum Leben zu erwecken, habe ich das Figma-File schliesslich interaktiv gestaltet, sodass Buttons klickbar und die Projekte auf der Landingpage scrollbar sind. Sobald dieser Prototyp stand, habe ich einige Mitstudierende gebeten, das Mockup zu testen und mir Feedback zum Design und der Benutzerführung zu geben. Diese Rückmeldungen habe ich anschliessend direkt in die finale Optimierung des Mockups einfliessen lassen.
(mbi)
Rückblickend war die reine Fokussierung auf die UI/UX-Phase in Figma strategisch richtig. Angesichts der hohen Semesterbelastung durch das andere Digezz-Projekt konnte so die visuelle Qualität gesichert werden, ohne mich frühzeitig im Code zu verlieren. Die investierte Zeit in die Farbwahl und das Branding, bis hin zum PDF-Lebenslauf, hat sich voll ausgezahlt. Auch das anschliessende Testing mit Mitstudierenden war wertvoll, da Schwächen in der Benutzerführung direkt aufgedeckt und noch vor der technischen Umsetzung optimiert werden konnten.
Dennoch stiess ich im Designprozess auf technische Limitationen, die durch das Werkzeug Figma bedingt sind. So liess sich im Prototyp keine echte Download-Funktion für das CV-PDF simulieren; die Buttons sind zwar visuell platziert, die tatsächliche Funktion muss jedoch später beim Coden gelöst werden. Ähnlich verhält es sich mit dem Kontaktformular: Eine funktionierende, interaktive Texteingabe wurde im Mockup vernachlässigt, da der Fokus primär auf dem optischen Layout und der generellen Informationsarchitektur lag.
Eine grosse inhaltliche Hürde war das Befüllen der Projektseite. Es ist schwierig, ein überzeugendes Portfolio aufzubauen, wenn man am Anfang steht und noch nicht auf viele Arbeiten zurückgreifen kann. Zudem dürfen einige meiner bisherigen Projekte aus Datenschutzgründen oder wegen fehlender Bildrechte der beteiligten Personen nicht öffentlich gezeigt werden. Der Fokus auf ein paar ausgewählte, starke Schulprojekte war hier die beste Lösung. Das Portfolio bleibt somit ein dynamisches Konstrukt, das nach dem anstehenden Coding fortlaufend mit neuen Arbeiten wachsen muss.