Zīmola stils: logotips, krāsas, fonti un izvēlne

4. modulis: Lapas, izskats un funkcijas · Lasīšanas laiks: 8 min.

Mērķis: Pēc šīs nodarbības Jūs varēsiet panelī Zīmola stils iestatīt nosaukumu un logotipu, favicon, stilu, izvēlnes dizainu, krāsas, fontus, tumšo režīmu un kustību, kā arī pārbaudīt, vai teksts Jūsu vietnē ir labi lasāms.

Pamatjēdzieni: zīmola stils, stils (look), logotips, grafiskā zīme, vārda zīme, favicon, izvēlnes josla, galvenā krāsa, kontrasts, kontrasta attiecība, WCAG, tīmekļa licence, tumšais režīms, kustība

Kāpēc zīmola stils ir kas vairāk nekā tikai skaists izskats

Zīmola stils ir pastāvīga logotipa, krāsu un fontu kombinācija, pēc kuras cilvēki Jūs atpazīst. Tīmekļa vietnē tas nodrošina atpazīstamību (tās pašas krāsas uz busiņa, piedāvājumā un vietnē), un tam jāpaliek lasāmam: gaiši pelēks teksts uz balta fona izskatās mierīgi, taču daudzi apmeklētāji to izlasa ar grūtībām, it īpaši tālrunī saulē.

Viss panelī Zīmola stils ir bez maksas un uzreiz redzams priekšskatījumā. Tikai tad, kad noklikšķināt uz Saglabāt, tiek izveidota jauna versija (nodarbība 3.5). Ja vēlaties atgriezties, noklikšķiniet uz Atsaukt vai atjaunojiet vecāku versiju.

Panelī ir šādi bloki: Stils, Krāsas, Fonti, Izvēlnes josla, Nosaukums un logotips, Attēli, Forma un atstarpes, Fonti un izmēri, Tumšais režīms un Kustība.

Nosaukums, logotips un favicon

Sadaļā Nosaukums un logotips ir Jūsu vietnes nosaukums, kā tas parādās galvenē un kājenē. Zem tā ir logotips:

• Augšupielādēt savu logotipu: PNG ar caurspīdīgu fonu, SVG, JPG vai WebP, līdz 2 MB. Izvēlnes joslā vislabāk darbojas horizontāls logotips.
• Ja Jums nav logotipa, veidotājs ir izveidojis vārda zīmi: Jūsu nosaukumu Jūsu fontā un krāsās. Tā automātiski pielāgojas, ja tos maināt.
• Ļaut MI izveidot logotipu: Jūs īsi aprakstāt savu uzņēmumu un noskaņu ("krāsotāju uzņēmums ciematā, amatnieciski un uzticami") un noklikšķināt uz Izveidot trīs logotipus. Jūs saņemat trīs grafiskās zīmes (zīmi bez teksta) savās krāsās, ar nosaukumu blakus Jūsu fontā. Kopā tas izmaksā 1 labojumu. Izvēlieties vienu ar Izmantot vai uzrakstiet, ko var uzlabot ("pirmo, bet apaļāku"), un noklikšķiniet uz Izveidot trīs jaunus logotipus; tā ir vēl viena kārta par 1 labojumu.
• Attēlojums izvēlnē un kājenē: Logotips un nosaukums, Tikai logotips vai Tikai nosaukums, un Lielums (Mazs, Parasts, Liels).

Veidotājs brīdina, ja logotipam ir plānas līnijas vai maz kontrasta ar izvēlnes joslu: mazā izmērā joslā tas var tad pazust.

Pārbaudiet MI logotipu paši: vai tas nav pārāk līdzīgs kāda cita uzņēmuma logotipam?

Favicon ir mazā ikona pārlūkprogrammas cilnē un pie grāmatzīmēm. Izvēlieties Automātiski: sākuma burts Jūsu krāsās, Jūsu logotips vai Savs fails (kvadrātveida, PNG, SVG vai ICO, līdz 512 KB).

Stils un izvēlnes josla

Stils (veidotājā arī look) ar vienu klikšķi nosaka fontus, formas, pogas, kartītes, izvēlni un dekorācijas. Ir divpadsmit stili, piemēram, Svaigs, Silts, Lietišķs, Daba, Ateljē un Nakts. Jūsu pašu krāsas saglabājas, mainot stilu; ja vēlaties arī stila krāsas, noklikšķiniet uz Izmantot arī šī stila krāsas. Stils Nakts vienmēr ir tumšs.

Sadaļā Izvēlnes josla Jūs izvēlaties joslas formu katras lapas augšdaļā no piecpadsmit dizainiem: pilna platuma, centrēta, sadalīta, divrindu, krāsu josla, ar apmali, tablete, ar augšējo joslu, caurspīdīga, minimāla, peldoša, rubrikas, segmenti, pilnekrāna un sānu izvēlne. Izvēlnes saturs (nodarbība 4.1) paliek tāds pats. Daži svarīgi punkti no paša veidotāja paskaidrojumiem:

