Design-Prompt für einen Veranstaltungsbegleiter mit Zeitplan

Erstelle mit dem bestehenden Projekt-Stack einen bearbeitbaren, Mobile-First-App-Prototyp für [PROJECT] und [AUDIENCE]. Die Aufgabe lautet: Begleitender Veranstaltungsplan.

Erforderliche Inhalte und Struktur

Erkunde Sessions nach Zeit und Themenbereich, stelle eine persönliche Agenda zusammen und zeige Überschneidungen, Raumänderungen und Veranstaltungshinweise an.

Ansichten und Navigation

Erstelle drei verbundene Ansichten: Zeitplan, Sessiondetails und Mein Tag. Lass den ausgewählten Datensatz im Bildschirmtitel oder in der Zusammenfassung sichtbar. Unterstütze eine eindeutige Zurück-Aktion und bewahre unvollständige Eingaben beim Wechsel zwischen Ansichten. Platziere die primäre Aktion nahe am relevanten Inhalt und berücksichtige mobile Sicherheitsbereiche, eine sichtbare Bildschirmtastatur und lange übersetzte Bezeichnungen. Passe die Komposition bei Desktopbreiten an, ohne einen Schritt zu entfernen oder die Aufgabe zu verändern.

Projektvorgaben

Verwende [APPROVED_CONTENT] für Namen, Datensätze, Bezeichnungen, Mengen und Ziele. Frage nach fehlenden Daten, anstatt Aussagen zu betrieblichen Abläufen zu erfinden. Demonstrationsdatensätze dürfen die fiktive Marke Gather verwenden; kennzeichne sie als Beispieldaten. Erkläre, welche Aktionen lokale Prototypinteraktionen sind und welche Authentifizierung, Persistenz, Berechtigungen oder ein Backend erfordern würden. Binde keine externen Dienste an und behaupte nicht, dass eine Transaktion abgeschlossen wurde, sofern diese Integration nicht ausdrücklich implementiert und getestet wurde.

Designausrichtung

Befolge [BRAND_RULES]. Wenn keine Marke vorgegeben ist, verwende Schwarz, Weiß, Säuregelb und markante Konferenztypografie. Mache den Arbeitsablauf durch eigene Inhalte und Steuerelemente erkennbar, statt generische Dashboard-Karten zu wiederholen. Verwende eine konsistente Abstandsskala und eine klare Texthierarchie. Integriere einen sichtbaren Tastaturfokus, barrierefreie Bezeichnungen, ausreichenden Kontrast und nicht ausschließlich farbcodierte Statusbezeichnungen. Beachte reduzierte Bewegung und halte animierte Übergänge optional.

Aufgabenspezifische Abnahmeprüfung

• Zeige Überschneidungen gespeicherter Sessions und Zeitzonenänderungen ausdrücklich an, anstatt Auswahlen stillschweigend zu entfernen.

Interaktionszustände

Implementiere den erfolgreichen Ablauf über drei Bildschirme mit lokalen Beispieldaten. Füge einen hilfreichen Leerzustand, eine Validierung vor Abschluss einer Aktion, einen Lade- oder Ausstehend-Status und einen behebbaren Fehlerzustand hinzu. Destruktive Änderungen erfordern eine Prüfung oder eine Möglichkeit zum Rückgängigmachen. Halte den Zustand eines Datensatzes in allen drei Ansichten konsistent. Verwirf teilweise ausgefüllte Eingaben nicht unbemerkt und ändere die Auswahl einer Person nach einem erneuten Versuch nicht.

Übergabe und Prüfung

Gib die bearbeitbaren App-Ansichten zurück und erläutere das Datenmodell, das Verhalten des lokalen Speichers sowie nicht implementierte Integrationen. Teste bei 320px und in einem breiteren Viewport, mit Tastaturnavigation und langen Inhalten. Prüfe das Ergebnis anhand der oben genannten aufgabenspezifischen Abnahmekriterien, bevor du Funktionen hinzufügst. Hebe das Demonstrationsverhalten klar von einem laufenden Produktivdienst ab.

Referenzanhang und Rekonstruktionsziel

Füge reference.webp aus dem Download-Paket dieses Prompts zusammen mit diesem Prompt in OpenDesign ein. Erstelle ein bearbeitbares Ergebnis mit ähnlicher Komposition und Hierarchie; binde nicht das gesamte Referenzbild als fertige Benutzeroberfläche ein. Bewahre freigegebene Projektinhalte und Markenregeln, wenn sie fiktiven Beispielbeschriftungen widersprechen. Falls das Bild fehlt oder unleserlich ist, frage danach, anstatt visuelle Übereinstimmung zu behaupten.

Referenzkomposition — drei verbundene App-Bildschirme

