Ihre Radioplayer Style-Guidelines

Transkript

1 Ihre Radioplayer Style-Guidelines Inhalt 1 Grafik Guidelines Editierbare Bereiche Grunddesign Abmessungen Typografie Sender-Logos Helles und dunkles Player-Design Design-Regeln Kontrastfarben für die Schaltflächen Plug-in-Bereich füllen Plug-in-Bereich abgrenzen Visuelles Feedback Laden Play, Stopp und Pause Live-Programm Podcasts und On-Demand-Content Lautstärke Zeitanzeige Aktuelle Wiedergabe 6 2 Konsolenbeispiele 7

2 1 Grafik-Guidelines 1.1 Elemente der Konsole 1. Radioplayer (Hamburger Menü) 2. Ihr Senderlogo (90-280x50 px) 3. Information/Fortschrittsbalken ( Gerade läuft -Ticker, bzw. Such/Scroll-Leiste bei Podcasts) 4. Ihr Sender Design. Farben und Hintergrundbilder anpassbar 5. Suchfeld mit Autovervollständigung (Sender/Inhalte) 6. Abspiel-Steuerung (mit Button Color an Design anpassbar), Lautstärke und Favoritenherz 7. Radioplayer-Logo 8. Plug-in-Bereich des Senders (Bild mit 730 x 713 Pixel) zur freien Gestaltung 9. Song-Actions, etwa der Kaufen -Button 10. Mobile Download Badge der Radioplayer Apps 1.2 Editierbare Bereiche Nur bestimmte Bereiche innerhalb der Konsole können editiert werden: 1. Hintergrund Das Hintergrundbild muss die exakte Größe von 750 x 815 px haben. 2. Plug-in-Bereich Dieser kann entweder ein statisches Bild (Link nach vorne) sein oder mit Inhalten des Senders befüllt werden. (Siehe Punkt 6.42/6.43 kontrollieren) 3. Abspiel-Steuerung Damit sich der Play/Pause/Stop-Button, der Lautstärke-Regler und das Favoriten-Herz vom gewählten Hintergrund abheben, gibt es eine helle und eine dunkle Version der Abspiel- Steuerung. 1.3 Grunddesign Abmessungen Alle Player müssen sich in einem Pop-Up-Fenster öffnen. Die Pop-Up-Größe von 750 x 875 Pixel ist für alle Sender verbindlich. Um den Rahmen dürfen keine Browser-Bildlaufleisten Radioplayer Deutschland GmbH Seite 2 von 8

3 und kein weißer Bereich sein. Nichts in diesem Bereich darf die Hauptsteuerung oder den oberen Bereich behindern oder bedecken. Abmessungen der Konsole - oberer Teil Abmessungen der Konsole - unterer Teil Typografie Arial ist die primäre Schriftart, die in der Konsole durchgehend verwendet wird. Typografie im Radioplayer Radioplayer Deutschland GmbH Seite 3 von 8

4 1.3.3 Sender-Logos Die Senderlogos erscheinen links oben im Fenster des Players mit einer maximalen Größe von 280 x 50 px. Achten Sie darauf, dass der Text in Logos gut lesbar ist. Wenn das Radioplayer-Menü geöffnet ist, verschieben sich das Senderlogo und die Abspiel-Steuerung in den unteren Teil der Konsole. Das Beispiel zeigt, wie Größe und Abstand konstant bleiben müssen. Bitte wählen Sie ein Logo auf weißem Hintergrund. Bei transparenten Logos kommt es zu Darstellungsproblemen in KFZ-Dashboards. Sender Logos Helles und dunkles Player-Design Für die Konsole Ihres Senders gibt es Vorlagen für ein helles oder ein dunkles Player- Design. Bitte wählen Sie die zu Ihrem Design passende Style- Vorlage, so dass die Abspielsteuerung immer gut sichtbar bleibt. Auch der Play/Pause/Stopp-Button ist seit einiger Zeit transparent. Helles und dunkles Player-Design 1.4 Design-Regeln Um zu gewährleisten, dass jede Konsole als Teil des Radioplayer Universums erkannt wird, haben wir einige einfache Regeln für die Gestaltung festgelegt. Radioplayer Deutschland GmbH Seite 4 von 8

