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.
Detail projektuWeby
Kino Hlohovec
Kino web ako živý systém: program, filmové detaily, vstupenky, špeciálne formáty, letné kino a jednoduchý redakčný plugin.
Čo som dodal
Web designWordPress pluginUX adminu
Problém
Kino nie je statická stránka. Program sa mení každý týždeň, jeden film môže mať viac termínov, návštevník chce rýchlo kúpiť lístok a pracovník kina potrebuje obsah doplniť bez skladania layoutov. Popri bežnom programe bolo treba zvládnuť Filmový klub, Dámsky večer, Pre školy, Prenájom, oznamy, slider, popupy a sezónny režim Letné kino.
Prístup
Vizuál je postavený ako večerný kino zážitok: tmavé plochy, veľký filmový obraz, ružové vstupenky a oranžový akcent pre letnú sezónu. UX však ostáva praktické: program, dátum, vekové označenie, výstrahy, najbližšie premietanie a CTA sú čitateľné aj pri bohatých filmových vizuáloch.
Rozhodnutie
Počas práce sa riešenie posunulo z roztrúsených Code Snippets do vlastného pluginu Kino Úsmev Core. Dôvod nebol estetický, ale prevádzkový: oddeliť verejný dizajn od redakčnej práce, vytvoriť vlastné admin obrazovky pre filmy, termíny, slideshow, popupy, spodnú lištu a letné kino a spraviť z webu systém, ktorý sa dá bezpečne udržiavať.
Proces
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.
Prevádzková vrstva
Admin a moduly, ktoré držia web použiteľný.
Case study nemá ukázať iba výsledný dizajn. Dôležitá je aj každodenná obsluha: čo vie pracovník upraviť, kde sa dopĺňajú dáta a ako web zostáva pod kontrolou.
pôvodná logika webu bola rozdelená do viacerých samostatných častí, ktoré bolo treba zmapovať a bezpečne presunúť
core render, frontend vrstva, admin menu, filmy a termíny, slideshow/popupy, letné kino a shell doplnky
filmy, termíny, slideshow, popupy, spodná lišta a letný režim majú vlastné pracovné rozhranie
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
Obrazovky
Detailné zábery riešenia.
Viac obrazoviek ukazuje, že projekt nie je jedna efektná homepage, ale systém rozhodnutí: verejný dizajn, obsahové moduly, interakcie a administrácia.
Obrazovka 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.
Obrazovka 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ý.
Obrazovka 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.
Obrazovka 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í.
Obrazovka 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.
Obrazovka 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.
Obrazovka 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.
Vizuálny systém
Farby, tlačidlá a akcenty.
Paleta a CTA prvky vedú pozornosť. Farby nie sú len estetika, ale orientačné značky: čo je hlavná akcia, čo je pracovná plocha a čo je špecifický 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.
Funkčné moduly
Čo musí web zvládnuť.
Čo sa na webe reálne riešilo
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.
Výsledok projektuĎalší projektKultúra Hlohovec →