Wir haben eine Reihe von Design- und Usability-Updates in SpeedAdmin play! vorgenommen, damit sich die Oberfläche moderner, lesbarer und angenehmer in der Arbeit anfühlt. Das Update umfasst neue Typografie, angepasste Farben, ein überarbeitetes Menüsystem sowie verfeinerte UI-Elemente wie Tabs, Button-Gruppen, Switches, Chips und Kalender. Unten findest du die einzelnen Änderungen im Detail.
Geändert vonHelvetica zu Open Sans — Open Sans ist für das Web optimiert und sorgt für einekonsistente Darstellung auf allen Plattformen und in allen Browsern. Die humanistischen Buchstabenformen wirken einladend und modern und behalten dabeieinen neutralen, professionellen Ton.
Die Basis-Schriftgröße wurde von 12px auf 14px erhöht — das verbessert Lesbarkeit und Barrierefreiheit, reduziert Augenermüdung und entspricht dem Bereich von 14–16px, der in den meisten modernen Web- und SaaS-Oberflächen für Fließtext verwendet wird. In Datentabellen verwenden wir 13px, damit pro Zeile genügend Inhalt sichtbar bleibt und gleichzeitig ein deutlicher Schritt nach oben gegenüber der bisherigen 12px-Basis erfolgt.
Die Basis-Primärfarbe #006580 bleibt unverändert, aber die helleren und dunkleren Abstufungen wurden überarbeitet. Die bisherigen hellen Töne wirkten auf Schaltflächen und Hintergründen zu kräftig und übersättigt — die neuen Töne wirken weicher und ausgewogener und bewahren gleichzeitig den Charakter der Marke.
Um Platz für die größere Schriftgröße zu schaffen und mehr Luft zu lassen, wurden einige Menüpunkte neu gruppiert:
• „Meine Schüler:innen“ und „Meine Kolleg:innen“ sind jetzt unter „Ressourcen“ zusammengefasst (wenn du als Lehrkraft angemeldet bist)
• „Medien“ wurde unter„Profil“ verschoben
Damit wird der knappe Platz adressiert, bevor das mobile Menü greift — insbesondere bei Lehrer-Accounts, in denen das Menü ohnehin schon voll war.
Das mobile Menünimmt nicht mehr die volle Bildschirmbreite ein, sondern hat eine feste Breitevon 240px. So bleibt ein Teil der Seite hinter dem Menü sichtbar und Nutzerbehalten die Orientierung. Außerdem lässt sich das Menü leichter schließen,indem außerhalb getippt wird, und es entspricht dem üblichen Drawer-Mustermoderner Apps.
Inaktive Tabs sind jetzt transparent statt hellblau. Der bisherige hellblaue Hintergrund war auf dem grauen Seitenhintergrund schwer zu erkennen und ließ die inaktiven Tabs prominenter wirken als den eigentlich ausgewählten. Durch das Entfernen des Hintergrunds und die Verwendung einer fetten Schriftstärke beim ausgewählten Tab ist der aktive Tab nun klar erkennbar, während inaktive Tabs in den Hintergrund treten.
Wir haben das Design von Button-Gruppen an das Design einzelner Buttons angeglichen — sie nutzen jetzt dieselbe visuelle Sprache: gleicher Border-Radius, gleiches Padding und gleiches Styling. Bisher unterschieden sich Button-Gruppen deutlich von einzelnen Buttons, was zu visueller Inkonsistenz in der Oberfläche führte. Das einheitliche Styling lässt die UI geschlossener und vorhersehbarer wirken.
Die Größe der Switches wurde auf eine Höhe von 26px erhöht — eine gängige und komfortable Größe. Die bisherigen Switches waren spürbar zu klein und ließen sich schwer präzise treffen — vor allem auf Mobilgeräten und Touchscreens. Die neue Größe verbessert die Bedienbarkeit und entspricht den üblichen Richtlinien für Touch-Targets.
Wir haben das Styling unserer Chips aktualisiert — Farbe, Rahmen und Border-Radius — damit sie zur übergreifenden, aufgefrischten visuellen Sprache der Oberfläche passen. Das neue Design wirkt moderner und konsistenter mit den übrigen Komponenten, während Chips weiterhin gut erkennbar und schnell zu erfassen bleiben.
Behoben wurde ein Problem im Kalender, bei dem direkt aufeinanderfolgende Termine (z. B.12:00–12:30 und 12:30–13:00) nebeneinander dargestellt wurden, als ob sie sich überschneiden würden, anstatt vertikal hintereinander gestapelt zu werden. Aufeinanderfolgende Termine nehmen jetzt korrekt die volle Spaltenbreite ein und folgen einander in der Zeitleiste, während sich tatsächlich überschneidendeTermine weiterhin nebeneinander dargestellt werden.
Wie: Automatisc