Vizualni identitet: logotip, boje, fontovi i izbornik

Modul 4: Stranice, izgled i funkcije · Vrijeme čitanja: 8 minuta

Cilj učenja: Nakon ove lekcije u panelu Vizualni identitet znat ćete postaviti naziv i logotip, favicon, stil, dizajn izbornika, boje, fontove, tamni način i pokret te provjeriti je li tekst na Vašoj stranici dobro čitljiv.

Ključni pojmovi: vizualni identitet, stil (look), logotip, znak, tekstualni logotip, favicon, traka izbornika, glavna boja, kontrast, omjer kontrasta, WCAG, web licenca, tamni način, pokret

Zašto je vizualni identitet više od lijepog izgleda

Vizualni identitet stalna je kombinacija logotipa, boja i fontova po kojoj Vas ljudi prepoznaju. Na web stranici on osigurava prepoznatljivost (iste boje na kombiju, ponudi i stranici) i mora ostati čitljiv: svijetlosivi tekst na bijeloj podlozi djeluje smireno, ali mnogi ga posjetitelji teško čitaju, osobito na mobitelu na suncu.

Sve u panelu Vizualni identitet besplatno je i odmah vidljivo u pregledu. Tek kada kliknete Spremite, nastaje nova verzija (lekcija 3.5). Ako se želite vratiti, kliknite Vratite ili vratite stariju verziju.

Panel ima ove blokove: Stil, Boje, Fontovi, Traka izbornika, Naziv i logotip, Slike, Oblik i razmaci, Fontovi i veličine, Tamni način i Pokret.

Naziv, logotip i favicon

U bloku Naziv i logotip nalazi se naziv Vaše stranice, onako kako se prikazuje u zaglavlju i podnožju. Ispod njega je logotip:

• Učitajte vlastiti logotip: PNG s prozirnom pozadinom, SVG, JPG ili WebP, do 2 MB. Vodoravni logotip najbolje funkcionira u traci izbornika.
• Ako nemate logotip, alat za izradu napravio je tekstualni logotip: Vaš naziv u Vašem fontu i Vašim bojama. On se automatski prilagođava kada ih promijenite.
• Neka AI dizajnira logotip: ukratko opišete svoju tvrtku i ugođaj ("soboslikarska tvrtka u selu, zanatski i pouzdano") i kliknete Dizajnirajte tri logotipa. Dobit ćete tri znaka (simbol bez teksta) u Vašim bojama, s Vašim nazivom pored njih u Vašem fontu. Sve zajedno stoji 1 izmjenu. Odaberite jedan gumbom Upotrijebite ili napišite što bi moglo biti bolje ("prvi, ali zaobljeniji") i kliknite Dizajnirajte tri nova logotipa; to je novi krug od 1 izmjene.
• Prikaz u izborniku i podnožju: Logotip i naziv, Samo logotip ili Samo naziv te Veličina (Mali, Normalno, Veliki).

Alat za izradu upozorava ako logotip ima tanke linije ili slab kontrast s trakom izbornika: u maloj veličini u traci tada se može izgubiti.

AI logotip provjerite sami: nije li previše sličan logotipu neke druge tvrtke?

Favicon je ikonica u kartici preglednika i uz oznake (bookmarke). Odaberite Automatski: početno slovo u Vašim bojama, Vaš logotip ili Vlastita datoteka (kvadratna, PNG, SVG ili ICO, do 512 KB).

Stil i traka izbornika

Stil (u alatu za izradu i look) jednim klikom određuje fontove, oblike, gumbe, kartice, izbornik i ukrase. Ima ih dvanaest, primjerice Svjež, Topao, Poslovni, Priroda, Atelijer i Noć. Vaše boje ostaju kada promijenite stil; ako želite i boje stila, kliknite Upotrijebite i boje ovog stila. Stil Noć uvijek je taman.

Pod Traka izbornika birate oblik trake na vrhu svake stranice, između petnaest dizajna: puna širina, centrirano, podijeljeno, dva retka, traka u boji, obrubljeno, pilula, s gornjom trakom, prozirno, minimalno, lebdeće, rubrike, segment, cijeli zaslon i bočni izbornik. Sadržaj izbornika (lekcija 4.1) ostaje isti. Nekoliko napomena iz objašnjenja u samom alatu za izradu:

