Arbeitsbereich 04
Visuelles System
Farben, Typografie, Bildsprache, Icons, Karten und Interaktionen bilden ein konsistentes System, das auf kleinen Bildschirmen, mit Tastatur und im Ausdruck verständlich bleibt.
Umfassender Leitfaden
Wiedererkennbar und zugänglich
Das visuelle System übersetzt die Morgenelf-Haltung in wiedererkennbare Entscheidungen. Dunkelblau trägt Ruhe und Verlässlichkeit, Grün markiert Entwicklung, Gold setzt wenige wichtige Akzente und helle Flächen schaffen Leseraum.
Hierarchie entsteht durch Überschriften, Abstände, Reihenfolge und Kontrast – nicht durch immer größere Schrift oder immer mehr Farbe. Dieselbe Bedeutung erscheint auf allen Seiten in derselben visuellen Rolle.
Fotografie wird nur eingesetzt, wenn Motiv, Urheberschaft, Bildnachweis, Personenrechte und Kanalumfang geklärt sind. Funktionale Informationen bleiben als echter Text zugänglich.
12 Kapitel
Regeln, Beispiele und Prüffragen.
Die ersten acht Kapitel bilden die Vertiefungsserie. Jedes Kapitel benennt Anwendung und Grenze und führt zu bestehenden Morgenelf-Angeboten.
Farbrollen
Jede Markenfarbe besitzt eine feste Aufgabe und trägt Bedeutung nie allein.
Kapitel öffnen →02 · VertiefungTypografie und Lesefluss
Schriftgrößen, Zeilenlänge und Rhythmus führen vom Überblick in die Tiefe.
Kapitel öffnen →03 · VertiefungSeitenhierarchie
Ein Bildschirm beantwortet zuerst: Wo bin ich, worum geht es und was kann ich tun?
Kapitel öffnen →04 · VertiefungKarten und Module
Wiederkehrende Flächen zeigen Inhaltstyp, Zusammenhang und nächsten Schritt.
Kapitel öffnen →05 · VertiefungIcons und Symbole
Symbole unterstützen Orientierung, ersetzen aber keine verständliche Beschriftung.
Kapitel öffnen →06 · VertiefungBildsprache und Rechte
Bilder zeigen Kontext und Handlung, ohne junge Menschen auszustellen.
Kapitel öffnen →07 · VertiefungDiagramme und Daten
Grafiken erklären Beziehungen, ohne Meinung als objektive Messung erscheinen zu lassen.
Kapitel öffnen →08 · VertiefungInteraktionszustände
Auswahl, Fokus, Erfolg, Warnung und Fehler sind sichtbar und verständlich beschrieben.
Kapitel öffnen →09 · GrundsatzMobile Layouts
Kleine Bildschirme erhalten dieselbe Information in einer klaren Reihenfolge.
Kapitel öffnen →10 · GrundsatzKontrast und Wahrnehmbarkeit
Inhalte bleiben bei unterschiedlichen Sehbedingungen lesbar und unterscheidbar.
Kapitel öffnen →11 · GrundsatzTastatur und Fokus
Alle wesentlichen Wege funktionieren ohne Maus und in nachvollziehbarer Reihenfolge.
Kapitel öffnen →12 · GrundsatzDruck und Weitergabe
Gesprächsvorlagen funktionieren auf Papier ohne Navigation, Farbe oder gespeicherte Daten.
Kapitel öffnen →Entscheidungshelfer
Besteht ein Seitenelement den Designcheck?
Der Check prüft Hierarchie, Bedienung, Rechte und mobile Nutzung ohne Upload oder Analyse persönlicher Daten.
Vier Fragen bis zur Gesprächsvorlage
Wähle in jedem Feld eine Aussage. Namen, Antworten und Ergebnisse werden nicht gespeichert oder übertragen.
Glossar
Gemeinsame Begriffe.
Diese Arbeitsdefinitionen gelten in diesem Bereich und verhindern, dass zentrale Wörter unbemerkt ihre Bedeutung wechseln.
- Farbrolle
- Festgelegte Aufgabe einer Farbe innerhalb des Systems.
- Visuelle Hierarchie
- Reihenfolge und Gewicht von Informationen durch Größe, Abstand, Position und Kontrast.
- Fokusindikator
- Sichtbare Markierung des aktuell per Tastatur erreichbaren Elements.
- Textalternative
- Sprachliche Entsprechung für nicht-textliche Information.
- Breakpoint
- Layoutgrenze, an der sich eine Anordnung an verfügbare Breite anpasst.
- Interaktionszustand
- Sichtbare Reaktion eines Elements auf Fokus, Auswahl, Erfolg, Warnung oder Fehler.
- Bildnachweis
- Vereinbarte Angabe zu Urheber oder Rechteinhaber eines Bildes.
- Kontrast
- Helligkeitsunterschied zwischen Vorder- und Hintergrund, der Lesbarkeit unterstützt.
Häufige Fragen
Kurz und eindeutig.
Die Antworten benennen Nutzen und Grenze. Konkrete Fälle bleiben einer zuständigen Einzelfallprüfung vorbehalten.
Warum nutzt Morgenelf so wenig Farben?
Damit jede Farbe eine klare Rolle behält und Inhalte ruhig lesbar bleiben.
Dürfen Seiten unterschiedlich aussehen?
Ja, solange Hierarchie, Bedienung und zentrale Markenrollen konsistent bleiben.
Warum keine Textgrafiken?
Echter Text lässt sich vergrößern, durchsuchen, übersetzen und von Hilfstechnologien lesen.
Sind alle Bilder auch für Social Media erlaubt?
Nein. Jeder Kanal benötigt die passende dokumentierte Freigabe.
Was passiert mobil?
Inhalte werden gestapelt, nicht entfernt; die Aufgabe behält ihre Reihenfolge.
Ist Barrierefreiheit mit einem Test erledigt?
Nein. Automatische, technische und redaktionelle Prüfungen ergänzen sich fortlaufend.
Quellenregister
Originalstelle statt Behauptung.
Zuständigkeit: Produkt & Gestaltung. Alle Quellen wurden am 26. August 2026 auf Erreichbarkeit und Passung geprüft. Änderungen lösen eine Prüfung der verbundenen Kapitel aus.
Im Portal anwenden