Boje, kontrast i identitet poslovnog weba

Kako iz logotipa i karaktera brenda složiti funkcionalnu paletu za tekst, pozadine, CTA gumbe, statuse i fokus.

Oriphiel stručni tim Ažurirano 23. 7. 2026. 3 min čitanja

Odgovor ukratko

Paleta mora prvo osigurati čitljivost i jasna stanja sučelja, a tek zatim dekorativni dojam.

Ključne odluke

Koja je primarna brand boja
Koja boja označava akciju
Kako se prikazuju success i error stanja
Radi li paleta u svijetlim i tamnim fotografijama

Provedba korak po korak

Cilj ove lekcije je Kako iz logotipa i karaktera brenda složiti funkcionalnu paletu za tekst, pozadine, CTA gumbe, statuse i fokus. Korake treba provoditi redom i svaki potvrditi prije širenja opsega.

Preporučeni redoslijed

Izvući ograničenu paletu iz brenda
Definirati CSS varijable i uloge boja
Provjeriti kontrast teksta i kontrola
Testirati hover, focus, disabled i error stanja

Praktičan primjer

Primjer primjene: projekt prvo provodi korak „Izvući ograničenu paletu iz brenda”, zatim potvrđuje „Tekst zadovoljava kontrast” i tek tada prati pokazatelj „Broj contrast grešaka”. Tako se odluka temelji na provjeri, a ne na dojmu.

Kontrolna lista prije nastavka

Ova provjera odvaja završenu implementaciju od postavke koja samo izgleda dovršeno.

Provjerite

Tekst zadovoljava kontrast
Fokus je jasno vidljiv
CTA nije jednak dekorativnim elementima
Boja nije jedini signal značenja

Najčešće pogreške i rizici

Rizike treba provjeriti prije povećanja prometa, automatizacije ili ovlasti sustava.

Na što treba paziti

Previše akcentnih boja
Svijetlosivi tekst na bijeloj pozadini
Brand boja se koristi za svaki element
Error stanje se vidi samo po crvenoj

Mjerenje rezultata

Učinak se procjenjuje kroz mali skup metrika koje su povezane s ciljem lekcije i stvarnim poslovnim ishodom.

Metrike koje imaju smisla

Broj contrast grešaka
Dosljednost komponenti
Uspješnost CTA prepoznavanja
Accessibility audit

Česta pitanja

Koji je prvi korak za temu „Boje, kontrast i identitet poslovnog weba”?

Izvući ograničenu paletu iz brenda Prije nastavka potvrdite odluku: Koja je primarna brand boja

Kako provjeriti da je provedba uspješna?

Tekst zadovoljava kontrast Nakon toga pratite metriku: Broj contrast grešaka.

Koju pogrešku treba prvo spriječiti?

Previše akcentnih boja Problem ispravite prije automatizacije ili povećanja budžeta.

Službeni i stručni izvori

Sučelja, pravila i preporuke mogu se mijenjati. Prije produkcijske izmjene provjerite aktualnu dokumentaciju.

Povezani vodiči za poslovni web

Profesionalni web dizajn za poslovnu stranicuKoje odluke razlikuju profesionalan poslovni web od generičkog predloška: hijerarhija, tipografija, ritam, fotografije i dosljednost. Pristupačnost poslovne web straniceOsnove pristupačnog weba: tipkovnica, kontrast, forme, semantika, alt tekst, fokus, smanjena animacija i povećani tekst. Dizajn sustav za poslovni webKako definirati tipografiju, boje, razmake, gumbe, forme, kartice i pravila da se web može dosljedno širiti. Responsive web dizajn za mobitel, tablet i desktopKako prilagoditi sadržaj, navigaciju, forme, tablice i CTA elemente različitim ekranima bez skrivanja važne ponude.

Povežite ovu temu s ostatkom sustava

SEO za izradu web stranicaPovežite prodajnu ponudu, vodiče, interne linkove i organske upite bez kanibalizacije. Google alati i mjerenjePostavite Search Console, GA4, Tag Manager i konverzije nakon tehnički spremnog weba. Kontakt forma i CRMNastavite proces od slanja obrasca prema leadu, statusu i sljedećoj aktivnosti.

Primijenite lekciju na stvarni projekt

Pošaljite postojeću konfiguraciju, cilj i problem koji želite riješiti. Dobit ćete prijedlog sljedećeg tehničkog ili operativnog koraka.

Pošaljite upit Pregledajte sve vodiče