• Caurspīdīga izskatās labi tikai tad, ja katrai lapai ir tumša galvenā sadaļa (hero) vai galvenā sadaļa ar fotoattēlu.
• Minimāla rāda tikai Jūsu nosaukumu un vienu pogu; lapu saites tad ir kājenē.
• Ar augšējo joslu izvieto tālruni un darba laiku šaurā joslā virs izvēlnes. Vai šis tālruņa numurs ir pareizs?

Sadaļā Izvēlnes joslas krāsa Jūs izvēlaties Automātiski (seko stilam), Balta, Gaiši pelēka, Tumša vai Akcenta krāsa. Citu krāsu varat pieprasīt tērzēšanā.

Krāsas un kontrasts

Sadaļā Krāsas Jūs iestatāt galveno krāsu (pogas, akcenti), otru krāsu krāsu pārejām un fonu (balts, krēmkrāsas, vēss, pelēks vai Jūsu krāsas tonis, vai pašu izvēlēts). Ar Pogas ar krāsu pāreju visas galvenās pogas iegūst pāreju no vienas krāsas uz otru.

Šeit svarīgs kļūst kontrasts: spilgtuma atšķirība starp tekstu un fonu. To izsaka kā kontrasta attiecību, no 1:1 (nav atšķirības) līdz 21:1 (melns uz balta). Starptautiskās pieejamu tīmekļa vietņu vadlīnijas, W3C WCAG, līmenī AA prasa vismaz 4,5:1 parastam tekstam un 3:1 lielam tekstam (apmēram 18 punktu vai 14 punktu treknrakstā). Pogām un citiem vadības elementiem jāsasniedz vismaz 3:1 attiecībā pret apkārtni.

Veidotājs to uzrauga Jūsu vietā. Ja izvēlaties krāsu, uz kuras teksts slikti lasās, tas to pielāgo un paziņo, kas mainījās, piemēram: "Teksta krāsa ... ir kļuvusi ..., jo citādi teksts uz tās slikti lasās." Ja vēlaties saglabāt tieši savas krāsas, ieslēdziet Saglabāt tieši šīs krāsas: Jūsu krāsas paliek, un teksts uz tām automātiski iegūst lasāmu krāsu. Arī sadaļās, ko MI veido ar savu noformējumu, veidotājs labo teksta krāsas, kas ir zem 4,5:1 (lielam tekstam 3:1).

Ko veidotājs nevērtē: tekstu fotoattēlā vai Jūsu logotipā un virsrakstu virs raiba fotoattēla. Pārbaudiet to paši, tālrunī. Ja šaubāties par krāsu pāri, ievadiet abus krāsu kodus kontrasta pārbaudes rīkā (skatiet Vairāk lasīt).

Slazds: zīmola krāsa no tipogrāfijas vai busiņa (piemēram, spilgti dzeltena) reti der kā teksta krāsa. Izmantojiet to kā akcentu vai laukumu, bet tekstu saglabājiet tumšu.

Fonti un savs fonts

Sadaļā Fonti Jūs izvēlaties fontu sadaļai Virsraksti un vienu sadaļai Pamatteksts. Fonti tiek glabāti kā faili Jūsu pašu vietnē; netiek veidots savienojums ar kāda cita fontu pakalpojumu. Sadaļā Fonti un izmēri ar slīdņiem visai vietnei iestatāt: teksta un virsrakstu rindstarpu un burtu atstarpi, rakstzīmju skaitu rindā, satura platumu un virsrakstu biezumu. Kā stilā atjauno slīdņa sākotnējo vērtību. Sadaļā Teksta izmērs izvēlaties Parasts, Liels vai Ļoti liels; to var izdarīt arī tērzēšanā ("padariet burtus lielākus").

Var izmantot arī savu fontu: augšupielādējiet to sadaļā Fonti vai ar saspraudi tērzēšanā kā .woff2, .woff, .ttf vai .otf, līdz 2 MB katram failam (var vairākus biezumus). Pēc tam izvēlaties, kam to izmantot: virsrakstiem, tekstam vai abiem. Tas neko nemaksā. Fontu no tāda pakalpojuma kā Adobe Fonts izmantot nevar.

Svarīgi: augšupielādējiet tikai fontu, kam Jums ir tīmekļa licence. Fonts ir licencēta programmatūra. Licence izmantošanai Jūsu datorā (iespieddarbu veidošanai) bieži vien neatļauj ievietot failu tīmekļa vietnē, kur katrs apmeklētājs to lejupielādē. Pārbaudiet licences noteikumos, vai izmantošana tīmeklī ir atļauta. Fontus ar SIL Open Font License drīkst iegult un izplatīt.

Tumšais režīms un kustība

