KI-Webseitenprojekt: Gestaltung begründen statt nur erzeugen

Das Problem

Eine KI kann einen Webseitenentwurf liefern, bevor die Klasse geklärt hat, für wen die Seite gedacht ist. Farben und Animationen beeindrucken, während wichtige Informationen fehlen. Frau Keller möchte erkennen, ob Jugendliche hinter der sichtbaren Oberfläche eigene Entscheidungen treffen.

HTML beschreibt die Struktur einer Webseite; CSS legt deren Darstellung fest, etwa Abstände und Farben. Diese Begriffe müssen nicht zu einem vollständigen Programmierkurs führen. Für das Projekt genügt ein kleiner, überprüfbarer Zusammenhang zwischen Seitenzweck, Inhalt und Gestaltung.

Verankern Sie das Projekt in den fachlichen Zielen Ihrer Stufe und im Modul Medien und Informatik des Lehrplans 21. Frau Keller kann im Kollegium klären, ob Gestaltung, Informationsvermittlung oder Programmierverständnis im Vordergrund stehen soll. Diese Wahl bestimmt Material, Hilfe und Beurteilung.

So lösen Sie es mit KI – Schritt für Schritt

1. Zielgruppe und Aufgabe beschreiben. Lassen Sie jede Gruppe auf Papier festhalten, wer die Seite nutzen soll und was diese Person dort finden muss. Wählen Sie ein fiktives Vorhaben, etwa einen schulischen Tauschmarkt. Verzichten Sie auf echte Kontaktdaten und persönliche Profile.

1. Eine Skizze ohne KI zeichnen. Die Jugendlichen ordnen Überschrift, Informationen und Navigation, also die Wege zwischen Seitenbereichen. Fragen Sie, welche Information zuerst sichtbar sein sollte. Sichern Sie die Skizze als Ausgangspunkt, damit spätere Änderungen begründet statt bloss übernommen werden.

1. Einen begrenzten Entwurf erstellen lassen. Öffnen Sie die freigegebene Lernumgebung und fordern Sie eine einfache Seite mit HTML und CSS an. Schliessen Sie externe Einbindungen, Formulare und unnötige Skripte aus. Lassen Sie die KI erklären, welcher Bereich welchen Zweck erfüllt.

1. Den Entwurf in einer sicheren Vorschau prüfen. Nutzen Sie die schulisch bereitgestellte Vorschau, keine öffentliche Veröffentlichung. Die Gruppe kontrolliert zuerst Inhalt und Reihenfolge. Danach prüft sie, ob die Seite bei vergrösserter Schrift und auf einer schmalen Ansicht noch verständlich bleibt.

1. Eine Gestaltung bewusst verändern. Lassen Sie beispielsweise den Kontrast zwischen Schrift und Hintergrund oder die Reihenfolge der Abschnitte überarbeiten. Jede Änderung bekommt eine Begründung aus Sicht der Zielgruppe. Vergleichen Sie die Fassungen am selben Nutzungsszenario, damit der Effekt erkennbar wird.

1. Mit einer fremden Person erproben. Eine andere Gruppe sucht eine festgelegte Information, ohne mündliche Zusatzhilfe. Die Beobachtenden notieren Hindernisse und überarbeiten die Seite. Zum Abschluss erklären alle einen eigenen Entscheid und zeigen die dazugehörige Stelle im Entwurf oder Quelltext.

Vorlage zum Kopieren

Der folgende Prompt, also ein Arbeitsauftrag an die KI, unterstützt Sie als Lehrperson bei der Vorbereitung.

Ich bin Lehrperson und plane ein betreutes Webseitenprojekt.
Stufe: [Stufe], fiktiver Seitenzweck: [Zweck], Zielgruppe: [Gruppe]
Erstelle einen Arbeitsauftrag mit Papierskizze, einfacher HTML/CSS-Fassung und Nutzungsprobe.
Formuliere Kriterien für verständliche Inhalte, lesbare Gestaltung und begründete Änderungen.
Verlange keine Veröffentlichung, persönlichen Daten, externen Dienste oder Formulare.
Ergänze Fragen, mit denen Jugendliche einen eigenen Gestaltungsentscheid erklären.
Kennzeichne technische Punkte, die ich vor dem Unterricht prüfen muss.

Ersetzen Sie die Platzhalter durch Ihre Stufe und einen vollständig fiktiven oder freigegebenen Sachfall; prüfen Sie den Entwurf vor dem Einsatz fachlich.

Welche Begründung trägt?

