„Cloudlike Atelier" ist mein persönliches Portfolio, das meine Arbeit in den Bereichen UI/UX Design, Grafikdesign und Illustration vereint. Der Name leitet sich von meinem eigenen Namen ab und bedeutet so viel wie wolkig oder wolkenhaft. Die CI greift diese Idee auf und orientiert sich an Meer und Himmel, zwei Welten, die Weite, Ruhe und Kreativität verkörpern. Das Portfolio ist in Figma gestaltet und aktuell für Desktop ausgelegt. Bei der Umsetzung wurde auf WCAG geachtet, interaktive Elemente sind vollständig per Tastatur navigierbar.
Branding
Das Logo von „Cloudlike Atelier" leitet sich von meinem eigenen Namen ab und bedeutet so viel wie wolkig oder wolkenhaft. Es ist als Wortmarke gestaltet und spiegelt die gestalterische Haltung des gesamten Portfolios wider: ruhig, klar und kreativ. Für den Schriftzug wurde die Schriftart Ysabeau gewählt. Ihre schwungvollen, eleganten Formen und die luftige Leichtigkeit der Buchstaben greifen das Wolkenhafte des Namens direkt auf und machen die Schrift zur natürlichen Wahl für dieses Portfolio. Ysabeau verleiht dem Logo eine weiche, fließende Qualität, die Kreativität und Offenheit ausstrahlt, ohne dabei an Professionalität einzubüßen.
Das dunkle Blaugrau (#2F4156) bildet die Hauptfarbe und verleiht dem Portfolio Tiefe und Seriosität. Das helle, sanfte Blau (#C8D9E6) dient als ergänzende Akzentfarbe und sorgt für Leichtigkeit und Weite, passend zum wolkenhaften Charakter des Portfolios. Als Schriftfarbe wurde ein warmes, gebrochenes Weiß (#F5EFEB) gewählt, das einen angenehmen Kontrast zur dunklen Hintergrundfarbe schafft und die Lesbarkeit unterstützt, ohne zu hart oder kalt zu wirken. Die drei Farben ergänzen sich zu einem harmonischen, stimmigen Gesamtbild.
Die Typografie ist bewusst reduziert und klar gehalten, um den Inhalten den nötigen Raum zu geben. Als Fließtextschrift kommt Roboto zum Einsatz, gut lesbar, neutral und vielseitig einsetzbar. Die Kombination aus Ysabeau im Logo und Roboto im Fließtext schafft eine ausgewogene typografische Hierarchie, die sich konsistent durch das gesamte Portfolio zieht.
Sitemap
Die Sitemap zeigt den strukturellen Aufbau von „Cloudlike Atelier" und gibt einen Überblick über alle Seiten und ihre Hierarchie. Von der Startseite aus gelangt man zu den drei Hauptkategorien Grafikdesign, UI/UX und Illustration, jeweils mit eigenen Projektunterseiten. Ergänzt wird das Portfolio durch eine About-Me-Seite, auf der ich mich und meinen gestalterischen Hintergrund vorstelle, sowie eine Kontaktseite. Die Struktur ist bewusst schlank gehalten, um eine klare und intuitive Navigation zu gewährleisten.
Wireframe
Die Wireframes zeigen den strukturellen Aufbau der einzelnen Seiten und bilden die Grundlage für das finale Design. Im Fokus stand eine klare Nutzerführung sowie eine konsistente Seitenstruktur über alle Bereiche hinweg. Die Landingpage wurde dabei gesondert betrachtet, da sie sich gestalterisch von den übrigen Seiten abhebt und als zentraler Einstiegspunkt in das Portfolio dient. Die Projektunterseiten basieren auf einem gemeinsamen Template, das im Wireframe bereits als wiederverwendbare Struktur angelegt wurde.
Design System
Das Design System von „Cloudlike Atelier" definiert alle interaktiven Komponenten und ihre Zustände für ein konsistentes und barrierefreies Nutzererlebnis.
Die Navigationsleiste reagiert auf Nutzerinteraktionen mit klaren visuellen Rückmeldungen. Im Hover-Zustand wird die Schrift heller dargestellt, im Fokus-Zustand fetter, was die Tastaturnavigierbarkeit unterstützt. Der Navigationspunkt „Portfolio" verfügt über ein erweitertes Verhalten: Bei Klick bewegt sich ein Pfeil nach oben und die zugehörigen Kategorien werden sichtbar, was eine intuitive und übersichtliche Navigation ermöglicht.
Navigationsleiste
Das Kontaktformular folgt ebenfalls klar definierten Zuständen. Im Default erscheinen die Eingabefelder in einem ruhigen Hellblau. Im Fokus-Zustand wird das Eingabefeld mit einer Umrandung hervorgehoben, sodass der aktive Bereich eindeutig erkennbar ist. Sobald der Nutzer tippt, erscheint die Eingabe in weißer Schrift, die sich klar vom Hintergrund abhebt.
Kontaktformular
