Was ist eine Flat-Illustration?

Der Screenshot zeigt ohnehin schon ein vollgepacktes Dashboard. Daneben die Hero-Illustration: glänzendes Licht, ein ausgemaltes Gesicht, ein Himmel, der von Blau in Pfirsich verläuft. Die Oberfläche ist ruhig, das Bild ist es nicht. Kommt dir das bekannt vor?

Solche Bilder habe ich schon wieder von Landingpages genommen, weil sie gegen die Oberfläche gearbeitet haben. Ein schönerer Prompt half nichts. Der Stil war schlicht der falsche.

Eine Flat-Illustration ist eine Zeichnung aus einfachen Formen und einfarbigen Flächen: wenig Schatten, kaum Verläufe, keine vorgetäuschte Tiefe. Gemeint ist das Bild selbst, nicht die Oberfläche drumherum. Muss so ein Bild neben einer echten Benutzeroberfläche bestehen, öffne ich den Flat-Design-Generator, stelle den Stil auf Flat Design und beschreibe nur das Motiv.

So sieht eine Flat-Illustration aus

Fang bei den Füllungen an. Jede Form hat genau eine Farbe: das Hemd marineblau, die Tasse terrakotta. Dahinter liegt eine schlichte weiße oder cremefarbene Fläche, damit die Überschrift daneben Luft hat.

Menschen bekommen kein Gesicht. Ein Kreis als Kopf, ein Block als Oberkörper, und trotzdem ist sofort klar: Da sitzt jemand am Laptop. Genau so will ich es. Ein ausgearbeitetes Gesicht zieht den Blick auf sich, der eigentlich auf den Screenshot gehört.

Bleib bei wenigen Farben: zwei oder drei, die es im Produkt schon gibt, dazu ein neutraler Ton. Ein beliebiger Extraton, und das Bild wirkt aufgeklebt. Dieselbe Regel steht in meinem Beitrag über Illustrationsstile, die auf der Landingpage funktionieren: Das Bild unterstützt das Produkt, es macht ihm keine Konkurrenz.

Die Kanten sind eindeutig. Du kannst auf jede Form zeigen und sagen, welche Farbe sie hat. Legt sich Licht um eine Wange oder übernimmt ein Verlauf die Arbeit eines Schattens, ist es keine Flat-Illustration mehr, sondern ein Rendering. Und Renderings beißen sich mit einer klaren Oberfläche.

Flat-Illustration ist nicht Flat Design

Beide Begriffe tauchen oft in derselben Suche auf, meinen aber verschiedene Dinge.

Flat Design ist eine Art, Benutzeroberflächen zu gestalten. Verbreitet hat es sich, nachdem Microsoft 2010 mit Windows Phone 7 die Designsprache Metro einführte und sie in Windows 8 übernahm, das im Oktober 2012 erschien. Apples eigene Website zog um 2013 nach.

Den Artikel der Nielsen Norman Group über Flat UI und klickbare Bedienelemente schicke ich im Team bis heute als Warnung herum. Ist jedes Bedienelement ein flächiges Rechteck, weiß niemand mehr, was sich anklicken lässt. Spätere Ansätze, oft „Flat 2.0“ genannt, darunter die Elevation in Material Design, geben Buttons und Panels deshalb wieder einen leichten Schatten, damit der Bildschirm lesbar bleibt.

Eine Flat-Illustration kann auf so einem Bildschirm stehen und trotzdem schlichter sein als die Buttons. Der Button braucht vielleicht einen Schatten, damit man ihn als klickbar erkennt. Das Hero-Bild nicht. Gibst du dem Bild dieselben Schatten, schreien zwei Ebenen um die Wette.

Flat Design baut den Bildschirm. Eine Flat-Illustration ist das Bild, das du darauf setzt.

Flat-Illustration neben Line Art, 3D und Kinderbuch-Stil

Illustro hat vier Stile. Der für Flat-Illustrationen heißt im Editor Flat Design, nach dem Look, nicht nach der Oberfläche. Zu ihm greife ich, wenn die Datei in ein Produktlayout muss und trotzdem als SVG herauskommen soll. Die anderen drei sind kein „Flat, nur schöner“, sondern ganz andere Bilder.

Auch Line Art ist eine Vektorgrafik, Farben ändern funktioniert also. Nur wirkt das Bild wie mit Tusche gezeichnet und nicht wie aus Flächen gebaut. Zum Line-Art-Generator wechsle ich, wenn das Layout eher ein Diagramm als eine Szene braucht.

Eine 3D-Illustration ist matt, rundlich und ausgeleuchtet wie ein kleines Objekt im Fotostudio. Als SVG lässt sie sich nicht exportieren, und eine Blender-Datei ist sie auch nicht. Wirkt Flat Design neben einem verspielten Produkt zu dünn, lies zuerst Maskottchen in 3D ohne Blender, statt dem Stil eine Aufgabe aufzuzwingen, die ihm nicht liegt.

