Firminis stilius: logotipas, spalvos, šriftai ir meniu

4 modulis: Puslapiai, išvaizda ir funkcijos · Skaitymo laikas: 8 min.

Mokymosi tikslas: Po šios pamokos galėsite skydelyje Firminis stilius nustatyti pavadinimą ir logotipą, piktogramą, stilių, meniu dizainą, spalvas, šriftus, tamsų režimą ir judesį, taip pat patikrinsite, ar tekstas Jūsų svetainėje gerai įskaitomas.

Pagrindinės sąvokos: firminis stilius, stilius (išvaizda), logotipas, grafinis ženklas, žodinis ženklas, piktograma (favicon), meniu juosta, pagrindinė spalva, kontrastas, kontrasto santykis, WCAG, žiniatinklio licencija, tamsus režimas, judesys

Kodėl firminis stilius yra daugiau nei grožis

Firminis stilius yra pastovus logotipo, spalvų ir šriftų derinys, iš kurio žmonės Jus atpažįsta. Svetainėje jis padeda atpažinti (tos pačios spalvos ant automobilio, komerciniame pasiūlyme ir svetainėje), tačiau turi išlikti įskaitomas: šviesiai pilkas tekstas baltame fone atrodo ramiai, bet daugeliui lankytojų jį sunku perskaityti, ypač telefone saulėje.

Viskas skydelyje Firminis stilius yra nemokama ir iškart matoma peržiūroje. Tik paspaudus Išsaugoti sukuriama nauja versija (pamoka 3.5). Jei norite grįžti, spustelėkite Grąžinti arba atkurkite senesnę versiją.

Skydelyje yra šie blokai: Stilius, Spalvos, Šriftai, Meniu juosta, Pavadinimas ir logotipas, Paveikslėliai, Forma ir tarpai, Šriftai ir dydžiai, Tamsus režimas ir Judesys.

Pavadinimas, logotipas ir piktograma

Bloke Pavadinimas ir logotipas nurodytas Jūsų svetainės pavadinimas, kaip jis rodomas antraštėje ir poraštėje. Po juo yra logotipas:

• Įkelti savo logotipą: PNG su permatomu fonu, SVG, JPG arba WebP, iki 2 MB. Meniu juostoje geriausiai tinka gulsčias logotipas.
• Jei logotipo neturite, kūrimo įrankis sukūrė žodinį ženklą: Jūsų pavadinimą Jūsų šriftu ir spalvomis. Jis pats prisitaiko, kai šiuos nustatymus pakeičiate.
• Leisti DI sukurti logotipą: trumpai aprašote savo įmonę ir nuotaiką ("dažymo įmonė kaime, amatininkiška ir patikima") ir spustelite Sukurti tris logotipus. Gausite tris grafinius ženklus (ženklą be teksto) Jūsų spalvomis, o šalia bus Jūsų pavadinimas Jūsų šriftu. Visa tai kainuoja 1 redagavimą. Pasirinkite vieną mygtuku Naudoti arba parašykite, ką pagerinti ("pirmasis, bet apvalesnis"), ir spustelėkite Sukurti tris naujus logotipus; tai vėl vienas 1 redagavimo ratas.
• Rodymas meniu ir poraštėje: Logotipas ir pavadinimas, Tik logotipas arba Tik pavadinimas, taip pat Dydis (Mažas, Įprastas, Didelis).

Kūrimo įrankis įspėja, jei logotipe yra plonų linijų arba jis mažai kontrastuoja su meniu juosta: mažas juostoje jis gali tapti nebematomas.

DI sukurtą logotipą patikrinkite patys: ar jis nėra per daug panašus į kitos įmonės logotipą?

Piktograma (favicon) yra mažas ženkliukas naršyklės kortelėje ir prie žymių. Pasirinkite Automatiškai: pirmoji raidė Jūsų spalvomis, Jūsų logotipas arba Savas failas (kvadratinis, PNG, SVG arba ICO, iki 512 KB).

Stilius ir meniu juosta

Stilius (kūrimo įrankyje dar vadinamas išvaizda) vienu spustelėjimu nustato šriftus, formas, mygtukus, korteles, meniu ir dekoracijas. Jų yra dvylika, pavyzdžiui, Gaivus, Šiltas, Dalykinis, Gamta, Ateljė ir Naktis. Keičiant stilių Jūsų spalvos išlieka; jei norite ir stiliaus spalvų, spustelėkite Naudoti ir šio stiliaus spalvas. Stilius Naktis visada tamsus.

Skiltyje Meniu juosta pasirenkate juostos, esančios kiekvieno puslapio viršuje, formą iš penkiolikos dizainų: visu pločiu, centruota, padalyta, dviejų eilučių, spalvota juosta, su rėmeliu, piliulė, su viršutine juosta, permatoma, minimali, plaukiojanti, rubrikos, segmentai, viso ekrano ir šoninis meniu. Meniu turinys (pamoka 4.1) lieka toks pat. Keli svarbūs dalykai iš paties kūrimo įrankio paaiškinimų:

• Permatomas gražiai atrodo tik tada, kai kiekviename puslapyje yra tamsi pagrindinė sekcija arba nuotrauka.
• Minimalus rodo tik Jūsų pavadinimą ir vieną mygtuką; puslapių nuorodos tada yra poraštėje.
• Su viršutine juosta telefono numerį ir darbo laiką rodo siauroje juostoje viršuje. Ar tas telefono numeris teisingas?

Skiltyje Meniu juostos spalva pasirinkite Automatiškai (pagal stilių), Balta, Šviesiai pilka, Tamsi arba Akcento spalva. Kitos spalvos galite paprašyti pokalbyje.

Spalvos ir kontrastas

Skiltyje Spalvos nustatote pagrindinę spalvą (mygtukai, akcentai), antrą spalvą spalvų perėjimams ir foną (balta, kreminė, vėsi, pilka, Jūsų spalvos atspalvis arba pasirinkta pačių). Įjungus Mygtukai su spalvų perėjimu, visi pagrindiniai mygtukai gauna perėjimą iš vienos spalvos į kitą.

Čia svarbus kontrastas: šviesumo skirtumas tarp teksto ir fono. Jis išreiškiamas kontrasto santykiu, nuo 1:1 (jokio skirtumo) iki 21:1 (juoda ant baltos). Tarptautinės prieinamų svetainių gairės WCAG, parengtos W3C, AA lygiu reikalauja bent 4,5:1 įprastam tekstui ir 3:1 dideliam tekstui (maždaug 18 punktų arba 14 punktų paryškintam). Mygtukai ir kiti valdymo elementai turi pasiekti bent 3:1 santykį su aplinka.

Kūrimo įrankis tai prižiūri už Jus. Jei pasirenkate spalvą, ant kurios tekstas prastai įskaitomas, jis ją pakoreguoja ir praneša, kas pasikeitė, pavyzdžiui: "Teksto spalva ... tapo ..., nes kitaip tekstas ant jos prastai įskaitomas." Jei norite išlaikyti tiksliai savo spalvas, įjunkite Išlaikyti tiksliai šias spalvas: Jūsų spalvos lieka, o tekstas ant jų automatiškai gauna įskaitomą spalvą. Net sekcijose, kurias DI sukuria su savo apipavidalinimu, kūrimo įrankis pataiso teksto spalvas, kurios nesiekia 4,5:1 (dideliam tekstui 3:1).

Ko kūrimo įrankis nevertina: teksto nuotraukoje ar Jūsų logotipe ir antraštės ant margos nuotraukos. Tai patikrinkite patys, telefone. Jei abejojate dėl spalvų poros, įveskite abu spalvų kodus į kontrasto tikrinimo įrankį (žr. Skaitykite daugiau).

Spąstai: firminė spalva iš spaustuvės ar ant automobilio (pavyzdžiui, ryškiai geltona) retai tinka teksto spalvai. Naudokite ją kaip akcentą ar plotą, o tekstą palikite tamsų.

Šriftai ir savas šriftas

Skiltyje Šriftai pasirenkate šriftą Antraštės ir šriftą Pagrindinis tekstas. Šriftai saugomi kaip failai Jūsų pačių svetainėje; jokio ryšio su kito teikėjo šriftų paslauga nėra. Skiltyje Šriftai ir dydžiai slankikliais visai svetainei nustatote: teksto ir antraščių eilučių bei raidžių tarpus, simbolių skaičių eilutėje, turinio plotį ir antraščių storį. Pagal stilių grąžina slankiklį į pradinę padėtį. Skiltyje Teksto dydis pasirenkate Įprastas, Didelis arba Labai didelis; tai galima padaryti ir pokalbyje ("padidinkite raides").

Galima naudoti ir savą šriftą: įkelkite jį skiltyje Šriftai arba sąvaržėle pokalbyje, kaip .woff2, .woff, .ttf arba .otf, iki 2 MB vienam failui (galima keli storiai). Tada pasirenkate, kam jį naudoti: antraštėms, tekstui ar abiem. Tai nieko nekainuoja. Šrifto iš tokios paslaugos kaip Adobe Fonts naudoti negalima.

Svarbu: įkelkite tik tokį šriftą, kuriam turite žiniatinklio licenciją. Šriftas yra programinė įranga su licencija. Licencija naudoti kompiuteryje (spaudiniams kurti) toli gražu ne visada leidžia failą įdėti į svetainę, iš kurios jį atsisiunčia kiekvienas lankytojas. Licencijos sąlygose patikrinkite, ar leidžiama naudoti internete. Šriftus pagal SIL Open Font License leidžiama įterpti ir platinti.