• Prozirno lijepo izgleda samo ako svaka stranica ima tamni hero ili hero s fotografijom.
• Minimalno prikazuje samo Vaš naziv i jedan gumb; poveznice na stranice tada su u podnožju.
• S gornjom trakom stavlja telefon i radno vrijeme u usku traku iznad izbornika. Je li taj broj telefona točan?

Kod Boja trake izbornika birate Automatski (prati stil), Bijela, Svijetlosiva, Tamna ili Boja isticanja. Drugu boju zatražite u chatu.

Boje i kontrast

Kod Boje postavljate glavnu boju (gumbi, naglasci), drugu boju za prijelaze boja i pozadinu (bijela, krem, hladna, siva ili nijansa Vaše boje, ili po vlastitom izboru). Opcijom Gumbi s prijelazom boja svi glavni gumbi dobivaju prijelaz iz jedne boje u drugu.

Ovdje u igru ulazi kontrast: razlika u svjetlini između teksta i pozadine. Izražavamo ga kao omjer kontrasta, od 1:1 (bez razlike) do 21:1 (crno na bijelom). Međunarodna smjernica za pristupačne web stranice, WCAG organizacije W3C, na razini AA zahtijeva najmanje 4,5:1 za običan tekst i 3:1 za veliki tekst (otprilike 18 točaka ili 14 točaka podebljano). Gumbi i drugi upravljački elementi moraju postići najmanje 3:1 u odnosu na okolinu.

Alat za izradu to nadzire umjesto Vas. Ako odaberete boju na kojoj se tekst ne čita dobro, on je prilagođava i javlja što se promijenilo, na primjer: "Boja teksta ... postala je ..., jer se tekst na njoj inače ne čita dobro." Ako želite zadržati upravo svoje boje, uključite Zadržite točno ove boje: Vaše boje ostaju, a tekst na njima automatski dobiva čitljivu boju. I u sekcijama koje AI izrađuje s vlastitim oblikovanjem alat za izradu ispravlja boje teksta koje padnu ispod 4,5:1 (veliki tekst 3:1).

Što alat za izradu ne procjenjuje: tekst na fotografiji ili u Vašem logotipu te naslov preko užurbane fotografije. To provjerite sami, na mobitelu. Ako niste sigurni za neki par boja, upišite oba koda boja u alat za provjeru kontrasta (vidi Dodatno štivo).

Zamka: boja vizualnog identiteta s tiskanih materijala ili kombija (na primjer jarko žuta) rijetko je prikladna kao boja teksta. Upotrijebite je kao naglasak ili plohu, a tekst neka ostane taman.

Fontovi i vlastiti font

Kod Fontovi birate font za Naslovi i jedan za Glavni tekst. Fontovi se nalaze kao datoteke na Vašoj vlastitoj stranici; ne uspostavlja se veza s tuđim servisom za fontove. Kod Fontovi i veličine klizačima za cijelu stranicu postavljate: prored i razmak između slova u tekstu i naslovima, broj znakova po retku, širinu sadržaja i debljinu naslova. Prema stilu vraća klizač na početnu vrijednost. Kod Veličina teksta birate Normalno, Velika ili Vrlo velika; to možete i u chatu ("povećaj slova").

Moguć je i vlastiti font: učitajte ga kod Fontovi ili spajalicom u chatu, kao .woff2, .woff, .ttf ili .otf, do 2 MB po datoteci (dopušteno je više debljina). Zatim odaberete za što: naslove, tekst ili oboje. To ništa ne stoji. Font sa servisa kao što je Adobe Fonts nije moguć.

Važno: učitajte samo font za koji imate web licencu. Font je softver s licencom. Licenca za upotrebu na Vašem računalu (za izradu tiskanih materijala) nipošto ne dopušta uvijek da datoteku postavite na web stranicu, s koje je preuzima svaki posjetitelj. U uvjetima licence provjerite je li dopuštena upotreba na webu. Fontovi pod licencom SIL Open Font License smiju se ugrađivati i distribuirati.

Tamni način i pokret

