🗃 Digital Design

Thema der Stunde(n)

Beschreibung des Themas

In diesem Block lernen die Schüler:innen grundlegende Prinzipien des digitalen Designs kennen, einschließlich Farbtheorie, Typografie und Layout. Sie werden diese Prinzipien anwenden, um ansprechende digitale Designs für verschiedene Anlässe zu erstellen. Dabei wird ein besonderer Fokus auf die Nutzung von Online-Design-Tools wie Canva gelegt, um praktische Fähigkeiten im Erstellen von Logos, Plakaten und Flyern zu entwickeln.

Aufgaben und Ziele

• Schüler:innen können einfache Farbtheorien erklären und anwenden (Komplementärfarben, 60-30-10 Regel, Kontrast)
• Schüler:innen verstehen grundlegende Typografie-Prinzipien (Schriftarten, Lesbarkeit, Schriftgrößen)
• Schüler:innen können Layout-Prinzipien (Ausrichtung, Weißraum, Hierarchie) anwenden
• Schüler:innen erstellen eigenständig digitale Designs für vorgegebene Anlässe unter Verwendung von Canva oder ähnlichen Tools

Inhalte

---

Big 5 Design Contest

Big-5-Design-Contest

Was ist Digitales Design?

Welche Aspekte müssen wir beachten?

• Farben
• Schriftarten
• Layout
• Bilder/Icons
• Konsistenz (= alles soll zusammenpassen)
• Zielgruppe
• Botschaft

© Live Web Studios

Richtlinien

• 🎨 Farben: 2–4 Farben
  • 60‑30‑10‑Regel; genügend Kontrast (Barrierefreiheit).
  • Stimmung und Zielgruppe unterstützen.
• 🔤 Schriftarten: Max. 2–3 verschiedene
  • Klare Hierarchie durch Größe/Gewicht(=wie dick).
• 📐 Layout: Grid & Weißraum
  • Elemente sauber ausrichten.
  • Visuelle Hierarchie über Größe/Position.
• 🖼️ Bilder / Icons: Einheitlich & hochqualitativ
  • Bevorzugt Vektoren für Logos; gleiche Stilrichtung.
  • Auf Auflösung achten
• 🔁 Konsistenz: Einheit über alle Medien
  • Selbe Farben, Typo, Abstände, Icons verwenden
• ✉️ Botschaft: Kurz und deutlich
  • Eine Hauptbotschaft + sichtbarer Call‑to‑Action.
  • Unwichtiges weglassen.

Plakatanalyse

In Suchmaschine bspw. nach “coole Plakate” suchen

• Aufgabe: Ein Plakat auswählen, das euch gefällt

Notiere dir:

• 🔍 Was gefällt dir daran?
• 🔍 Wie viele Farben wurden verwendet, welche Farben?
• 🔍 Wie viele Wörter/Textblöcke sind drauf?
• 🔍 Wie viel Platz bleibt frei (Die Hälfte?, weniger?, mehr?)

Aufgabe: Ein Event auswählen fürs Design

10 Minuten Zeit

• Alleine oder in 2er Gruppen
• Beispiele:
  • Lego-League Wettbewerb
  • Geburtstagsfeier
  • Event im Verein
  • Schulfest (kann auch ausgedacht sein)
  • Initiative (z.B. Umweltschutz, Sportförderung, etc.)
  • …

Nach den 10 Min: In einem Satz erklären, um was es gehen soll

Beispiele

---

Logos als Basis

• 💠 Was ist ein Logo?

  • Ein Logo ist ein grafisches Zeichen, das eine Marke, ein Unternehmen oder ein Produkt repräsentiert.
  • Es soll leicht erkennbar und einprägsam sein.
  • Für uns wichtig: Logo zeigt, was alles zusammengehört (z.B. auf Flyern, Plakaten, T-Shirts, Social Media, etc.)

• Erstes gemeinsames Logo erstellen

  • Logo für DG erstellen:

"logoipsum" zum Testen

Funfact: logoipsum kommt von “Lorem Ipsum”, dem klassischen (?) Blindtext (?).

Logo Editor - Logoipsum

🔑 Anmeldung in Canva

Anmeldung in Canva

• 🔑 Anmeldung in Canva
  • Einladungslink

Bild	Erklärung
	- Aktuellen Einladungslink in Canva generieren - Link an SuS senden und draufklicken lassen “Weiter mit Microsoft“
	- Anmeldung mit: vorname.nachname@nmmse.at - Danach Outlook checken für Bestätigungsanfrage zu Anmeldung
	- Mit Email-Adresse fortfahren
	- Code in Outlook Email finden - Code in Canva eingeben

Link zum Original

• 📝 Zusammenfassungsplakat in Canva erstellen
  • DG Logo einfügen
  • Kurze Regeln für gutes Design auflisten
    • 2-4 Farben, 60-30-10 Regel, max. 2-3 Schriftarten, Ausrichtung, Weißraum, Konsistenz, klare Botschaft

---

Farbtheorie

