Glanz: aiMOOC über GPT aiMOOC Action erstellt

2026-09-13T05:47:21Z

aiMOOC über GPT aiMOOC Action erstellt

Neue Seite

{{T}}

{{BR}}
= IM5 - Bilder digital gestalten =

{{BR}}
= Einleitung =
Digitale Bilder begegnen Dir jeden Tag: auf Präsentationsfolien, Plakaten, Lernkarten, Webseiten, Kurscovern und in sozialen Medien. Gute Gestaltung bedeutet dabei nicht, möglichst viele Effekte einzubauen. Ein gutes digitales Bild hilft den Betrachtenden, '''schnell zu erkennen, worum es geht'''. In diesem aiMOOC lernst Du deshalb grundlegende Werkzeuge der [[Bildgestaltung]], des [[Grafikdesign|Grafikdesigns]] und der [[Typografie]] kennen.

Der Kurs richtet sich an '''Klasse 5'''. Du arbeitest mit Bildausschnitt, Kontrast, Schrift, Farbe, Formen, Freiraum und Layout. Anschließend setzt Du diese Bausteine in fünf typischen Schulprojekten ein: '''Referatsbild, Veranstaltungsplakat, Lernkarte, Schülerfirmen-Poster und Kurscover'''.

Ein wichtiger Grundsatz begleitet den ganzen Kurs:

{| class="wikitable" style="width:100%; text-align:center;"
|-
| style="background:#111111; color:#ffffff; padding:14px;" | '''KLAR'''
| style="background:#f2f2f2; color:#111111; padding:14px;" | '''LESBAR'''
| style="background:#ffd84d; color:#111111; padding:14px;" | '''PASSEND'''
| style="background:#bfe8ff; color:#111111; padding:14px;" | '''NICHT ÜBERLADEN'''
|}

'''Gestaltung ist dann gelungen, wenn Bild, Schrift, Farbe und Anordnung gemeinsam eine verständliche Botschaft ergeben.'''

{{BR}}
== Was bedeutet digital gestalten? ==
Beim digitalen Gestalten kombinierst Du verschiedene Elemente auf einer digitalen Fläche. Dazu können [[Fotografie|Fotos]], Zeichnungen, Symbole, geometrische Formen, Flächen, Linien und Schrift gehören. Diese Elemente werden nicht zufällig verteilt. Du entscheidest bewusst, '''was zuerst auffallen soll''', welche Informationen zusammengehören und was weniger wichtig ist.

Ein digitales Gestaltungsprogramm kann Dir viele Werkzeuge anbieten: Zuschneiden, Verschieben, Vergrößern, Drehen, Färben, Transparenz, Ebenen oder verschiedene Schriftarten. Das Werkzeug allein macht aber noch kein gutes Design. Entscheidend sind Deine Gestaltungsentscheidungen.

{| class="wikitable" style="width:100%;"
! Werkzeug
! Gestaltungsfrage
|-
| Zuschneiden
| Welcher Bildausschnitt zeigt wirklich das Wichtige?
|-
| Farbe
| Welche Kombination ist gut erkennbar und passt zur Botschaft?
|-
| Schrift
| Welche Schrift ist auch aus einiger Entfernung oder in kleiner Darstellung lesbar?
|-
| Formen
| Welche Flächen helfen beim Ordnen und Hervorheben?
|-
| Anordnung
| Was sieht man zuerst, was danach?
|}

{{BR}}
= Bildausschnitt und Bildwirkung =
Ein Foto zeigt immer nur einen Ausschnitt der Wirklichkeit. Wenn Du ein Bild zuschneidest, entscheidest Du, was sichtbar bleibt und was verschwindet. Dadurch kann sich die Aussage stark verändern.

Ein '''weiter Bildausschnitt''' zeigt mehr Umgebung. Er eignet sich, wenn der Ort wichtig ist. Ein '''enger Bildausschnitt''' lenkt die Aufmerksamkeit stärker auf ein Motiv oder Detail. Schneidest Du zu eng, kann wichtige Umgebung fehlen. Lässt Du zu viel Unwichtiges im Bild, wird die Hauptaussage schwächer.

[[Datei:Rule of thirds photo.jpg|500px|rahmenlos|center]]

Das Raster im Bild zeigt die sogenannte [[Drittel-Regel]]. Dabei wird die Fläche gedanklich in neun Felder geteilt. Wichtige Bildteile können an den Linien oder ihren Schnittpunkten liegen. Das ist '''eine mögliche Gestaltungshilfe''', aber kein Gesetz. Auch eine bewusst mittige Anordnung kann gut funktionieren.