Das beigefügte Bild zeigt Gather, eine fiktive Konferenz-App, als drei gleich breite mobile Bildschirme auf einem blass säuregelben Präsentationshintergrund. Erstelle Zeitplan, Sessiondetails und Mein Tag als verbundene App-Ansichten. Stelle die Montage aus drei Bildschirmen nicht als einzelne Seite dar und verwende nicht die gesamte Referenz als Hintergrund. Zeige bei mobiler Breite jeweils eine Ansicht. Eine breitere Vorschau darf die Ansichten zum Vergleich nebeneinander zeigen, doch die funktionsfähige App muss ihre Navigation und ihren Zustand bewahren.

Zeitplan-Bildschirm

Verwende eine fast weiße Fläche mit einer dünnen dunklen Außenkante. Die Kopfzeile kombiniert links eine fette schwarze Gather-Wortmarke mit kompakten Angaben zu Veranstaltungsdaten und -ort sowie einem Suchsymbol auf der rechten Seite. Setze darunter einen übergroßen, fetten Titel „Zeitplan“ und eine kleinere einzeilige Einführung. Füge eine dreispaltige Datumsauswahl für Di., 14. Okt., Mi., 15. Okt. und Do., 16. Okt. hinzu; das ausgewählte Datum ist säuregelb, die anderen sind weiß und durch helle Trennlinien unterteilt. Darunter befinden sich die Filter „Alle Themenbereiche“ und „Alle Typen“ sowie eine kompakte Listenansicht-Steuerung. Die Hauptliste verwendet eine schmale Zeitspalte, einen vertikalen Farbbalken für den Themenbereich und anschließend eine Themenbereichsbezeichnung in Großbuchstaben, einen fetten Sessiontitel und eine kleinere Raumbezeichnung. Jede Zeile enthält rechtsbündig eine kreisförmige Plus-Aktion und eine feine horizontale Trennlinie. Die dargestellten Themenbereiche verwenden Blau, Gelb, Rosa, Grün und Violett; zeige zusätzlich ihre Namen, damit Farbe nicht das einzige Unterscheidungsmerkmal ist. Die untere Navigation ist schwarz und enthält „Zeitplan“, „Mein Tag“, „Hinweise“ und „Mehr“; Symbol und Bezeichnung des aktiven Eintrags sind gelb.

Sessiondetail-Bildschirm

Setze die helle Listenansicht in Kontrast zu einer nahezu schwarzen Detailfläche. Platziere oben Bedienelemente für Zurück, Lesezeichen und Teilen. Hinterlege den oberen Bereich mit einem dezenten Konferenzfoto und einem dunklen Overlay, das einen hohen Textkontrast gewährleistet. Zeige ein kleines gelbes Label PRODUKT, den großen, zweizeiligen gelben Titel Designsysteme im großen Maßstab und eine weiße ergänzende Zeile. Darunter folgen Kalender-/Zeit- und Veranstaltungsort-/Raum-Metadaten in zwei Spalten mit Kontur-Icons. Ergänze dünn umrandete Themen-Tags, eine kurze Beschreibung und eine Zeile für den Vortragenden mit rundem Porträt, Name, Rolle, Organisation und Offenlegungspfeil. Verwende eine breite, säuregelbe Schaltfläche Zu meinem Tag hinzufügen und anschließend eine dunkel umrandete Schaltfläche Zum Kalender hinzufügen. Nach einer Trennlinie folgt der Bereich Ähnliche Sessions mit einer kleinen Aktion Alle anzeigen und kompakten Session-Zeilen. Halte den Zurück-Navigationspfad klar erkennbar; erfinde beim Ersetzen von Demodaten keine realen Vortragenden oder Empfehlungen.

Bildschirm „Mein Tag“

Kehre zur nahezu weißen Fläche zurück und wiederhole den Gather-Header, das Datum, den Veranstaltungsort und das Einstellungs-Icon. Verwende die große Überschrift Mein Tag und einen kurzen Untertitel. Ein blassgelbes Benachrichtigungsbanner enthält eine Glocke, den fett gesetzten Titel Zeitzonenänderung, ergänzenden Text und ein Bedienelement zum Schließen. Darunter erscheinen Meine Agenda, Konflikte (1) und Hinweise (2) als drei Segmente; das ausgewählte Segment ist schwarz mit weißem Text. Gespeicherte Sessions verwenden erneut den Aufbau der Zeitplanzeilen. Eine sich überschneidende Session erscheint auf einer blassrosa Fläche mit roter Zeit- und Themenakzentfarbe, dem eindeutigen Label Überschneidung mit gespeicherter Session und der Aktion Beide behalten. Ein geänderter Veranstaltungsort wird als rote Zeile Raumänderung: B1 → B2 angezeigt. Wiederhole die schwarze untere Navigation mit aktivem Bereich Mein Tag und einem gelben Zähler-Badge bei Hinweise.

Visuelle Hierarchie und Tokens

