CLAY TO KLICK

DOKUMENTATION / DIPLOMARBEIT VON MARC KUHN HFIAD22

1. EINFÜHRUNG

1.1 Beschrieb

Ziel

Ziel des Projekts ist die Konzeption, Gestaltung und technische Umsetzung einer interaktiven und benutzerfreundlichen Website, welche die Werke desKünstlers visuell ansprechend präsentiert und durch klare Nutzerführung zur Kontaktaufnahme animiert.Der Fokus liegt auf einer ausgewogenen Verbindung von ästhetischer Inszenierung und funktionaler UI/UX, um potenzielle Kund:innen gezielt anzusprechen.

Kontext

Mein Vater arbeitet als Künstler mit Schwerpunkt Skulptur. Für seine professionelle Positionierung im digitalen Raum entwickle ich eine interaktive Website, die seine Arbeiten überzeugend präsentiert und ihn gezielt bei der Akquise neuer Aufträge unterstützt. Er realisiert Skulpturen für öffentliche und private Räume – hauptsächlich  figurative Arbeiten.

1.2 Exposé

Exposé

Zu Beginn meiner Arbeit habe ich ein Exposé verfasst, das als konzeptionelle Grundlage dient. Es fasst das Thema meiner Abschlussarbeit grob zusammen, legt einen zeitlichen Rahmen fest und definiert die zentralen Inhalte sowie Ziele des Projekts. Das Exposé hilft dabei, den Fokus über den gesamten Verlauf hinweg zu bewahren und dient gleichzeitig als Orientierung für die weiteren Arbeitsschritte.

Expose herunterladen

2. RESEARCH & KONZEPTION

2.1 Bedürfnis-Ergründung

Analyse

Im Grunde war der Auftrag bereits klar: Es sollte eine Website entstehen, die die Kunst meines Auftraggebers wirkungsvoll in Szene setzt und gleichzeitig als Plattform für Anfragen und potenzielle Verkäufe dient. Dennoch habe ich mich bewusst dazu entschieden, eine detaillierte Bedürfnisanalyse durchzuführen, um ein noch tieferes Verständnis für die Erwartungen, Ziele und Anforderungen zu gewinnen.

Dieser Schritt ermöglichte es mir nicht nur, gezielte Informationen zu sammeln, sondern auch erste gestalterische Ansätze zu entwickeln und ein Gefühl dafür zu bekommen, in welche Richtung sich das Design bewegen könnte.

Diese Analyse war der wichtigste Grundpfeiler meiner Arbeit.

Analyse herunterladen

2.2 Moodboard

Definition Look and Feel

Um die gestalterischen Vorstellungen meines Auftraggebers besser zu verstehen, habe ich basierend auf den ersten Inputs der Analyse ein Moodboard erstellt. Es diente als visuelle Grundlage, um Stilrichtungen, Farben und Bildwelten greifbar zu machen. Beim gemeinsamen Durchgehen des Moodboards konnte ich ein klares Bild davon gewinnen, wie die Website optisch wirken und sich anfühlen soll.

2.3 Testshooting

Testshooting

Da die Website stark vom Bildmaterial lebt, war es mir besonders wichtig, dass die Fotografien einen professionellen Eindruck vermitteln und die Skulpturen möglichst plastisch und räumlich wirken. Ziel war es, die Dreidimensionalität der Werke auch digital erlebbar zu machen und so die besondere Qualität der Kunst hervorzuheben.

Um herauszufinden, ob meine geplanten Ansätze in der Praxis funktionieren, habe ich mit einer Auswahl an Skulpturen ein Testshooting durchgeführt. Dieses diente dazu, verschiedene Lichtstimmungen, Perspektiven und Hintergründe auszuprobieren und ein Gefühl dafür zu entwickeln, wie sich die Werke optimal in Szene setzen lassen. Die Erkenntnisse daraus waren zentral für die Planung und Umsetzung des finalen Shootings

2.4 Customer Journey

Leads vs Direct Sales

Zu Beginn stellte sich die grundlegende Frage, welcher Ansatz für den Verkauf der Skulpturen sinnvoller ist:Ein klassischer Onlineshop, über den die Werke direkt gekauft werden können (Sales), oder das Generieren von Anfragen potenzieller Käufer (Leads), die anschliessend über ein persönliches Verkaufsgespräch zum Abschluss geführt werden.

Der Preis pro Skulptur bewegt sich im Bereich von rund CHF 1’000 - 10'000. Damit handelt es sich um sogenanntes High-Ticket-E-Commerce. Solche Produkte erfordern ein höheres Vertrauen und eine intensivere Auseinandersetzung mit dem Angebot.

