Glanz: aiMOOC über GPT aiMOOC Action erstellt

2026-07-25T16:33:56Z

aiMOOC über GPT aiMOOC Action erstellt

Neue Seite

{{T}}

{{BR}}
= Infografik - Kunst =

[[Datei:Wikimedia Conference 2015 Short Facts Infographic.jpg|600px|rahmenlos|center]]

{{BR}}
= Einleitung =

Eine [[Infografik]] verbindet '''Information''' und '''Gestaltung'''. Sie macht Zahlen, Abläufe oder Zusammenhänge schnell sichtbar. Im [[Kunstunterricht]] planst Du Bild, Farbe, Schrift und Anordnung so, dass eine klare visuelle Botschaft entsteht.

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

{{BR}}
== Lernziele ==

Nach diesem aiMOOC kannst Du:

# [[Infografik|Infografiken]] untersuchen und bewerten.
# passende [[Diagramm|Diagramme]], [[Piktogramm|Piktogramme]] und Bilder auswählen.
# ein übersichtliches [[Layout]] mit klarer [[Visuelle Hierarchie|visueller Hierarchie]] gestalten.
# Farben und [[Typografie]] gezielt einsetzen.
# Daten, Quellen und Bildrechte verantwortungsvoll behandeln.
# eine eigene Infografik analog oder digital umsetzen.

{{BR}}
= Was ist eine Infografik? =

Eine Infografik ist eine visuelle Darstellung von Informationen. Sie kombiniert wenige Texte mit Bildern, Symbolen, Diagrammen, Karten oder Ablaufpfeilen.

'''Merksatz:''' Eine gute Infografik ist nicht nur schön. Sie macht etwas verständlich.

[[Datei:The Red Shoes Fairytale Infographic - Renate Aomere.jpg|500px|rahmenlos|center]]

{{BR}}
== Infografik und Kunst ==

Im Fach [[Kunst]] gehören Infografiken zur [[Visuelle Kommunikation|visuellen Kommunikation]]. Du gestaltest dabei:

# [[Form]]: Flächen, Linien, Symbole und Bildzeichen.
# [[Farbe]]: Wirkung, Ordnung und Hervorhebung.
# [[Typografie]]: gut lesbare und passende Schrift.
# [[Komposition]]: Anordnung auf der Fläche.
# [[Kontrast]]: deutliche Unterschiede.
# [[Rhythmus Kunst|Rhythmus]]: Wiederholung und Abwechslung.
# [[Bildsprache]]: verständliche visuelle Zeichen.

{{BR}}
= Beispiele aus der Geschichte =

Schon frühe Karten, Schaubilder und Diagramme verbanden Wissen mit Gestaltung. Ein bekanntes Beispiel ist die Grafik von [[Charles Joseph Minard]]. Sie zeigt Route, Richtung, Truppenstärke und Temperatur in einer gemeinsamen Darstellung.

[[Datei:Minards chart Napoleons Russian campaign of 1812 made in 1869.jpg|700px|rahmenlos|center]]

'''Beobachtungsauftrag:''' Welche Information erkennst Du zuerst? Welche Gestaltung führt Deinen Blick?

{{BR}}
= Bausteine einer Infografik =

{{BR}}
== Überschrift und Kernaussage ==

Die Überschrift nennt das Thema. Eine kurze Kernaussage zeigt, was besonders wichtig ist. Beides muss schnell erkennbar sein.

{{BR}}
== Bild und Piktogramm ==

Ein [[Piktogramm]] ist ein vereinfachtes Bildzeichen. Es soll ohne langen Text verständlich sein. Verwende einen einheitlichen Stil.

[[Datei:Sample-national-park-service-pictographs.gif|450px|rahmenlos|center]]

{{BR}}
== Diagramm ==

Wähle die Darstellungsform passend zur Information:

# [[Balkendiagramm]]: Größen und Kategorien vergleichen.
# [[Liniendiagramm]]: Veränderungen über einen Zeitraum zeigen.
# [[Kreisdiagramm]]: Anteile eines Ganzen darstellen.
# [[Karte]]: Orte, Wege oder räumliche Unterschiede zeigen.
# [[Ablaufdiagramm]]: Schritte und Entscheidungen ordnen.

