Firmastiil: logo, värvid, fondid ja menüü

Moodul 4: Lehed, välimus ja funktsioonid · Lugemisaeg: 8 minutit

Õpieesmärk: Pärast seda õppetundi oskad paneelis Firmastiil seadistada nime ja logo, faviconi, stiili, menüü kujunduse, värvid, fondid, tumeda režiimi ja liikumise ning kontrollida, kas tekst on su veebilehel hästi loetav.

Põhimõisted: firmastiil, stiil (look), logo, kujutismärk, sõnamärk, favicon, menüüriba, põhivärv, kontrast, kontrastsuhe, WCAG, veebilitsents, tume režiim, liikumine

Miks firmastiil on rohkem kui lihtsalt ilus

Firmastiil on logo, värvide ja fontide kindel kombinatsioon, mille järgi inimesed sind ära tunnevad. Veebilehel aitab see sind ära tunda (samad värvid bussil, hinnapakkumisel ja veebilehel) ning peab jääma loetavaks: helehall tekst valgel taustal näeb rahulik välja, kuid paljud külastajad loevad seda halvasti, eriti telefonis päikese käes.

Kõik paneelis Firmastiil on tasuta ja kohe eelvaates näha. Alles siis, kui klõpsad Salvesta, tekib uus versioon (õppetund 3.5). Kui tahad tagasi minna, klõpsa Taasta või taasta vanem versioon.

Paneelis on need plokid: Stiil, Värvid, Fondid, Menüüriba, Nimi ja logo, Pildid, Kuju ja vahed, Fondid ja suurused, Tume režiim ja Liikumine.

Nimi, logo ja favicon

Plokis Nimi ja logo on su veebilehe nimi, nii nagu see päises ja jaluses kuvatakse. Selle all on logo:

• Laadi üles oma logo: läbipaistva taustaga PNG, SVG, JPG või WebP, kuni 2 MB. Menüüribal töötab kõige paremini horisontaalne logo.
• Kui sul logo pole, on koostaja teinud sõnamärgi: sinu nime sinu enda fondi ja värvidega. See kohandub ise, kui neid muudad.
• Lase AI-l logo kujundada: kirjelda lühidalt oma ettevõtet ja meeleolu ("maalriettevõte külas, käsitööline ja usaldusväärne") ja klõpsa Kujunda kolm logo. Saad kolm kujutismärki (ilma tekstita märk) sinu värvides, nende kõrval sinu nimi sinu fondiga. Kokku maksab see 1 muudatuse. Vali üks nupuga Kasuta või kirjuta, mida saaks paremaks teha ("esimene, aga ümaram"), ja klõpsa Kujunda kolm uut logo; see on taas üks voor 1 muudatuse eest.
• Kuvamine menüüs ja jaluses: Logo ja nimi, Ainult logo või Ainult nimi ning Suurus (Väike, Tavaline, Suur).

Koostaja hoiatab, kui logol on peened jooned või vähe kontrasti menüüribaga: väikesena ribal võib see siis kaduma minna.

Kontrolli AI-logo ise üle: kas see ei sarnane liiga palju mõne teise ettevõtte logoga?

Favicon on väike ikoon brauseri vahekaardil ja järjehoidjates. Vali Automaatne: algustäht sinu värvides, Sinu logo või Oma fail (ruudukujuline, PNG, SVG või ICO, kuni 512 KB).

Stiil ja menüüriba

Stiil (koostajas ka look) määrab ühe klõpsuga fondid, kujundid, nupud, kaardid, menüü ja kaunistused. Stiile on kaksteist, näiteks Värske, Soe, Äriline, Loodus, Ateljee ja Öö. Sinu enda värvid jäävad alles, kui stiili vahetad; kui tahad ka stiili värve, klõpsa Kasuta ka selle stiili värve. Stiil Öö on alati tume.

Plokis Menüüriba valid iga lehe ülaosas oleva riba kuju viieteistkümne kujunduse hulgast: täislaius, keskel, jagatud, kaks rida, värviriba, äärisega, pill, ülariba, läbipaistev, minimaalne, hõljuv, rubriigid, segment, täisekraan ja külgmenüü. Menüü sisu (õppetund 4.1) jääb samaks. Mõned tähelepanekud koostaja enda selgitustest:

• Läbipaistev on ilus ainult siis, kui igal lehel on tume hero või foto-hero.
• Minimaalne näitab ainult sinu nime ja ühte nuppu; lehtede lingid on siis jaluses.
• Ülariba paneb telefoni ja lahtiolekuajad kitsale ribale menüü kohale. Kas see telefoninumber on õige?

Valikus Menüüriba värv vali Automaatne (järgib stiili), Valge, Helehall, Tume või Rõhuvärv. Muud värvi saad küsida vestluses.

Värvid ja kontrast

Plokis Värvid määrad põhivärvi (nupud, rõhuasetused), teise värvi värviüleminekute jaoks ning tausta (valge, kreemjas, jahe, hall, sinu värvi toon või ise valitud). Valikuga Värviüleminekuga nupud saavad kõik põhinupud ülemineku ühest värvist teise.

Siin tuleb mängu kontrast: teksti ja tausta heleduse erinevus. Seda väljendatakse kontrastsuhtena, alates 1:1 (erinevust pole) kuni 21:1 (must valgel). Ligipääsetavate veebilehtede rahvusvaheline juhend, W3C WCAG, nõuab tasemel AA tavalise teksti puhul vähemalt 4,5:1 ja suure teksti puhul 3:1 (umbes 18 punkti või 14 punkti paksus kirjas). Nupud ja muud juhtelemendid peavad oma ümbruse suhtes saavutama vähemalt 3:1.

Koostaja jälgib seda sinu eest. Kui valid värvi, millel tekst hästi ei loe, kohandab ta seda ja teatab, mis muutus, näiteks: "Teksti värv ... muudeti ...-ks, sest muidu ei oleks tekst sellel hästi loetav." Kui tahad täpselt oma värvid alles hoida, lülita sisse Säilita täpselt need värvid: sinu värvid jäävad ja nende peal olev tekst saab ise loetava värvi. Ka sektsioonides, mille tehisintellekt teeb oma vormindusega, parandab koostaja tekstivärvid, mis jäävad alla 4,5:1 (suur tekst 3:1).

Mida koostaja ei hinda: teksti fotol või logos ja pealkirja kirju foto peal. Vaata neid ise, telefonis. Kui kahtled mõne värvipaari osas, sisesta kaks värvikoodi kontrastikontrollijasse (vt Loe edasi).

Lõks: trükikoja või bussi firmavärv (näiteks erkkollane) sobib harva teksti värviks. Kasuta seda rõhuvärvi või pinnana ja hoia tekst tume.

Fondid ja oma font

Plokis Fondid valid ühe fondi Pealkirjad jaoks ja teise Põhitekst jaoks. Fondid on failidena sinu enda veebilehel; ühendust kellegi teise fonditeenusega ei looda. Plokis Fondid ja suurused seadistad liuguritega kogu veebilehe jaoks: teksti ja pealkirjade reavahe ja tähevahe, tähemärgid rea kohta, sisu laiuse ja pealkirjade paksuse. Nagu stiilis lähtestab liuguri. Valikus Teksti suurus vali Tavaline, Suur või Eriti suur; seda saab teha ka vestluses ("tee tähed suuremaks").

Võid kasutada ka oma fonti: laadi see üles plokis Fondid või vestluses kirjaklambriga, failina .woff2, .woff, .ttf või .otf, kuni 2 MB faili kohta (mitu paksust on lubatud). Seejärel vali, milleks: pealkirjad, tekst või mõlemad. See ei maksa midagi. Fonti sellisest teenusest nagu Adobe Fonts kasutada ei saa.

Oluline: laadi üles ainult font, millel on sul veebilitsents. Font on litsentsiga tarkvara. Litsents kasutamiseks sinu arvutis (trükiste tegemiseks) ei luba kaugeltki alati faili veebilehele panna, kust iga külastaja selle alla laadib. Vaata litsentsitingimustest, kas veebikasutus on lubatud. SIL Open Font License'i alla kuuluvaid fonte tohib manustada ja levitada.

