Dieser Artikel wurde am 6. November 2026 verfasst.
KI-Werkzeuge verändern sich rasant. Das Grundgerüst einer Seite bleibt dagegen gleich. Kopfzeile (header), Hero-Bereich (hero), Abschnitt (section), Fußzeile (footer), Navigation (navigation) und Karte (card) – wer diese sechs Begriffe beherrscht, kann den Aufbau einer ersten Seite bereits präzise beschreiben. Menüstrukturen innerhalb von Produkten werden sich weiterentwickeln; betrachten Sie diese Übersicht als Strukturplan einer Seite, nicht als Anleitung für ein bestimmtes Software-Werkzeug.
Bevor es um visuelle Gestaltung geht, erfüllt eine Seite eine Abfolge klarer Aufgaben. Ein Element zeigt, wo man sich befindet. Ein anderes erklärt einmalig den Zweck des Angebots. Ein weiteres wiederholt strukturierte Informationen. Ein nächstes weist den Weg zu weiteren Inhalten. Und ein letztes schließt die Seite ab. Werden diese Aufgaben im Prompt nicht benannt, erzeugt ein KI-Modell häufig ein digitales Plakat: ein riesiges Bild, schwebender Text und kein strukturierter Weg nach unten. Das Ergebnis sieht auf den ersten Blick fertig aus, lässt sich auf einem Smartphone jedoch kaum bedienen.
Benennen Sie die strukturellen Bausteine im Prompt auf Englisch und beschreiben Sie die konkreten Inhalte darunter in Ihrer Sprache. Gibt es in Ihrer Sprache einen festen Begriff für ein Element, nutzen Sie ihn und setzen Sie die englische Bezeichnung bei der ersten Erwähnung in Klammern dahinter. Existiert kein etablierter Begriff, erfinden Sie keinen neuen: Eine kurze funktionale Erläuterung zusammen mit dem englischen Fachbegriff erfüllt den Zweck vollständig.
Sechs Bereiche in der Reihenfolge der Nutzung
Eine Kopfzeile (header) bildet das schmale Band am oberen Bildschirmrand. Sie enthält den Namen der Organisation und die wichtigsten Auswege. Sie ist kein zweiter Hero-Bereich. Wenn alle Inhalte in die Kopfzeile gepackt werden, verliert die Seite ihren klaren Einstieg und wirkt überladen.
Ein Hero-Bereich (hero) ist das erste große Sichtfeld. Er enthält eine Hauptaussage, einen unterstützenden Satz und eine zentrale Handlungsaufforderung. Eine Praxis könnte hier ihr Behandlungsfeld nennen und „Termin buchen“ anbieten; ein Laden könnte sein Angebot zusammenfassen und „Heutiges Angebot ansehen“ wählen. Ein Hero-Bereich, der bereits das gesamte Geschäft erklären will, wirkt wie ein oben angeklebter Prospekt. Der Rest der Seite wiederholt sich dann nur noch, und Nutzer auf dem Smartphone gelangen nie zu Preisen oder Adressen.
Ein Abschnitt (section) behandelt ein abgegrenztes Thema unter einer eigenen Überschrift: Öffnungszeiten, Preise, Team oder häufige Fragen. Abschnitte machen eine lange Seite erst überfliegbar. Fordern Sie Abschnitte anhand der konkreten Fragen Ihrer Besucher an, anstatt nur das Wort „Abschnitt“ zu verwenden. Eine Anweisung wie „Ein Abschnitt mit dem Titel Öffnungszeiten, wobei die Wochentage als reiner Text und nicht als Grafik eingebunden sind“ übersteht jede KI-Umsetzung problemlos. Das Bild eines gedruckten Fahrplans tut das nicht.
Eine Fußzeile (footer) bildet den Abschluss. Sie enthält die Adresse, nochmals wichtige Zeiten sowie Kontaktmöglichkeiten. Personen, die auf einer Seite nicht sofort fündig werden, scrollen gezielt ganz nach unten. Eine Fußzeile, die lediglich aus einer dekorativen Leiste besteht, lässt diese Nutzer im Stich.
Eine Navigation (navigation) fasst die wichtigsten Zielorte zusammen, meist platziert in der Kopfzeile. Fünf Einträge sind auf einem Smartphone bereits viel. Alles darüber gehört hinter ein eigenes Steuerelement und nicht in eine Reihe winzig werdender Wörter. Verlangen Sie keine Navigation, die jede einzelne Abschnittsüberschrift spiegelt – das wäre ein Inhaltsverzeichnis, das sich als Menü ausgibt.
Eine Karte (card) ist ein wiederkehrender Baustein für gleichartige Informationen: eine Dienstleistung, ein Kurs oder ein Produkt. Jede Karte nutzt denselben Aufbau: eine Grafik oder ein Bild (falls sinnvoll vorhanden), eine Überschrift, einen Erklärsatz und eine Aktion. Karten, die jeweils völlig unterschiedliche Anordnungen erfinden, bilden kein Ensemble, sondern wirken wie mehrere nebeneinander geklebte Zettel.
Dieselben Karten auf zwei Bildschirmbreiten
Eine Seite, die ausschließlich für breite Monitorbildschirme konzipiert wird, bricht auf Geräten in Regionen zusammen, in denen das Smartphone der primäre Computer ist. Definieren Sie das Verhalten der Spalten explizit. Auf einem breiten Bildschirm stehen drei Karten nebeneinander; auf einem schmalen Bildschirm wandern die Karten untereinander. Der Inhalt der Karte bleibt gleich – nur die Anordnung passt sich an. Das ist das Prinzip eines responsiven Layouts (responsive layout), und es handelt sich um eine funktionale Regel, nicht um eine Frage des Geschmacks. Die vage Aufforderung „Mach es responsiv“ überlässt dem Modell die Wahl der Umbrüche, was oft dazu führt, dass Buttons verdeckt werden. Die Anweisung „Drei Spalten auf breiten Schirmen, eine Spalte auf schmalen Schirmen, wobei die Handlungsaufforderung immer sichtbar bleibt“ verhindert dies.
Tablets lassen sich mit zwei Spalten dazwischen einordnen. Das können Sie vorgeben, müssen es aber nicht zwingend. Der Wechsel von eins auf drei Spalten vermittelt das Prinzip bereits vollständig: Der Inhalt ist eine fortlaufende Liste; die nebeneinanderliegende Reihe ist lediglich eine Anpassung an verfügbare Breite.
Eine fixierte Kopfzeile (sticky header) – die beim Scrollen am oberen Bildschirmrand stehen bleibt – ist optional. Sie bringt Vorteile, wenn das Menü als ständiger Orientierungspunkt dient. Sie stört jedoch, wenn sie ein Drittel des Displays auf einem kleinen Smartphone blockiert. Verlangen Sie eine fixierte Kopfzeile nur dann, wenn der schnelle Rückweg wichtiger ist als der Lesefluss des nächsten Absatzes. Verwenden Sie den englischen Fachbegriff im Prompt, aber nennen Sie auch die Bedingung: Sie muss kompakt bleiben und darf die erste Überschrift der Seite nicht verringern oder verdecken.
Eine Seite, die fertig aussah, aber unbenutzbar war
Eine lokale medizinische Praxis bat ein KI-Tool um „eine schöne Startseite“. Das Modell lieferte ein großes Foto eines Flurs, einen quer darüber gelegten Slogan sowie eine Reihe blasser Symbole ohne erklärenden Text. Auf dem Bildschirm eines Laptops im Büro sah das ruhig aus. Auf dem Smartphone an der Bushaltestelle verdeckte der Slogan den Texteingang, die Symbole verschoben sich zu einem unlesbaren Streifen, und die Öffnungszeiten waren fest in die Bilddatei integriert – womit sie weder übersetzt noch von einem Bildschirmleseprogramm (screen reader) erfasst werden konnten. Kein Element dieser Seite entsprach den Anforderungen an eine Kopfzeile, einen Hero-Bereich, einen Abschnitt oder eine Karte: Es war ein Poster, das Scrollen gelernt hatte.
Das zweite Briefing benannte die Bausteine präzise und verzichtete auf Adjektive wie „schön“. Kopfzeile mit dem Praxisnamen und drei Verweisen (Behandlungen, Zeiten, Anfahrt). Hero-Bereich mit einem Satz und der Schaltfläche „Termin anfragen“. Drei Abschnitte mit reinem Text. Ein Kartensatz für die drei Behandlungsarten (drei nebeneinander auf dem Monitor, untereinander auf dem Smartphone). Fußzeile mit der Adresse im Textformat. Die Seite wurde zweckmäßig und genau dadurch für Patienten an der Bushaltestelle nutzbar. Das Flurfoto hatte weiterhin seinen Platz – im Hero-Bereich, kleiner als der Satz. Es war nicht mehr die gesamte Seite.
Das ist die konkrete Wirkung dieser sechs Fachbegriffe. Sie hindern das KI-Modell daran, die gesamte Ausgabe für rein visuelle Atmosphäre aufzuwenden. Atmosphäre gehört in ein Element hinein; sie kann das Element nicht ersetzen. Egal ob Sie Ihr Briefing auf Deutsch, Indonesisch oder Hindi vorbereiten: Schreiben Sie die sechs englischen Fachbegriffe in den Promptsatz und formulieren Sie die eigentlichen Inhalte in Ihrer Sprache. Die Strukturbausteine sind universell; die Inhalte bleiben dort, wo die Menschen leben.
Was dies für Ihr erstes Briefing bedeutet
Ein erstes Anforderungsspektrum lässt sich in einem einzigen Absatz zusammenfassen:
Build a page with a header (the name and three links), a hero (one sentence and one button), three sections, a row of cards that becomes a single column on a narrow screen, and a footer with the address as text.
Darunter beschreiben Sie in Ihrer Sprache, worum es in den drei Abschnitten konkret geht. Das KI-Modell benötigt Ihre Sprache nicht, um eine Kopfzeile an der richtigen Stelle zu platzieren. Sie benötigen Ihre Sprache jedoch, um festzulegen, dass die Abschnitte Öffnungszeiten, Preise und Anfahrt behandeln sollen – statt dreimal denselben Werbeslogan zu wiederholen.
Dies entspricht genau der Struktur, die fast jede kleine Einrichtung oder jedes Projekt in der Praxis benötigt. Es ist zugleich das Layout, das eine KI mit unnötigen Effekten überlädt, wenn man lediglich „modern und übersichtlich“ verlangt. Modernität ist kein struktureller Bereich einer Webseite. Kopfzeile, Hero-Bereich, Abschnitt, Fußzeile, Navigation und Karte sind es. Lernen Sie diese Fachbegriffe, nutzen Sie sie auf Englisch in Ihren Prompts und halten Sie die Fakten in der Sprache der Menschen, die die Seite später lesen werden.
Die nächste Entscheidung betrifft keine weitere Seitenregion. Es geht darum, wie sich die Oberfläche verhält, wenn die Seite vom Nutzer eine Eingabe verlangt oder zusätzliche Daten anzeigt, ohne ihn auf eine neue Seite weiterzuleiten. Das folgt anderen Regeln als ein Abschnitt – und ist Gegenstand des nächsten Artikels.