UX/UI & Webdesign
KI-Workflow für Designer – Schritt fur Schritt vom Briefing bis zum Ergebnis
Nicht das Tool entscheidet, wie gut du mit KI arbeitest. Der Workflow entscheidet es. Erfahre in diesem Artikel wie du KI in deinen Arbeitsablauf sinnvoll integrieren kannst.
Wer Midjourney oder ChatGPT einfach irgendwo in seinen Prozess einstreut, ohne zu wissen wo und warum, bekommt zufällige Ergebnisse.
Manchmal gut, oft nicht. Wer dagegen versteht, an welcher Stelle KI wirklich hilft und an welcher sie eher stört, der spart Zeit und kommt zu besseren Lösungen.
Dieser Artikel beschreibt einen Workflow, der sich in der Praxis bewährt hat. Nicht als starres Schema, das du 1:1 übernehmen sollst, sondern als Orientierung. Du wirst ihn an deinen eigenen Prozess anpassen. Das ist ausdrucklich erwünscht.


Was ist ein KI-gestützter Designworkflow?
Ein KI-gestützter Designworkflow bedeutet nicht, dass KI deinen Job übernimmt. Es bedeutet, dass du KI-Tools gezielt in bestimmte Phasen deines Prozesses einbindest, während du die Kontrolle über Richtung, Entscheidungen und Qualität behältst.
Der Unterschied zum gelegentlichen Tool-Einsatz ist die Absicht. Wer ab und zu einen Prompt eintippt, wenn ihm nichts einfällt, nutzt KI als Notlösung. Wer seinen Workflow strukturiert, weiss von Anfang an:
Diese Phase beschleunige ich mit KI, diese Phase mache ich bewusst selbst, und hier prüfe ich das Ergebnis kritisch.
KI ist ein Assistent, kein Autopilot.
Diese Unterscheidung klingt einfach, wird aber im Alltag schnell verwischt. Deshalb lohnt es sich, sie am Anfang einmal klar zu formulieren.


Phase 1: Das Briefing verstehen und schärfen
Die meisten Projekte scheitern nicht in der Ausarbeitung. Sie scheitern am Anfang, weil das Briefing unklar ist oder Fragen stellt, die niemand laut ausgesprochen hat. KI kann dir helfen, diese Lücken frühzeitig zu entdecken.
Briefings mit KI analysieren
Gib ein Briefing vollständig in ChatGPT oder Claude ein und bitte darum, Ungenaues, Widersprüchliches oder Fehlendes zu benennen. Das Ergebnis überrascht regelmässig: Fragen tauchen auf, die du sonst erst in der zweiten Projektbesprechung gestellt hättest.
Ein typischer Prompt dafür könnte so aussehen:
„Hier ist ein Projektbriefing für eine Website. Identifiziere offene Fragen, unklare Anforderungen und Punkte, die vor dem Start geklärt werden müssen.“
Mehr brauchst du nicht. Die KI liefert eine strukturierte Liste, die du im nächsten Kunden-Call direkt abarbeiten kannst.


Zielgruppen-Personas entwickeln
Personas entstehen oft aus Annahmen, nicht aus Fakten. KI kann dabei helfen, diese Annahmen zu schärfen und auf Plausibilität zu prüfen.
Beschreibe, was du über die Zielgruppe weisst, und lass dir Fragen stellen, die du noch nicht beantwortet hast. Kombiniert mit echten Nutzeraussagen oder Kundenfeedback, das du einspielst, entsteht eine deutlich präzisere Grundlage.
Wettbewerbsrecherche beschleunigen
Statt stundenlang durch Konkurrenz-Websites zu scrollen, kannst du KI bitten, typische Muster einer Branche zu beschreiben. Nicht als Ersatz für eigene Recherche, sondern als ersten Überblick:
- Was sind gängige Positionierungsansätze?
- Welche visuellen Sprachen dominieren?
- Wo liegen offensichtliche Lücken?
Das gibt dir einen strukturierten Ausgangspunkt für die eigene Recherche.
Ein gutes Briefing ist die Hälfte des Projekts. KI hilft dir, die Fragen zu stellen, die das Briefing besser machen.
Phase 2: Konzept und Ideenfindung
Die frühe Konzeptphase ist die Phase, in der KI am meisten bringt und gleichzeitig am stärksten in die Irre führen kann. Beides hängt davon ab, wie du sie einsetzt.
Visuelle Richtungen schnell erkunden
Früher bedeutete das Sondieren von Designrichtungen: stundenlange Moodboard-Recherche und -Erstellung, Abgleich mit Referenzprojekten, erste Skizzen. Heute kannst du mit Midjourney, Adobe Firefly oder Nano Banana in kurzer Zeit zwanzig visuelle Ansätze generieren, die unterschiedliche Stimmungen und Stile abbilden.