5 1.4.1 Kontrastfarben für die Schaltflächen Es gibt zwei freigegebene Farbschemata für die Konsole - eines für dunkle Hintergründe, das andere für helle Hintergründe. Bitte stellen Sie sicher, dass Sie das richtige verwenden. Andernfalls wird die Bedienung erschwert und unsere Zugangsrichtlinien verletzt. Hier sehen Sie eine Konsole mit dem falschen Farbschema - darunter wird das Farbschema für dunkle Hintergründe verwendet und es sieht gleich viel besser aus. Wenn Sie etwas knifflige Markenfarben haben, müssen Sie eventuell etwas herumexperimentieren. Sie können den Konsolen-Generator so oft Sie möchten benutzen, um ein korrektes Ergebnis zu erzielen Plug-in-Bereich füllen Der Plug-in-Bereich ist der große Bereich, der unterhalb des "gerade läuft"-balkens liegt. Diesen Bereich können Sie selbst anpassen. Wenn Sie ihn jedoch nicht selbst anpassen möchten, müssen Sie mindestens ein statisches Bild dort platzieren. Viele Sender erstellen ein Bild, das die Kontaktdaten des Senders anzeigt. Das ist ein guter Anfang. Oder Sie könnten eine Verlinkung mit Ihrer Facebook-Seite einfügen Plug-in-Bereich abgrenzen Der Plug-in-Bereich muss von der restlichen Konsole abgegrenzt werden. Es muss also optisch klar sein, was zum Plug-in-Bereich gehört, und was nicht. Die meisten Sender lösen dies durch Einfügen eines Rahmens oder durch farbliches Absetzen des Plug-in-Bereichs gegenüber der restlichen Konsole. Links sehen Sie eine Konsole ohne Abgrenzung zwischen dem Plug-in-Bereich und der restlichen Konsole und daneben eine Konsole, deren Plug-in-Bereich mit einer schmalen weißen Rahmenlinie abgegrenzt wird. 1.1 Visuelles Feedback Laden Wenn ein Audio-Stream (live oder Podcast) geladen wird, erscheint das Stopp-Symbol in der Abspiel-Steuerung und das Wort Laden im Info-/Fortschrittsbalken. Radioplayer Deutschland GmbH Seite 5 von 8

6 1.1.2 Play, Stopp und Pause Der Haupt-Kontrollbutton zeigt die Symbole für Play, Stopp und Pause Live-Programm Bei Livesendungen (Simulcast oder Webradio) wird das Stopp-Symbol angezeigt, während der Kanal abgespielt wird. Wird ein Kanal angehalten, so wird das Play-Symbol gezeigt. Der Pause-Button wird bei Livesendungen nicht angezeigt Podcasts und On-Demand-Content Während des Abspielens von On Demand Programmen wie Podcasts, wird dem Hörer der Pause-Button angeboten. Beim Pausieren wechselt die Steuerung auf den Play-Button. Einen Stopp-Button gibt es bei Podcasts nicht Lautstärke Die Lautstärke kann in fünf Stufen eingestellt werden. Fährt der Hörer mit der Maus über das Lautsprecher-Symbol, so werden die Einstellungen sichtbar. Ein Klick auf den Lautsprecher schaltet den Radioplayer stumm Zeitanzeige Beim Abspielen von Podcasts erscheint eine Zeitanzeige links vom Fortschrittsbalken. Angezeigt wird die vergangene Zeit und die Länge der Podcasts. Wenn der Hörer mit der Maus über den Fortschrittsbalken fährt, erscheint der Scroll-Zeiger und die Titelanzeige verschwindet. Den Zeiger kann der Nutzer an jede Stelle der Aufnahme ziehen. Zum Springen kann man auch einfach auf eine beliebige Stelle auf dem Fortschrittsbalken klicken Aktuelle Wiedergabe Spielt der Nutzer einen Live-Sender ab, so erscheint das Live-Symbol mit dem Namen des Senders oder der Track-Information auf der Infoleiste. Radioplayer Deutschland GmbH Seite 6 von 8

7 Ist der Text zu lang, kann der Nutzer die Maus über den Text führen, um die Laufschrift zu aktivieren und den Rest des Textes sichtbar zu machen. 2 Konsolenbeispiele Radioplayer Deutschland GmbH Seite 7 von 8

8 I Radioplayer Deutschland GmbH Seite 8 von 8