Dasselbe Datenmaterial kann sehr unterschiedlich wirken:

[[Datei:20230606 Composite of bar chart (Sankey diagram), bubble chart, pie chart - all showing same data.svg|600px|rahmenlos|center]]

{{BR}}
== Text ==

Verwende kurze Sätze, klare Begriffe und wenige Schriftgrößen. Lange Absätze bremsen den Blick.

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

{{BR}}
== Quelle und Legende ==

Eine [[Quelle]] zeigt, woher Daten, Bilder oder Aussagen stammen. Eine [[Legende]] erklärt Farben, Zeichen und Abkürzungen.

{{BR}}
= Gestaltungsmittel =

{{BR}}
== Visuelle Hierarchie ==

Die [[Visuelle Hierarchie|visuelle Hierarchie]] bestimmt die Reihenfolge des Sehens. Größe, Position, Farbe, Kontrast und Abstand zeigen, was wichtig ist.

'''Blickfolge:''' Überschrift → Hauptbild oder Hauptzahl → Erklärung → Quelle.

{{BR}}
== Raster und Ausrichtung ==

Ein [[Gestaltungsraster]] hilft beim Ordnen. Elemente stehen auf gemeinsamen Linien. Freie Flächen schaffen Ruhe.

[[Datei:Grid2aib.svg|350px|rahmenlos|center]]

{{BR}}
== Farbe ==

Farbe kann gliedern, verbinden oder hervorheben. Nutze eine kleine Farbpalette. Prüfe, ob Text und Hintergrund genügend Kontrast haben.

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

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

{{BR}}
== Barrierearme Gestaltung ==

Eine Infografik soll für möglichst viele Menschen lesbar sein.

# Verwende Farbe nie als einziges Unterscheidungsmerkmal.
# Ergänze Muster, Beschriftungen oder Symbole.
# Nutze gut lesbare Schriftgrößen.
# Vermeide schwache Kontraste.
# Ergänze bei digitalen Arbeiten einen [[Alternativtext]].

[[Datei:Map of United States accessible colors shown.svg|550px|rahmenlos|center]]

{{BR}}
= Der Gestaltungsprozess =

Eine Infografik entsteht in mehreren Schritten:

# [[Thema]]: Formuliere eine klare Frage.
# [[Recherche]]: Sammle verlässliche Informationen und Quellen.
# [[Auswahl]]: Reduziere auf das Wesentliche.
# [[Skizze]]: Plane Blickführung und Flächen.
# [[Gestaltung]]: Setze Farbe, Schrift, Bild und Diagramm ein.
# [[Test]]: Lass andere die Grafik ohne Erklärung lesen.
# [[Überarbeitung]]: Verbessere Unklarheiten.
# [[Quellenangabe]]: Nenne Daten- und Bildquellen.

[[Datei:The responsible design process.png|500px|rahmenlos|center]]

{{BR}}
== Analog oder digital? ==

Du kannst mit Papier, Stiften, Schere und Collage arbeiten. Digital eignen sich Präsentationsprogramme, Zeichenprogramme oder [[Inkscape]]. Inkscape ist ein freies Programm für [[Vektorgrafik|Vektorgrafiken]].

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

{{BR}}
= Gute und problematische Infografiken =

{{BR}}
== Qualitätsmerkmale ==

Eine gute Infografik ist:

# '''klar''': Die Kernaussage ist schnell erkennbar.
# '''richtig''': Daten und Beschriftungen stimmen.
# '''geordnet''': Blickwege und Gruppen sind verständlich.
# '''lesbar''': Schrift und Kontraste funktionieren.
# '''passend''': Gestaltung unterstützt das Thema.
# '''belegt''': Quellen sind sichtbar.
# '''fair''': Die Darstellung führt nicht absichtlich in die Irre.

{{BR}}
== Häufige Fehler ==

# zu viele Farben, Schriften oder Symbole.
# lange Textblöcke.
# fehlende Einheiten oder Quellen.
# unpassende Diagramme.
# abgeschnittene Achsen ohne Hinweis.
# verzerrende 3D-Effekte.
# Dekoration ohne Informationswert.
# Bilder, die nur Aufmerksamkeit erzeugen.