Tume režiim ja liikumine

Plokis Tume režiim vali Väljas (alati hele), Alati tume või Nagu seadmes. Viimase puhul näeb külastaja, kelle telefon või arvuti on tumedal seadistusel, sinu enda värvide tumedat versiooni. Tumeda režiimi tausta, teksti ja põhivärvi saad ise valida. Nuppu, millega külastajad ise vahetada saaksid, ei ole. Eelvaade järgib sinu seadet: tumeda versiooni nägemiseks lülita oma telefon või arvuti tumedaks ja kontrolli siis ka oma logo.

Plokis Liikumine vali kogu veebilehe jaoks Sees, Rahulik või Väljas ja vajadusel erand lehe kaupa. Siin valid ka Hiireefekt arvutis (puudub, magnet või valguslaik). Eelvaates on kõik paigal; nupuga Esita animatsioon näed seda ühe korra. Kui külastaja on oma seadmes vähendanud liikumist, jääb kõik paigale. Liiga palju liikumist hajutab tähelepanu; paljude tekstidega lehel on sageli parem Rahulik või Väljas.

Koostajas: nii see käib

1. Ava Firmastiil, plokk Nimi ja logo. Klõpsa Laadi üles oma logo või Lase AI-l logo kujundada.
2. Vali plokis Favicon oma logo või automaatne algustäht.
3. Proovi plokis Stiil kahte või kolme stiili; vaata ka vaadet Mobiil.
4. Vali plokis Menüüriba kujundus ja värv.
5. Määra plokis Värvid oma põhivärv. Loe koostaja teateid.
6. Kontrolli plokkides Tume režiim ja Liikumine, mida soovid.
7. Klõpsa Salvesta ja avalda oma veebileht uuesti.

Kokkuvõte

• Paneel Firmastiil on tasuta; Salvesta loob uue versiooni.
• AI-logo maksab kolme ettepaneku eest 1 muudatuse; faviconi teeb koostaja ise või laadid selle üles.
• Kaksteist stiili ja viisteist menüü kujundust; menüü sisu jääb samaks.
• WCAG nõuab tavalise teksti puhul vähemalt 4,5:1 ja suure teksti puhul 3:1 kontrasti; koostaja jälgib seda, välja arvatud fotodel ja sinu logos.
• Oma fonti ainult veebilitsentsiga; tumeda režiimi ja liikumise seadistad nii, nagu su külastaja vajab.

Test

Ülesanne

Ülesanne D4.2: Sinu firmastiil ja kontrast. Seadista oma firmastiil ja mõõda oma tähtsamate värvipaaride kontrasti.

Kontrollnimekiri:

• [ ] logo on üles laaditud või valitud AI ettepanekute hulgast;
• [ ] favicon on seadistatud ja nähtud avaldatud veebilehe brauseri vahekaardil;
• [ ] stiil ja menüü kujundus on valitud ning vaadatud vaates Mobiil;
• [ ] põhivärv on määratud ja koostaja teated loetud;
• [ ] teksti värvi kontrast taustal ja nuputeksti kontrast nupu värvil on mõõdetud kontrastikontrollijaga;
• [ ] tume režiim ja liikumine on teadlikult valitud;
• [ ] firmastiil on salvestatud ja veebileht uuesti avaldatud.

Küsimused:

1. Milliseid kontrastsuhteid mõõtsid teksti puhul taustal ja nuputeksti puhul nupul ning kas need ulatuvad 4,5:1-ni?
2. Millises kohas su veebilehel on tekst foto peal ja kas see on telefonis hästi loetav?
3. Kas kasutad oma fonti? Kus on litsentsis kirjas, et veebikasutus on lubatud?

Pärast "tehtud" näed näidisvastust: Schildersbedrijf Example mõõtis tumehalli valgel 14,5:1 ja valget teksti rohelisel nupul 5,1:1, mõlemad üle 4,5:1; pealkiri hero-foto peal oli halvasti loetav, seega valis ta tumedama foto; oma fonti pole, seega litsentsi pole vaja.

Loe edasi

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