{{#ev:youtube| https://www.youtube.com/watch?v=qjzTC65ZkXU |500|center}}

{{BR}}
== Gestaltungsaufgabe: Drei Ausschnitte, drei Wirkungen ==
Nimm ein eigenes Foto oder ein frei nutzbares Bild. Erstelle daraus drei Versionen:

{| class="wikitable" style="width:100%;"
! Version
! Auftrag
! Prüffrage
|-
| '''Detail'''
| Schneide stark auf ein wichtiges Objekt zu.
| Wird sofort klar, was im Mittelpunkt steht?
|-
| '''Umgebung'''
| Zeige deutlich mehr vom Ort.
| Hilft die Umgebung beim Verstehen?
|-
| '''Drittel'''
| Lege das wichtigste Motiv ungefähr auf eine Drittellinie.
| Wirkt die Fläche ausgeglichen?
|}

Vergleiche anschließend die drei Versionen. Entscheide nicht nur, welche am schönsten ist, sondern '''welche am besten zu Deinem Zweck passt'''.

{{BR}}
= Kontrast: Unterschiede machen sichtbar =
[[Kontrast]] bedeutet Unterschied. Starke Unterschiede helfen dabei, wichtige Informationen zu erkennen. Besonders wichtig ist der '''Hell-Dunkel-Kontrast'''. Dunkle Schrift auf hellem Hintergrund oder helle Schrift auf sehr dunklem Hintergrund ist häufig gut lesbar.

[[Datei:Kontrast.svg|380px|rahmenlos|center]]

Kontrast kann aber auch durch Größe, Form oder Farbe entstehen. Eine große Überschrift fällt stärker auf als ein kleiner Nebentext. Ein Kreis zwischen vielen Rechtecken kann Aufmerksamkeit erzeugen. Eine leuchtende Fläche zwischen zurückhaltenden Farben kann als Signal wirken.

[[Datei:Kontrast 5 Qualitätskontrast.svg|380px|rahmenlos|center]]

Für Schrift solltest Du besonders auf ausreichenden Kontrast achten. Rot auf Grün, Hellgrau auf Weiß oder Gelb auf Weiß kann schwer zu lesen sein. Verlasse Dich außerdem nicht nur auf Farbe. Wenn etwas besonders wichtig ist, kannst Du zusätzlich Form, Symbol, Größe oder Fettung verwenden.

{{BR}}
== Kontrast-Labor ==
{| class="wikitable" style="width:100%; text-align:center;"
! Beispiel
! Wirkung
! Bewertung
|-
| style="background:#ffffff; color:#111111; font-size:125%;" | '''Schwarz auf Weiß'''
| starker Hell-Dunkel-Unterschied
| meist gut lesbar
|-
| style="background:#111111; color:#ffffff; font-size:125%;" | '''Weiß auf Schwarz'''
| starker Hell-Dunkel-Unterschied
| meist gut lesbar
|-
| style="background:#fff7ad; color:#ffffff; font-size:125%;" | '''Weiß auf Hellgelb'''
| geringer Hell-Dunkel-Unterschied
| schlecht lesbar
|-
| style="background:#23406a; color:#ffe66a; font-size:125%;" | '''Gelb auf Dunkelblau'''
| deutlich unterscheidbar
| auffällig
|}

'''Mini-Auftrag:''' Erstelle in Deinem Gestaltungsprogramm zwei Versionen derselben Überschrift. Eine soll sehr gut lesbar sein, die andere absichtlich schlecht. Erkläre anschließend, wodurch der Unterschied entsteht.

{{BR}}
= Farbe bewusst einsetzen =
Farben können ordnen, hervorheben und Stimmungen unterstützen. Für eine klare Gestaltung brauchst Du meistens keine große Zahl unterschiedlicher Farben. Oft reichen eine Hauptfarbe, eine unterstützende Farbe und neutrale Töne wie Weiß, Grau oder Schwarz.

[[Datei:Color wheel.svg|400px|rahmenlos|center]]

Ein Farbkreis kann Dir zeigen, wie Farben zueinander liegen. Gegenüberliegende Farben unterscheiden sich stark. Ähnliche Farbtöne wirken oft ruhiger. Ob eine Farbkombination gut funktioniert, hängt aber nicht nur vom Farbton ab. Auch Helligkeit und Sättigung sind wichtig.

{{#ev:youtube| https://www.youtube.com/watch?v=7iY4QFqTlpE |500|center}}

Beim Gestalten für die Schule gilt: '''Farbe soll Informationen unterstützen, nicht verstecken.''' Ein Lernplakat mit sieben kräftigen Signalfarben kann unruhiger wirken als ein Layout mit wenigen gezielt eingesetzten Farben.

{{BR}}
== Farbpalette für Klasse 5: weniger ist oft mehr ==
{| class="wikitable" style="width:100%; text-align:center;"
! Rolle
! Beispiel
! Verwendung
|-
| style="background:#2457a7; color:#ffffff;" | '''Hauptfarbe'''
| Dunkelblau
| Überschriften, große Flächen
|-
| style="background:#ffd84d; color:#111111;" | '''Akzentfarbe'''
| Gelb
| wichtige Hinweise, kleine Highlights
|-
| style="background:#f3f3f3; color:#111111;" | '''Neutral'''
| Hellgrau
| Hintergrund, ruhige Flächen
|-
| style="background:#ffffff; color:#111111;" | '''Textfläche'''
| Weiß
| längere Texte
|}

'''Gestaltungsregel:''' Wenn alles bunt und auffällig ist, ist nichts mehr besonders auffällig.

{{BR}}
= Schrift und Typografie =
[[Typografie]] beschäftigt sich mit der Gestaltung von Schrift. Schrift transportiert nicht nur Wörter. Sie beeinflusst auch, wie ordentlich, verspielt, laut, sachlich oder modern eine Gestaltung wirkt.

[[Datei:SVG typography.svg|500px|rahmenlos|center]]

Für schulische Gestaltungen ist '''Lesbarkeit''' wichtiger als ein spektakulärer Effekt. Besonders bei längeren Texten solltest Du keine schwer lesbaren Zierschriften verwenden. Für eine Überschrift darf eine Schrift auffälliger sein, solange sie klar bleibt.

[[Datei:Sans-serif Font Sample.svg|420px|rahmenlos|center]]

Eine einfache Regel für Klasse 5 lautet: '''Nutze möglichst wenige Schriftarten.''' Zwei gut unterscheidbare Schriften reichen oft aus: eine für Überschriften und eine für normalen Text. Noch einfacher ist es, nur eine Schriftfamilie zu verwenden und mit Größe und Fettdruck zu unterscheiden.

{{BR}}
== Schrift-Hierarchie ==
Hierarchie bedeutet, dass man erkennt, was wichtiger und was weniger wichtig ist.

{| class="wikitable" style="width:100%;"
! Ebene
! Beispiel
! Aufgabe
|-
| style="font-size:160%;" | '''FORSCHERTAG'''
| sehr groß und fett
| Hauptüberschrift
|-
| style="font-size:125%;" | '''Experimente in der Aula'''
| mittelgroß
| Unterüberschrift
|-
| style="font-size:100%;" | Freitag, 15 Uhr
| normal
| wichtige Information
|-
| style="font-size:85%;" | Eintritt frei
| kleiner
| Zusatzinformation
|}

Betrachte Dein Layout danach aus größerer Entfernung oder verkleinert auf dem Bildschirm. Wenn die wichtigsten Informationen weiterhin klar zu erkennen sind, funktioniert die Hierarchie.

{{BR}}
= Formen, Linien und Freiraum =
Geometrische Formen können Informationen ordnen. Ein Rechteck eignet sich zum Beispiel als Textfeld, ein Kreis kann eine Zahl oder ein Symbol hervorheben, eine Linie kann Bereiche trennen. Formen haben aber '''keine überall festgelegte Bedeutung'''. Ihre Wirkung entsteht durch Zusammenhang, Farbe, Größe und Anordnung.

{| class="wikitable" style="width:100%; text-align:center;"
! Form
! Beispiel
! Möglicher Einsatz
|-
| style="font-size:250%;" | ●
| Kreis
| Hinweis, Symbol, Blickfang
|-
| style="font-size:250%;" | ■
| Quadrat
| ruhige Informationsfläche
|-
| style="font-size:250%;" | ▲
| Dreieck
| Richtung, Bewegung, Akzent
|-
| style="font-size:250%;" | ◆
| Raute
| dekoratives Ordnungszeichen
|-
| style="font-size:250%;" | ━
| Linie
| Trennung oder Verbindung
|}

Mindestens genauso wichtig wie Formen ist der '''Freiraum'''. Freiraum ist der Bereich, in dem absichtlich nichts steht. Er verhindert, dass Text, Bilder und Symbole miteinander kämpfen. Ein freier Rand um eine Überschrift kann ihre Wirkung verstärken.

{{BR}}
== Gestaltungsaufgabe: Formen ohne Chaos ==
Erstelle ein Mini-Layout nur aus '''einer Überschrift, einem Kreis, zwei Rechtecken, einer Linie und zwei Farben'''. Ordne die Elemente zuerst wild an. Erstelle danach eine zweite Version mit klarer Ausrichtung, Abständen und Freiraum. Vergleiche beide Entwürfe.

{{BR}}
= Layout: Ordnung auf der Fläche =
Ein [[Layout]] beschreibt die Anordnung aller Elemente. Ein klares Layout hilft den Betrachtenden, die Inhalte in einer sinnvollen Reihenfolge zu erfassen.

Gute Layouts nutzen oft:
# [[Ausrichtung]]: Elemente stehen an gemeinsamen Linien.
# [[Nähe]]: Dinge, die zusammengehören, stehen näher beieinander.
# [[Wiederholung]]: gleiche Farben, Formen oder Abstände verbinden Inhalte.
# [[Hierarchie]]: Wichtiges fällt zuerst auf.
# [[Freiraum]]: Zwischen Elementen bleibt Platz.

[[Datei:Konstruktive Grafik.png|420px|rahmenlos|center]]

Das Plakat zeigt, wie stark geometrische Flächen, Schrift, Kontraste und eine klare Ordnung zusammenwirken können. Du musst diesen Stil nicht nachmachen. Untersuche lieber, '''welche Elemente groß, klein, dunkel, hell, waagerecht oder senkrecht angeordnet sind'''.

{{BR}}
== Zwei einfache Layout-Muster ==
{| class="wikitable" style="width:100%; text-align:center;"
! Layout A: klare Mitte
! Layout B: Bild plus Infospalte
|-
| style="height:70px; background:#d9ecff;" | '''GROSSE ÜBERSCHRIFT'''
| style="height:70px; background:#ffe7b3;" | '''GROSSE ÜBERSCHRIFT'''
|-
| style="height:150px; background:#eeeeee;" | großes Bild
| rowspan="2" style="background:#eeeeee;" | großes Bild
|-
| kurze Information
|-
| Datum – Ort – Hinweis
| style="background:#f7f7f7;" | Datum<br>Ort<br>Hinweis
|}

Layout A eignet sich gut, wenn ein zentrales Bild im Mittelpunkt steht. Layout B kann praktisch sein, wenn Bild und Informationen deutlich getrennt werden sollen.

{{BR}}
= Fünf konkrete Use-Cases =

{{BR}}
== Referatsbild ==
Ein Referatsbild ist eine einzelne Grafik, die ein Referat eröffnet, ein wichtiges Thema erklärt oder als Titelfolie dient. Es sollte '''nicht wie eine ganze Textseite''' aussehen.

Ein gutes Referatsbild enthält meist eine klare Überschrift, ein aussagekräftiges Bild und höchstens wenige ergänzende Wörter. Wenn Dein Thema zum Beispiel „Vulkane“ lautet, brauchst Du auf der Titelfolie nicht schon die gesamte Erklärung eines Vulkanausbruchs.

'''Prüffragen:''' Passt das Bild wirklich zum Thema? Ist der Titel sofort lesbar? Gibt es genug Abstand zwischen Bild und Schrift? Ist die Bildquelle geklärt?

{{BR}}
=== Mini-Entwurf: Referatsbild ===
{| class="wikitable" style="width:100%; text-align:center;"
|-
| style="background:#1f354d; color:#ffffff; font-size:180%; padding:15px;" | '''VULKANE'''
|-
| style="height:160px; background:#dddddd;" | '''großes passendes Foto'''
|-
| style="background:#ffffff; padding:12px;" | Feuerberge der Erde
|}

{{BR}}
== Veranstaltungsplakat ==
Ein Veranstaltungsplakat soll Aufmerksamkeit wecken und gleichzeitig die wichtigsten Informationen schnell beantworten: '''Was? Wann? Wo?''' Je nach Veranstaltung können Kosten, Anmeldung oder Veranstalter hinzukommen.

[[Datei:Event Poster.png|430px|rahmenlos|center]]

Historische oder künstlerische Plakate können Dir zeigen, wie unterschiedlich Schrift, Bild, Farbe und Fläche kombiniert werden.

[[Datei:Farkas Molnár Bauhausausstellung 1923.jpg|400px|rahmenlos|center]]

Für Dein eigenes Schulplakat gilt: Die größten Elemente sollten zur wichtigsten Botschaft gehören. Datum und Ort dürfen kleiner sein, müssen aber trotzdem gut lesbar bleiben.

{{BR}}
=== Mini-Entwurf: Veranstaltungsplakat ===
{| class="wikitable" style="width:100%; text-align:center;"
|-
| style="background:#ff6b4a; color:#111111; font-size:190%; padding:18px;" | '''SCHULFEST'''
|-
| style="background:#fff2cc; font-size:120%; padding:16px;" | Musik • Spiele • Essen
|-
| style="background:#ffffff; padding:12px;" | Freitag · 16 Uhr · Schulhof
|-
| style="background:#222222; color:#ffffff; padding:10px;" | '''Komm vorbei!'''
|}

{{BR}}
== Lernkarte ==
Eine Lernkarte soll Wissen schnell erfassbar machen. Deshalb braucht sie eine starke Ordnung. Eine gute digitale Lernkarte hat einen Begriff, eine kurze Erklärung und eventuell ein kleines Bild oder Symbol.

Zu viel Text macht eine Lernkarte langsam. Entscheide deshalb, was wirklich auf die Karte gehört. Längere Erklärungen gehören eher in ein Heft, Buch oder Lerntext.

{{BR}}
=== Mini-Entwurf: Lernkarte ===
{| class="wikitable" style="width:100%;"
|-
| style="background:#2c6e49; color:#ffffff; font-size:150%; text-align:center;" | '''KONTRAST'''
|-
| style="background:#f4fff7; padding:15px;" | Ein Kontrast ist ein deutlich wahrnehmbarer Unterschied, zum Beispiel zwischen hell und dunkel.
|-
| style="background:#e8f4ed; text-align:center; padding:12px;" | ◼︎ hell ↔ dunkel ◻︎
|}

{{BR}}
== Schülerfirmen-Poster ==
Eine [[Schülerfirma]] kann mit einem Poster ein Produkt, eine Dienstleistung oder eine Aktion vorstellen. Dabei sind Wiedererkennung und Vertrauen wichtig. Farben, Schrift und Formen sollten deshalb zusammenpassen.

Ein Schülerfirmen-Poster kann enthalten: Name der Schülerfirma, Angebot, ein starkes Bild, einen kurzen Vorteil und eine Handlungsaufforderung. Behauptungen sollten ehrlich und überprüfbar bleiben.

'''Beispiel:''' Statt „Das beste Heft der Welt!“ ist „Aus Recyclingpapier – gestaltet von unserer Schülerfirma“ klarer und glaubwürdiger.

{{BR}}
=== Mini-Entwurf: Schülerfirmen-Poster ===
{| class="wikitable" style="width:100%; text-align:center;"
|-
| style="background:#163a5f; color:#ffffff; font-size:175%; padding:14px;" | '''PAPIERBLITZ'''
|-
| style="height:120px; background:#d7efe2;" | Produktfoto oder Illustration
|-
| style="font-size:120%; padding:12px;" | '''Notizhefte aus Recyclingpapier'''
|-
| style="background:#ffd84d; padding:10px;" | '''Am Verkaufsstand in der großen Pause'''
|}

{{BR}}
== Kurscover ==
Ein Kurscover ist ein Titelbild für einen digitalen Kurs, eine Lernplattform oder einen Projektordner. Es wird häufig klein angezeigt. Deshalb muss die wichtigste Information auch als Miniaturansicht erkennbar sein.

Ein gutes Kurscover nutzt eine kurze Überschrift, ein einfaches Hauptmotiv und einen deutlichen Kontrast. Kleine Zusatztexte verschwinden in der Miniatur und gehören deshalb meist nicht auf das Cover.

{{BR}}
=== Mini-Entwurf: Kurscover ===
{| class="wikitable" style="width:100%; text-align:center;"
|-
| style="background:#692c91; color:#ffffff; font-size:180%; padding:18px;" | '''WELTRAUM'''
|-
| style="height:130px; background:#151b3b; color:#ffffff; font-size:300%;" | ★　●　✦
|-
| style="background:#f0e3ff; padding:10px;" | Klasse 5
|}

{{BR}}
= Von Beispielen lernen =
Gute Gestaltung lässt sich trainieren, indem Du vorhandene Arbeiten untersuchst. Dabei geht es nicht darum, ein Beispiel zu kopieren, sondern seine Entscheidungen zu erkennen.

[[Datei:Postkarte Bauhaus Wassily Kandinsky Postkarte für die Bauhaus-Ausstellung.jpg|380px|rahmenlos|center]]

Untersuche bei einem Plakat zum Beispiel: Wo ist der größte Kontrast? Welche Form fällt zuerst auf? Wie viel Freiraum bleibt? Wie viele Farben werden genutzt? Welche Leserichtung entsteht?

Auch ein historisches Filmplakat kann Dir zeigen, wie Überschrift, Bild und Namen unterschiedlich gewichtet werden.

[[Datei:Holiday (1930) poster.jpg|400px|rahmenlos|center]]

{{BR}}
= Der 3-Sekunden-Test =
Zeige Deinen Entwurf einer anderen Person für ungefähr drei Sekunden und blende ihn dann aus. Frage anschließend:

# Was war das Thema?
# Welche Information ist zuerst aufgefallen?
# Welche Farbe oder Form ist hängen geblieben?
# War etwas schwer zu lesen?
# Was wirkte unnötig oder überladen?

Wenn die wichtigste Botschaft nicht erkannt wird, musst Du nicht automatisch mehr hinzufügen. Oft hilft es, '''etwas wegzulassen, zu vergrößern oder stärker zu ordnen'''.

{{BR}}
= Urheberrecht und sichere Bildnutzung =
Nicht jedes Bild aus dem Internet darf einfach weiterverwendet werden. Achte auf [[Urheberrecht]], [[Creative Commons]] und die Lizenz eines Bildes. Auf [[Wikimedia Commons]] findest Du viele frei lizenzierte oder gemeinfreie Medien. Auch dort können Bedingungen gelten, zum Beispiel die Nennung der Urheberin oder des Urhebers und der Lizenz.

Verwende bei Personenfotos keine peinlichen, privaten oder ohne Erlaubnis veröffentlichten Aufnahmen. Für Schulprojekte eignen sich selbst erstellte Bilder, ausdrücklich freigegebene Medien oder passende freie Bildquellen.

{{BR}}
= Gestaltungs-Checkliste =
Vor dem Export oder Abgeben kannst Du Deinen Entwurf mit fünf Fragen prüfen:

{| class="wikitable" style="width:100%;"
! Bereich
! Prüffrage
|-
| '''Bildausschnitt'''
| Zeigt das Bild genau das, was für meine Botschaft wichtig ist?
|-
| '''Kontrast'''
| Kann man Schrift und wichtige Formen deutlich erkennen?
|-
| '''Schrift'''
| Sind Schriftart, Größe und Hierarchie gut lesbar?
|-
| '''Layout'''
| Sind Elemente ausgerichtet und sinnvoll gruppiert?
|-
| '''Klarheit'''
| Kann ich etwas entfernen, ohne dass wichtige Information verloren geht?
|}

{{BR}}
= Interaktive Aufgaben =

{{BR}}
== Quiz: Teste Dein Wissen ==

{{MC}}

'''Wozu dient ein bewusst gewählter Bildausschnitt?'''
(Er lenkt die Aufmerksamkeit auf wichtige Bildteile)
(!Er macht jedes Bild automatisch heller)
(!Er fügt immer neue Bildinhalte hinzu)
(!Er ersetzt die Bildquelle)

{{E}}
<br>

{{MC}}

'''Was verbessert meistens die Lesbarkeit von Text?'''
(Ein deutlicher Hell-Dunkel-Kontrast)
(!Viele ähnliche helle Farben)
(!Mehrere Zierschriften gleichzeitig)
(!Möglichst kleine Buchstaben)

{{E}}
<br>

{{MC}}

'''Welche Aufgabe hat Freiraum in einem Layout?'''
(Er trennt und ordnet Gestaltungselemente)
(!Er macht jede Fläche vollständig leer)
(!Er ersetzt alle Bilder)
(!Er verhindert Überschriften)

{{E}}
<br>

{{MC}}

'''Was beschreibt Typografie?'''
(Die Gestaltung von Schrift)
(!Das Aufnehmen von Ton)
(!Das Berechnen von Bildgrößen)
(!Das Speichern von Dateien)

{{E}}
<br>

{{MC}}

'''Welche Information sollte auf einem Veranstaltungsplakat besonders schnell erkennbar sein?'''
(Was wann und wo stattfindet)
(!Alle Wörter aus der Einladung)
(!Jede verwendete Schriftart)
(!Die Dateigröße des Plakats)

{{E}}
<br>

{{MC}}

'''Warum sollte ein Kurscover nicht mit kleinem Text überladen sein?'''
(Es wird oft in kleiner Darstellung angesehen)
(!Kleine Texte sind grundsätzlich verboten)
(!Ein Kurscover darf keine Schrift enthalten)
(!Nur Fotos sind auf Kurscovern erlaubt)

{{E}}
<br>

{{MC}}

'''Was ist eine sinnvolle Möglichkeit, Hierarchie zu erzeugen?'''
(Wichtige Überschriften größer zu setzen)
(!Alle Texte gleich groß zu machen)
(!Jedes Wort anders zu färben)
(!Alle Elemente an den Rand zu schieben)

{{E}}
<br>

{{MC}}

'''Welche Aussage über die Drittel-Regel stimmt?'''
(Sie ist eine Gestaltungshilfe und kein zwingendes Gesetz)
(!Sie schreibt für jedes Bild genau drei Farben vor)
(!Sie darf nur bei Plakaten verwendet werden)
(!Sie ersetzt den passenden Bildausschnitt)

{{E}}
<br>

{{MC}}

'''Was ist für eine digitale Lernkarte besonders wichtig?'''
(Eine kurze und klare Informationsstruktur)
(!Möglichst viele Absätze)
(!Viele verschiedene Schriftarten)
(!Ein Hintergrund ohne Kontrast)

{{E}}
<br>

{{MC}}

'''Was solltest Du bei Bildern aus dem Internet prüfen?'''
(Ob Du sie nach ihrer Lizenz verwenden darfst)
(!Ob sie besonders groß sind)
(!Ob sie mindestens fünf Farben enthalten)
(!Ob sie schon auf einem Plakat vorkommen)

{{E}}
<br>

{{BR}}
== Memory ==
<div class="memo-quiz">
{|
|-
| Bildausschnitt || Auswahl des sichtbaren Bildbereichs
|-
| Kontrast || deutlich wahrnehmbarer Unterschied
|-
| Typografie || Gestaltung von Schrift
|-
| Freiraum || bewusst leer gelassene Fläche
|-
| Hierarchie || Rangordnung der Informationen
|-
| Layout || Anordnung der Gestaltungselemente
|-
| Akzentfarbe || Farbe für gezielte Hervorhebung
|-
| Kurscover || Titelbild eines digitalen Lernangebots
|}
{{E}}
<br>

{{BR}}
== Drag and Drop ==
<div class="lueckentext-quiz">

{| class="wikitable"
! Ordne die richtigen Begriffe zu.
! Thema
|-
| '''Bildausschnitt'''
| Hauptmotiv gezielt auswählen
|-
| '''Kontrast'''
| Lesbarkeit durch deutliche Unterschiede stärken
|-
| '''Schrifthierarchie'''
| Wichtiges größer oder kräftiger darstellen
|-
| '''Freiraum'''
| Elemente voneinander trennen und beruhigen
|-
| '''Ausrichtung'''
| Elemente an gemeinsamen Linien ordnen

|}
{{E}}

<br>
<br />

{{BR}}
== Kreuzworträtsel ==
<div class="kreuzwort-quiz">
{|
|-
| Kontrast || Wie heißt ein deutlich wahrnehmbarer Unterschied zwischen Gestaltungselementen?
|-
| Ausschnitt || Wie heißt der ausgewählte sichtbare Bereich eines Bildes?
|-
| Typografie || Wie nennt man die Gestaltung von Schrift?
|-
| Hierarchie || Wie heißt die Rangordnung von wichtigen und weniger wichtigen Informationen?
|-
| Plakat || Welche Gestaltung wirbt großflächig für eine Veranstaltung oder Aktion?
|-
| Freiraum || Wie heißt eine bewusst leer gelassene Fläche im Layout?
|}
{{E}}
<br>

{{BR}}
== LearningApps ==
<iframe> https://learningapps.org/index.php?s=IM5+-+Bilder+digital+gestalten </iframe>

{{BR}}
== Lückentext ==
<quiz display=simple>
{'''Vervollständige den Text.'''<br>
|type="{}"}
Beim Zuschneiden eines Fotos legst Du den { Bildausschnitt } fest.
Ein deutlicher Unterschied zwischen hell und dunkel heißt { Kontrast }.
Die Gestaltung von Schrift nennt man { Typografie }.
Bewusst leer gelassene Bereiche werden als { Freiraum } genutzt.
Die Anordnung der Elemente auf einer Fläche nennt man { Layout }.
Eine große Überschrift erzeugt eine sichtbare { Hierarchie }.
Auf einem Veranstaltungsplakat sollten Thema, Zeit und { Ort } schnell erkennbar sein.
Eine Lernkarte sollte Informationen möglichst { knapp } darstellen.
Für ein Kurscover ist eine gut erkennbare { Miniaturansicht } wichtig.
Vor der Nutzung eines fremden Bildes solltest Du seine { Lizenz } prüfen.
</quiz>

<br>

{{BR}}
= Offene Aufgaben =

{{BR}}
=== Leicht ===
# [[Bildausschnitt|Ausschnitt-Detektiv]]: Wähle ein eigenes Foto und erstelle drei unterschiedliche Ausschnitte. Schreibe zu jedem Ausschnitt einen Satz über seine Wirkung.
# [[Kontrast|Kontrast-Duell]]: Gestalte dieselbe Überschrift einmal sehr gut und einmal absichtlich schlecht lesbar. Markiere die Unterschiede.
# [[Typografie|Schrift-Paar]]: Wähle zwei gut lesbare Schriften für ein fiktives Schulfest und begründe, welche für Überschrift und Fließtext geeignet ist.
# [[Farbe|Drei-Farben-Challenge]]: Entwickle eine kleine Farbpalette aus Hauptfarbe, Akzentfarbe und neutralem Ton und gestalte damit eine einfache Infokarte.

{{BR}}
=== Standard ===
# [[Referat|Referatsbild]]: Gestalte ein digitales Titelbild für ein Referat aus einem passenden Bild, einer kurzen Überschrift und einer Unterzeile. Führe danach den 3-Sekunden-Test durch.
# [[Plakat|Veranstaltungsplakat]]: Erstelle ein Plakat für einen Lesetag, Sporttag oder eine Schuldisco. Was, wann und wo müssen sofort erkennbar sein.
# [[Lernkarte|Lernkarten-Serie]]: Entwirf drei zusammengehörige Lernkarten zu einem Unterrichtsthema. Nutze dieselben Farben, Abstände und Schriftregeln.
# [[Schülerfirma|Firmen-Poster]]: Gestalte ein Poster für eine erfundene Schülerfirma. Verwende ein glaubwürdiges Angebot, ein Bild oder Symbol und eine klare Handlungsaufforderung.

{{BR}}
=== Schwer ===
# [[Kurscover|Kurscover-System]]: Entwirf drei Kurscover für verschiedene Fächer, die als Serie erkennbar sind und trotzdem unterschiedliche Themen zeigen.
# [[Layout|Redesign]]: Suche ein eigenes älteres Schulplakat oder erstelle absichtlich ein überladenes Beispiel. Gestalte es anschließend neu und dokumentiere mindestens fünf Verbesserungen.
# [[Grafikdesign|Design-Vergleich]]: Analysiere zwei frei nutzbare Plakate nach Bildausschnitt, Kontrast, Schrift, Farbe, Formen, Freiraum und Hierarchie. Stelle Deine Ergebnisse als Vergleichsgrafik dar.
# [[Medienkompetenz|Nutzertest]]: Lass drei Personen Deinen Entwurf kurz betrachten. Sammle Rückmeldungen zur Verständlichkeit und verbessere das Layout anhand der Ergebnisse.

{{:Offene Aufgabe - MOOC erstellen}}

{{BR}}
= Lernkontrolle =
# [[Bildausschnitt|Transfer Bildausschnitt]]: Du hast ein Klassenfoto für ein Referat und ein Schülerfirmen-Poster. Erkläre, warum Du für beide Zwecke möglicherweise unterschiedliche Ausschnitte wählen würdest, und beschreibe zwei passende Varianten.
# [[Kontrast|Transfer Kontrast]]: Ein Plakat verwendet hellgelbe Schrift auf weißem Hintergrund. Entwickle zwei unterschiedliche Verbesserungen und begründe, welche für eine Überschrift besser geeignet ist.
# [[Typografie|Transfer Schrift]]: Eine Lernkarte nutzt vier verschiedene Schriften. Plane ein übersichtlicheres Schriftsystem und erkläre, wie dadurch Hierarchie entsteht.
# [[Layout|Transfer Layout]]: Auf einem Veranstaltungsplakat stehen Überschrift, Datum, Ort und Bild ohne erkennbare Ordnung. Skizziere schriftlich eine bessere Reihenfolge und begründe Deine Entscheidung.
# [[Grafikdesign|Vergleich von Use-Cases]]: Vergleiche Kurscover und Veranstaltungsplakat. Welche Informationen müssen jeweils besonders schnell erkannt werden und welche Gestaltungsmittel helfen dabei?
# [[Medienkompetenz|Gestaltung und Verantwortung]]: Du findest ein perfektes Foto über eine Bildersuche, aber keine Nutzungsangabe. Beschreibe, wie Du weiter vorgehst und welche Alternative Du wählen könntest.

<br>
<br>

{{BR}}
= Lernnachweis =
Für einen Lernnachweis zu '''IM5 - Bilder digital gestalten''' solltest Du zeigen, dass Du Gestaltung nicht nur benennen, sondern bewusst anwenden und begründen kannst.

# Du kannst einen passenden [[Bildausschnitt]] auswählen und seine Wirkung erklären.
# Du kannst [[Kontrast]] für gute Lesbarkeit und Hervorhebung einsetzen.
# Du kannst eine klare [[Typografie|Schrifthierarchie]] mit wenigen gut lesbaren Schriften gestalten.
# Du kannst Farben, Formen, Ausrichtung und [[Freiraum]] zu einem übersichtlichen [[Layout]] verbinden.
# Du kannst Gestaltung an den Zweck anpassen, zum Beispiel an Referatsbild, Veranstaltungsplakat, Lernkarte, Schülerfirmen-Poster oder Kurscover.
# Du kannst Deinen Entwurf mit Rückmeldungen überprüfen und gezielt verbessern.
# Du kannst bei fremden Bildern auf Urheberrecht und passende Lizenzen achten.

<br>
<br>

{{BR}}
= OERs zum Thema =
Ein passender Wikipedia-Einstieg zum übergeordneten Thema ist der Artikel [[Grafikdesign]]:

<iframe> https://de.m.wikipedia.org/wiki/Grafikdesign </iframe>

<br>

{{BR}}
= Verknüpfte Lernbereiche =
{| align=center
{{:D-Tab}}
'''[[IM5 - Bilder digital gestalten]]'''
# [[Bildgestaltung]]
# [[Bildausschnitt]]
# [[Drittel-Regel]]
# [[Kontrast]]
# [[Farbe]]
# [[Typografie]]
# [[Layout]]
# [[Grafikdesign]]
# [[Plakat]]
# [[Medienkompetenz]]
# [[Urheberrecht]]
|}

[[Kategorie:Medienbildung]]
[[Kategorie:Kunst]]
[[Kategorie:Informatik]]
[[Kategorie:Grafikdesign]]
[[Kategorie:Bildgestaltung]]
[[Kategorie:Klasse 5]]
[[Kategorie:Medienkompetenz]]

{{BR}}
= aiMOOC-Projekte =
[[Kategorie:AI_MOOC]] [[Kategorie:GPT aiMOOC]]
{{MT}}

IM5 - Bilder digital gestalten - Versionsgeschichte

Glanz: aiMOOC über GPT aiMOOC Action erstellt