[[Datei:20210822 Global warming - warming stripes bar chart.svg|600px|rahmenlos|center]]

'''Diskussionsfrage:''' Wie kann eine stark reduzierte Grafik zugleich eindrucksvoll und sachlich sein?

{{BR}}
= Bildrechte und Verantwortung =

Verwende eigene Medien oder frei lizenzierte Inhalte. Auf [[Wikimedia Commons]] findest Du viele Bilder mit Lizenzangaben. Notiere Urheber, Titel, Quelle und Lizenz.

Prüfe außerdem:

# Sind die Daten aktuell und nachvollziehbar?
# Werden Gruppen fair dargestellt?
# Ist die Auswahl der Informationen ausgewogen?
# Erzeugt die Gestaltung eine unbeabsichtigte Täuschung?
# Sind persönliche Daten geschützt?

{{BR}}
= Mini-Projekt: Eine Infografik für die Schule =

Wähle ein Thema aus Deinem Schulalltag, zum Beispiel Schulweg, Mülltrennung, Medienzeit, Lieblingsfarben, Pausenhof oder Klassenbibliothek.

'''Arbeitsauftrag:'''

# Formuliere eine Leitfrage.
# Erhebe oder recherchiere wenige Daten.
# Fertige drei kleine Layoutskizzen an.
# Wähle eine Skizze aus.
# Gestalte eine Infografik im Hoch- oder Querformat.
# Führe einen Lesetest mit zwei Personen durch.
# Überarbeite die Arbeit.
# Ergänze Quellen und Namen.

{{BR}}
= Interaktive Aufgaben =

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

{{MC}}

'''Was ist das wichtigste Ziel einer Infografik?'''
(Informationen verständlich sichtbar machen)
(!Eine Fläche vollständig dekorieren)
(!Möglichst viele Schriftarten zeigen)
(!Lange Texte ersetzen, ohne Inhalte zu prüfen)

{{E}}
<br>

{{MC}}

'''Welches Diagramm eignet sich besonders für den Vergleich mehrerer Kategorien?'''
(Balkendiagramm)
(!Liniendiagramm)
(!Ablaufdiagramm)
(!Lageplan)

{{E}}
<br>

{{MC}}

'''Welches Gestaltungsmittel lenkt den Blick auf besonders wichtige Elemente?'''
(Visuelle Hierarchie)
(!Zufällige Streuung)
(!Gleich große Darstellung)
(!Verzicht auf Abstände)

{{E}}
<br>

{{MC}}

'''Wozu dient ein Gestaltungsraster?'''
(Es ordnet und richtet Elemente aus)
(!Es ersetzt alle Bilder)
(!Es prüft automatisch Daten)
(!Es erzeugt zufällige Farben)

{{E}}
<br>

{{MC}}

'''Was erklärt eine Legende?'''
(Farben Zeichen und Abkürzungen)
(!Die Lebensgeschichte des Gestalters)
(!Den Preis des Druckers)
(!Die Länge des Textes)

{{E}}
<br>

{{MC}}

'''Welche Aussage zur Farbe ist sinnvoll?'''
(Farbe soll Informationen gliedern und hervorheben)
(!Jedes Element braucht eine andere Farbe)
(!Farbe darf die einzige Kennzeichnung sein)
(!Sehr geringe Kontraste verbessern die Lesbarkeit)

{{E}}
<br>

{{MC}}

'''Was gehört zu einer verantwortungsvollen Infografik?'''
(Quellen sichtbar angeben)
(!Unpassende Daten weglassen ohne Hinweis)
(!Achsen heimlich verändern)
(!Bilder ohne Rechte übernehmen)

{{E}}
<br>

{{MC}}

'''Welches Element ist ein vereinfachtes Bildzeichen?'''
(Piktogramm)
(!Absatz)
(!Fußnote)
(!Seitenrand)

{{E}}
<br>

{{MC}}

'''Was sollte vor der Endfassung geschehen?'''
(Ein Lesetest mit anderen Personen)
(!Alle Quellen entfernen)
(!Die Schrift möglichst klein setzen)
(!Jede freie Fläche füllen)