Hinzu kommt, dass es sich bei den Skulpturen um dreidimensionale Kunstwerke handelt, deren Wirkung schwer vollständig digital erfassbar ist. Viele Kund:innen wünschen sich vor dem Kauf die Möglichkeit, das Objekt physisch zu erleben. Auch der Bekanntheitsgrad des Künstlers ist derzeit noch nicht so hoch, dass sofortiges Vertrauen für einen Direktkauf über einen Onlineshop vorausgesetzt werden kann.

Um diese Entscheidung fundiert zu treffen, habe ich eine detaillierte Customer Journey Analyse erstellt. Dabei wurde deutlich, dass insbesondere in den Phasen Consideration und Conversion ein persönlicher Austausch entscheidend ist. Ein direkter Onlineshop würde nicht nur um ein vielfaches höhere Aquisitionskosten verursachen, sondern hätte auch mehr Streuverluste.

Die Website wurde daher konsequent auf Kontaktaufnahme und Leadgenerierung optimiert. Interessierte Nutzer:innen können unkompliziert mit dem Künstler in Verbindung treten und einen Besichtigungstermin vereinbaren.

Ein Onlineshop für preisgünstigere Skulpturen in Gussform ist in einem späteren Projektschritt geplant, gehört jedoch nicht zum Umfang dieser Arbeit.

2.5 Site Map

Hierarchie

Die Struktur der Website wurde bewusst einfach und übersichtlich gehalten. Ziel war es, den Besuchenden einen klaren und schnellen Überblick über die Werke und die künstlerische Arbeit zu ermöglichen – ohne Ablenkung oder komplexe Navigation.

Die Site Map folgt daher einem klaren, reduzierten Aufbau, bei dem sich Nutzerinnen und Nutzer intuitiv zurechtfinden können. Es war mir wichtig, dass man sich nicht in der Seite verliert, sondern mit wenigen Klicks zu den zentralen Inhalten gelangt. Die Schlichtheit der Struktur unterstützt ausserdem den Fokus auf das Wesentliche: die Skulpturen.

3. DESIGN-ENTWICKLUNG

3.1 Shooting

Das Shooting

Beim finalen Fotoshooting habe ich insgesamt 25 Skulpturen fotografiert und dabei über 300 Aufnahmen erstellt. Jede Figur wurde aus mehreren Perspektiven festgehalten, um später eine umfassende Darstellung aus verschiedenen Blickwinkeln zu ermöglichen. Dadurch entsteht auf der Website ein plastischer, fast greifbarer Eindruck der Werke.

Im Anschluss wurden alle Bilder in Adobe Photoshop sorgfältig freigestellt und bearbeitet, um einen einheitlichen, professionellen Look zu erzielen. Licht, Farbgebung und Kontraste wurden dabei so angepasst, dass die Skulpturen klar zur Geltung kommen und sich die Bildwelt stimmig in das Gesamtdesign der Website einfügt.

360° Videos

Für Skulpturen mit einem Gewicht von bis zu 3 kg war es mir möglich, 360°-Videos zu erstellen, um die Werke auch digital möglichst dreidimensional und realitätsnah erlebbar zu machen.

Mithilfe eines motorisierten Turntables und einer professionellen Lightbox konnte ich die Skulpturen gleichmässig ausleuchten und präzise von allen Seiten erfassen. Die daraus entstandenen Videos vermitteln ein sehr plastisches Raumgefühl und tragen wesentlich dazu bei, die besondere Formensprache und Detailtiefe der Objekte online erlebbar zu machen.

3.2 Style Guide

Die Farben wurden sehr schlicht gehalten. Die idee war keine auffälligen farben zu wählen die von den Skulpturen ablenken könnten. Deshalb ist der grossteil schwarz weiss und ein leichtes braun welches an Bronze angelähnt ist. damit sich die Farben der Website perfekt mit denen der Skulpturen ergänzen.

Die Heading schriften wurden elegant gewählt was sich sehr schön mit der Kunst ergänzt. Serifen sehen traditionell und hochwertig aus und wenn sie optimiert ist für web dann ebenso modern. Als lauftext habe ich den klassiker arial gewählt. Es ist eine sehr lesbare schrift und sorgt bei der Kundschaft ebenfalls für wiedererkennungwert.

3.3 Logo

Das Signet

Das Logo basiert auf der originalen Unterschrift, die jede einzelne Skulptur des Künstlers ziert. Sie fungiert nicht nur als Signatur, sondern auch als Markenzeichen und trägt wesentlich zum Wiedererkennungswert bei. Daher lag es nahe, diese persönliche Handschrift auch als Logo für die Website zu verwenden.

Die Unterschrift wurde von mir sorgfältig digitalisiert, vektorisiert und bereinigt, um sie in verschiedenen Anwendungen flexibel und professionell einsetzen zu können – sowohl im Web als auch für mögliche Printprodukte.

3.4 Prototyp 1

Mid Fi Prototype