Kod Tamni način birate Isključeno (uvijek svijetlo), Uvijek tamno ili Prema uređaju. Kod posljednje opcije posjetitelj kojemu je mobitel ili računalo postavljeno na tamno vidi tamnu verziju Vaših boja. Pozadinu, tekst i glavnu boju u tamnom načinu možete odabrati sami. Gumb kojim posjetitelji sami mijenjaju način ne postoji. Pregled prati Vaš uređaj: postavite mobitel ili računalo na tamno da biste vidjeli tamnu verziju i tada provjerite i svoj logotip.

Kod Pokret birate Uključeno, Mirno ili Isključeno za cijelu stranicu, a po potrebi i iznimku po stranici. Ovdje birate i Efekt miša na računalu (bez efekta, magnet ili svjetlosna mrlja). U pregledu sve miruje; gumbom Pokrenite animaciju vidjet ćete je jednom. Ako je posjetitelj na svom uređaju postavio manje pokreta, sve ostaje mirno. Previše pokreta odvlači pažnju; na stranici s puno teksta često je bolje Mirno ili Isključeno.

U alatu za izradu: kako to učiniti

1. Otvorite Vizualni identitet, blok Naziv i logotip. Kliknite Učitajte vlastiti logotip ili Neka AI dizajnira logotip.
2. Kod Favicon odaberite svoj logotip ili automatsko početno slovo.
3. Isprobajte dva ili tri stila kod Stil; pogledajte i na Mobitel.
4. Kod Traka izbornika odaberite dizajn i boju.
5. Kod Boje postavite glavnu boju. Pročitajte poruke alata za izradu.
6. Kod Tamni način i Pokret provjerite što želite.
7. Kliknite Spremite i ponovno objavite svoju stranicu.

Sažetak

• Panel Vizualni identitet je besplatan; Spremite stvara novu verziju.
• AI logotip stoji 1 izmjenu za tri prijedloga; favicon alat za izradu izrađuje sam ili ga Vi učitate.
• Dvanaest stilova i petnaest dizajna izbornika; sadržaj izbornika ostaje isti.
• WCAG zahtijeva najmanje 4,5:1 kontrasta za običan tekst i 3:1 za veliki tekst; alat za izradu to nadzire, osim na fotografijama i u Vašem logotipu.
• Vlastiti font samo uz web licencu; tamni način i pokret postavite prema potrebama Vaših posjetitelja.

Kviz

Zadatak

Zadatak D4.2: Vaš vizualni identitet i kontrast. Postavite svoj vizualni identitet i izmjerite kontrast najvažnijih parova boja.

Kontrolni popis:

• [ ] logotip učitan ili odabran među AI prijedlozima;
• [ ] favicon postavljen i provjeren u kartici preglednika na Vašoj objavljenoj stranici;
• [ ] stil i dizajn izbornika odabrani i pregledani na Mobitel;
• [ ] glavna boja postavljena i poruke alata za izradu pročitane;
• [ ] kontrast boje teksta na pozadini i teksta gumba na boji gumba izmjeren alatom za provjeru kontrasta;
• [ ] tamni način i pokret svjesno odabrani;
• [ ] vizualni identitet spremljen i stranica ponovno objavljena.

Pitanja:

1. Koje ste omjere kontrasta izmjerili za tekst na pozadini i za tekst gumba na gumbu te dosežu li 4,5:1?
2. Na kojem se mjestu Vaše stranice tekst nalazi preko fotografije i je li dobro čitljiv na mobitelu?
3. Koristite li vlastiti font? Gdje u licenci piše da je upotreba na webu dopuštena?

Nakon "gotovo" vidjet ćete primjer odgovora: Schildersbedrijf Example izmjerio je tamnosivo na bijelom 14,5:1 i bijeli tekst na zelenom gumbu 5,1:1, oboje iznad 4,5:1; naslov preko hero fotografije loše se čitao, pa je odabrao tamniju fotografiju; nema vlastitog fonta, dakle licenca nije potrebna.

Dodatno štivo

• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C, na engleskom): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• Understanding Success Criterion 1.4.11: Non-text Contrast (W3C, na engleskom): https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• Contrast Checker (WebAIM, na engleskom): https://webaim.org/resources/contrastchecker/
• SIL Open Font License, službeni tekst (na engleskom): https://openfontlicense.org/open-font-license-official-text/