Naživo
12 400 ľudí počúva
Photo karta
fotka, glass chipy, caption pod fotkou
Interná dokumentácia
Jeden systém, tri značky.
Jeden dizajn systém obsluhuje Fun Rádio, Rádio Vlna aj Radio Group. Prepnutím značky v hlavičke sa mení iba téma: farby, logo a hlas. Typografia, komponenty, gridy a pohyb ostávajú rovnaké.
Filozofia
Prečo takto
Radio Group pôsobí ako technologicko-marketingová firma. Dizajn to musí komunikovať na prvý pohľad.
Digitálne prvé
Web, appka a streamy sú výkladom značky. Éter je obsah, digitál je zážitok okolo neho. Vzdušné svetlé plochy, biele karty s veľkým rádiusom a jemné difúzne tiene.
Jeden systém, tri značky
Rovnaké komponenty a mriežky pre všetky tri weby. Téma sa prepína jedným atribútom na dokumente, komponenty čítajú farby výhradne z premenných.
Tech-marketingová firma
Nie klasické rádio, ale mediálna platforma s dátami a produktmi. Čísla, živé stavy a prémiový dizajn hovoria jazykom moderného SaaS.
| Vrstva systému | Správanie | Poznámka |
|---|---|---|
| Farby a tóny | Mení sa so značkou | definované iba na html[data-brand] |
| Logo a wordmark | Mení sa so značkou | Fun logo, Vlna logo, RG wordmark |
| Hlas a oslovenie | Mení sa so značkou | Fun a Vlna tykajú, Radio Group vyká |
| Typografia | Spoločná | Inter Tight na nadpisy, Inter na text |
| Komponenty | Spoločné | tlačidlá, chipy, karty, prehrávač |
| Gridy a odsadenia | Spoločné | kontajner 1160 px, gutter 20 až 40 px |
| Motion | Spoločný | jeden easing a jedna škála trvaní |
Značky
Tri tváre jednej skupiny
Hity, ktoré miluješ.
Mladé a energické. Magenta na lavender vzduchu, rýchle tempo, živé izby a súťaže. Tyká poslucháčovi, energicky a hravo.
Otvoriť stránku
Hity overené časom.
Teplé retro na svetlom krémovom podklade. Červená so žltou a modrou, pokojnejšie tempo. Tyká poslucháčovi, teplo a nostalgicky.
Otvoriť stránku
RADIO GROUP
Reklamný priestor Fun rádia a Rádia Vlna.
Korporátna matka, B2B media house. Ink ako primárna farba, tlačidlá tmavé s bielym textom. Magenta a červená len v grafoch a chipoch značiek. Vyká klientom a agentúram.
Otvoriť stránku
Farby
Tokeny aktuálnej témy
Swatche čítajú živé premenné. Prepni značku v hlavičke a hodnoty sa prepíšu.
--brand#E60469
--brand-strong#C00457
--brand-soft#FDE7F1
--accent-2#C9BDF4
--accent-2-soft#EDE9FB
--accent-3#9BD1F5
--accent-3-soft#E7F3FC
--bg#F6F4FB
--surface#FFFFFF
--ink#16141F
--muted#6E6A7B
--line#E9E6F2
Komponenty nikdy nepoužívajú hex hodnoty priamo. Farby značiek sa definujú výhradne na html[data-brand], všetko ostatné číta premenné.
Typografia
Inter Tight a Inter
Nadpisy píšeme normálnymi písmenami a končíme bodkou v brand farbe. Veľké písmená patria len mikro-labelom.
Rádio, ktoré žije online.
Hity overené časom.
Jedna platforma, celý éter.
Počúvaj, kedy chceš ty.
Kŕdeľ šťastných ďatľov učí koňa žrať kôru
Vypätá dcéra grófa Maxwella s IQ nižším ako kôň
Kŕdeľ šťastných ďatľov učí pri ústí Váhu mĺkveho koňa obhrýzať kôru a žrať čerstvé mäso. Základný text pre odseky, popisy relácií a novinky.
Doplnkové informácie, časy vysielania, e-maily relácií a metadáta. Oddeľovač je bodka: relácia · čas · stanica.
Naživo · Diskusia · Program · Súťaž
Tvary a elevácia
Mäkké rádiusy, jemné tiene
Rádiusy
32 px · r-xl
veľké karty
veľké karty
24 px · r-lg
menšie karty
menšie karty
16 px · r-md
thumbnaily
thumbnaily
pill · chipy a CTA
Elevácia
1 px linka
pokojový stav
pokojový stav
shadow-lift
hover a plávajúce prvky
hover a plávajúce prvky
shadow-soft
veľké difúzne karty
veľké difúzne karty
Naživo
Glass panel
blur 14 až 18, biela s priehľadnosťou, na fotkách a farebných plochách
Komponenty
Živé stavebné bloky
Všetko nižšie sa preskinuje prepnutím značky. Rovnaký kód, iná téma.
Tlačidlá
Primárne tlačidlo je vždy brand farba s bielym textom. Na stránke Radio Group je brand farbou ink, takže tlačidlá sú tmavé automaticky.
Chipy
12 400 ľudí počúva
Naživo
Naživo teraz
Diskusia
relácia · čas · stanica
Naživo
Naživo
Avatar stack
Prekryv 11 px, biely okraj 2,5 px. Iniciálky ako záloha bez fotky.
Formuláre
Živé izby
Karty a dlaždice
Naživo
12 400 ľudí počúva
Naživo
12 400 ľudí počúva
Štúdio
Diskusia
Pastel karta s avatar stackom
hosť · štúdio
Stat dlaždica
12 400
poslucháčov práve teraz, číslo nabieha count-up animáciou
Bento dlaždica
Základná bunka mriežky
Rádius 32 px, tenká linka, zdvih o 4 px a mäkký tieň pri hoveri.
Novinková karta: thumbnail, kategória, čas a titulok
Naživo teraz
podpisový komponent celého systému · carousel živých izieb
Naživo
1
12 400 ľudí počúva
Živé vysielanie
moderované vysielanie práve teraz
Štúdio
Diskusia
2
Ranná debata o novej hudbe
3
8 200 počúva
4
Stanica
Hudba nonstop
24 hodín denne
5
Anatómia
- 1Glass chipstav Naživo alebo počet poslucháčov v rohu fotky, blur a jemná biela
- 2Mikro-labelkategória veľkými písmenami s ikonou, rozostup ,14 em
- 3TitulokInter Tight, normálne písmená, najviac dva riadky
- 4Pill CTAPočúvať so šípkou, vždy v brand farbe témy
- 5Dotspozícia v carouseli, aktívna bodka sa predlžuje na 22 px
Správanie
- Snap a drag: karty sa zarovnávajú na začiatok, myšou sa dá ťahať, dotyk má natívny scroll.
- Miešanie kariet: photo, pastel a orb karty sa striedajú, fotka nikdy nie je dvakrát za sebou.
- Témovanie: prepni značku v hlavičke, fotka aj pastelové tóny sa prispôsobia téme.
- Šípky a dots: na mobile ostávajú dots, šípky sa skrývajú.
Prehrávač
Dock a jeho stavy
Statická ukážka. Živý dock je vždy dole v strede obrazovky a otvára celoobrazovkový prehrávač.
Pokojový stav
Počas prehrávania
Pripájanie
Pravidlá zvuku
- Jeden zdroj zvuku: na stránke žije jediný zdieľaný Audio element, nové prehratie vždy zastaví predošlé.
- Pohyb len pri hraní: rotácia disku a equalizér bežia výhradne počas prehrávania.
- Stavy: Naživo pre stanice, Prehráva sa pre podcasty, Načítavam počas pripájania.
- Chyba prenosu: pokojné hlásenie v texte docku, nikdy modálne okno.
- Streamy sa nepredhrávajú: preload je vypnutý, dáta tečú až po kliknutí.
Vzory
Sekcie zložené z blokov
Vzor · Hero
Audio platforma · od roku 1990
Rádio, ktoré žije online.
Živé vysielanie, digitálne stanice, podcasty a appka na jednom mieste.
12 400 práve počúva
Vzor · Štatistický band
1 600 000
unikátnych poslucháčov týždenne bez prekryvov
1 200 000
zobrazení webov skupiny
1990
rok vzniku prvého súkromného rádia
Vzor · Novinky
Teddy Swims predstavil dojímavú novinku Break Up in Reverse
Hrad Beckov nám odhalí svoje tajomstvá
Vzor · App band
Appka
Celá stanica vo vrecku
Streamy, podcasty aj program v mobile. Stiahni si appku zadarmo a počúvaj kdekoľvek.
Vzor · B2B band pre Radio Group · vykanie
Spojíme vašu značku s viac ako 1,6 milióna poslucháčov.
Týždenný zásah kombinácie Fun rádia a Rádia Vlna bez prekryvov, k tomu viac ako 1,2 milióna zobrazení webov.
02 5778 7370 · Bratislava
461 000
denná počúvanosť Fun rádia
342 000
denná počúvanosť Rádia Vlna
Motion
Pohyb s jedným charakterom
Jeden easing pre celý systém. Pohyb je vždy krátky, mäkký a smerom nahor.
| Prvok | Trvanie | Poznámka |
|---|---|---|
| Mikrointerakcie | 180 ms | hover chipov a tlačidiel, zmena farby a tieňa |
| Karty a dlaždice | 380 ms | zdvih translateY a mäkký tieň pri hoveri |
| Reveal pri scrolle | 700 ms | posun z 26 px, spúšťa sa pri 92 percentách výšky okna |
| Stagger | 60 až 80 ms | triedy fx-d1 až fx-d5 cez transition-delay |
| Easing | cubic-bezier(.22, .9, .24, 1) | rovnaký pre celý systém, rýchly nástup a mäkké dosadnutie |
| Obmedzený pohyb | 0 ms | prefers-reduced-motion pridá triedu reduced na body, všetko je viditeľné okamžite |
Reveal používa scroll listener s requestAnimationFrame namiesto IntersectionObserver, aby pri kotvových skokoch neostali sekcie neviditeľné.
Hlas značky
Ako píšeme
| Značka | Oslovenie | Tón | Príklad |
|---|---|---|---|
| Fun Rádio | tykanie | energický, hravý, rýchly | „Pusti si nás. Hráme presne to, čo chceš počuť.“ |
| Rádio Vlna | tykanie | teplý, nostalgický, pokojný | „Hity, ktoré ti pripomenú, prečo miluješ hudbu.“ |
| Radio Group | vykanie | profesionálny, vecný, B2B | „Spojíme vašu značku s viac ako 1,6 milióna poslucháčov.“ |
Pravidlá textu
- Nadpisy normálnymi písmenami, bodka v brand farbe na konci. Veľké písmená len v mikro-labeloch.
- Oddeľovač metadát je bodka: relácia · čas · stanica.
- Bez dlhých pomlčiek a bez znamienka plus. Píšeme „viac ako 1,6 milióna“.
- Čísla s medzerou po tisícoch: 1 054 000. Desatiny s čiarkou: 94,3.
- Slovenské slová majú prednosť pred anglicizmami. Labely ako NAŽIVO alebo LIVE sú v poriadku.