Tamsus režimas ir judesys

Skiltyje Tamsus režimas pasirenkate Išjungta (visada šviesus), Visada tamsus arba Pagal įrenginį. Pasirinkus pastarąjį, lankytojas, kurio telefonas ar kompiuteris nustatytas tamsiai, mato tamsią Jūsų spalvų versiją. Tamsaus režimo foną, tekstą ir pagrindinę spalvą galite pasirinkti patys. Mygtuko, kuriuo lankytojai galėtų patys perjungti, nėra. Peržiūra seka Jūsų įrenginį: nustatykite savo telefoną ar kompiuterį tamsiai, kad pamatytumėte tamsią versiją, ir tada patikrinkite ir savo logotipą.

Skiltyje Judesys visai svetainei pasirenkate Įjungta, Ramus arba Išjungta, o prireikus nustatote išimtį atskiram puslapiui. Čia pasirenkate ir Pelės efektas kompiuteryje (jokio, magnetas arba šviesos dėmė). Peržiūroje viskas nejuda; mygtuku Paleisti animaciją pamatysite ją vieną kartą. Jei lankytojas savo įrenginyje nustatė mažiau judesio, viskas lieka nejudantis. Per daug judesio blaško dėmesį; puslapyje su daug teksto dažnai geriau tinka Ramus arba Išjungta.

Kūrimo įrankyje: kaip tai padaryti

1. Atidarykite Firminis stilius, bloką Pavadinimas ir logotipas. Spustelėkite Įkelti savo logotipą arba Leisti DI sukurti logotipą.
2. Skiltyje Piktograma pasirinkite savo logotipą arba automatinę pirmąją raidę.
3. Skiltyje Stilius išbandykite du ar tris stilius; pažiūrėkite ir rodinyje Telefonas.
4. Skiltyje Meniu juosta pasirinkite dizainą ir spalvą.
5. Skiltyje Spalvos nustatykite pagrindinę spalvą. Perskaitykite kūrimo įrankio pranešimus.
6. Skiltyse Tamsus režimas ir Judesys patikrinkite, ko norite.
7. Spustelėkite Išsaugoti ir paskelbkite svetainę iš naujo.

Santrauka

• Skydelis Firminis stilius yra nemokamas; Išsaugoti sukuria naują versiją.
• DI logotipas kainuoja 1 redagavimą už tris pasiūlymus; piktogramą sukuria kūrimo įrankis arba įkeliate savo.
• Dvylika stilių ir penkiolika meniu dizainų; meniu turinys lieka toks pat.
• WCAG reikalauja bent 4,5:1 kontrasto įprastam tekstui ir 3:1 dideliam tekstui; kūrimo įrankis tai prižiūri, išskyrus nuotraukas ir Jūsų logotipą.
• Savas šriftas tik su žiniatinklio licencija; tamsų režimą ir judesį nustatykite pagal tai, ko reikia Jūsų lankytojui.

Testas (quiz)

Užduotis

Užduotis D4.2: Jūsų firminis stilius ir kontrastas. Nustatykite savo firminį stilių ir išmatuokite svarbiausių spalvų porų kontrastą.

Kontrolinis sąrašas:

• [ ] logotipas įkeltas arba pasirinktas iš DI pasiūlymų;
• [ ] piktograma nustatyta ir matyta paskelbtos svetainės naršyklės kortelėje;
• [ ] stilius ir meniu dizainas pasirinkti, peržiūrėti rodinyje Telefonas;
• [ ] pagrindinė spalva nustatyta ir kūrimo įrankio pranešimai perskaityti;
• [ ] teksto spalvos ant fono ir mygtuko teksto ant mygtuko spalvos kontrastas išmatuotas kontrasto tikrinimo įrankiu;
• [ ] tamsus režimas ir judesys pasirinkti sąmoningai;
• [ ] firminis stilius išsaugotas ir svetainė paskelbta iš naujo.

Klausimai:

1. Kokius kontrasto santykius išmatavote tekstui ant fono ir mygtuko tekstui ant mygtuko, ir ar jie siekia 4,5:1?
2. Kurioje Jūsų svetainės vietoje tekstas yra ant nuotraukos, ir ar jis gerai įskaitomas telefone?
3. Ar naudojate savą šriftą? Kur licencijoje parašyta, kad leidžiama naudoti internete?

Pažymėję "atlikta" pamatysite atsakymo pavyzdį: Schildersbedrijf Example išmatavo tamsiai pilką ant baltos 14,5:1 ir baltą tekstą ant žalio mygtuko 5,1:1, abu viršija 4,5:1; antraštė ant pagrindinės nuotraukos buvo prastai įskaitoma, todėl buvo pasirinkta tamsesnė nuotrauka; savas šriftas nenaudojamas, todėl licencijos nereikia.

Skaitykite daugiau

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