Smjernice i struktura redizajna

1 Vizualni identitet

1.1 Paleta boja

Boje su izvučene iz logotipa. Postojeći sajt koristi #1863DC — Elementorovu tvorničku plavu — koja s brendom nema veze.

1.2 Kontrast — izmjereno, ne procijenjeno

Sve vrijednosti izračunate su po WCAG 2.1 formuli relativne luminancije.

Kombinacije koje su pale i ne smiju se koristiti:

1.3 Tipografija

Postojeći sajt učitava tri obitelji sa svih 18 rezova svaka (Poppins, Roboto Slab, Rubik). Redizajn koristi dvije obitelji i pet rezova ukupno.

Zašto ovaj par: Archivo je industrijski grotesk s uskim, tvrdim verzalima — nasljeđuje težinu logotipa i dobro nosi tehničke naslove („KLIMATIZACIJA", „SOLARNE ELEKTRANE"). Public Sans je neutralan, vrlo čitljiv ekranski grotesk za duži tekst i ne sudara se s Archivom. Obje obitelji imaju potpuni latin-ext set, dakle sve hrvatske dijakritike (č ć ž š đ).

Google Fonts import — samo potrebni rezovi:

https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Public+Sans:wght@400;600&display=swap

1.4 Ikonografija i asseti

• Ikone: Lucide, line stil, stroke-width: 1.75, 24 px u tekstu / 32 px u karticama. Inline SVG — ne ikonski font, ne slika.
• Border radius: 4 px gumbi · 8 px kartice · 2 px oznake · 0 px pune sekcije
• Sjena: nema u mirovanju; 0 8px 24px rgba(14,26,36,.12) samo na hover
• Razmak: 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px; vertikalni razmak sekcija clamp(64px, 8vw, 128px)
• Logotipi partnera (Mitsubishi Electric, Gree, Azuri) moraju biti zasebne SVG/PNG datoteke s alt tekstom — nikad jedna zajednička rasterska slika kao sada.
• Nema pozadinskog videa. Postojeći 6 MB stock video se uklanja bez zamjene.

2 Informacijska arhitektura

2.1 Nova navigacijska struktura

Opseg je one-pager, pa navigacija nisu stranice nego sidrišta unutar iste stranice. Zaglavlje ostaje sticky i uz izbornik nosi dva trajno vidljiva elementa: klikabilan telefon i gumb „Zatraži ponudu".

Ključne promjene u odnosu na stari sajt:

• Šest odvojenih stranica sažima se u jednu — posjetitelj više ne mora klikati da bi doznao što tvrtka radi.
• „Privatnost" izlazi iz glavnog izbornika u podnožje.
• Telefon ulazi u zaglavlje kao klikabilan tel: link — trenutno ga nema nigdje.
• Dodaju se dvije sekcije kojih uopće nema: Kako radimo (proces) i Kontakt s formom.

bart-elektronika.hr/
│
├── [sticky header]  logo · Usluge · Zašto Bart · Proces · Reference · Kontakt
│                    044 544 023 (tel:)  ·  [Zatraži ponudu]
│
├── #usluge          Četiri područja rada
├── #zasto           Zašto Bart Elektronika
├── #proces          Kako radimo — 4 koraka
├── #partneri        Ovlašteni partner
├── #reference       Izvedeni radovi
├── #o-nama          O tvrtki
├── #kontakt         Forma + podaci + mapa + radno vrijeme
│
└── [footer]         Puni podaci · OIB · radno vrijeme · Izjava o privatnosti

„O nama" i „Partneri" namjerno nisu u izborniku — dostupni su scrollom, ali ne troše prostor u navigaciji koji pripada odlukama.

2.2 Struktura stranice

