Mein Website-UI/UX-Designsystem

Verfasst von

in

,

Diese Website ist genauso entstanden, wie ich jedes Projekt angehe, das ich beruflich übernehme. Da sie meine Karriere präsentiert, fühlte es sich richtig an, dass der Prozess dahinter widerspiegelt, wie ich tatsächlich arbeite.

Ich beginne mit der Planung, dann definiere ich die Grundlagen: Farbe, Typografie und visueller Stil. Sobald diese stehen, wende ich sie modular an und baue jeden Teil des Projekts auf einer konsistenten Grundlage auf. So lässt sich jede Entscheidung schneller umsetzen, einfacher kohärent halten und im Lauf der Zeit verbessern.

Dieser Beitrag dokumentiert diesen Prozess, eine Ebene nach der anderen.

Die Farbpalette

Die Palette basiert auf vier Kernfarben, jede mit einer klaren Rolle in der visuellen Hierarchie, mit Weiß als Akzentfarbe.

#1C0F13
Coffee Bean
Primärhintergrund
#6E7E85
Slate Grey
Rahmen, Trennlinien, Sekundärtext
#B7CECE
Ash Grey
Kartenhintergründe, helle Flächen
#BBBAC6
Pale Slate
Dezente Hintergründe, Tags
#FFFFFF
White
Akzent: CTAs, Überschriften, Highlights

Weiß ist der Akzent. Es erscheint auf Calls to Action, zentralen Überschriften und interaktiven Elementen und gibt dem Auge einen klaren Anlaufpunkt, ohne die Palette zu verkomplizieren.