Sammeln Sie im Projektblatt jeweils Absicht, Beobachtung und Änderung. Für jüngere Gruppen reichen Zeichnungen mit kurzen Erläuterungen. Ein langer technischer Bericht kann das Nachdenken über die Nutzerinnen und Nutzer sonst unnötig verdecken.

Worauf Sie achten müssen

• Daten schützen: Geben Sie keine Namen, Leistungsdaten, privaten Chats oder anderen Personendaten von Lernenden in öffentliche KI-Dienste ein. Verwenden Sie erfundene Sachfälle und die von Ihrer Institution freigegebenen Arbeitswege.
• Antworten prüfen: KI kann falsche Angaben und überzeugend klingende Erklärungen liefern. Vergleichen Sie entscheidende Aussagen mit dem Fachmaterial, bevor Lernende damit weiterarbeiten.
• Grenzen beachten: KI-erzeugter Code, also die technischen Anweisungen der Seite, kann Fehler oder unerwünschte Einbindungen enthalten. Lassen Sie unbekannte Bestandteile fachkundig prüfen und nutzen Sie eine vorbereitete Umgebung. Eigene Texte und freigegebene Bilder verhindern viele Rechteprobleme; eine Veröffentlichung braucht eine gesonderte Prüfung.
• Teilhabe ermöglichen: Passen Sie Sprache und Unterstützung an Alter und Vorwissen an. Stellen Sie vorbereitete Ausgaben oder eine Aufgabe ohne eigenes Konto bereit, damit private Geräte und Abonnements nicht über Lernchancen entscheiden.
• Zuständigkeit klären: Kantone und Bildungsinstitutionen regeln den Einsatz unterschiedlich. Klären Sie rechtliche Einzelfragen mit der zuständigen Fachstelle; die Unterrichtsvorlage ist keine rechtliche Freigabe.

Ein Beispiel aus der Praxis

Ein Beispiel: Frau Keller begleitet an einer Zürcher Sekundarschule eine fiktive Tauschmarktseite. Die erste KI-Fassung setzt ein grosses Schmuckbild an den Anfang. Der Hinweis, welche Gegenstände angenommen werden, steht weit unten.

Bei der Nutzungsprobe sucht die Nachbargruppe vergeblich nach dieser Information. Die Jugendlichen kürzen den Bildbereich, verschieben die Annahmeregeln nach oben und beschriften die Navigation genauer. In ihrer Erklärung beziehen sie sich auf die beobachtete Suche. Der sichtbare Fortschritt besteht damit in besserer Orientierung und begründeter Gestaltung, nicht in einer aufwendigeren Oberfläche.

So hilft Ihnen Alpasana

Mit dem Angebot KI-Kurse für Kinder und Jugendliche bietet Alpasana einen passenden Zugang zur eigenen Weiterbildung. Die Kurse behandeln KI-Grundlagen, klare Arbeitsaufträge und einen fairen Umgang mit KI. Kreative Projekte mit Webseiten, Bildern und Musik gehören zum belegten Angebot. Gelernt wird online im eigenen Tempo; für jüngere Kinder wird die Begleitung durch Erwachsene empfohlen.

Webseiten mit HTML und CSS sind ausdrücklich Teil des Angebots. Frau Keller kann daran eigene Aufgaben zum Begründen und Prüfen von Gestaltung anschliessen.

Häufige Fragen

Muss die Seite im Internet stehen?

Nein, eine lokale oder schulische Vorschau reicht für das Lernziel. Die Veröffentlichung bringt zusätzliche technische und rechtliche Aufgaben mit sich. Entscheiden Sie darüber getrennt, nachdem Inhalt und Gestaltung geprüft sind.

Wie viel Code müssen Lernende verstehen?

Das hängt vom Fachziel ab. Für Gestaltungsreflexion sollten sie mindestens die bearbeiteten Bereiche zuordnen und eine Änderung erklären können. Wenn Programmierverständnis geprüft wird, braucht es zusätzlich eigene kleine Anpassungen ohne vollständige KI-Lösung.

Wie vermeiden wir Benachteiligung durch Vorkenntnisse?

Stellen Sie eine gemeinsame Grundstruktur bereit und beurteilen Sie die begründete Verbesserung. Erfahrene Jugendliche können zusätzliche Prüfaufgaben übernehmen. Eine glitzernde Zusatzfunktion darf eine unklare Zielgruppenentscheidung nicht überdecken.

Für die Weiterarbeit passen KI-Kompetenz mit selbst komponierter Musik erkunden, KI als Gruppenmitglied: Verantwortung im Schulprojekt klären.