Boje i tipografija na sajtu: brend, kontrast, čitljivost i brzina

Boje i tipografija na sajtu određuju prvi utisak pre nego što posetilac pročita ijednu reč – ali njihov posao nije samo da budu lepi. Dobro izabrane boje vode pogled ka važnim elementima, a dobra tipografija čini tekst lakim za čitanje na telefonu, u prevozu, na jakom suncu. Za poslovni sajt pravilo je jednostavno: boje proizlaze iz brenda, kontrast mora da bude dovoljan, fontovi moraju da podržavaju naša slova (č, ć, š, ž, đ) i ne smeju da uspore učitavanje.

Paleta boja: polazite od brenda, ne od ukusa

Ako firma ima logo i vizuelni identitet, boje sajta treba da ga prate. Ako nema, izaberite jednu osnovnu boju koja odgovara delatnosti i publici, pa oko nje sastavite malu paletu.

Jednostavna struktura palete

• Osnovna (brend) boja – za logo, naslove ili akcente.
• Boja za akciju – rezervisana za dugmad i važne linkove. Može biti ista kao osnovna ili kontrastna njoj.
• Neutralne boje – pozadina, tekst, linije, polja forme. Obično nijanse bele, sive i vrlo tamne sive.
• Sistemske boje – za greške, uspeh i upozorenja u formama i korpi.

Uobičajena podela „60-30-10“ (dominantna neutralna, sekundarna, akcentna) dobra je polazna tačka, ne strogo pravilo. Najčešća greška nije pogrešna boja, već previše boja – kada svaka sekcija ima svoju, sajt deluje nesređeno, a dugme za akciju se gubi.

Značenje boja i delatnost

Asocijacije boja nisu univerzalne i ne treba ih preceniti, ali kontekst delatnosti postoji:

Kontrast i čitljivost

Svetlosiv tekst na beloj pozadini izgleda „moderno“ na velikom monitoru dizajnera, ali je težak za čitanje na telefonu i za starije posetioce. Smernice za pristupačnost (WCAG) preporučuju odnos kontrasta od najmanje 4,5:1 za običan tekst i 3:1 za veliki tekst i elemente interfejsa. Proverite ga besplatnim alatima za proveru kontrasta – dovoljno je da unesete dve boje.

• Za osnovni tekst koristite vrlo tamnu sivu ili gotovo crnu na svetloj pozadini.
• Ne stavljajte tekst preko fotografija bez tamnog ili svetlog sloja ispod njega.
• Ne oslanjajte se samo na boju za značenje – greška u formi treba da ima i poruku, ne samo crveni okvir.
• Linkovi u tekstu treba da se razlikuju i po nečemu osim boje, na primer podvlačenjem.

Boje dugmadi i stanja

Dugme ne postoji samo u jednom izdanju. Predvidite kako izgleda kada se pređe mišem preko njega, kada je fokusirano tastaturom i kada je neaktivno. Fokus mora biti vidljiv – korisnici koji se kreću tastaturom inače ne znaju gde se nalaze. Takođe proverite sajt pri jakom osvetljenju ekrana na telefonu i u režimu uštede baterije: nijanse koje se na monitoru jasno razlikuju tada se često stapaju.

Tipografija na sajtu: izbor fontova

Za poslovni sajt najčešće su dovoljne dve porodice fontova – jedna za naslove i jedna za tekst – a često i jedna, u različitim debljinama.

Srpska slova su obavezna provera

Mnogi lepi fontovi nemaju slova č, ć, š, ž, đ ili ih imaju loše oblikovana. Tada pregledač zameni slovo drugim fontom i reči izgledaju kao da su „iskrzane“. Pre izbora napišite rečenicu sa svim našim slovima, a ako planirate ćirilicu, proverite i nju. Kod Google fontova birajte verziju sa proširenim latiničnim skupom (latin-ext).

Veličina, prored i širina reda

• Osnovni tekst na telefonu ne bi trebalo da bude manji od oko 16 piksela.
• Prored od otprilike 1,5 visine slova čini duži tekst prijatnijim.
• Redovi na velikom ekranu ne treba da budu predugački – oko 60 do 80 znakova po redu je udobno za čitanje.
• Jasna hijerarhija: naslov, podnaslov i tekst moraju se razlikovati na prvi pogled.
• Izbegavajte dugačke pasuse ispisane velikim slovima ili kurzivom.

Fontovi i brzina sajta

Svaki font, svaka debljina i svaki kurziv je poseban fajl koji pregledač mora da preuzme. Sajt koji učitava pet porodica u po četiri debljine biće primetno sporiji, posebno na mobilnoj mreži.

1. Ograničite broj varijanti. Obično su dovoljne dve do četiri (npr. regular, bold i jedna za naslove).
2. Koristite moderan format WOFF2 i, gde ima smisla, varijabilne fontove koji jednim fajlom pokrivaju više debljina.
3. Hostujte fontove na sopstvenom serveru kada je moguće – manje spoljnih zahteva, a lakše je i sa aspekta zaštite podataka.
4. Podesite prikaz tokom učitavanja (npr. font-display: swap) da tekst bude vidljiv odmah, a ne tek kad se font preuzme.
5. Razmotrite sistemske fontove za tekst – učitavaju se trenutno i dobro izgledaju na svim uređajima.

Kako fontovi utiču na metrike poput LCP i CLS objašnjeno je u tekstu Core Web Vitals objašnjeno jednostavno.

Boje i tipografija na sajtu: napravite mali stilski vodič

Kada se jednom odlučite, zapišite pravila: kodove boja, fontove, veličine naslova, izgled dugmadi i linkova. Tako će i nove stranice, blog tekstovi i landing stranice izgledati kao deo iste celine. Doslednost je ono po čemu sajt deluje profesionalno, više nego bilo koja pojedinačna boja. Širi pogled na dizajn koji vodi ka upitima imate u vodiču web dizajn koji prodaje, a ako vaš sajt ima zastarele boje i teško čitljiv tekst, pogledajte i znakove da je vreme za redizajn.

Zaključak

Boje i tipografija treba da služe sadržaju: da podrže brend, izdvoje poziv na akciju i omoguće da se tekst lako čita na svakom ekranu. Proverite kontrast, testirajte naša slova, ograničite broj fontova i sve zapišite u jednostavna pravila. Tako ćete dobiti sajt koji izgleda ozbiljno i radi brzo, uz responzivan dizajn prilagođen telefonima. Ako želite da pogledamo vizuelni identitet vašeg sajta, pošaljite upit za besplatnu analizu.