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
Deutz AG modifiziert visuelles Erscheinungsbild – Design Tagebuch
Die Deutz AG präsentiert sich seit Kurzem mit einem neuen visuellen Erscheinungsbild. Der Motorenhersteller und Anbieter von Mobilitäts- und Energielösungen möchte damit die innerhalb des Unternehmens in den vergangenen Jahren vollzogene Transformation unterstreichen.
Die Deutz AG ist ein weltweit tätiger, unabhängiger Motorenhersteller mit Hauptsitz in Köln. Das Unternehmen wurde 1864 von Nicolaus August Otto und Eugen Langen unter dem Namen N. A. Otto & Cie. gegründet. Es gilt als die erste Motorenfabrik der Welt. Das Kerngeschäft umfasst die Entwicklung und Produktion von Diesel-, Gas- und Elektroantrieben für Einsatzbereiche wie Landtechnik, Bauwirtschaft und Materialhandhabung. Ergänzt wird das Portfolio durch weltweite Serviceleistungen und digitale Lösungen. Heute beschäftigt Deutz rund 6.000 Mitarbeiter weltweit.
Vor dem Hintergrund der Weiterentwicklung des Unternehmens vollzieht die Deutz AG ein Rebranding. Das neue Erscheinungsbild sei Ausdruck von Offenheit, Fortschritt und Innovationskraft und mache Tradition und Transformation nach innen wie nach außen sichtbar.

Auszug der Pressemeldung
Mit der Unternehmensstrategie „Next DEUTZ“ hat sich DEUTZ breiter aufgestellt und seine Widerstandsfähigkeit gestärkt. Auf die strategische Neuausrichtung und die Einführung einer neuen Organisationsstruktur mit fünf Business Units folgt nun der nächste konsequente Schritt: ein Markenauftritt, der die Transformation auch visuell auf den Punkt bringt. „Unsere neue Marke verbindet Bewährtes mit Neuem“, sagt DEUTZ-CEO Dr. Sebastian Schulte. „Tradition, Verlässlichkeit und der Stolz auf unsere Herkunft bleiben spürbar – etwa in der Unternehmensfarbe Rot oder im Symbol des Ulmer Münsters. Gleichzeitig steht der neue Auftritt für Offenheit, Fortschritt und Innovationskraft. Das offene D im neuen Logo-Schriftzug symbolisiert beispielsweise Zusammenarbeit und Transparenz, die Farbe Gelb Zukunftsoptimismus und Mut.“