Sadaļā Tumšais režīms Jūs izvēlaties Izslēgts (vienmēr gaišs), Vienmēr tumšs vai Kā ierīcē. Pēdējā gadījumā apmeklētājs, kura tālrunis vai dators ir iestatīts tumšajā režīmā, redz Jūsu krāsu tumšo versiju. Fonu, tekstu un galveno krāsu tumšajā režīmā varat izvēlēties paši. Pogas, ar kuru apmeklētāji paši varētu pārslēgt režīmu, nav. Priekšskatījums seko Jūsu ierīcei: iestatiet savu tālruni vai datoru tumšajā režīmā, lai redzētu tumšo versiju, un tad pārbaudiet arī savu logotipu.

Sadaļā Kustība Jūs izvēlaties Ieslēgta, Mierīga vai Izslēgta visai vietnei un, ja nepieciešams, izņēmumu atsevišķai lapai. Šeit izvēlaties arī Peles efekts datorā (nav, magnēts vai gaismas plankums). Priekšskatījumā viss ir nekustīgs; ar Atskaņot kustību to redzat vienu reizi. Ja apmeklētājs savā ierīcē ir iestatījis mazāk kustību, viss paliek nekustīgs. Pārāk daudz kustību novērš uzmanību; lapā ar daudz teksta bieži labāk der Mierīga vai Izslēgta.

Veidotājā: kā to izdarīt

1. Atveriet Zīmola stils, bloku Nosaukums un logotips. Noklikšķiniet uz Augšupielādēt savu logotipu vai uz Ļaut MI izveidot logotipu.
2. Sadaļā Favicon izvēlieties savu logotipu vai automātisko sākuma burtu.
3. Izmēģiniet divus vai trīs stilus sadaļā Stils; apskatiet arī skatā Mobilais.
4. Sadaļā Izvēlnes josla izvēlieties dizainu un krāsu.
5. Sadaļā Krāsas iestatiet galveno krāsu. Izlasiet veidotāja paziņojumus.
6. Pārbaudiet, ko vēlaties sadaļās Tumšais režīms un Kustība.
7. Noklikšķiniet uz Saglabāt un vēlreiz publicējiet vietni tiešsaistē.

Kopsavilkums

• Panelis Zīmola stils ir bez maksas; Saglabāt izveido jaunu versiju.
• MI logotips izmaksā 1 labojumu par trim priekšlikumiem; favicon veidotājs izveido pats, vai arī Jūs to augšupielādējat.
• Divpadsmit stili un piecpadsmit izvēlnes dizaini; izvēlnes saturs paliek nemainīgs.
• WCAG prasa vismaz 4,5:1 kontrastu parastam tekstam un 3:1 lielam tekstam; veidotājs to uzrauga, izņemot fotoattēlos un Jūsu logotipā.
• Savu fontu tikai ar tīmekļa licenci; tumšo režīmu un kustību iestatiet atbilstoši tam, kas nepieciešams Jūsu apmeklētājiem.

Tests (quiz)

Uzdevums

Uzdevums D4.2: Jūsu korporatīvais stils un kontrasts. Iestatiet savu zīmola stilu un izmēriet svarīgāko krāsu pāru kontrastu.

Kontrolsaraksts:

• [ ] logotips augšupielādēts vai izvēlēts no MI priekšlikumiem;
• [ ] favicon iestatīts un apskatīts Jūsu tiešsaistes vietnes pārlūkprogrammas cilnē;
• [ ] stils un izvēlnes dizains izvēlēti, apskatīti skatā Mobilais;
• [ ] galvenā krāsa iestatīta un veidotāja paziņojumi izlasīti;
• [ ] teksta krāsas kontrasts pret fonu un pogas teksta kontrasts pret pogas krāsu izmērīts ar kontrasta pārbaudes rīku;
• [ ] tumšais režīms un kustība izvēlēti apzināti;
• [ ] zīmola stils saglabāts un vietne vēlreiz publicēta tiešsaistē.

Jautājumi:

1. Kādas kontrasta attiecības Jūs izmērījāt tekstam uz fona un pogas tekstam uz pogas, un vai tās sasniedz 4,5:1?
2. Kurā Jūsu vietnes vietā teksts ir virs fotoattēla, un vai tas ir labi lasāms tālrunī?
3. Vai izmantojat savu fontu? Kur licencē ir norādīts, ka izmantošana tīmeklī ir atļauta?

Pēc "gatavs" Jūs redzēsiet atbildes piemēru: Schildersbedrijf Example izmērīja tumši pelēku uz balta 14,5:1 un baltu tekstu uz zaļās pogas 5,1:1, abi virs 4,5:1; virsraksts virs galvenās sadaļas fotoattēla lasījās slikti, tāpēc uzņēmums izvēlējās tumšāku fotoattēlu; savs fonts netiek izmantots, tāpēc licence nav vajadzīga.

Vairāk lasīt

• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C, angļu valodā): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• Understanding Success Criterion 1.4.11: Non-text Contrast (W3C, angļu valodā): https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• Contrast Checker (WebAIM, angļu valodā): https://webaim.org/resources/contrastchecker/
• SIL Open Font License, oficiālais teksts (angļu valodā): https://openfontlicense.org/open-font-license-official-text/