Rozhodnutie pred estetikou
Každá hlavná obrazovka má odpovedať na otázku návštevníka: čo sa hrá, kedy, pre koho je film vhodný a kde si kúpim vstupenku. Až potom prichádza nálada kina.
← Portfólio
Weby2025
Kino Hlohovec
Kino web ako živý systém: program, filmové detaily, vstupenky, špeciálne formáty, letné kino a jednoduchý redakčný plugin.
Kino web nemá byť len pekná homepage. Musí fungovať ako prevádzkový systém: návštevník sa rozhodne za pár sekúnd a pracovník kina vie meniť program, termíny, popupy, slider a letné kino bez toho, aby rozbil dizajn.
01 — Stratégia
Čo sa riešilo a prečo
Case study má ukázať rozmýšľanie za návrhom. Nie iba hotový obrázok, ale dôvod, prečo sú jednotlivé časti webu poskladané práve takto.
Program ako dátový model
Film a termín sú oddelené. Jeden film môže mať viac premietaní, rôzne dátumy a rôzne informácie. Vďaka tomu sa program môže skladať automaticky bez ručného prelepovania sekcií.
Sezóna ako režim, nie ďalšia stránka
Letné kino nie je iba podstránka s textom. Má vlastný mód v administrácii, vlastné zvýraznenie v menu a samostatný zoznam filmov, aby sa sezóna dala zapnúť a vypnúť podľa potreby.
Plugin ako poistka prevádzky
Pôvodné funkcie boli rozdelené v Code Snippets. Presun do pluginu znižuje riziko náhodného vypnutia, dáva funkcionalite štruktúru a robí údržbu čitateľnejšou.
02 — Admin pre pracovníkov
Jednoduchá obsluha namiesto skladania stránok
Najväčšia hodnota je v tom, že bežné úlohy majú vlastné krátke formuláre. Pracovník vyplní obsah, nastaví viditeľnosť alebo termín a systém sa postará o verejný dizajn.
aktívnych snippetov
pôvodná logika webu bola rozdelená do viacerých samostatných častí, ktoré bolo treba zmapovať a bezpečne presunúť
plugin modulov
core render, frontend vrstva, admin menu, filmy a termíny, slideshow/popupy, letné kino a shell doplnky
admin obrazoviek
filmy, termíny, slideshow, popupy, spodná lišta a letný režim majú vlastné pracovné rozhranie
ručného skladania programu
redaktor dopĺňa dáta a systém ich zobrazí vo verejnom dizajne, kartách, detaile aj sezónnych výpisoch
Pracovné nástroje
Admin je rozdelený podľa reálnych úloh, nie podľa technickej štruktúry webu.
coreheader, routing, verejné renderovanie, dátové helpery a základná štruktúra webu
frontendCSS a JS vrstva pre menu, program, karty, popupy, spodnú lištu a responzívne správanie
filmyformulár filmu, plagát, titulná fotka, popis, žáner, dĺžka, vek, výstrahy a vstupné
termínyprepojenie filmu s konkrétnym dátumom, časom, miestom a odkazom na vstupenky
slideshowhomepage slider s filmovým vizuálom, textom, tlačidlom a poradím zobrazenia
popupyoznamy s dizajnom, prioritou, platnosťou, frekvenciou, obrázkom a CTA
spodná lištaprevádzkový oznam alebo najbližšie podujatie ako rýchla akcia na webe
letné kinosamostatný sezónny režim, verejná stránka a admin zoznam filmov letného kina
03 — Obrazovky
Detailné zábery riešenia
Viac obrazoviek pomáha ukázať, že projekt nie je jedna efektná homepage, ale sada opakovateľných rozhodnutí, ktoré držia celý web.
Detail 01
Homepage ako filmový vstup aj predajná plocha
Reálny verejný screenshot ukazuje slider, filmový vizuál, dátum, tlačidlo Vstupenky a denný program hneď pod prvou obrazovkou.
Detail 02
Program a loop grid filmov
Program nie je ručný zoznam. Karty čerpajú z filmov a termínov, takže obsah sa mení v dátach a dizajn zostáva stabilný.
Detail 03
Detail filmu ako rozhodovací bod
Plagát, titul, žáner, dĺžka, výstrahy, najbližšie premietanie, cena a tlačidlo na lístok sú na jednej obrazovke.
Detail 04
Letné kino ako vlastný sezónny zážitok
Letná vetva má inú náladu, vlastný CTA vstup a samostatný program, pretože motivácia návštevy je iná než pri bežnom premietaní.
Detail 05
Admin: filmy a najbližšie termíny
Pracovník vidí aktuálne filmy, najbližšie premietania, stav a rýchlu akciu Upraviť detail bez vstupu do buildera.
Detail 06
Admin: jednoduchý formulár filmu
Formulár drží základné údaje, JSO označenia a výstrahy. Redaktor vypĺňa obsah, systém rieši verejné karty a detail.
Detail 07
Admin: mód Letné kino
Letný režim sa dá zapnúť, vypnúť a spravovať cez vlastný zoznam filmov. Sezóna nie je tvrdý zásah do šablóny.
04 — Vizuálny systém
Farby, tlačidlá a akcenty
Paleta a CTA prvky majú viesť pozornosť. Farby nie sú len estetika, ale navigačné značky: čo je hlavná akcia, čo je pracovná plocha a čo je technický stav.
Ticket pink
#D95B96Hlavná akcia: vstupenky, aktívny deň, dôležité zvýraznenia.
Cinema black
#10121CPozadie pre filmové vizuály a večernú atmosféru kina.
Summer orange
#FF7E56Samostatný akcent pre Letné kino, aby sezónny režim nevyzeral ako bežná položka menu.
Admin cyan
#6FE6FFDoplnkový akcent pre technické a redakčné časti case study.
Primárne CTA
Najviditeľnejšia akcia pri filme. Návštevník nemá hľadať pokladňu, ale kliknúť.
Sezónny vstup
Oranžové tlačidlo mení mentálny režim: nejde o obyčajné kino, ale večer pod holým nebom.
Detail filmu
Na detaile filmu je CTA pri rozhodovacích informáciách, nie až po dlhom texte.
05 — Funkčné moduly
Čo musí web zvládnuť
Tu je praktická vrstva projektu: sekcie, výpisy, administrácia a typy obsahu, ktoré robia web použiteľným aj po spustení.
Program a Loop Grid
Verejný program je zložený z filmov a termínov. Karty sa skladajú automaticky z dát, takže pracovník mení obsah, nie dizajn.
Detail filmu
Detail drží plagát, titulnú fotku, popis, žáner, dĺžku, vekové odporúčanie, výstrahy, najbližšie premietanie, cenu a tlačidlo na vstupenku.
Vstupenky a CTA
Ružové tlačidlá sú hlavná akcia. Objavujú sa v hlavičke, slideri, programe aj detaile filmu, aby cesta k lístku nebola schovaná.
Letné kino
Letná sezóna má vlastný mód, vlastný verejný vstup a vlastný admin zoznam filmov, pretože sa správa inak než bežné premietanie v kine.
Filmový klub a špeciálne formáty
Web rozlišuje pravidelný program, Filmový klub, Dámsky večer, Pre školy a Prenájom, aby sa rôzni návštevníci dostali rovno k svojej motivácii.
Plugin namiesto snippet chaosu
Funkcie sa presunuli do pluginu Kino Úsmev Core, aby core render, frontend vrstva, admin, popupy a letné kino mali jedno miesto správy.
Najväčšia hodnota kina nie je len v tom, že vyzerá filmovo. Hodnota je v tom, že web má vnútorný poriadok: film, termín, vstupenka, sezóna a oznam majú svoje miesto. Preto sa dá web meniť každý týždeň bez toho, aby sa pri každej zmene znovu skladal dizajn.