┌──────────────────────────────────────────────────────────────┐
│ HEADER (sticky, prozirni → #0E1A24 na scrollu)               │
│ [logo]   Usluge Zašto Proces Reference Kontakt               │
│                        044 544 023   [ Zatraži ponudu ]      │  ← oboje klikabilno
└──────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────┐
│ 1. HERO                                                      │
│    Nadnaslov: SISAK · OD 1992.                               │
│    H1: Klimatizacija, solarne elektrane i                    │
│        elektroinstalacije u Sisku.                           │  ← govori ŠTO i GDJE,
│    Lead: 2 rečenice o „sve pod jednim krovom"                │     ne naziv tvrtke
│    [ Zatraži ponudu ]  [ 044 544 023 ]                       │
│    ─────────────────────────────────────────                 │
│    34 godine  ·  2.000+ projekata  ·  3 struke               │  ← brojke odmah,
│    Mitsubishi Electric · Gree · Azuri                        │     ne 2 ekrana niže
└──────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────┐
│ 2. USLUGE — #usluge                        [pozadina #F2F6F9]│
│    H2: Tri struke, jedan izvođač                             │
│    ┌────────────────────────────────────────────┐            │
│    │ [foto]  │ 01 — KLIMATIZACIJA               │  ← široka   │
│    │         │ opis, popis radova, „Zatraži     │    kartica, │
│    │         │ ponudu →"                        │    cijeli   │
│    └────────────────────────────────────────────┘    red      │
│    ┌─────────────┐ ┌─────────────┐                           │
│    │ 02 Solarne  │ │ 03 Elektro- │   dvije normalne kartice, │
│    │ elektrane   │ │ instalacije │   foto, opis, popis, CTA  │
│    └─────────────┘ └─────────────┘                           │
└──────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────┐
│ 3. ZAŠTO BART — #zasto                     [pozadina #0E1A24]│
│    4 stupca: 34 godine · Ovlašteni partner · Sve pod jednim  │
│    krovom · Vlastiti tim na terenu                           │
└──────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────┐
│ 4. PROCES — #proces                                          │
│    ①──────②──────③──────④                                    │
│    Izlazak    Ponuda   Izvedba   Servis i                    │
│    na teren            s papirima održavanje                 │
└──────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────┐
│ 5. PARTNERI — #partneri                    [pozadina #F2F6F9]│
│    OVLAŠTENI PARTNER                                         │
│    [Mitsubishi Electric] [Gree] [Azuri]                      │  ← zasebni SVG-ovi
└──────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────┐
│ 6. REFERENCE — #reference                                    │
│    Galerija 6–9 fotografija s natpisom (mjesto + izvedeno).  │
│    Traži fotografije od klijenta.                            │
└──────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────┐
│ 7. O TVRTKI — #o-nama                                        │
│    Tekst (1992., Sisak, direktor) + fotografija poslovnice   │
└──────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────┐
│ 8. KONTAKT — #kontakt                      [pozadina #F2F6F9]│
│    ┌──────────────────┐  ┌──────────────────────────────┐    │
│    │ FORMA            │  │ Dr. Ante Starčevića 16       │    │
│    │ Ime i prezime *  │  │ 44000 Sisak                  │    │
│    │ Naziv tvrtke     │  │ 044 544 023   (tel:)         │    │
│    │ Telefon *        │  │ info@bart-elektronika.hr     │    │
│    │ E-mail           │  │                              │    │
│    │ Usluga [select]  │  │ Pon–Pet  8:00–16:00          │    │
│    │ Poruka           │  │ Sub      8:00–13:00          │    │
│    │ ☐ GDPR privola * │  │ Ned      zatvoreno           │    │
│    │ [ Pošalji upit ] │  │ [ mapa — lazy iframe ]       │    │
│    └──────────────────┘  └──────────────────────────────┘    │
└──────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────┐
│ FOOTER                                     [pozadina #0E1A24]│
│ [logo bijeli]   Usluge      Kontakt        Radno vrijeme     │
│ ─────────────────────────────────────────────────────────    │
│ BART – ELEKTRONIKA d.o.o. · OIB 44760951367 · MBS 080040311  │
│ © 2026 · Izjava o privatnosti · Izjava o pristupačnosti      │
└──────────────────────────────────────────────────────────────┘

3 Opis sekcija

1. Hero VISOKI

Svrha: u tri sekunde odgovoriti što tvrtka radi i gdje, te ponuditi dva izlaza — poziv i upit.
Sadržaj: H1 s djelatnostima i lokacijom; lead od dvije rečenice; dva CTA-a; traka s brojkama (34 godine, 2.000+ projekata, 4 struke) i imenima partnerskih brendova.
Što se mijenja: H1 prestaje biti naziv tvrtke. Brojke se dižu s trećeg ekrana u prvi. Pozadinski video se briše.
CTA: primarni „Zatraži ponudu" → #kontakt; sekundarni „044 544 023" → tel:+38544544023

2. Usluge VISOKI

Svrha: odgovoriti „radite li ono što meni treba" bez ijednog klika.
Sadržaj: tri kartice — Klimatizacija (široka, preko cijelog reda), Solarne elektrane i Elektroinstalacije i servis. Svaka nosi fotografiju, opis od dvije rečenice i popis 3–5 konkretnih radova iz doc/sadrzaj.md. Klimatizacija je vizualno najistaknutija jer je klijentov glavni posao.
Što se mijenja: šest golih naslova s ikonom postaje tri opisana područja, a digitalna i satelitska TV ispada iz ponude:

Tekst o bojlerima s Kontakt stranice ne prenosi se — klijent je 03.09.2026. potvrdio da se servis bojlera više ne radi.

3. Zašto Bart VISOKI

Svrha: dati razlog za povjerenje prije nego posjetitelj dođe do forme.
Sadržaj: četiri stupca — 34 godine (osnovano 1992.), Ovlašteni partner (Mitsubishi Electric, Gree, Azuri), Sve pod jednim krovom (nijedan uspoređeni konkurent ne pokriva sva tri područja), Vlastiti tim na terenu.

4. Proces VISOKI

Svrha: ukloniti neizvjesnost — najveći pojedinačni nedostatak u odnosu na konkurenciju.
Sadržaj: četiri koraka s brojem, naslovom i jednom rečenicom: izlazak na teren i procjena → ponuda → izvedba i dokumentacija → servis i održavanje.
Napomena: rokove („ponuda u roku 3 dana") ne izmišljati — potvrditi s klijentom prije objave.

5. Partneri VISOKI

Svrha: vjerodostojnost kroz tuđa poznata imena — isto što Muneris radi s LG-om i Samsungom.
Što se mijenja: ravna slika s dna stranice postaje strojno čitljiva sekcija iznad referenci.

6. Reference SREDNJI

Svrha: dokaz da posao postoji.
Sadržaj: 6–9 fotografija izvedenih radova s natpisom (mjesto + što je izvedeno).
Fotografije: u prijedlogu i na stagingu koriste se privremene snimke, vidljivo označene. Zamjenjuju se stvarnim radovima na produkcijskom sajtu, kad ih klijent dostavi.

7. O tvrtki SREDNJI

Sadržaj: osnovano 1992. u Sisku; mikro poduzeće; direktor Ninoslav Banić; djelatnost 43.22; fotografija poslovnice ili tima.
Što se mijenja: FINA izvadak s prihodom, dobiti i neto maržom briše se sa sajta. Osnutak, sjedište i djelatnost ostaju.

8. Kontakt VISOKI

Sadržaj: Fluent Forms Pro forma (ime, telefon *, e-mail, izbor usluge, poruka, GDPR privola), puna adresa, klikabilni telefon i e-mail, radno vrijeme, mapa u lazy iframeu.
E-mail za primanje upita: info@bart-elektronika.hr (potvrdio klijent). Na starom sajtu stoji placeholder email@email.com — ne prenosi se.

4 Tehničke preporuke

Stack

WordPress + Hello Elementor + Elementor Pro + Fluent Forms Pro, OneTap Accessibility, WPManageNinja Pro, ASE Pro, SlimSEO Pro, SQLite Object Cache, WebP Uploads, CookieYes.

• Postojeći sajt već vozi Hello Elementor + Elementor Pro. Migracija platforme nije potrebna — Muneris na istom stacku ima 4,6× lakšu naslovnicu. Radi se konfiguracija i izvedba, ne preseljenje.
• Elementor kit se konfigurira — globalne boje i tipografija iz sekcije 1, umjesto tvorničkih #1863DC i tri font obitelji.
• Fluent Forms Pro je nužan: forma s izborom usluge, GDPR privolom i uvjetnim poljima.
• Polylang nije u opsegu.

Performanse

Polazišna točka je izmjerenih 7,39 MB / 68 zahtjeva.

Cilj: ispod 1,5 MB i ispod 35 zahtjeva za cijelu stranicu. PageSpeed 85+ (mobile), 95+ (desktop).

Pristupačnost (WCAG 2.1 AA)

• OneTap Accessibility toolbar
• Alt tekst na svakoj slici — trenutno ih je 0 od 8
• Semantički HTML: jedan H1, zatim H2 po sekciji, H3 unutar; nikad preskočena razina
• Kontrast prema tablici iz sekcije 1.2 — posebno: nikad bijeli tekst na #EA5B0C
• Keyboard navigacija kroz cijelu stranicu, vidljiv :focus-visible obrub (2 px #EA5B0C)
• Sidrišna navigacija mora imati scroll-margin-top jednak visini sticky headera
• prefers-reduced-motion: reduce gasi sve animacije brojača i prijelaza
• Forma: povezani <label>, aria-describedby za greške, greške i tekstom i bojom
• Izjava o pristupačnosti u podnožju

SEO

• SlimSEO Pro: meta title po obrascu Klimatizacija, solari i elektroinstalacije Sisak | Bart Elektronika, meta description, Open Graph, XML sitemap
• wp-sitemap.xml trenutno vraća 404 iako je naveden u robots.txt — mora se popraviti
• Schema.org LocalBusiness s adresom, telefonom, OIB-om, radnim vremenom i geokoordinatama — trenutno 0 JSON-LD blokova
• Google Business Profile: uskladiti NAP s podacima na sajtu

301 redirecti sa svih ukinutih URL-ova na sidrišta one-pagera:

Sigurnost

• WPManageNinja Pro: firewall, zaštita od brute force napada
• ASE Pro: isključen XML-RPC, očišćen <head>, isključeni komentari
• Sigurnosni HTTP headeri — trenutno ih nema nijedan: HSTS, X-Content-Type-Options: nosniff, Referrer-Policy: strict-origin-when-cross-origin, X-Frame-Options: SAMEORIGIN

5 UX poboljšanja

Svako se veže na konkretan nalaz iz analize.

1. Klikabilan telefon u sticky zaglavlju (U2) — trenutno na cijelom sajtu nema nijednog tel: linka, dok ih konkurenti imaju 3 do 5.
2. Forma za upit na stranici (U3) — Kontakt stranica ima naslov „Pitaj!" bez forme ispod njega.
3. Popunjeno podnožje (U1) — adresa, telefon, faks, e-mail, radno vrijeme, OIB, MBS.
4. Opisi uz svaku uslugu i popis konkretnih radova (U5).
5. Sekcija „Kako radimo" (U4) — četiri koraka od poziva do primopredaje.
6. Partneri kao zasebni logotipi s alt tekstom (U6, A2).
7. H1 koji govori djelatnost i lokaciju (U7, S9).
8. Galerija izvedenih radova (U10).
9. Mapa i upute za dolazak (U9).
10. Jedan telefonski format kroz cijeli sajt (S7): 044 544 023, u linku tel:+38544544023.
11. Brisanje lorem ipsuma, engleskih demo blokova i FINA izvatka (S1, S2, S4, S5).
12. Usklađene brojke (S8) — s osnutkom 1992. točan je broj 34 godine, ne 30. Tim broji 8 ljudi, potvrđeno poreznom prijavom za 2025.; brojač „15 Tim Stručnjaka" sa starog sajta se ne prenosi.
13. Ispravljen tipfeler „Ugradnaj" → „Ugradnja" (S6).
14. Jedna priča o tvrtki (S11) — prodaja tranzistora i PCB dizajn ili se izbacuju ili dobivaju vlastito mjesto među uslugama, ali ne mogu ostati kao glavni opis tvrtke dok sve ostalo govori o klimama i solarima.

6 Prioriteti implementacije

7 Otvorena pitanja za klijenta

Riješeno

Zatvorena pitanja

Sva su pitanja razriješena s klijentom 03.09.2026.