Zum Inhalt springen
kenjtecJournal
Journal durchsuchen

Webdesign mit KI: Mit Stitch drei Richtungen statt nur einen Entwurf entdecken

Drei Entwürfe sind erst dann interessant, wenn sie unterschiedliche Aufgaben priorisieren. Eine Bibliotheksseite liefert ein konkretes Briefing für einen fairen Gestaltungsvergleich.

Ana ordnet dieselben Karten auf drei Tabletts in drei verschiedenen Reihenfolgen. KI-Illustration.

Der erste KI-Entwurf wirkt stimmig. Er hat eine große Überschrift, freundliche Farben und einen auffälligen Knopf. Gerade deshalb lohnt eine zweite Frage: Warum steht ausgerechnet diese Handlung oben? Ein überzeugender Bildschirm kann eine zufällige Priorität so selbstverständlich erscheinen lassen, dass sie niemand mehr bespricht.

Google Labs beschrieb am 18. März 2026 einen erweiterten Stitch-Ansatz für KI-gestützte UI-Gestaltung auf einer gemeinsamen Arbeitsfläche. Das ist ein älterer Werkzeuganlass, keine aktuelle Oktober-Nachricht. Für diesen Praxisartikel nutzen wir ihn als Ausgangspunkt einer eigenen Entwurfsübung: drei inhaltlich verschiedene Richtungen mit denselben bestätigten Fakten.

Eine Variante braucht einen anderen Zweck

Unsere fiktive Nachbarschaftsbibliothek hat sechs Inhalte: Buchsuche, Öffnungszeiten, Veranstaltungen, Anmeldung, Standort und Hinweise für den ersten Besuch. Die erste Richtung priorisiert die Suche. Die zweite beginnt mit dem nächsten Veranstaltungstermin. Die dritte hilft Menschen, die noch nie dort waren.

Diese Unterschiede sind größer als ein Wechsel von Rundungen oder Akzentfarbe. Jede Richtung beantwortet eine andere Annahme über den Besuchsanlass. Sobald die Annahme ausgesprochen wird, kann sie hinterfragt werden. Vielleicht ist eine Bibliothek mit vielen Stammgästen anders zu gewichten als eine neue Einrichtung, die erst Orientierung schaffen muss.

Halte die Fakten dabei fest. Ein Entwurf darf nicht allein deshalb überzeugender wirken, weil er längere Öffnungszeiten erfindet oder eine schwierige Teilnahmebedingung auslässt. Gestaltung ordnet die Information; sie erhält keinen Freibrief, sie passend zu machen.

Ein Briefing, das wirklich drei Richtungen bestellt

Du kannst die folgende eigene Vorlage mit deinen bestätigten Inhalten ergänzen. Sie beschreibt einen Arbeitsauftrag, keine durchgeführte Stitch-Ausgabe.

Entwickle drei unterschiedliche Einstiege für dieselbe Bibliotheksseite. A priorisiert die Buchsuche, B den nächsten Veranstaltungstermin, C die Orientierung vor dem ersten Besuch. Verwende ausschließlich die beigefügten Fakten. Behalte Öffnungszeiten und Teilnahmebedingungen unverändert. Erkläre je Variante, welche Aufgabe zuerst unterstützt wird und was dadurch nach hinten rückt.

Die letzte Frage ist wichtig. Eine Priorität kostet Platz und Aufmerksamkeit an anderer Stelle. Wer nur nach Vorteilen einer Variante fragt, erhält leicht drei positive Begründungen. Die sichtbare Kehrseite hilft, die Entscheidung ernst zu nehmen.

Bitte zunächst um Reihenfolge und Informationsbeziehungen, nicht um zusätzliche Bilddekoration. Ein einfaches Schema zeigt oft schon, ob sich die Richtungen fachlich unterscheiden. Farben und Illustration können danach die gewählte Absicht unterstützen.

Eine gemeinsame Aufgabe macht den Vergleich fairer

Wähle vor der Beurteilung eine konkrete Aufgabe: Finde einen passenden Veranstaltungstermin und erkenne, wie du teilnehmen kannst. Betrachte dieselbe Aufgabe in allen drei Fassungen. Wo steht das Datum? Wie wird die Bedingung sichtbar? Wohin führt die hervorgehobene Handlung?

Schreibe beobachtbare Schwierigkeiten auf. „Die Anmeldung war erst nach erneutem Lesen erkennbar“ lässt sich bearbeiten. „Wirkt altmodisch“ braucht zunächst eine genauere Erklärung. Dabei geht es nicht darum, Geschmack zu verbieten. Er sollte nur nicht die einzige Begründung für eine Informationsentscheidung sein.

Eine solche redaktionelle Betrachtung ist noch keine Nutzungsstudie. Wenn später Personen die Varianten tatsächlich ausprobieren, müssen Aufgaben, Umgebung und Beobachtungen dokumentiert werden. Hier werden weder Durchgänge noch Ergebnisse vorgetäuscht.

Die Auswahl wird zu einer präzisen Übergabe

Notiere nach dem Vergleich den bevorzugten Einstieg, seine Hauptaufgabe und die weiterhin notwendigen Angaben. Ergänze offene Fragen. Vielleicht überzeugt die Veranstaltungsrichtung für eine Kampagnenseite, während die reguläre Startseite die Suche priorisieren sollte. Eine begründete Auswahl darf differenziert sein.

Der Übergabetext ist wertvoller als ein isolierter Screenshot. Er erklärt, welche Beziehung zwischen Inhalt und Bedienung erhalten bleiben soll. Ein nachfolgender Entwickler oder eine weitere KI muss dadurch weniger aus dem Aussehen erraten.

Ein UI-Entwurf ist trotzdem keine vollständige Anwendung. Datenanbindung, Verhalten und Zugänglichkeit brauchen eigene Arbeit. Die Stärke der Übung liegt davor: Sie macht Alternativen sichtbar, solange eine Veränderung der Grundrichtung noch leicht ist. Der erste schöne Entwurf bleibt dann eine Möglichkeit unter mehreren, statt unbemerkt zum einzigen denkbaren Weg zu werden.

Quellen und Stand

Recherche- und Dokumentationsstand: 25. Oktober 2026. Introducing vibe design with Stitch.

Hamburg ist unser Ausgangspunkt.

Das Nützliche reist mit dir.

KI-Praxis aus Hamburg, international erklärt.

Merkliste