Der Wert liegt nicht im generierten Bild selbst. Der Wert liegt darin, dass du dich schnell positionieren kannst:
Diese Richtung stimmt, diese nicht, und jene hat etwas, das ich weiterentwickeln will. Du fungierst als Kurator, nicht als Produzent.
Kreativtechniken mit KI kombinieren
Wer klassische Kreativitätstechniken kennt, kann sie direkt mit KI verknüpfen. Die SCAMPER-Methode zum Beispiel lässt sich wunderbar als Prompt-Struktur nutzen:
Substituieren, Kombinieren, Anpassen, Modifizieren, Anders verwenden, Eliminieren, Umkehren.
Bitte die KI, eine bestehende Idee durch jede dieser Linsen neu zu betrachten, und du bekommst Variationen, auf die du alleine vielleicht nicht gekommen wärst. Eine Übersicht weiterer Kreativtechniken, die auch mit KI gut funktionieren, findest du im Kreativtechniken-Artikel im Webdesign Journal.
Wann du den KI-Output verwirfst
Nicht jedes KI-Ergebnis ist ein Ausgangspunkt wert. Wenn du merkst, dass alle generierten Varianten generisch wirken, kein visueller Charakter erkennbar ist und das Ergebnis genauso gut zu zehn anderen Projekten passen würde, dann verwirfst du es und änderst den Ansatz.
Das ist keine Niederlage. Das gehört zum Prozess. KI macht Fehlversuche günstiger, nicht unmöglich.


Phase 3: Das Design ausarbeiten
In der Ausarbeitungsphase verändert sich die Rolle von KI. Weniger Exploration, mehr gezielte Unterstützung bei konkreten Aufgaben.
Farb- und Typografiesysteme entwickeln
KI-Tools können Farbpaletten vorschlagen, die auf einem Stimmungsbild oder einer kurzen Beschreibung basieren. Das ist nützlich als Ausgangspunkt, aber selten das Endergebnis. Farbe trägt in guten Designs immer Bedeutung. Diese Bedeutung musst du selbst setzen.
Bei Typografie funktioniert ähnliches:
Beschreibe die Persönlichkeit einer Marke und lass dir Schriftkombinationen vorschlagen. Google Fonts Kombinator oder dedizierte KI-Typo-Tools liefern Vorschläge, die du dann auf ihre Eignung prüfst.
Bildinhalte generieren und vorbereiten
KI-generierte Bilder haben ihren Platz im Webdesign, aber dieser Platz ist nicht überall. Für abstrakte Hintergründe, generische Illustrationen oder schnelle Visualisierungen in Präsentation und Konzeptphase sind sie gut geeignet. Für den finalen Einsatz auf einer Unternehmenswebsite, wo Authentizität und Wiedererkennbarkeit wichtig sind, sind echte Fotos oder spezialisierte Illustrationen meist die bessere Wahl.
Kenne diesen Unterschied und kommuniziere ihn transparent gegenüber deinen Kunden.