{{E}}
<br>

{{MC}}

'''Welche Darstellung zeigt Veränderungen über einen Zeitraum besonders gut?'''
(Liniendiagramm)
(!Piktogramm)
(!Kreisfläche ohne Beschriftung)
(!Einzelnes Symbol)

{{E}}
<br>

{{BR}}
== Memory ==

<div class="memo-quiz">
{|
|-
| Infografik || Informationen visuell erklären
|-
| Balkendiagramm || Kategorien vergleichen
|-
| Liniendiagramm || Entwicklung über Zeit zeigen
|-
| Piktogramm || vereinfachtes Bildzeichen
|-
| Legende || Farben und Zeichen erklären
|-
| Raster || Elemente ausrichten
|-
| Quelle || Herkunft von Daten belegen
|}
{{E}}
<br>

{{BR}}
== Drag and Drop ==

<div class="lueckentext-quiz">

{| class="wikitable"
! Ordne die richtigen Begriffe zu.
! Thema
|-
| '''Balkendiagramm'''
| Kategorien vergleichen
|-
| '''Liniendiagramm'''
| Veränderungen über Zeit zeigen
|-
| '''Karte'''
| Orte und Räume darstellen
|-
| '''Ablaufgrafik'''
| Schritte und Prozesse erklären
|-
| '''Piktogramm'''
| Begriffe schnell sichtbar machen

|}
{{E}}

<br>
<br />

{{BR}}
== Kreuzworträtsel ==

<div class="kreuzwort-quiz">
{|
|-
| Layout || Wie heißt die Anordnung von Texten und Bildern auf einer Fläche?
|-
| Piktogramm || Wie nennt man ein vereinfachtes Bildzeichen?
|-
| Diagramm || Welche Darstellungsform macht Daten sichtbar?
|-
| Kontrast || Wie heißt ein deutlicher Unterschied zwischen Gestaltungselementen?
|-
| Quelle || Was belegt die Herkunft einer Information?
|-
| Hierarchie || Welcher Begriff bezeichnet die Rangordnung sichtbarer Elemente?
|}
{{E}}
<br>

{{BR}}
== LearningApps ==

<iframe> https://learningapps.org/index.php?s=Infografik+Kunst </iframe>

{{BR}}
== Lückentext ==

<quiz display=simple>
{'''Vervollständige den Text.'''<br>
|type="{}"}
Eine Infografik vermittelt Informationen vor allem { visuell }. Ein vereinfachtes Bildzeichen heißt { Piktogramm }. Veränderungen über einen Zeitraum zeigt häufig ein { Liniendiagramm }. Ein { Raster } unterstützt die geordnete Ausrichtung von Elementen. Die Reihenfolge der Wahrnehmung wird durch die visuelle { Hierarchie } gelenkt. Eine kleine Farbpalette wirkt meist ruhiger als sehr viele { Farben }. Die Herkunft von Daten wird durch eine { Quelle } belegt. Eine { Legende } erklärt Zeichen und Farbcodes. Vor der Fertigstellung verbessert ein { Lesetest } die Verständlichkeit. Freie Bildmedien findest Du unter anderem auf Wikimedia { Commons }.
</quiz>

<br>

{{BR}}
= Offene Aufgaben =

{{BR}}
=== Leicht ===

# [[Piktogramm-Sammlung]]: Zeichne sechs einfache Bildzeichen für Räume oder Regeln Deiner Schule.
# [[Farbwirkung]]: Gestalte dieselbe Überschrift in drei Farbvarianten und beschreibe die Wirkung.
# [[Infografik-Suche]]: Finde drei Infografiken in Büchern, Zeitungen oder Apps und fotografiere oder skizziere ihren Aufbau.
# [[Layout-Skizze]]: Ordne Überschrift, Hauptbild, drei Informationen und Quelle in drei unterschiedlichen Mini-Skizzen an.

{{BR}}
=== Standard ===

