DISPLAY · UI / UX · ENTWURF V1 · 15.10.26

DAS BOARD SPRICHT
DIE SPRACHE DER WEBSITE

Alle Screens aus dem Briefing und dem User Flow – übersetzt in Farben, Blob-Formen, Typo und Affen-Posen des Webentwurfs. Hochformat 9:16 (Designbasis 360 × 640 pt, skaliert auf das Board-Display).

SPRACHE

GESTALTUNGS-REGELN

01 · Blau ist die Bühne

Display-Grund ist das Website-Blau #233A8F. Kein Schwarz, keine Neon-Glows – das Display wirkt wie ein Stück Website im Holz.

02 · Jeder Modus hat seine Farbe

Trainings = Grün · Coach = Lila · Spiele = Sand · Kurse = Weiß/Blau. Gleiche Zuordnung wie „Vier Modi“ auf der Website.

03 · Blobs statt Kästen

Große Flächen sind die Griff-Blobs der Website. Karten haben 24 pt Radius, Buttons sind Pillen mit gesperrter Versal-Typo.

04 · Der Affe ist das Feedback

READY · CLIMB · FOCUS · TRY AGAIN · LEVEL UP – die fünf Posen erscheinen genau in diesen Momenten der Nutzung.

05 · Lesbar aus 1,5 m

Zentrale Info (Timer, Zug-Zähler) min. 56 pt. Touch-Ziele min. 56 pt – auch mit Chalk an den Fingern.

06 · LED & Screen = ein System

Grün = geschafft, Rot = abgebrochen, Weiß = Aufnahme, Blau = nächster Griff. Der Screen spiegelt die LED-Farbe.

Blau#233A8F · Bühne
Blau 2#2F4AA6 · Flächen
Grün#BAF05E · Trainings / OK
Lila#D3B9DC · Coach
Sand#ECD5B2 · Spiele
Rot#E23D22 · Aktion / REC
Koralle#FF6B4A · Akzent
Creme#F0EDE1 · Karten

01 · SYSTEM & START

BOARD WÄRMT SICH AUF Bitte kurz einen Schritt zurück.
1.1 Systemstart ca. 15 s. Der Affe macht sich bereit, der Ladebalken läuft synchron zur LED-Animation (von unten nach oben). Hinweis „Schritt zurück“ statt Fachsprache.
AaDE

HI! WAS STEHT
HEUTE AN?

SPEED-REKORD7.023 s
KURS DER WOCHETechnik-Basics · Mi 18 h
1.2 Home Ein Ziel dominiert (Trainings), Coach & Spiele darunter. Unten: Hallen-Highscore und Kurs der Woche als Teaser – führen zu 5.1 und 2.6. Rückfall-Screen nach Inaktivität.
HIGHSCORE

KNACK DEN
HALLEN-HIGHSCORE

SPEEDREACTIONENDURANCE
PLATZ 1 · LENA7.023 sekSpeed-Sequenz „Treppe“
  1. 2Jonas7.418 s
  2. 3Mia7.902 s
  3. 4Can8.115 s
  4. 12Du (heute)9.870 s
1.3 Hallen-Highscore Übernimmt die drei Blob-Kacheln der Website. Eigene Platzierung wird rot markiert, falls man vorher gespielt hat.

02 · TRAININGS Modusfarbe Grün

2.1 Workout-Auswahl Schwierigkeit als 1–3 Griff-Blobs statt Balken. Meta: Dauer · Level · Nutzer-Rating. Workouts mit verknüpftem Hallenkurs bekommen ein Label.
ÜBERSPRINGEN
VIDEO ANSEHEN
SO GEHT'S · 0:06 Easy Warmup

Hüfte nah an die Wand, Arme lang – greif mit Rechts zuerst.

SEQUENZ STARTEN
PLAY-VARIANTE
2.2 Video-Intro 4–10 s, Holz-Rahmen um das Video wie auf der Website. Ein Tipp in einem Satz, Überspringen oben rechts. Play-Variante oben umschaltbar – gilt auch im Prototyp.
EASY WARMUP
123
00:12
4/ 10ZÜGE
NÄCHSTER GRIFF

Greif den blau leuchtenden Griff mit Rechts.

LINKS RECHTS
2.3 Workout läuft Zug-Zähler im Ring ist das größte Element. Aktive Hand wechselt grün. Sequenz-Fortschritt oben als Stepper (1 · 2 · 3).
123
STARK! SEQUENZ 2 VON 3 GESCHAFFT
TIPP FÜR DIE NÄCHSTE

Arme lang machen – Kraft kommt aus den Beinen.

