BerichtIn eigener Sache27.09.20264 Min. Lesezeit

Neustart für diese Website

Warum meine Fotoseite ein neues Zuhause bekommen hat – und wie ich sie mit Hilfe von KI neu aufgebaut habe.

Screenshot der neuen Startseite im dunklen Modus: große Überschrift „Licht, Nacht und Menschen.“, darunter ein Funkenfoto
Die neue Startseite im dunklen Modus.

Warum eine neue Seite?

Vor einigen Jahren habe ich diese Seite aufgesetzt, um meiner Leidenschaft für die Fotografie einen Platz zu geben – und meine Bilder nicht nur allein zu betrachten.

Damals habe ich dafür Koken verwendet, ein Programm speziell für Foto-Websites. Koken wird allerdings seit geraumer Zeit nicht mehr weiterentwickelt. Deshalb wollte ich die Seite neu aufbauen, diesmal mit Hilfe von KI.

Screenshot der alten Startseite mit Koken: Titelbild mit dem Düsseldorfer Rheinturm bei Nacht, darunter Vorschaubilder der Alben Screenshot der alten Album-Ansicht: gleich große Vorschaubilder der Funken-Serie in einem Raster
Vorher: die alte Seite mit Koken – Startseite und Album-Ansicht.

Wie wir vorgegangen sind

1. Erst fragen, dann gestalten

Bevor irgendetwas gestaltet wurde, hat mich die KI – in der Rolle eines UX-Designers – ausgefragt: Wofür ist die Seite da? Welche Stimmung soll sie haben? Hell oder dunkel? Welche Schriften, welche Farben, wie sollen die Bilder angeordnet werden? Meine Antworten: ein persönliches Portfolio, ruhig und minimal wie eine Galerie, fast ohne eigene Farbe, damit die Fotos wirken. Und die Seite soll sich im hellen wie im dunklen Modus ansehen lassen.

2. Ein Regelwerk statt einzelner Seiten

Aus den Antworten entstand zuerst ein Designsystem: feste Regeln für Farben, Schriften, Abstände und sechs Bausteine, mit denen sich Fotos anordnen lassen – vom bildschirmfüllenden Einzelbild bis zum Raster. Dazu gehört eine Übersichtsseite, auf der alle Bausteine zu sehen sind. Jede neue Seite hält sich an diese Regeln, damit die Website auch in Zukunft wie aus einem Guss wirkt.

Screenshot des Styleguides mit Farbfeldern für Hintergrund, Text, Akzent und Lightbox
Der Styleguide: alle Farben, Schriften und Bausteine auf einen Blick.

3. Jedes Bild angesehen

Alle 135 Fotos aus elf Serien wurden gesichtet. Für jede Serie ist eine eigene Bildfolge entstanden, und jedes Foto hat eine Bildbeschreibung bekommen, damit auch Menschen mit Screenreader wissen, was zu sehen ist. Ein Klick auf ein Bild öffnet es groß, mit den Pfeiltasten oder per Wischen geht es weiter.

Screenshot der neuen Serienseite „Funken unter der Müngstener Brücke“ mit zentrierter Überschrift und großem Eröffnungsbild
Nachher: eine Serie auf der neuen Seite.

4. Hell und dunkel, groß und klein

Die Seite richtet sich nach der Einstellung des Geräts. Wer lieber anders schaut, schaltet oben rechts zwischen hell und dunkel um. Auf dem Handy wird aus der Navigation ein Menü, und die Bilder ordnen sich untereinander an.

Screenshot der Serie „Workshop mit Sara“ auf einem schmalen Bildschirm im hellen Modus Dieselbe Seite auf einem schmalen Bildschirm im dunklen Modus
Dieselbe Seite auf dem Handy – hell und dunkel.

5. Prüfen, korrigieren, fertigstellen

Zum Schluss wurde jede Seite auf dem Handy und auf großen Bildschirmen geprüft: Stimmen alle Links? Werden Bilder verzerrt? Muss man seitlich scrollen? Was dabei auffiel, wurde korrigiert. Texte, Impressum und Datenschutzerklärung habe ich gemeinsam mit der KI überarbeitet.

Was jetzt anders ist

Screenshot der Übersicht aller Serien im dunklen Modus mit Filterleiste und Vorschaubildern
Die Übersicht aller Serien mit Filter.

Über Rückmeldungen zur neuen Seite freue ich mich – schreib mir gern.