Plox
Plox bietet Pixel-Art-Künstlern eine Zeichenfläche und einen Ort, um ihre Arbeit zu teilen. Galerien, Challenges und Moderation verbinden das Zeichnen mit der Community.
Mein Anteil: Produktdesign und Full-Stack-Entwicklung für die öffentliche Galerie, den React-Arbeitsbereich, die gemeinsame Produktarchitektur und das Interaktionsmodell zwischen beiden Teilen.
30-SEKUNDEN-ÜBERBLICK
Das Projekt auf einen Blick.
- Aufgabe
- Eine öffentliche Kreativ-Community mit einem umfangreichen Pixel-Art-Studio verbinden und den ersten Einstieg trotzdem verständlich halten.
- Mein Anteil
- Produktdesign und Full-Stack-Entwicklung für Entdecken, Gestalten, Teilen, Moderation und das Interaktionsmodell des Studios.
- Team
- Eigenständiges Produktdesign und Entwicklung.
- Zeitraum
- Web-Anwendung · 2025
- Umgesetzt
- Eine verbundene Plattform mit Galerien, Challenges, Profilen, Anleitungen, Moderation und funktionierender Zeichenfläche.
- Ergebnis
- Galerie, Challenges, Profile, Moderationswerkzeuge und Browser-Editor funktionieren. Die Fallstudie kennzeichnet offen, welche Messwerte noch fehlen.
Ein umfangreiches Kreativwerkzeug zugänglich aufbauen
Plox verbindet zwei unterschiedliche Situationen: Arbeiten anderer Künstler entdecken und selbst in einem umfangreichen Pixel-Art-Studio gestalten. Galerie, Austausch und Zeichenwerkzeuge sollten zusammengehören, ohne den Einstieg unnötig kompliziert zu machen.
“Am Anfang stand nicht die Wahl des Frameworks, sondern die Frage, wie Pixel-Künstler einander und ihre Arbeiten finden.”
Plox-ProjektnotizenEin Produktmodell für Galerie und Arbeitsbereich
Plox trennt die öffentlich auffindbare Website vom nicht indexierten Kreativbereich. So bleibt der Arbeitsbereich konzentriert, während Werke auffindbar, teilbar und mit der Community verbunden sind.
Entdecken und teilen
Eine serverseitig gerenderte Galerie, animierte Vorschauen, Künstlerprofile, Challenges, Ranglisten und kurze Freigabecodes machen Arbeiten außerhalb des Editors sichtbar.
Konzentriert gestalten
Die React-Zeichenfläche ordnet Werkzeuge für Zeichnung, Farbe, Referenzen, Ebenen, Frames, Onion Skinning und Projektstatus direkt um die Zeichenfläche an.
Über eine API verbunden
Ein gemeinsames Typsystem und eine Express-API sorgen dafür, dass Identitäten, die Herkunft von Arbeiten, Challenges, Berechtigungen und Moderation in beiden Bereichen konsistent bleiben.
Komplexität sinnvoll ordnen
Ein Kreativwerkzeug kann fortgeschrittene Funktionen nicht vollständig verstecken. Einsteiger brauchen einen nachvollziehbaren Einstieg; erfahrene Nutzer sollen trotzdem schnell arbeiten können. Eigene Bereiche erleichtern das Wiedererkennen, Tastenkürzel und Befehlspalette beschleunigen häufige Abläufe.
Neben dem Interface gehörte die gesamte Produktarchitektur zur Umsetzung
Plox läuft als Full-Stack-Monorepo: Next.js für die öffentliche Website, React für das Studio, Node und Express für die gemeinsame API, Supabase mit Postgres für Produktdaten und Docker Compose für die lokale Umgebung. Caddy leitet Website, Studio und API als getrennte Dienste weiter, ohne das gemeinsame Produktmodell aufzuteilen.
“Ein Befehl startet den vollständigen Stack. Beide Oberflächen können unabhängig weiterentwickelt werden, ohne die jeweils andere zu beeinträchtigen.”
Plox-Projektnotizen · lokale BereitstellungsarchitekturWo Produkt, Interface und Infrastruktur zusammenkommen
Die Umsetzung verbindet Entscheidungen zu Produkt, Interface und Infrastruktur: Workspace-State, Frame-Aktionen, Speicherablauf, Referenzsteuerung und die Grenze zwischen öffentlicher Website und Studio.
Was ich vor einer Aussage zur Bedienbarkeit messen würde
Die technische Grundlage liefert Kontext, aber noch kein Usability-Ergebnis. Der nächste Schritt ist ein Aufgabentest: Können neue Nutzer Arbeiten ohne Einführung erstellen, korrigieren, animieren und teilen?
Direkte Rückmeldung
Ziel der Untersuchung wäre eine sichtbare Rückmeldung innerhalb von etwa 100 ms. Ob Plox diesen Wert bei Pinselstrich, Werkzeugwechsel, Framewechsel und Rückgängig-Funktion erreicht, ist noch nicht gemessen.
Fehler sicher rückgängig machen
Löschen von Frames und Ebenen, Leeren der Zeichenfläche, Überschreiben, ungespeicherte Arbeit sowie Rückgängig und Wiederholen auf Umkehrbarkeit, Bestätigung und sichtbaren Status prüfen.
Vom Einstieg zur sicheren Bedienung
Erste Zeichnung, Farbwechsel, neue Ebene, Rückgängig-Funktion, zweiten Animationsframe, Onion Skin und Export testen. Dabei Bearbeitungszeit, Fehler, Hilfestellung und Sicherheit erfassen.
Das gemeinsame Modell über alle Bereiche erhalten
“Die einzelne Ansicht war nicht der schwierige Teil. Entscheidend war ein konsistentes Interaktionsmodell über ein wachsendes Kreativsystem hinweg.”
Einordnung der Fallstudie · technischer Umfang ist Kontext, kein Usability-NachweisDie aktuellen Projektnotizen nennen außerdem 240 bestandene Anwendungstests. Diese Zahlen beschreiben Systemumfang und technische Prüfung, ersetzen aber keine Aufgabendaten von Nutzern.
Umfangreiche Funktionen brauchen einen klaren Einstieg
Den Ablauf ebenso gestalten wie die einzelnen Bereiche
Die zentrale Frage war, wie Entdecken, Gestalten, Rückmeldung und Teilen zusammenwirken. Die Oberfläche der Zeichenfläche war nur ein Teil davon.
Oberflächen nach Nutzungsabsicht trennen
Eine öffentliche Galerie und ein konzentriertes Studio können API und Produktsprache teilen, ohne dieselbe Informationsdichte oder Navigation zu benötigen.
Tastenk ürzel als zweite Bedienebene einsetzen
Erfahrene Nutzer sollen schnell arbeiten können, ohne dass der erste Einstieg Vorwissen oder Dokumentation voraussetzt.
Das vorhandene Projektmaterial belegt Architektur und Interaktionsentscheidungen, enthält aber noch keine belastbare Untersuchung zum Aufgabenerfolg und keine gemessenen Latenzwerte. Beides sollte mit den abschließenden Aufzeichnungen und Prüfdaten ergänzt werden.
Die vier kritischen Interaktionen messen und eine kleine aufgabenbasierte Usability-Studie durchführen. Die Ergebnisse sind aussagekräftiger als die Anzahl der Funktionen.