8Absteigen & durchatmen …
2.4 Sequenz geschafft Screen wird grün, synchron zu den 2× grün pulsierenden LEDs. Pause-Countdown mit Tipp aus dem Workout.
UPS – LOSGELASSEN 5 SEKUNDEN KEIN GRIFF

Kein Ding. Zug 6 von 10 – du warst schon weit!

2.5 Try again Rot – parallel zu rot pulsierenden LEDs. Ton bleibt freundlich, der Affe purzelt. Großer Retry-Button.
INFOQR
PASSEND ZU DEINEM WORKOUT

TECHNIK-BASICS
BOULDERN

4 Abende mit Coach – Fußtechnik, Hüfte, Lesen von Routen.

MI · 18:004 × 90 MINDEINE HALLE
QR-CODE ZEIGEN Weiter zum Ergebnis
2.6 Hallenkurs (Info) Kurse der Halle an passende Workouts geknüpft. Creme-Karte wie die Warteliste-Box der Website.
INFOQR

SCAN & BUCH DIR DEN KURS

Öffnet die Kursseite deiner Halle.

WEITER ZUM ERGEBNIS
2.7 Hallenkurs (QR) QR auf grünem Blob – groß genug für Handy-Scan aus 50 cm.
LEVEL UP WORKOUT
GESCHAFFT!
ZEIT0:38
FEHLER0
Ø / ZUG1,28 s
LEVEL3 / 3
WIE WAR'S?
Optional – hilft anderen bei der Wahl
FERTIG
2.8 Ergebnis Feiern zuerst, Zahlen danach. Stats als Blob-Kacheln wie „Highscore“ auf der Website. Rating mit 5 Sternen, optional.

03 · COACH Creative Mode · Modusfarbe Lila

COACH

BAU DEINE
EIGENE SEQUENZ

1AUFNEHMENGriffe am Board der Reihe nach drücken
2NACHKLETTERNBoard zeigt deine Sequenz mit Licht
AUFNAHME STARTEN
3.1 Coach – Start Zwei Schritte, ein Button. Rot = Aufnahme (wie „REC“ auf der Website-Karte).
REC

Griff drücken, um ihn zur Sequenz hinzuzufügen.

5GRIFFE
Board leuchtet weiß während der Aufnahme
3.2 Coach – Aufnahme Ganzer Screen lila, großer Zähler. Die Griff-Spur zeigt, was schon aufgenommen ist; Undo für Fehlgriffe.

04 · SPIELE Modusfarbe Sand

ICH PACKE MEINEN KOFFER
Affe hält sich am Blob fest
2 / 4

Der nächste Spieler wiederholt alle Griffe – und hängt zwei neue an.

ZURÜCKWEITER
4.1 Spielregeln als Story Wie vorgeschlagen: 4 Karten zum Durchtippen (Insta-Story-Balken oben), je eine Regel + Affe. Überspringen jederzeit.
ICH PACKE MEINEN KOFFER
ANZAHL SPIELER
234
LEBEN PRO SPIELER
SPIEL STARTEN
4.2 Spiel-Setup Große Auswahl-Kacheln (blau = gewählt). Leben als Herzen in Koralle.
SPIELER 1 IST DRAN
1/ 2NEUE GRIFFE
SPIELER 1Affe hängt an Spieler 1
SPIELER 2

Erst 4 alte Griffe wiederholen, dann 2 neue setzen. Eine Hand bleibt immer am Board!

4.3 Spiel läuft · 2 Spieler Der Affe hängt an der Karte des Spielers, der dran ist, und wandert beim Wechsel mit. Alle starten mit 3 Leben; verlorene bleiben als graue Herzen sichtbar.
SPIELER 3 IST DRAN
3/ 4NEUE GRIFFE
DANACH
SP. 1
SP. 2
SP. 3Affe hängt an Spieler 3
SP. 4

Erst 8 alte Griffe wiederholen, dann 2 neue setzen. Eine Hand bleibt immer am Board!

SPIELER-LAYOUT
4.3 Spiel läuft · 4 Spieler Layout oben umschaltbar – gilt auch im Prototyp. A: alle in einer Reihe, Affe an der aktiven Kachel. B: große Karten im 2×2-Raster, Affe hängt in der aktiven Karte. C: aktiver Spieler groß im Fokus, die anderen darunter in Zug-Reihenfolge.

05 · LED & SCREEN

BlauNächster Griff · Screen zeigt Hand + Zähler
Grün · 2× PulsSequenz geschafft · Screen wird grün (2.4)
Rot · PulsAbbruch / 5 s kein Griff · Screen rot (2.5)
WeißCoach-Aufnahme · Screen lila mit REC (3.2)
Lauflicht ↑Systemstart · Ladebalken synchron (1.1)