02 — Smjernice
Smjernice i struktura redizajna
1 Vizualni identitet
1.1 Paleta boja
Izvučena iz HTML izvora postojećeg sajta (rgba vrijednosti iz CSS-a).
Naračasta Tala
#FF4F05
Akcent / CTA / gumbi
Tamno plava
#00407D
Linkovi / podnaslovi
Gotovo crna
#0F0F0F
Hero / footer / dark sekcije
Tekst
#1A1A1A
Sav paragraf tekst
Srednja siva
#666666
Meta info / datumi / caption
Topla bijela
#F7F7F7
Osnovna pozadina
Bijela
#FFFFFF
Kartice / overlayji
| Kombinacija | Kontrast | WCAG AA (4.5:1) |
|---|---|---|
| Bijeli tekst na #00407D | 7.2:1 | ✅ Prolazi AAA |
| #1A1A1A tekst na #F7F7F7 | 17.5:1 | ✅ Prolazi AAA |
| #FF4F05 na #0F0F0F | 5.1:1 | ✅ Prolazi AA |
| Bijeli tekst na #FF4F05 | 3.8:1 | ⚠️ Samo za large text (18px+) |
⚠️ #FF4F05 koristiti za naglasak i veće UI elemente. Za mali tekst na bijeloj — koristiti #00407D.
1.2 Tipografija
Articulat CF (postojeći Typekit) → zamijeniti s Plus Jakarta Sans (Google Fonts, besplatno, vizualno ekvivalentan geometrijski sans-serif).
| Uloga | Font | Weight | Fluid veličina | LH |
|---|---|---|---|---|
| Display H1 | Plus Jakarta Sans | 800 | clamp(2.5rem → 4.5rem) | 1.05 |
| H1 | Plus Jakarta Sans | 700 | clamp(2rem → 3.5rem) | 1.15 |
| H2 | Plus Jakarta Sans | 700 | clamp(1.625rem → 2.75rem) | 1.25 |
| H3 | Plus Jakarta Sans | 600 | clamp(1.25rem → 2rem) | 1.35 |
| H4 | Plus Jakarta Sans | 600 | clamp(1.0625rem → 1.625rem) | 1.4 |
| Lead / Intro | Plus Jakarta Sans | 400 | clamp(1.0625rem → 1.375rem) | 1.6 |
| Body | Plus Jakarta Sans | 400 | clamp(0.9375rem → 1.0625rem) | 1.75 |
| Mono / Label | Space Mono | 400 | 0.8125rem (fiksno) | 1.5 |
Google Fonts import:
https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap
https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap
1.3 Ikonografija i asseti
| Ikone | Phosphor Icons — line stil, 24px/20px (open source) |
| Border radius | 4px gumbi, 8px kartice, 12px modali |
| Slike | WebP format, 85% kvaliteta, lazy loading, srcset |
| Animacije | Subtilni fade-in + translateY na scroll — čuva dinamičnost postojećeg dizajna |
2 Informacijska arhitektura
2.2 Struktura naslovne stranice
┌──────────────────────────────────────────────────────┐ │ HEADER (sticky) │ │ Logo TALA | PLEŠI GLEDAJ STVARAJ O NAMA [🔴 DONIRAJ] │ ├──────────────────────────────────────────────────────┤ │ HERO — fullscreen (min-height: 100vh) │ │ "Prostor za ples, │ │ istraživanje i zajednicu." │ │ [Aktualni program ↓] [Pogledaj što radimo] │ ├────────────────┬──────────────────┬──────────────────┤ │ GLEDAJ │ PLEŠI │ STVARAJ │ │ Nadolazeće │ Programi │ Rezidencije │ │ predstave │ i upisi │ i projekti │ │ [→ Ulaznice] │ [→ Upis] │ [→ Saznaj više] │ ├──────────────────────────────────────────────────────┤ │ AKTUALNI PROGRAM — 3–4 kartice (grid/slider) │ │ [Slika + naziv + datum + CTA] │ ├──────────────────────────────────────────────────────┤ │ O NAMA — split (tekst lijevo + slika desno) │ │ Kratki opis organizacije [Upoznaj nas →] │ ├──────────────────────────────────────────────────────┤ │ EDUKATIVNI PROGRAMI — preview grid (3 kartice) │ │ [Lyrical] [Dance Vibes] [Breaking] [Svi →] │ ├──────────────────────────────────────────────────────┤ │ DONACIJA CTA — dark sekcija (#0F0F0F) │ │ "Podržite nezavisnu plesnu scenu" [🔴 DONIRAJ] │ ├──────────────────────────────────────────────────────┤ │ NEWSLETTER — inline Mailchimp forma │ ├──────────────────────────────────────────────────────┤ │ FOOTER │ │ Logo | Nav | Adresa | Social | Copyright © 2026 │ └──────────────────────────────────────────────────────┘
3 Opis stranica
| Stranica | Svrha | Glavni CTA |
|---|---|---|
| Naslovna / | Usmjeriti posjetitelja prema PLEŠI/GLEDAJ/STVARAJ | Aktualni program / Upis / Doniraj |
| PLEŠI /plesi/ | Konverzija za upis u edukativne programe | Prijavi se / Upiši se |
| Programi /plesi/programi/ | Pregled svih programa s filterima (dob, stil, dan) | Više o programu / Upiši se |
| GLEDAJ /gledaj/ | Privući publiku i prodati ulaznice | Kupi ulaznice |
| Predstave /predstave/ | Arhiva svih 63 predstava — zamjena za Readymag flat list | Detalji / Ulaznice |
| STVARAJ /stvaraj/ | Privući koreografe na rezidencijalni program | Prijavi se / Saznaj više |
| Projekti /projekti/ | Istraživanja i koprodukcije — CPT archiva | Pročitaj više |
| O NAMA /o-nama/ | Misija, tim (6 članova), partneri, financiranje | Kontaktiraj nas |
| DONIRAJ /doniraj/ | Prikupljanje donacija (Stripe integracija) | Doniraj |
| Kontakt /kontakt/ | Adresa, Maps, forma | Pošalji poruku |
| Arhiva /arhiva/ | Full-text pretraga svih sadržaja | Pretraži |
3.1 Custom Post Types
| CPT | Opis | Taksonomije | Slug |
|---|---|---|---|
| predstava | Sve predstave — zamjena za ~40 zasebnih Readymag stranica | vrsta, sezona, koreograf | /predstave/{slug}/ |
| program | Edukativni programi (Dance Vibes, Lyrical, Breaking...) | dob, stil, voditelj | /programi/{slug}/ |
| projekt | Istraživačke rezidencije i koprodukcije | godina, platforma | /projekti/{slug}/ |
4 Tehničke preporuke
Stack
| CMS | WordPress + Hello Elementor + Elementor Pro |
| Pristupačnost | OneTap Accessibility (WCAG 2.1 AA toolbar) |
| Sigurnost | WPManageNinja Pro (firewall, brute force, 2FA) |
| Admin utilities | ASE Pro (clean head, disable XML-RPC, REST API) |
| SEO | SlimSEO Pro (meta, Schema.org, 301, sitemap) |
| Cache / performanse | LiteSpeed Cache + WebP Uploads |
| GDPR | CookieYes (trenutno ne postoji na sajtu — OBAVEZNO!) |
| Donacije / plaćanje | Stripe integracija (zadržati postojeći account) |
| Newsletter | Mailchimp embed (zadržati postojeću listu) |
Migracija sadržaja
| Što | Iz | U |
|---|---|---|
| ~40 stranica predstava | Readymag flat pages | CPT: predstava |
| 10 edukativnih programa | Readymag PLEŠI stranica | CPT: program |
| ~15 istraživačkih projekata | Readymag flat pages | CPT: projekt |
| Statične stranice (O nama, Doniraj...) | Readymag pages | WordPress Pages |
| Slike | rmcdn.net CDN | WordPress Media Library (WebP) |
| URL-ovi | Readymag slugovi | 301 redirect mapping |
5 UX poboljšanja
- Programi s filterima — odabir dobi/stila/dana → instant filter bez reload-a
- Predstave grid s filtrom (nadolazeće / archiva) — eliminira 63 zasebne stranice
- Sticky header + CTA "DONIRAJ" u #FF4F05 — uvijek vidljiv
- Pretraga — site search u navigaciji (trenutno ne postoji)
- Termine i cijene programa direktno na kartici — bez "Uskoro više informacija"
- Google Maps embed na kontakt stranici i footeru (Radnička 27)
- GDPR cookie banner — obvezno (trenutno potpuno nedostaje!)
- Dinamičan copyright —
<?php echo date('Y'); ?> - Dvojezičnost (HR/EN) — preporuča se za STVARAJ sekciju (međunarodna publika)
- Tipografija cijena — jasno istaknute na karticama programa
6 Prioriteti implementacije
Visoki prioritet — obavezno
- WordPress setup + plugin stack
- Globalni dizajn: boje, fontovi, Theme Builder (header, footer)
- CPT: Predstave + Programi + Projekti
- Migracija sadržaja (63 stranice → CPT archiva)
- 301 redirecti za sve stare URL-ove
- GDPR cookie banner (CookieYes) — pravna obveza
- Kontakt forma + Newsletter integracija
Srednji prioritet — preporučeno
- Stripe donacijska integracija
- Pretraga sadržaja (site search)
- Google Maps embed
- Schema.org (Organization + Event)
- OneTap Accessibility toolbar
- Dvojezičnost HR/EN
Niski prioritet — opcijsko
- Program razvoja publike — Typeform integracija
- Napredni filtri za CPT
- Personalizacija sadržaja
- Stream/webinar integracija