Copy und Microcopy vorformulieren
Button-Beschriftungen, Fehlermeldungen, Formular-Labels, Abschnittsüberschriften. Diese Texte schreiben Designer häufig nebenbei, ohne viel nachzudenken. KI kann hier sinnvoll entlasten: Beschreibe den Kontext, den gewünschten Ton und die Funktion des Elements, und lass dir Formulierungsvorschläge geben. Du prüfst und entscheidest. Das spart Zeit und verbessert die Qualität.
KI in Figma
Die Figma-Integration von KI-Funktionen wächst. Auto-Layout, generative Inhalte, Styling-Vorschläge und bald auch Copilot-Funktionen direkt in der Arbeitsoberfläche. Es lohnt sich, diese Entwicklung im Blick zu behalten und neue Features früh auszuprobieren. Nicht jede neue Funktion ist sofort sinnvoll im Alltag, aber wer fruehzeitig ein Gefühl dafür entwickelt, ist später im Vorteil.
KI beschleunigt die Ausarbeitung.
Aber Komposition, Konsistenz und die letzte Entscheidung bleiben bei dir.
Phase 4: Review und Qualitätskontrolle
Dieser Schritt wird im Zusammenhang mit KI selten erwähnt. Dabei ist er einer der nützlichsten.
KI als kritischer Sparringspartner
Zeig der KI dein fertiges Design, beschreibe, was du damit erreichen willst, und bitte um eine kritische Einschätzung:
- Was könnte missverstanden werden?
- Welche Elemente wirken unklar?
- Wo gibt es mögliche Zugangsbarrieren?
Die KI sieht kein Bild. Sie reagiert auf deine Beschreibung. Das zwingt dich, das Design in Worte zu fassen, und allein das kann Schwächen sichtbar machen, die dir beim Betrachten nicht aufgefallen wären.
Accessibility-Checks
Farbkontraste prüfen, Alternativtexte für Bilder formulieren, Screenreader-taugliche Strukturen sicherstellen. KI kann dabei helfen, Checklisten abzuarbeiten und Alternativtexte zu formulieren. Die finale Prüfung mit echten Tools wie dem Farbkontrast-Prufer oder einem Screenreader bleibt Pflicht.
Texte gegenlesen lassen
Kurze Texte werden im Design oft vom Designer selbst formuliert und selten noch einmal prüfend gelesen. Lass die KI Tonalität, Verständlichkeit und Konsistenz prüfen. Besonders bei mehrsprachigen Projekten kann das viel Zeit sparen.
Was KI im Review übersieht
KI prüft nicht, ob ein Design zum Unternehmen passt. Sie weiss nicht, welches Gefühl ein Kunde beim ersten Sehen haben soll. Sie kennt keine Unternehmensgeschichte und keinen Marktkontext. Diese Einschätzung bleibt deine Aufgabe.


