Designsystem „Schulheft“
Bausteine des Lerncoachs
Die Gestaltung nimmt das Schulheft auf: Kästchen für Rechnen, Linien für Lesen, der Heftrand als ruhige Kante. Königsblau wie Füllertinte führt durch alle Aktionen. Gelb ist nur Textmarker, Rot kommt nicht vor: Hier wird nichts angestrichen.
Farben
Kontraste
Berechnet nach WCAG 2.2 aus den Werten in style.css bei jedem Build.
| Einsatz | Farben | Kontrast | Mindestens | Ergebnis |
|---|---|---|---|---|
| Fließtext | --tinte auf --papier | 14.61 : 1 | 4.5 : 1 | erfüllt |
| Nebentext | --tinte-2 auf --papier | 7.48 : 1 | 4.5 : 1 | erfüllt |
| Nebentext auf Fußfläche | --tinte-2 auf --papier-2 | 6.79 : 1 | 4.5 : 1 | erfüllt |
| Links | --koenigsblau auf --papier | 7.36 : 1 | 4.5 : 1 | erfüllt |
| Text auf Hauptknopf | --weiss auf --koenigsblau | 7.80 : 1 | 4.5 : 1 | erfüllt |
| Aktiver Menüpunkt | --koenigsblau-dunkel auf --koenigsblau-hell | 9.53 : 1 | 4.5 : 1 | erfüllt |
| Textmarker | --tinte auf --marker | 12.19 : 1 | 4.5 : 1 | erfüllt |
| Status kann sicher | --sicher auf --weiss | 6.46 : 1 | 4.5 : 1 | erfüllt |
| Status meistens | --meistens auf --weiss | 6.28 : 1 | 4.5 : 1 | erfüllt |
| Status übt noch | --uebt auf --weiss | 8.37 : 1 | 4.5 : 1 | erfüllt |
| Status kann sicher auf Papier | --sicher auf --papier | 6.09 : 1 | 4.5 : 1 | erfüllt |
| Status meistens auf Papier | --meistens auf --papier | 5.92 : 1 | 4.5 : 1 | erfüllt |
| Status übt noch auf Papier | --uebt auf --papier | 7.89 : 1 | 4.5 : 1 | erfüllt |
| Achtungshinweis | --tinte auf --achtung-bg | 14.14 : 1 | 4.5 : 1 | erfüllt |
| Coach-Beitrag | --tinte auf --koenigsblau-hell | 13.31 : 1 | 4.5 : 1 | erfüllt |
| Text über Kästchenlinie (ungünstigster Punkt) | --tinte auf --kaestchen | 11.77 : 1 | 4.5 : 1 | erfüllt |
| Text über Heftlinie (ungünstigster Punkt) | --tinte auf --lineatur | 9.27 : 1 | 4.5 : 1 | erfüllt |
| Dachzeile über Kästchenlinie | --tinte-2 auf --kaestchen | 6.02 : 1 | 4.5 : 1 | erfüllt |
| Zweitknopf | --koenigsblau-dunkel auf --weiss | 11.10 : 1 | 4.5 : 1 | erfüllt |
| Rand von Eingabefeldern (Nicht-Text) | --linie-stark auf --weiss | 3.55 : 1 | 3 : 1 | erfüllt |
| Fokusrahmen (Nicht-Text) | --koenigsblau auf --weiss | 7.80 : 1 | 3 : 1 | erfüllt |
Schrift
Andika für alle Texte. SIL hat sie für Leseanfänger entwickelt. Das einstöckige „a“ entspricht der Grundschrift, die Kinder in der Grundschule lernen. Die Null hat keinen Schrägstrich, und I, l und 1 sind klar zu unterscheiden. Source Serif 4 für Überschriften. Grundgröße 17 px für Eltern und Lehrkräfte, 20 px für Kinder.
Beide Schriften stehen unter der SIL Open Font License und liegen auf dem eigenen Server. Es werden keine Schriften von Dritten nachgeladen.
Status
Immer Form und Wort, nie nur Farbe: kann sicher · meistens sicher · übt noch
Knöpfe
Mindestens 44 × 44 px, in Kinderansichten 56 px. Sichtbarer Fokusrahmen in Königsblau, auf dunklem Grund in Gelb.
Flächen
Rechnen
Kästchen wie im Rechenheft.
Lesen
Linien wie im Schreibheft, Zeilenhöhe passend zum Text.
Hinweise und Gespräch
Information: neutral, Königsblau.
Achtung: Testmodus, fehlende Eingabe.
Wie viel kosten die 3 Hefte zusammen?
3,60
Bitte schreib hier keine Adressen.
Regeln
- Keine Seite scrollt seitwärts, auf keiner Breite ab 320 px.
- Kein Zeitdruck für Kinder: keine Uhr, kein Countdown, jederzeit Pause.
- Keine Ranglisten, keine Punkte im Vergleich mit anderen Kindern.
- Für Kinder keine Noten- oder Schulartsprache. Termine und Fristen sehen nur Eltern.
- Alles mit Tastatur bedienbar, nichts nur durch Ziehen oder Wischen.
- Bewegung nur, wenn das Gerät keine reduzierte Bewegung verlangt.