Klupski brod „PURGA”: landing page za događaj sa formom za upit

Landing page klupskog broda „PURGA” je stariji, ali dobar primer jednostraničnog sajta napravljenog po zadatoj maketi. Prema zadatku, trebalo je izraditi stranicu sa mogućnošću slanja upita za događaj.

Otvori izvorni opis projekta: https://raskumandrin.pages.dev/purga

U ovakvim zadacima kvalitet nije samo poklapanje sa maketom. Važno je i da se interaktivni elementi ponašaju prirodno: forma ne sme da kvari scenario upita, polja treba da budu jasna, a dinamički tekst ne treba da deluje robotski.

Za promo stranice događaja statički landing page ostaje praktičan format: brzo se učitava, lako se predaje izvođaču ili vlasniku projekta i ne traži tešku infrastrukturu kada je poslovna logika ograničena na upit i nekoliko interaktivnih elemenata.

Pošalji brif

Slika 1. Landing page klupskog broda „PURGA”: promo stranica sa formom za upit i izborom parametara događaja.

Zadatak

Trebalo je pretvoriti maketu u radnu HTML stranicu. Landing page je trebalo da:

• sačuva vizuelnu strukturu izvorne makete;
• korisniku da jasan put do slanja upita;
• podrži izbor broja sati za događaj;
• ispravno prikaže ruske oblike reči pored broja sati;
• ostane jednostavan za objavljivanje i predaju klijentu.

Pažnja prema detaljima

U maketi je bio prikazan oblik „5 часов”. Ako se menja samo broj, interfejs na ruskom brzo počinje da izgleda nemarno: „1 часов”, „2 часов”, „3 часов”. Formalno je to mala stvar, ali baš takvi detalji utiču na utisak kvaliteta.

Kada u web formi postoji dinamika — broj sati, gostiju, proizvoda, fajlova ili bilo kojih drugih entiteta — tekst pored broja takođe treba da se menja ispravno. Korisniku je prijatnije da čita formu koja govori normalnim jezikom, umesto da mehanički ubacuje istu reč posle svakog broja.

Ovu specifičnost je posebno važno uzeti u obzir na višejezičkim sajtovima: u različitim jezicima oblici reči nastaju potpuno različito, i pravilo za ruski ne može se jednostavno preneti na engleski, srpski ili drugi jezik. Zato takve natpise treba projektovati kao deo logike interfejsa, a ne kao statičan tekst u maketi.

Ispod je primer upravo za ruski jezik: funkcija dobija broj i tri oblika reči, a vraća ispravan natpis — „1 час”, „2 часа”, „5 часов”.

function plural(n, form1, form2, form5) {
  n = Math.abs(n) % 100;
  var n1 = n % 10;

  if (n > 10 && n < 20) {
    return form5;
  }
  if (n1 > 1 && n1 < 5) {
    return form2;
  }
  if (n1 == 1) {
    return form1;
  }

  return form5;
}

Za formatirano popunjavanje polja forme korišćena je i biblioteka formatter.js. To je pomoglo da unos bude uredniji bez nepotrebnog komplikovanja celog projekta.

Tehnički okvir

• Format: jednostranični promo sajt.
• Frontend: HTML/CSS izrada po maketi.
• Interaktivnost: JavaScript za izbor parametara i obradu oblika reči.
• Forma: upit sa formatiranim unosom polja.
• Backend: minimalan okvir dovoljan za scenario upita.

Glavna inženjerska ideja je jednostavna: ako landing page prodaje događaj ili uslugu, interfejs treba da bude ne samo vizuelno tačan, već i precizan u sitnicama. Korisnik ne treba da zapinje o neispravan tekst pored komercijalno važnih parametara upita.

Rezultat

• Maketa je pretvorena u radni jednostranični landing page.
• Na stranici se pojavio scenario slanja upita za događaj.
• Broj sati se prikazivao sa ispravnim ruskim oblicima reči.
• Polja forme su dobila formatirano popunjavanje.
• Ovaj projekat pokazuje praktičan pristup landing stranicama: ne samo izraditi ekran, već dovesti interaktivne detalje do normalnog korisničkog nivoa.

Kome odgovara ovakav format

• Event projektima kojima treba brz promo landing page za događaj ili prostor.
• Malim biznisima gde je upit važniji od složenog kataloga ili ličnog naloga.
• Timovima koji već imaju maketu i potreban im je uredan frontend bez suvišne arhitekture.
• Projektima na ruskom ili drugim jezicima sa složenim oblicima reči, gde dinamički interfejs treba da uzme u obzir deklinaciju i formatiranje unosa.

Ako je potreban sličan rezultat: pomažem da se izversta landing page po maketi, sastavi forma za upit, osmisle dinamički natpisi i stranica pripremi za objavljivanje.

Pošalji brif