Basierend auf den gesammelten Inputs sowie dem entwickelten Konzept habe ich einen ersten Prototypen der Website erstellt. Ziel war es, die grundlegende Struktur, das visuelle Erscheinungsbild und die Nutzerführung greifbar zu machen. Der Prototyp diente als wichtiges Werkzeug, um frühzeitig gestalterisches Feedback einzuholen und konkrete Reaktionen auf Layout, Navigation und Inhalte zu beobachten. Auf Grundlage dieser Rückmeldungen konnte ich gezielte Anpassungen vornehmen und das Design weiterentwickeln, bevor die finale Umsetzung erfolgte.

Zum Prototyp

3.5 User Testing

Testing

Nach dem ersten Prototypen habe ich ein User Testing durchgeführt. Auch wenn es sich um eine eher reduzierte Website handelt, hat sich dieser Schritt klar gelohnt.

Durch das Feedback konnten mehrere Schwachstellen im Prototyp identifiziert und werden. Zu den wichtigsten Erkenntnissen gehörten:

- schwer erkennbare oder nicht eindeutig beschriftete Schaltflächen

- Unproportionale Grössen einzelner Komponenten, die die Lesbarkeit und Bedienbarkeit beeinträchtigten  

- fehlende Hover States, die zu Verunsicherung in der Navigation führten


Diese Rückmeldungen haben wesentlich zur Verbesserung der Nutzerfreundlichkeit beigetragen und wurden in die finale Version der Website integriert.

Zum Prototyp

3.6 Prototype 2 (nach Testing)

High Fi Prototype

ach dem User Testing habe ich den Prototypen gezielt überarbeitet und an das erhaltene Feedback angepasst. Dabei wurden unter anderem Unklarheiten in der Navigation, visuelle Uneindeutigkeiten sowie fehlende Interaktionen behoben. Zusätzlich habe ich Optimierungen vorgenommen, die mir selbst während der Analyse und Testphase aufgefallen sind – etwa in Bezug auf Layout, Lesbarkeit und visuelle Hierarchie. Durch diese Überarbeitungen wurde der zweite Prototyp deutlich nutzerfreundlicher, konsistenter im Design und besser auf die Zielgruppe abgestimmt.

Zum Prototype

Vor Testing

Nach Testing

4. FINALE UMSETZUNG

4.1 Components

Die Umsetzung meiner Arbeit erfolgte mit dem Website-Builder Webflow. Dabei habe ich von Anfang an auf ein modulares System gesetzt: Durch den Einsatz von wiederverwendbaren Komponenten konnte ich die Website effizient und flexibel aufbauen.

Diese modulare Struktur ermöglicht es mir, neue Skulpturen, Kategorien oder Inhalte schnell und unkompliziert zu ergänzen – ohne das bestehende Design oder die Seitenstruktur anpassen zu müssen. So bleibt die Website langfristig erweiterbar und pflegeleicht.

Im Folgenden sind die wichtigsten Komponenten aufgelistet, die ich für den Aufbau verwendet habe:

4.2 Umsetzung

Finale Website

Das Endprodukt meiner Diplomarbeit ist eine vollständig umgesetzte Website, die inhaltlich und technisch fertiggestellt ist. Alle Seiten und Funktionen sind implementiert, und das Design wurde für verschiedene Bildschirmgrössen responsiv optimiert, sodass die Website sowohl auf Desktop, Tablet als auch Smartphone problemlos funktioniert.

Der Fokus liegt klar auf der Leadgenerierung: Interessierte Besucherinnen und Besucher werden gezielt dazu geführt, Kontakt aufzunehmen und sich näher mit den Skulpturen auseinanderzusetzen.

Zur Website

4.3 Next Steps

Die Website ist ein fortlaufendes Projekt und wird auch nach der Abgabe meiner Diplomarbeit weiter betreut. Ich bin weiterhin für den Unterhalt und die Weiterentwicklung zuständig.

Einige Weiterentwicklungen, die nicht Teil dieser Arbeit sind, wurden bereits geplant oder teilweise umgesetzt. Dazu gehören zum Beispiel:

Onlineshop

Über eine Subdomain wird ein eigener Onlineshop auf Shopify eingerichtet. Dort werden ausgewählte Skulpturen in einer günstigeren Preisklasse angeboten.

Neue Skulpturen

Aktuell sind auf der Website 15 Skulpturen ausgestellt. Tatsächlich existieren jedoch weit mehr Werke, die nach und nach ergänzt werden.

Optimierungen

Allgemeine visuelle Verbesserungen sowie Optimierungen in den Bereichen Performance und Suchmaschinenfreundlichkeit (SEO) werden noch vorgenommen.

360° Videos

Aufnahmen von 360°-Videos der grösseren Skulpturen sind in Planung, um deren räumliche Wirkung noch besser erlebbar zu machen.