Phase 5: Übergabe und Dokumentation
Dokumentation ist der Teil des Designprozesses, den die meisten am liebsten überspringen würden. KI nimmt ihm zumindest einen Teil der Schwere.
Technische Dokumentation erstellen
Beschreibe die wichtigsten Design-Entscheidungen und lass dir eine strukturierte Dokumentationsvorlage daraus entwickeln. Abstands- und Grössenregeln, Farbsystem, Schrifthierarchie, Komponentenverhalten. Das Grundgerüst kann KI liefern, du füllst es mit den spezifischen Inhalten deines Projekts.
Styleguide-Texte formulieren
Erklärende Texte in Styleguides sind oft trocken und schwer verständlich. KI kann helfen, diese Texte klarer und lesbarer zu machen. Beschreibe, für wen der Styleguide gedacht ist und welchen Wissensstand du voraussetzt, dann lass dir die Formulierungen vorschlagen.
Kundenpräsentation vorbereiten
KI kann dir dabei helfen, eine schlussige Argumentationslinie für die Präsentation zu entwickeln. Welche Designentscheidung braucht welche Erklärung? Welche Fragen stellt ein Kunde typischerweise? Wie formulierst du einen Konzeptansatz so, dass er verständlich und überzeugend ist, ohne zu technisch zu werden?
Die Präsentation selbst, die Dramaturgie, der Aufbau, das Timing, das bleibt deine Aufgabe. Aber die Vorbereitung geht schneller.
Welches Tool für welchen Schritt
Eine vollständige Tool-Übersicht würde diesen Artikel sprengen. Die folgende Tabelle zeigt einen praxisnahen Einstieg.
| Phase | Tools (Auswahl) | Hauptnutzen |
| Briefing | ChatGPT, Claude, Gemini, Perplexity | Lücken aufdecken, Fragen generieren |
| Design-Konzept | Midjourney, Firefly, Nano Banana | Visuelle Richtungen explorieren |
| Ausarbeitung | Figma AI, ChatGPT, Claude, Typo-Tools | Variationen, Copy, Systeme |
| Review | ChatGPT, Claude, Contrast Checker | Sparringspartner, A11y-Checks |
| Dokumentation | ChatGPT, Claude, Notion AI | Struktur, Formulierungen, Klarheit |
Fehler, die sich leicht vermeiden lassen
Wer KI neu in seinen Workflow integriert, macht ähnliche Fehler. Die gute Nachricht: Die meisten sind schnell erkannt und schnell behoben.
- Zu früh auf den KI-Output verlassen. Wer in der Konzeptphase den ersten visuellen Vorschlag direkt weiterentwickelt, ohne breiter zu erkunden, verschenkt das grösste Potential von KI. Erst Breite, dann Tiefe.
- Prompts zu vage formulieren. „Mach etwas Modernes“ liefert generische Ergebnisse. Je konkreter die Beschreibung, desto nützlicher die Ausgabe. Zielgruppe, Stimmung, Kontext, Einschränkungen, all das gehört in einen guten Prompt.
- KI-Ergebnisse unreflektiert übernehmen. Ein KI-generiertes Bild, das gut aussieht, ist kein fertiges Design. Es ist ein Ausgangspunkt. Die Entscheidung, ob es geeignet ist, triffst du.
- Den Kunden aus dem Prozess verlieren. Wer mit KI schneller wird, läuft Gefahr, weniger rückzufragen. Kundenfeedback und echte Nutzerperspektiven lassen sich nicht durch KI ersetzen.
- KI als Beweis behandeln. „Die KI hat gesagt, das ist gut“ ist kein Argument. KI ist ein Werkzeug ohne Urteilsvermögen. Die Verantwortung für das Ergebnis liegt bei dir.
Schneller werden ist das eine. Besser werden ist das andere. Mit einem guten KI-Workflow kannst du beides erreichen.
Fazit
Ein guter KI-Workflow macht dich nicht zum Automatisierer. Er macht dich zu einem Designer, der weiss, wo seine Zeit und Energie am meisten bringen, und wo Maschinen die Routinearbeit übernehmen können.
Der Schlüssel ist Struktur. Nicht jeder Schritt im Designprozess profitiert gleich stark von KI. Wer das versteht, setzt KI gezielt ein statt wahllos. Das spart nicht nur Zeit, es verbessert auch die Qualität der Ergebnisse.
Fang mit einer Phase an. Nicht mit fünf gleichzeitig. Such dir die Phase aus, in der du gerade den grössten Zeitaufwand hast, und experimentiere dort. Wenn das funktioniert, erweiterst du den Ansatz Schritt für Schritt.
Weiterführende Artikel
KI-Kompass für Designer – Strategie, Workflow und Tätigkeiten im Überblick
Prompting für Kreative – So sprichst du mit der KI, damit sie dich versteht
Designprozess neu gedacht – Kreativität, Struktur und die Rolle der KI
Kreativitätstechniken – Klassische Methoden, die auch mit KI funktionieren
UX/UI & Webdesign
Behind the Set › PAGE online
Brücken bauen im Bewegtbild: »Behind the Set« bringt Studierende und Fachleute zusammen, stärkt den praxisnahen Wissenstransfer und begegnet den strukturellen und wirtschaftlichen Herausforderungen. Ein neues Format, das für die Community leben soll und von ihr getragen wird.
UX/UI & Webdesign
Witzig & musikalisch: Schottland feiert WM-Teilnahme auf eigene Art! › PAGE online
Nach 28 Jahren ist Schottland wieder bei einer Fußball-WM dabei. Und die traditionsreiche Limo Irn-Bru feiert das mit einem Musik-Spot mit vielen Stars – und einem erfrischenden Blick darauf, was die Fußball-Fans in den USA erwartet: von irren Ticketpreisen und riesigen Hot Dogs bis zur Security.
UX/UI & Webdesign
Plakat der Kieler Woche 2026 – Design Tagebuch
In gut zwei Wochen beginnt die größte Segelregatta der Welt, die Kieler Woche (20. bis 28. Juni 2026). Das Plakat zur diesjährigen Kieler Woche sei „freundlich, locker und mit einer besonderen Leichtigkeit“, so der Veranstalter.
Im Rahmen des traditionellen Designwettbewerbs zur diesjährigen Kieler Woche hatte sich im vergangenen Jahr der Grafikdesigner Erik Brandt aus Minneapolis mit seinem Entwurf gegen 14 weitere Vorschläge durchgesetzt. Die Jury ist der Auffassung: „Das Design vereint die beiden zentralen Facetten der Kieler Woche – Sport und Freizeit – in einem modernen, vielseitigen Auftritt.“
Auszug des Jury-Statements
„Die dynamische Komposition und die sommerliche Farbgebung vermitteln Offenheit und Lebensfreude. Im Zentrum steht die Wendetonne, die als starkes Symbol den Segelsport mit der offenen, festlichen Atmosphäre des Volksfests verbindet. […] Die rhythmische Spiegelung des Textes schafft eine visuelle Kontinuität, die spielerisch über das Format hinausgeht. Durch die Wiederholung entsteht ein starkes Symbol für die lange Tradition der Kieler Woche, ihre beständige Wiederkehr – und die Gewissheit, dass sie auch in Zukunft immer wieder neu erlebbar sein wird“, heißt es in der Beurteilung der Jury.
Das Plakat der Kieler Woche wird seit 1959 in einem jährlich stattfindenden Designwettbewerb ermittelt, zudem Designer aus dem In- und Ausland eingeladen werden. Das Siegermotiv kommt während der Segel- und Festwoche auf Plakaten und Flaggen zum Einsatz und schmückt darüber hinaus zahlreiche Medien und Anwendungen wie Kaffeebecher, Schlüsselbänder und andere Werbeartikel.
Mediengalerie
- Kieler Woche Design 2026, Quelle: Landeshauptstadt Kiel
- Kieler Woche Plakat 2026, Quelle: Landeshauptstadt Kiel
- Kieler Woche 2026 Design – Anwendungsbeispiele, Quelle: Landeshauptstadt Kiel
- Kieler Woche 2026 Design – Anwendungsbeispiele, Quelle: Landeshauptstadt Kiel
Weiterführende Links
-
Entwicklung & Codevor 3 MonatenCommunity-Protest erfolgreich: Galera bleibt Open Source in MariaDB
-
Künstliche Intelligenzvor 3 MonatenBlade‑Battery 2.0 und Flash-Charger: BYD beschleunigt Laden weiter
-
Künstliche Intelligenzvor 3 Monaten
Top 10: Der beste Luftgütesensor im Test – CO₂, Schadstoffe & Schimmel im Blick
-
Apps & Mobile Entwicklungvor 3 MonatenMähroboter ohne Begrenzungsdraht für Gärten mit bis zu 300 m²
-
Künstliche Intelligenzvor 3 MonateniPhone Fold Leak: Apple spart sich wohl iPad‑Multitasking
-
Künstliche Intelligenzvor 3 Monaten
JBL Bar 1300MK2 im Test: Soundbar mit Dolby Atmos, starkem Bass und Akku‑Rears
-
Künstliche Intelligenzvor 3 MonatenPetra‑AI: KI soll Frauen in der Perimenopause unterstützen
-
Social Mediavor 3 MonatenVon Kennzeichnung bis Plattformpflichten: Was die EU-Regeln für Influencer Marketing bedeuten – Katy Link im AllSocial Interview





