Die bisherige Webseite für das persönliche Portfolio soll überarbeitet werden. Dabei geht es um ein komplettes Redesign von Schrift, Farbpalette und Inhalt. Die folgende Case Study soll diesen Prozess verschriftlichen und als ersten praktischen Kontakt mit dem UI/UX-Design darstellen.
Die erste Interpretation einer Portfolio-Webseite (siehe Screenshots unter diesem Abschnitt) wurde vorrangig auf Basis grober Ideen und Templates eines WordPress-Themes erstellt. Durch fehlendes Wissen in der Arbeit mit WP war dies ein optimaler Einstiegspunkt, jedoch ungeeignet für die Einbringung eigener Designideen in der Webgestaltung.
Durch das besagte Theme war die Webseite außerdem recht generisch aufgebaut und entsprach nicht meiner Vorstellung einer Webseite, die meine Skills und Projekte präsentieren soll. Schließlich hat das Aufkommen von Interesse an UI/UX-Design dafür gesorgt, dass ich mit der Webseite einen Neustart in den Bereichen Grafikdesign, Fotografie und schließlich UI/UX starten wollte.
Die neue Webseite soll mit wenig Aufwand auf meine Kenntnisse hinweisen, jedoch gleichzeitig visuell ansprechend sein. Der Fokus soll nach wie vor auf einer Mischung von visualisierter Kreativität und dem Aufzeigen der eigenen Expertise liegen. Wichtig dabei ist die Identifizierung relevanter Inhalte und ablenkender Elemente, um diese entsprechend neu zu verteilen.
Es wurde sich zusätzlich für eine Darkmode-Webseite entschieden, weil ich diese meist angenehmer zu lesen finde und sie meiner Meinung nach in vielen Fällen etwas hochwertiger wirken. Da dies jedoch persönliche Präferenz ist, möchte ich in Zukunft eine optionale Lightmode-Version mit einem Toggle für diese einführen. Da dies jedoch den Zeitrahmen des aktuellen Projekts sprengen würde, bleibt dieses Vorhaben vorerst offen.
Bei diesem Projekt übernehme ich sämtliche Etappen, da es sich bei dieser Studie um ein Soloprojekt und den Einstieg in UI/UX handelt.
Im Moodboard habe ich zunächst online verschiedene Portfolio-Designs gesucht, die zu meiner Idee bzw. meiner Vorstellung passen. Es handelt sich dabei um eine Mischung aus sehr simplen UI/UX-Portfolios, die lediglich ihre Projekte schnell und ohne Schnickschnack darstellen, sowie optisch ansprechende Grafikdesign-Portfolios. Meine Vision stellteine Mischung aus beiden Ideen dar: Optisch ansprechend, aber schneller Zugang zu den wichtigen Informationen.
Im ersten Wireframe wurde der Header erstmal nicht verändert. Das Hero Image sollte von der Größenordnung her dem bisherigen ähneln, jedoch mehr Text und weniger Illustration mit sich bringen, um den ersten Blick des Betrachters auf den Text zu lenken.
Die Sektion darunter sollte mit einem durchlaufenden Text abgetrennt werden, welcher meine praktischen Fokusbereiche mit kurzen Keywords zeigen sollte, einfach als spannenden Effekt.
Darauf folgte die eigentliche Skills-Sektion, in welcher 3 Flächen (Grafikdesign, UI/UX, Fotografie) schnell und übersichtlich mein Können zeigen und zu den jeweiligen Galerien verlinken sollten.
Die vorerst letzte Sektion sollte schließlich in Form von einfachen Kacheln meine aktuellen Projekte zeigen und ebenfalls zu diesen verlinken. Der Footer ist gleich geblieben.
Das zweite Wireframe sollte eine Low-Fidelity Version des ersten darstellen und auf Basis von Feedback (Personen im persönlichen Umfeld) einzelne Aspekte überarbeiten.
Der Header wurde aufgeteilt, um den Fokus mittig auf das Menü zu verlagern. Logo und ein Kontakt-Button befinden sich nun links und rechts vom Menü, um optisch eine bessere Struktur zu erschaffen.
Beim Hero-Text wurde lediglich ein Button eingefügt, der direkt zu den Projekten führen sollte. Die durchlaufende Textzeile mit den Keywords wurde entfernt, weil diese im Grunde keinen neuen Inhalt bietet, wenn man sich die Skills-Sektion anschaut. Statt die Seite also visuell zu überladen wurde dieser Effekt entfernt.
Die aktuellen Projekte haben einen Filter für den jeweiligen Themenbereich erhalten und zusätzlich zum Projektnamen unter dem Bild einige Tags, um die Projekte auf Basis ihres Inhalts klarer zu differenzieren. Ein weiterer Button darunter sollte zu weiteren Projekten führen.
Zwei letzte Wireframes sollten die mobilen Versionen (Tablet und Smartphone) der Webseite grob darstellen. Das Menü im Header wurde mit einem Hamburger-Menü ersetzt und er erstreckt sich nun über die gesamte Seite, um unnötige Effekte auf mobilen Geräten und kleineren Bildschirmen zu minimieren.
Alle sonstigen Inhalte wurden entsprechend der Bildschirmbreite entweder mit weniger Abstand zueinander platziert oder, wie in der Smartphone-Variante, untereinander gesetzt. Die aktuellen Projekte wurden auf den mobilen Versionen außerdem reduziert bzw. mit weniger Einträgen pro Zeile umgestaltet, um den Inhalt nicht unleserlich klein werden zu lassen. Abseits davon haben sich keine großen Änderungen für die mobilen Versionen ergeben.
Für das High-Fidelity-Design wurde sich gegen den bisherigen bläulichen Akzent entschieden, um ein frisches neues Theme aufzubauen. Für den Kontrast zu einem sehr dunklen Blau als Hintergrund wurde ein Mint-Grün und eine Variation davon als Akzent festgelegt. Die Schriftfarbe ist ein leichtes Off-Weiß, um einen nicht ganz so scharfen Kontrast zu erzeugen, der lesbar bleibt.
Der Font ist der serifenlose Proxima Nova, ein Schriftstil, der nicht zu sehr in kreative Schrift abdriftet, sondern lediglich gut lesbaren Text ermöglicht.
In der finalen Version, nach erneutem Feedback zum High-Fidelity-Design, wurde die Seite so entwickelt, wie sie jetzt live zu sehen ist. Das Bild im Hero hat eine Box als Umrandung bekommen, um es visuell an das Puzzle und die Projektkarten anzupassen und im Header wurde die Figma-Prototyp-Linie entfernt. Diese war ein zu erzwungenes Designelement. Stattdessen wurde ein weiterer Button für eine “Über Mich” Sektion etabliert und der Skills Button ausgefüllt, statt nur eine Umrandung zu geben. Dadurch hebt er sich mehr ab und regt an zu den Skills zu gehen.
Auch der Text im Hero wurde minimal angepasst und zu Teilen mit der Akzentfarbe versehen, um wichtige Wörter zu betonen. Zudem gibt es nun unter dem Skills-Button noch einige Mini-Buttons, die zur Mail, Instagram und LinkedIn führen. Somit ist ein schneller Kontakt ermöglicht.
Im Skills-Puzzle wurden die Icons mit einem Akzent-Hintergrund versehen, alles andere wurde so übernommen.
Bei den Projektkarten wurde der Filter und der “Weitere”-Button entfernt. Diese Entscheidung wird im nächsten Abschnitt zu aufgetretenen Problemen erneut aufgegriffen. Abseits davon wurden die Karten lediglich optisch mehr an das ganze Design angepasst und vereinfacht.
Im detaillierten Design wurde schließlich der Hero definiert und mit mehr Text als in der alten Webseite versehen, um direkt auf meine Rolle hinzuweisen. Das “Niklas” ist zudem in der Akzentfarbe und mit einer typischen Selection Box aus Figma oder Photoshop versehen, um Elemente aus den Programmen subtil einzubauen.
Das Bild soll einen ersten Einblick in meine Arbeit geben und bietet die Möglichkeit regelmäßig ausgetauscht zu werden, je nach aktuellem Projekt. Die Icons um das Bild herum sollen erneut subtil auf die 3 Hauptbereiche UI/UX, Grafikdesign und Fotografie hinweisen und etwas mehr Akzent in die Hero-Sektion bringen.
Vom Skills-Button unter dem Hero führt eine Linie, wie es bei Prototypen in Figma der Fall ist, als kreatives Element zur entsprechenden Sektion darunter. Die bisherigen 3 Boxen aus den Wireframes wurden zu einer Art kreativen Puzzle aus Bereichen, Programmen und einem Zitat umgebaut. Dieses stellt noch immer alle relevanten Informationen schnell und präzise dar und bietet gleichzeitig ein neues visuelles Element, abseits der generischen Boxen.
Die Projektkarten sind in diesem Design gleich geblieben und wurden lediglich designtechnisch angepasst.
Auch Header sowie Footer sind dem Wireframe gleich geblieben. Entfernt wurde jedoch die Schaltfläche für einen Dark- bzw. Lightmode, was möglicherweise als zukünftiges Projekt zurückkehren könnte.
Learnings. Im Prozess habe ich gelernt, dass manchmal einfachere Designs besser funktionieren als grafisch explosive Ideen. Gerade bei einem Portfolio sind schnell erreichbare Informationen wichtiger als ein wahnsinnig farbenfroher Hero. Es hat sich auch gezeigt, dass Feedback durch externe Personen äußerst wichtig ist, um andere Blickwinkel für ein Design zu erhalten. Gerade Personen außerhalb der Kreativbranche können wichtiges funktionales Feedback geben, weil sie eher die Funktion der Seite statt pures Design sehen.
In Zukunft wären jedoch größere Feedbackrunden und stärker ausgebaute Prototypen von Vorteil. Da es sich hier um eine erste Solo-Einsteiger Case Study handelt, war mir das währenddessen nicht bewusst. Es wäre außerdem sinnvoll, bereits die ersten grundlegenden Wireframes ausgiebiger zu testen, bevor man dann am späteren Design immer wieder Abänderungen vornimmt. Es geht aus dieser Case Study nicht unmittelbar hervor, aber das Design der High-Fidelity Version wurde sehr oft verändert auf Basis eigener Präferenzen oder neu gefundener Ideen. Ein starker, festgelegter Prozess mit mehr Feedback von außen hätte dieses Problem eventuell umgehen können und ist ein wichtiger Punkt für zukünftige Projekte.
Probleme. Wie bereits gesagt war der Prozess des Designs problematisch durch fehlende Expertise, die sich jetzt erst nach und nach bildet. Davon abgesehen wurde das Projekt durch Umsetzungsschwierigkeiten eingeschränkt. Da ich nicht nur das Design sondern auch die Webseite in WordPress aufgebaut habe, fehlte es hier an tiefgreifenden Programmierkenntnissen. Das beste Beispiel ist das Fehlen des Filters für aktuelle Projekte: Ich habe leider nicht das Wissen, ein solches System umzusetzen und die Projektkarten zu automatisieren. Aktuell müssen diese für jedes Projekt neu gestaltet und entsprechend händisch verschoben werden. In Zukunft könnte dieses Problem noch behoben werden. Ähnlich ist es bei dem “Weitere”-Button bei den Projekten: Wo soll dieser hinführen, wenn es dort 3 verschiedene Arten von Projekten gibt? Sollen einfach nur weitere geladen werden und wenn ja, dann wie?
Außerdem gilt es in Zukunft später über die mobilen Versionen der Seite nachzudenken. Das Puzzle ist eine coole Idee, funktioniert aber maximal noch auf Tablets. Auf einem Smartphone musste dieses aufgelöst und zu normalen Boxen untereinander umgebaut werden, was den Charme etwas verliert.
Insgesamt bin ich jedoch mit diesem Projekt als Pilotstudie sehr zufrieden und gehe mit diesen Erkenntnissen in zukünftige Projekte.