Verwende eine kräftige neutrale Grotesk-Schrift für die Wortmarke und große Titel, eine gut lesbare Sans-Serif für Fließtext und Bedienelemente, Schwarz und nahezu Weiß als primäre Flächenfarben sowie Säuregelb für primäre Aktionen und ausgewählte Zustände. Beginne mit einem 8px-Abstandsraster, 16–24px horizontalem Seitenabstand, mindestens 44px großen Touch-Zielen und einem starken Kontrast zwischen Titeln, Fließtext und Metadaten. Behandle diese Werte als Ausgangspunkt für die Implementierung, nicht als exakt gemessene Pixelspezifikationen. Bewahre den kompakten Zeitplan, den markanten Detailtitel und den klaren Hell-Dunkel-Kontrast des Screenshots. Verwende eigene oder lizenzierte Konferenzfotografie und ein fiktives Porträt des Vortragenden; Labels bleiben Live-Text. Die abgerundeten Bedienelemente in diesem Beispiel sind Teil der visuellen Referenz von Gather und unabhängig von den Schaltflächen der Prompt-Bibliothekswebsite.

Interaktions- und Datenvertrag — implementieren und prüfen

Verwende lokale Demodatensätze mit stabilen Session-IDs, Titel, Themenkategorie, Typ, UTC-Start/-Ende, Veranstaltungszeitzone, Raum, previousRoom, Vortragendem und Speicherstatus. Halte selectedDate, searchQuery, Themen-/Typfilter, savedSessionIds und dismissedNoticeIds explizit fest. Das Bild ist konzeptionell: Die dargestellten Datumsangaben und Zeitzonenformulierungen sind kein verbindlicher Veranstaltungszeitplan. Korrigiere inkonsistente Demodaten und bewahre dabei die gezeigte Hierarchie. Die Auswahl eines Tages aktualisiert die Datumshervorhebung und die Liste. Die Suche berücksichtigt Namen von Sessions und Vortragenden; Filter werden kombiniert und bieten einen hilfreichen Leerzustand sowie eine Aktion zum Zurücksetzen. Beim Öffnen einer Zeile werden die Details derselben Session angezeigt; Zurück stellt die vorherige Liste, die Filter und die Scrollposition wieder her. Die Plus- und Zu meinem Tag hinzufügen-Aktionen speichern dieselbe Session genau einmal und wechseln in einen eindeutigen Gespeichert-Zustand. Das Entfernen aktualisiert Mein Tag und Hinweise konsistent. Erkenne Überschneidungen gespeicherter Sessions am selben Datum mit startA < endB und startB < endA. Zeige eine Warnung und beide Datensätze; Beide behalten bestätigt den Konflikt, ohne eine Auswahl stillschweigend zu löschen. Konflikte zeigt die betroffenen Paare und verlinkt zurück zu ihren Details. Eine Zeitzonenänderung konvertiert dieselben UTC-Zeitpunkte in die ausgewählte benannte Zeitzone, aktualisiert die angezeigten Datums- und Zeitangaben und berechnet die Gruppierung neu; die tatsächliche Veranstaltungsdauer darf sich nicht ändern. Zeige ein sichtbares Zeitzonenlabel und eine ausblendbare Erklärung. Ein Hinweis zur Raumänderung zeigt den alten und den neuen Raum; das Schließen des Hinweises setzt den neuen Raum nicht zurück. Stelle für Zum Kalender hinzufügen eine gültige lokale Kalenderdatei bereit oder kennzeichne die Aktion eindeutig als Demo; eine Verbindung zu einem externen Kalender wird nicht vorausgesetzt. Teilen kann die Teilen-Funktion der Plattform mit Link-kopieren-Fallback verwenden. Lesezeichen, das Schließen von Benachrichtigungen und die Navigation benötigen einen sichtbaren Tastaturfokus und barrierefreie Bezeichnungen. Halte die primären Aktionen oberhalb des mobilen Sicherheitsbereichs erreichbar. Berücksichtige Zustände für keine gespeicherten Sessions, keine passenden Ergebnisse und behebbare Speicherfehler. Implementiere keine Zahlungen, Kontoerstellung oder Live-Veranstaltungsupdates, sofern dies nicht separat angefordert wird.

Visueller Vergleich und Übergabe

1. Vergleiche das Ergebnis bei übereinstimmenden Proportionen mit dem angehängten Bild. Prüfe vor der Ausarbeitung dekorativer Details die Platzierung der Hauptbereiche, relative Bildgrößen, Zeilenumbrüche, Abstände, typografische Hierarchie, Kontrast, aktive Zustände und Inhaltsdichte.
2. Teste anschließend das schmale Layout, ohne Desktoptexte in winzige Beschriftungen zu zwängen.
3. Halte Logos, Fotos und Symbole als separate Assets und alle aussagekräftigen Beschriftungen bearbeitbar. Führe nicht verfügbare Schriftarten und Assets sowie beabsichtigte Abweichungen auf. Gib die funktionsfähigen Dateien zusammen mit einer knappen Beschreibung des implementierten Verhaltens und der noch ausstehenden Integrationen zurück; versprich nicht allein auf Grundlage des Prompts ein pixelgenaues Ergebnis.