Guest PWA — Wireframes (Low-Fi)

Navigation Flow

flowchart TD
  A[Scan QR / Open Link] --> B[Token Validate]
  B -->|ok| C[Terms / Optional PIN]
  B -->|invalid| Z[Error: Event Closed]
  C --> D[Gallery]
  D --> E[Upload Picker]
  E --> F[Upload Queue]
  D --> G[Photo Lightbox]
  D --> H[Filters]
  D --> I[Settings Sheet]
  F --> D
  G --> D

Gallery (mobile)

Settings open in-place via a sheet launched from the header gear; the sheet focuses on legal text and cache management while the theme toggle remains in the header.

+--------------------------------------------------+
|  Toolbar:  [Scan?]  [Filter]   [Upload]  [Menu]  |
+--------------------------------------------------+
|  ▢  ▢▢   ▢  ▢▢▢    ▢▢  ▢  ▢▢   Masonry grid      |
|  ▢▢ ▢     ▢▢  ▢     ▢  ▢▢  ▢                     |
|  ▢  ▢▢   ▢   ▢▢    ▢▢   ▢   ▢                    |
+--------------------------------------------------+
|  Pull to refresh     ▲ new items                 |
+--------------------------------------------------+

Upload Queue (mobile)

+---------------- Uploads -------------------------+
|  [ ] IMG_1234.jpg   75%   ||||||||||\____  [X] |
|  [!] IMG_1235.jpg   retry  network error  [↻] |
|  [ ] IMG_0002.jpg   queued                       |
|                                                  |
|  Background sync:  (On)  • Pause • Clear all     |
+--------------------------------------------------+

Lightbox

+------------------ Photo -------------------------+
| < back         ❤  128 likes         Share ⤴     |
|                                                  |
|                [   image   ]                     |
|                                                  |
|  Emotion: 🎉 Party     Task: Jump shot           |
+--------------------------------------------------+

States & Messages

Empty gallery: “Be the first to upload a photo!” + CTA button.
Event closed: explain and provide contact hint.
Offline: banner “You’re offline — viewing cached photos. Uploads will resume automatically.”

Notes

Keep wireframes platform-agnostic; exact visuals handled by design system.
Photos only; video capture/upload is not supported.

Additional Screens (from PWA_Wireframes.txt)

Landing / Einstieg

+---------------- Landing -------------------------+
| Willkommen bei Fotochallenge 🎉                 |
|                                                 |
| [ QR/PIN eingeben ]   [ Event beitreten ]       |
|                                                 |
| Fehler: Ungültiger Code / Event geschlossen     |
+-------------------------------------------------+

Profil-Setup

+---------------- Profil --------------------------+
| Profil erstellen                                 |
| [ Dein Name ]                                    |
| ( ) Avatar wählen  (Rund-Icons)                  |
| [ Starten ]   [ Überspringen ]                   |
+--------------------------------------------------+

Home / Feed (mit Info-Bar)

+---------------- Home ----------------------------+
| Eventtitel                                      |
| Dein Fotospiel zur Hochzeit                     |
| ————————————————————————————————                |
| X Gäste online  ✅  Y Aufgaben gelöst            |
|                                                  |
| [ Aufgabe ziehen ]  [ Wie fühlst du dich? ]      |
|    (klein) Einfach ein Foto machen               |
|                                                  |
|  [Masonry Feed …]                                |
+--------------------------------------------------+

Aufgaben-Picker (Emotionen)

+-------------- Stimmung wählen -------------------+
| Albern  Energetisch  Herzlich   Cool  Gemeinsam |
| Kreativ Ruhig Mutig                                 |
| [ Aufgabe anzeigen ]                             |
+--------------------------------------------------+

Aufgaben-Detail (Karte)

+---------------- Aufgabe -------------------------+
| Stimmung: Albern          [X]                   |
| Aufgabe: Selfie in falsche Richtung             |
| Dauer: <1 Min      Gruppe: 2–5                  |
| [ Los geht’s ]  [ Neue Aufgabe ]  [ Stimmung ]  |
+--------------------------------------------------+

Kamera / Upload

+--------------- Kamera/Upload --------------------+
| [ Kamera öffnen ]  [ Foto hochladen ]           |
| ✔ Foto erfolgreich hochgeladen                  |
| [ Galerie ansehen ]                             |
+--------------------------------------------------+

Galerie / Filter

+---------------- Galerie -------------------------+
| [ Neueste ] [ Beliebt ] [ Meine ]               |
|  ❤️12  [Foto]                                   |
|  ❤️ 5  [Foto]                                   |
|  ❤️21  [Foto]                                   |
+--------------------------------------------------+

Foto-Detailansicht

+--------------- Foto-Detail ----------------------+
| [X]                                              |
| [ Vollbild-Foto ]                                 |
| ❤️ 23    🎉 4 Reaktionen                         |
| Aufgabe: Gruppenfoto (>=5)                        |
| Hochgeladen von: Lisa                             |
| [ ❤️ Like ]                                       |
+--------------------------------------------------+

Erfolge / Achievements

+--------------- Erfolge --------------------------+
| Erstes Foto   5 Aufgaben   Beliebtestes Foto     |
| Gruppenfoto-König                                 |
| Fortschritt: [██████▁▁▁] (6/10)                  |
+--------------------------------------------------+

Optionale: Slideshow & Abschluss

+------------- Slideshow (optional) ---------------+
| Vollbild-Wechsel alle 5s, Likes & Aufgabe-Overlay|
+--------------------------------------------------+

+--------------- Event-Abschluss ------------------+
| Danke fürs Mitmachen!                            |
| Fotos: 120  Aufgaben: 45  Likes: 900             |
| QR/Link zur Online-Galerie                       |
+--------------------------------------------------+

6.2 KiB Raw Permalink Blame History Unescape Escape

Guest PWA — Wireframes (Low-Fi)

6.2 KiB

Raw Permalink Blame History