• 🎨 Grundlagen der Farbtheorie
  • Primärfarben: Rot, Blau, Gelb
  • Sekundärfarben: Grün, Orange, Violett (Mischung der Primärfarben)
  • Komplementärfarben: Farben, die sich im Farbkreis gegenüberliegen (z.B. Blau und Orange)
  • Farbpaletten erstellen: Harmonische Farbkombinationen wählen

Erklärvideo

Der Farbkreis - Johannes Itten und Harald Küppers in Kombination

60-30-10 Regel

• 60% Hauptfarbe
• 30% Sekundärfarbe
• 10% Akzentfarbe

Color Wheel

© graf1x.com

Color Harmonies

© Manchester Digital

Plakat Farbharmonie ( Zum ausdrucken und aufhängen)

---

Typografie

Die Kunst und Technik der Schrift

...nur ein paar Beispiele:

© onlineprinters.at

© indesignskills.com

© TypeEd

© Alexanders Print Advantage

Für uns gilt: Ausprobieren, bis es passt

---

Layout

• 📐 Definition von “Layout”:
  • Anordnung von Texten, Bildern und anderen Elementen auf einer Seite.
  • Ziel: Übersichtlichkeit, Lesbarkeit und visuelle Attraktivität

📏 Ausrichtung

• Texte und Elemente an unsichtbaren Linien (Grid) ausrichten.

• Links- oder zentrierte Ausrichtung wählen – nicht mischen, wenn es nicht nötig ist.

• Gleiche Abstände zwischen ähnlichen Elementen einhalten.

  © 123RF

🧩 Nähe (Grouping)

• Dinge, die zusammengehören, stehen nah beieinander (z.B. Titel + Untertitel + Datum).

• Dinge, die nicht zusammengehören, haben mehr Abstand.

• So erkennt man auf einen Blick, was zusammen gehört.

  © UX Planet

🌬️ Weißraum

• Weißraum = freier Platz, wo nichts steht (muss nicht weiß sein).
• Genug Luft lassen, damit das Design ruhig und übersichtlich wirkt.
• Lieber weniger Elemente größer als alles klein und gedrängt.

© Prototypr

© ux360.design

🔝 Visuelle Hierarchie

• Wichtige Infos größer, fetter oder auffälliger machen.
• Mit Größe, Farbe und Position zeigen, was zuerst gelesen werden soll.
• Blickführung überlegen: Was sieht man zuerst, was danach?

© Max Liew

---

Zielgruppe, Botschaft, und Inhalt

Für wen gestaltest du das Plakat/Flyer und was soll die Person danach tun?

🎯 Zielgruppe

• Wer soll das lesen? Kinder, Jugendliche, Erwachsene, Eltern, Sportler:innen, Gamer:innen, …
• Sprache und Design zur Zielgruppe passend wählen:
  • Jugendliche: lockerer, moderner Stil, kräftige Farben.
  • Erwachsene/Eltern: klar, übersichtlich, eher ruhige Farben.
• Immer fragen: Was interessiert diese Person?

✉️ Botschaft

• Eine Hauptbotschaft pro Plakat/Flyer.
• In einem kurzen Satz beschreiben können, z.B.:
  • „Komm zu unserem LEGO-League-Team!“
• Wichtigste Fragen beantworten:
  • Wer? Was? Wann? Wo? Warum?

📝 Inhalt & Formulierungen

• Kurze Sätze, leichte Wörter, unnötige Infos weglassen.
• Max. 3–5 Textblöcke pro Plakat:
  • Titel
  • Untertitel/kurze Erklärung
  • Details (Datum, Ort, Uhrzeit)
  • Kontakt/Link
• Wichtige Infos nicht im Fließtext verstecken, sondern gut sichtbar anordnen (Listen, Blöcke).

👉 Call to Action (CTA)

• Aufforderung, was die Person tun soll:
  • „Jetzt anmelden“, „Mitmachen!“, „Mehr Infos auf …“
• CTA klar hervorheben (Farbe, Größe, Button-Form).
• Möglichst konkret:
  • „Melde dich bis 10.10. bei Frau X an.“
  • „Scanne den QR-Code und registriere dich.“

---

Plakat erstellen/fertigstellen

• folgende Punkte überprüfen:
  • ➕ Farben (60-30-10 Regel, Kontrast)
  • ➕ Schriftarten (max. 2-3, Wichtigkeit jeweils klar?)
  • ➕ Layout (nicht überladen, Blöcke klar)
  • ➕ Einheitlichkeit (Farben, Typo, Abstände, Icons)
  • ➕ Botschaft (Hauptbotschaft klar? Call-to-Action sichtbar?)

---

Flyer erstellen

• 🎖 Flyer Vorlage in Canva
• 🆕 Flyer passend zum Plakat erstellen
  • Gleiche Farben, Schriftarten, Layout-Stil verwenden
  • Weniger Informationen als auf dem Plakat, aber alle wichtigen Fakten
  • Fokus auf eine Hauptbotschaft

Flyer Beispiele

© Designenlassen.de

© Für-Gründer.de

---

Materialien

• Logo Editor - Logoipsum
• Canva Einladungslink
• Plakat Farbharmonie