Das neue Logo unterscheidet sich sowohl im Aufbau als auch im Ausdruck vom bisherigen Unternehmenszeichen. Statt zentrisch untereinander sind Bildmarke und Wortmarke nebeneinander angeordnet. Dabei wurden die Proportionen zugunsten der rechtsseitig der Bildmarke platzierten Wortmarke verändert – letztere ist künftig deutlich größer dargestellt.
Der Name – DEUTZ – ist weiterhin in Versalien gehalten, allerdings ist die Wortmarke in einer anderen Groteskschrift gesetzt. Die Buchstaben laufen noch einmal etwas breiter als jene im bisherigen Logo. Die lineare Strichstärke und insbesondere der fehlende Stamm im D verleihen der Wortmarke einen technischen Look. Der im bisherigen Logo enthaltene rote Unterstrich entfällt künftig.
Die Bildmarke bleibt erhalten, wurde allerdings kaum merklich verändert. Die Strichstärke ist marginal dicker. Bei diesem Logo handelt es sich um das traditionelle Markenzeichen von Magirus-Deutz, das erstmals im Jahr 1925 verwendet wurde und eine stilisierte Silhouette des Ulmer Münsters in Kombination mit einem M für Magirus darstellt.
Unter next.deutz.com wird die Transformation des Unternehmens in Verbindung mit dem neuen visuellen Erscheinungsbild dokumentiert und präsentiert.
Begleitet wurde der Designprozess durch die Agentur Strichpunkt Design.
Kommentar
Ein Farbspektrum mit Differenzierungsqualität. Zwischen den vielen ultramarinblauen Unternehmensidentitäten, wie sie in der Industriebranche bestehen (siehe ähnliche Beiträge unten), sticht Deutz hervor.
Farbnamen wie „Energy Red“, „Dark Steel“, „Medium Steel“, „Light Steel“ und „Visionary Yellow“ lassen die Intention erkennen, der Marke eine über das Visuelle hinausgehende Sinnhaftigkeit zu verleihen. Der Farbname ist zweierlei: Selbstanspruch (nach innen gerichtet) und Botschaft (nach außen signalisierend). „Visionary“ wird zum Auftrag und zur Zielvorgabe. Mit Farbnamen wird Politik gemacht! In Bezeichnungen wie „Cadenabbia-Türkis“ und „Rhöndorf-Blau“ ist die politische Dimension derlei Namen besonders offensichtlich. Von beidem versprechen sich die jeweils Verantwortlichen eine Wirkung, von der Strahlkraft der betreffenden Farbe und von der Bedeutung des zugehörigen Farbnamens.
Bildmarke und Wortmarke bilden kein harmonisches Ganzes, so jedenfalls meine persönliche Wahrnehmung. Die jeweiligen Zeichen korrespondieren nicht wirklich miteinander. Beim bisherigen Logo ist es die gemeinsame Mittelachse, die beide Element bündelt. Auch von der Statik her ist dieses Zeichen ganz anders. Die Wortmarke bildet eine Art Sockel, verankert das Gesamtgebilde. Im neuen Logo begegnen sich Bildmarke und Wortmarke hingegen auf zwei unterschiedlichen Grundlinien. Die gedachte Senkrechte im offenen „D“ trifft zur linken Seite auf zwei Schrägen. Es fehlt das Verbindende. Die „Not“ wird kurzerhand zur Tugend erklärt, könnte man kommentieren. Statt gemeinsam, lässt man beide Zeichen einzeln in Erscheinung treten, wie im Webauftritt unter deutz.com, wo die Wortmarke „DEUTZ“ als alleiniger Hauptabsender dient, während das M-Signet als responsive Variante fungiert. Auch in anderen Anwendungen (Flaggen, Social Media) sind Wortmarke und Bildmarke jeweils solitär abgebildet. Eine Handhabe, die einer gängigen Praxis entspricht (siehe Deutsche Bank, Lufthansa, Mercedes, u.a.).
Insgesamt eine sinnvolle zudem optisch ansprechende Weiterentwicklung.
Mediengalerie
Weiterführende Links
UX/UI & Webdesign
Im Kreativbusiness tätig, aber unsichtbar?! › PAGE online
»Sichtbarkeit ist eine Form von unternehmerischer Vorsorge«, sagt Jana Weithaler. Das gelte auch für die Preisgestaltung, nicht nur für Akquise. Earned Media kann dabei helfen, die Auffindbarkeit zu steigern – in vielen Fällen bringt das langfristig mehr als ein Social-Media-Post.
UX/UI & Webdesign
Umwerfend modern: Pentagram rebrandet St. Paul’s Cathedral › PAGE online
Our 18th century doors are open: Pentagram hat die legendäre St. Paul’s Cathedral, Gotteshaus, Wahrzeichen und Touristenattraktion mit einer neuen Visual Identity versehen, die alle willkommen heißt – und bei der die Steinmetze der Kathedrale eine besondere Rolle spielten.
-
Künstliche Intelligenzvor 3 Monaten
Top 10: Die beste kabellose Überwachungskamera im Test – Akku, WLAN, LTE & Solar
-
Social Mediavor 3 MonatenCommunity Management und Zielgruppen-Analyse: Die besten Insights aus Blog und Podcast
-
Entwicklung & Codevor 2 MonatenCommunity-Protest erfolgreich: Galera bleibt Open Source in MariaDB
-
Künstliche Intelligenzvor 2 MonatenBlade‑Battery 2.0 und Flash-Charger: BYD beschleunigt Laden weiter
-
Künstliche Intelligenzvor 2 Monaten
Top 10: Der beste Luftgütesensor im Test – CO₂, Schadstoffe & Schimmel im Blick
-
Apps & Mobile Entwicklungvor 2 MonatenMähroboter ohne Begrenzungsdraht für Gärten mit bis zu 300 m²
-
Künstliche Intelligenzvor 2 MonateniPhone Fold Leak: Apple spart sich wohl iPad‑Multitasking
-
Social Mediavor 2 MonatenVon Kennzeichnung bis Plattformpflichten: Was die EU-Regeln für Influencer Marketing bedeuten – Katy Link im AllSocial Interview



Endlich Eigenmarketing starten mit Hilfe der PAGE Academy: Wie gelingt Eigenmarketing, das authentisch ist UND funktioniert? In unserem Impuls-Webinar am 11. Juni 2026 zeigt Akquise-Expertin Katrin Saleike, wie Designer:innen und Kreative mit einem klaren System regelmäßig wertschätzende Kund:innen und gut bezahlte Aufträge gewinnen.