Der Kinderbuch-Stil ist absichtlich warm. In einer Kindergeschichte ist das genau richtig, auf einer Einstellungsseite nicht. Kinderbuch-Illustrationen bleiben also in der Geschichte. Auch dieser Stil liefert eine Pixelgrafik: Die Farben einzelner Pfade änderst du hier nicht wie bei Flat Design.

Wo eine Flat-Illustration ihre Stärken ausspielt

Empty States, Onboarding, eine Feature-Reihe unter der Überschrift, eine Folie, die zur Website passen soll: Überall dort erklären Text und Screenshot das Produkt. Das Bild muss die Situation nur auf einen Blick erkennbar machen, mit einer Person, einem Laptop, einer Pflanze oder einem leeren Posteingang.

Ein breiter Hero-Bereich braucht Leerraum. Füllt das Bild jede Ecke, hat die Überschrift keinen Platz mehr. Beschreib im Prompt ein einziges Motiv auf schlichtem Hintergrund und prüf den Ausschnitt auf dem Smartphone, bevor du dich auf die Desktopversion festlegst.

Soll dieselbe Person durch einen ganzen Ablauf führen, ist das ein eigenes Problem. Ein neuer Durchlauf hält ihr Aussehen nicht fest. Dafür gibt es das Illustrations-Set.

Du schreibst ein Thema und einen Steckbrief der Figur, planst die Szenen mit Illustrations-Set planen (das Planen ist kostenlos) und klickst dann auf Figur festlegen. Das Charakterblatt kostet 3 Credits, und du bestätigst es, bevor die erste Szene entsteht. Jede Szene kostet weitere 3 Credits, weil Sets immer mit Illustro MAX generiert werden. Ein Set mit 4 Szenen kostet also 15 Credits.

Erwarte eine Figur, die man in jeder Szene wiedererkennt, keinen pixelgenauen Zwilling.

Wann ich die Finger von diesem Stil lasse

Wenn die Pointe im Gesicht steckt. Figuren im Stil Flat Design bekommen weder Augen noch Mund. Lebt die Idee vom Gesichtsausdruck, bist du hier falsch.

Bei einem Bilderbuch. Da lebt alles vom Weichen, und der Kinderbuch-Stil liefert ohnehin keine SVG.

Wenn das Maskottchen wie ein Spielzeug auf dem Tisch wirken soll. Das ist ein Fall für die 3D-Illustration, als PNG oder JPEG.

Bei einem Logo. Kleine flächige Formen können gut lesbar sein, aber Illustro ist kein Logo-Generator. Ein Zeichen, das auf tausend Gegenstände gedruckt wird, gehört nach wie vor in professionelle Hände.

Wenn die Marke schon ein eigenes Illustrationssystem hat, das ein Prompt nicht abbilden kann. Mit Flat Design hast du einen Entwurf, der noch diese Woche online gehen kann. Die Art Direction für das Hero-Motiv einer Kampagne ersetzt das nicht.

So promptest du eine Flat-Illustration, deren Farben du ändern kannst

Diesen Prompt kopiere ich wirklich so hinein und passe ihn dann an:

„Person am Laptop, Seitenansicht, einfache geometrische Formen, marineblaues Hemd, Terrakotta-Tasse, cremefarbener Hintergrund, keine Gesichtszüge, keine Verläufe“

Nenn das Motiv, die Pose und zwei oder drei Füllfarben. Lass „cinematic“, „8k“ und „dramatisches Licht“ weg. Solche Wörter fordern genau die Tiefe an, die du vermeiden willst.

Ein Prompt, der nach Kamera klingt, ergibt keine Flat-Illustration. „Cinematic, Frau in einem sonnendurchfluteten Büro, detailliertes Gesicht, weiches Bokeh“ verlangt nach einem Foto. Die Flat-Version nennt Formen und Füllfarben und sagt ausdrücklich: kein Gesicht, kein Verlauf.

Sieht das erste Ergebnis trotzdem nach Rendering aus, generiere es mit Illustro Light neu, bevor du MAX-Credits für eine Szene ausgibst, die du gar nicht willst. Derselbe Gedanke steckt in Icons als SVG erstellen und die Farben später noch ändern: Beschreib eine Grafik, kein Foto.

Dann geht es an die Einstellungen.