# [[Klassenumfrage]]: Erhebe eine kleine Umfrage und gestalte daraus ein Balken- oder Kreisdiagramm.
# [[Infografik-Analyse]]: Untersuche eine vorhandene Infografik nach Hierarchie, Farbe, Typografie, Bildsprache und Quelle.
# [[Vorher-Nachher-Gestaltung]]: Überarbeite eine unübersichtliche Grafik und dokumentiere Deine Entscheidungen.
# [[Analoge Infografik]]: Gestalte mit Papier, Stiften und Collage eine Infografik zu einem Unterrichtsthema.

{{BR}}
=== Schwer ===

# [[Datenkritik]]: Erstelle zwei unterschiedlich wirkende Grafiken aus denselben Daten und erkläre, wodurch die Wirkung verändert wird.
# [[Barrierearme Infografik]]: Gestalte eine Grafik, die auch ohne Farberkennung verständlich bleibt.
# [[Animierte Infografik]]: Plane eine kurze Animation, in der Informationen schrittweise erscheinen.
# [[Ausstellungskonzept]]: Entwickle mit einer Gruppe eine Schul-Ausstellung aus mehreren Infografiken und einem gemeinsamen Gestaltungsraster.

{{:Offene Aufgabe - MOOC erstellen}}

{{BR}}
= Lernkontrolle =

# [[Gestaltungsentscheidung]]: Du sollst die Entwicklung der Besucherzahlen eines Museums über zwölf Monate zeigen. Begründe Diagrammwahl, Farbkonzept und Blickführung.
# [[Datenethik]]: Eine Achse beginnt nicht bei null und lässt einen kleinen Unterschied sehr groß erscheinen. Erkläre die Wirkung und entwickle eine faire Alternative.
# [[Zielgruppenwechsel]]: Übertrage dieselben Informationen einmal für Grundschulkinder und einmal für Erwachsene. Beschreibe Unterschiede bei Sprache, Symbolen und Detailmenge.
# [[Infografik-Vergleich]]: Vergleiche zwei Grafiken zum gleichen Thema. Beurteile, welche verständlicher ist, und belege Dein Urteil mit Gestaltungskriterien.
# [[Reduktion]]: Kürze eine textreiche Informationsseite auf fünf Kernaussagen und entwickle dazu eine passende visuelle Struktur.
# [[Transferprojekt]]: Plane eine Infografik für ein anderes Schulfach. Zeige, wie Kunst, Fachwissen und Medienbildung zusammenwirken.

<br>
<br>

{{BR}}
= Lernnachweis =

Für einen Lernnachweis sind wichtig:

# eine klare Leitfrage und Zielgruppe.
# überprüfte Daten und vollständige Quellen.
# mindestens zwei erkennbare Entwurfsskizzen.
# ein begründetes Diagramm oder eine passende Bildform.
# klare visuelle Hierarchie und geordnete Komposition.
# lesbare Typografie und durchdachte Farbwahl.
# barrierearme Kennzeichnung durch Text, Symbol oder Muster.
# eine eigenständig gestaltete Endfassung.
# eine kurze Reflexion zu Wirkung, Verständlichkeit und Überarbeitung.

<br>
<br>

{{BR}}
= OERs zum Thema =

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

<br>

{{BR}}
= Verknüpfte Lernbereiche =

{| align=center
{{:D-Tab}}
'''[[Infografik - Kunst]]'''
# [[Grafikdesign]]
# [[Informationsdesign]]
# [[Visuelle Kommunikation]]
# [[Typografie]]
# [[Farbenlehre]]
# [[Komposition]]
# [[Piktogramm]]
# [[Diagramm]]
# [[Datenvisualisierung]]
# [[Medienkompetenz]]
# [[Urheberrecht]]
# [[Open Educational Resources]]
|}

[[Kategorie:Kunst]]
[[Kategorie:Medienbildung]]
[[Kategorie:Grafikdesign]]
[[Kategorie:Visualisierung]]
[[Kategorie:Schule]]
[[Kategorie:Klasse 5-6]]
[[Kategorie:Klasse 7-8]]
[[Kategorie:Klasse 9-10]]

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

Infografik - Kunst - Versionsgeschichte

Glanz: aiMOOC über GPT aiMOOC Action erstellt