1. Stell den Stil auf Flat Design.
2. Nimm Illustro Light (1 Credit), solange du mit der Pose noch experimentierst. Wechsle zu Illustro MAX (2 Credits), sobald die Szene steht, die du veröffentlichen willst. Der Editor startet im Light-Modus, also prüf den Modus, bevor du auf Generieren klickst.
3. Wähl ein Format: Quadrat (1024×1024), Hochformat (1024×1536) oder Querformat (1536×1024). Quadrat für ein Element in der Oberfläche, Querformat für den Hero-Bereich. Eigene Pixelmaße kannst du nicht eingeben.
4. Stimmt die Pose, aber das Gelb nicht, öffne Farben ändern. Das kostet nichts. Du ersetzt eine Farbe überall, wo sie vorkommt, oder klickst eine einzelne Form an und änderst nur sie.
5. Ein neues Objekt, etwa eine Topfpflanze neben dem Laptop, ist ein Fall für Mit KI bearbeiten (3 Credits). Farben ändern kann nichts Neues zeichnen.
6. PNG und JPEG lädst du kostenlos herunter. Als SVG exportieren kostet bei generierten Bildern 1 Credit. Die Datei setzt du mit dem Figma-Plugin „Illustro AI“ in Figma ein, oder du exportierst sie und ziehst sie selbst auf die Arbeitsfläche.

Du hast schon ein Foto mit der passenden Pose? Dann nimm Foto in Illustration umwandeln. Das Tool liefert ausschließlich Flat Design und kostet 3 Credits. Danach änderst du die Farben wie bei jedem anderen Bild im Flat Design. Zeigt das Foto Menschen, lade es nur hoch und veröffentliche die Illustration nur, wenn sie damit einverstanden sind. Bei Kindern entscheiden die Eltern.

Häufig gestellte Fragen

Was bedeutet „flat“ bei Illustrationen?

Flat heißt, dass das Bild keine Tiefe vortäuscht. Die Formen liegen auf einer Ebene, die Farben bleiben flächig, Schattierung gibt es kaum oder gar nicht. In einem Produktlayout sorgt genau dieser Look dafür, dass die Illustration nicht mit Buttons, Schrift und Screenshots konkurriert. Siehst du auf einer Wange, woher das Licht kommt, ist es kein Flat-Look mehr.

Wofür nutzt man Flat-Illustrationen?

Für Abschnitte auf Websites, das Onboarding in Apps, Empty States und Folien, also überall, wo eine einfache Szene zur Oberfläche passen muss. Teams greifen dazu, wenn der Screenshot die Hauptrolle spielt und das Bild nur eine Person, einen Gegenstand oder einen leeren Posteingang zeigen soll. Als SVG exportierst du, wenn die Datei in verschiedenen Größen gebraucht wird. Und mit wenigen Farben kann das Bild die Farben des Produkts übernehmen.

Ist eine Flat-Illustration dasselbe wie Flat Design?

Nein. Flat Design ist ein Stil für Benutzeroberflächen. Metro erschien 2010 auf Windows Phone 7, Windows 8 brachte Metro im Oktober 2012 auf den Desktop, und die Oberflächen vieler Produkte zogen nach.

Eine Flat-Illustration ist das Bild, das du in diese Oberfläche setzt. Der Button darf weiterhin einen kleinen Schatten haben, damit er klickbar wirkt. Das Bild darf schlichter bleiben als das Bedienelement.

Sind Flat-Illustrationen Vektordateien?

In Illustro wird aus dem Stil Flat Design eine SVG, deren Farben du ändern kannst. Der Download dieser SVG kostet 1 Credit, PNG und JPEG sind kostenlos.

Mit Farben ändern tauschst du eine Füllfarbe aus oder löschst eine Form. Neues dazuzeichnen wie mit dem Zeichenstift kann das Tool nicht. Kinderbuch und 3D-Illustration bleiben Pixelgrafiken, für diese Stile gilt das also nicht.

Wie nennt man eine Flat-Zeichnung?

Gängig sind auch Flat-Design-Illustration, Vektorillustration im Flat Design oder, auf Englisch, Flat Vector Illustration. Ich sage „Flat“ zu flächigen Formen mit kaum Schattierung. Besteht das Bild vor allem aus Umrissen, ist es Line Art, kein Flat. Sieht es aus wie eine Knetfigur, ist es eine 3D-Illustration.

Darf ich eine Flat-Illustration kommerziell nutzen?

Ja, sobald du Credits gekauft hast: Mit jedem einmaligen Credit-Paket bekommst du die kommerzielle Nutzung im Rahmen der Nutzungsbedingungen, auch für Bilder, die du vor dem Kauf erstellt hast. Bis zum ersten Kauf darfst du sie nur privat nutzen. Zum Trainieren oder Testen anderer KI-Systeme darfst du die Dateien nicht verwenden.

Auf der Seite Preise stehen die kommerziellen Nutzungsrechte bei den einmaligen Credit-Paketen. Braucht eine Kampagne ein eigenes Illustrationssystem für die Marke, ist nach dem Entwurf oft trotzdem eine Illustratorin oder ein Illustrator gefragt.