Celostna podoba: logotip, barve, pisave in meni

Modul 4: Strani, videz in funkcije · Čas branja: 8 minut

Učni cilj: Po tej lekciji boste v plošči Celostna podoba znali nastaviti ime in logotip, favicon, slog, obliko menija, barve, pisave, temni način in gibanje ter preveriti, ali je besedilo na Vaši strani dobro berljivo.

Ključni pojmi: celostna podoba, slog (look), logotip, slikovni znak, besedni znak, favicon, menijska vrstica, glavna barva, kontrast, kontrastno razmerje, WCAG, spletna licenca, temni način, gibanje

Zakaj je celostna podoba več kot le lep videz

Celostna podoba je stalna kombinacija logotipa, barv in pisav, po kateri Vas ljudje prepoznajo. Na spletni strani poskrbi za prepoznavnost (iste barve na kombiju, ponudbi in strani), hkrati pa mora ostati berljiva: svetlo sivo besedilo na beli podlagi deluje umirjeno, vendar ga številni obiskovalci težko preberejo, sploh na telefonu na soncu.

Vse v plošči Celostna podoba je brezplačno in takoj vidno v predogledu. Šele ko kliknete Shrani, nastane nova različica (lekcija 3.5). Če se želite vrniti, kliknite Razveljavi ali obnovite starejšo različico.

Plošča ima te sklope: Slog, Barve, Pisave, Menijska vrstica, Ime in logotip, Slike, Oblika in razmiki, Pisave in velikosti, Temni način in Gibanje.

Ime, logotip in favicon

V sklopu Ime in logotip je ime Vaše strani, kot se prikaže v glavi in nogi. Pod njim je logotip:

• Naloži lasten logotip: PNG s prosojnim ozadjem, SVG, JPG ali WebP, do 2 MB. V menijski vrstici najbolje deluje ležeč logotip.
• Če logotipa nimate, je graditelj ustvaril besedni znak: Vaše ime v Vaši pisavi in Vaših barvah. Ko ju spremenite, se samodejno prilagodi.
• Naj UI oblikuje logotip: na kratko opišete svoje podjetje in vzdušje ("slikopleskarsko podjetje v vasi, obrtniško in zanesljivo") in kliknete Oblikuj tri logotipe. Dobite tri slikovne znake (znak brez besedila) v Vaših barvah, z Vašim imenom ob njih v Vaši pisavi. Skupaj to stane 1 urejanje. Enega izberite z Uporabi ali napišite, kaj bi lahko bilo boljše ("prvi, vendar bolj okrogel"), in kliknite Oblikuj tri nove logotipe; to je nov krog za 1 urejanje.
• Prikaz v meniju in nogi: Logotip in ime, Samo logotip ali Samo ime ter Velikost (Majhen, Običajen, Velik).

Graditelj Vas opozori, če ima logotip tanke črte ali premalo kontrasta z menijsko vrstico: majhen v vrstici se lahko izgubi.

Logotip, ki ga je oblikovala UI, preverite tudi sami: ali ni preveč podoben logotipu drugega podjetja?

Favicon je ikonica v zavihku brskalnika in pri zaznamkih. Izberite Samodejno: začetnica v Vaših barvah, Vaš logotip ali Lastna datoteka (kvadratna, PNG, SVG ali ICO, do 512 KB).

Slog in menijska vrstica

Slog (v graditelju tudi look) z enim klikom določi pisave, oblike, gumbe, kartice, meni in okrasje. Na voljo jih je dvanajst, na primer Sveže, Toplo, Poslovno, Narava, Atelje in Noč. Vaše barve ostanejo, ko zamenjate slog; če želite tudi barve sloga, kliknite Tudi barve tega sloga. Slog Noč je vedno temen.

V sklopu Menijska vrstica izberete obliko vrstice na vrhu vsake strani, med petnajstimi oblikami: polna širina, sredinska, razdeljena, dve vrstici, barvna vrstica, obrobljena, kapsula, z zgornjo vrstico, prosojna, minimalna, lebdeča, rubrike, segment, celozaslonska in stranski meni. Vsebina menija (lekcija 4.1) ostane enaka. Nekaj opozoril iz razlage v samem graditelju:

• Prosojno je lepo le, če ima vsaka stran temen uvodni del (hero) ali uvodni del s fotografijo.
• Minimalno prikaže le Vaše ime in en gumb; povezave do strani so takrat v nogi.
• Z zgornjo vrstico postavi telefon in delovni čas v ozko vrstico nad menijem. Ali je ta telefonska številka pravilna?

Pri Barva menijske vrstice izberete Samodejno (sledi slogu), Bela, Svetlo siva, Temna ali Poudarjena barva. Drugo barvo zahtevate v klepetu.

Barve in kontrast

Pri Barve nastavite glavno barvo (gumbi, poudarki), drugo barvo za barvne prelive in ozadje (belo, krem, hladno, sivo ali odtenek Vaše barve oziroma po lastni izbiri). Z možnostjo Gumbi z barvnim prelivom dobijo vsi glavni gumbi preliv iz ene barve v drugo.

Tu pride na vrsto kontrast: razlika v svetlosti med besedilom in ozadjem. Izrazimo ga s kontrastnim razmerjem, od 1:1 (brez razlike) do 21:1 (črno na belem). Mednarodne smernice za dostopne spletne strani, WCAG organizacije W3C, na ravni AA zahtevajo najmanj 4,5:1 za običajno besedilo in 3:1 za veliko besedilo (približno 18 pik ali 14 pik krepko). Gumbi in drugi upravljalni elementi morajo glede na okolico doseči najmanj 3:1.

Graditelj to nadzoruje namesto Vas. Če izberete barvo, na kateri besedilo ni dobro berljivo, jo prilagodi in sporoči, kaj se je spremenilo, na primer: "Barva besedila ... je postala ..., ker sicer besedilo na njej ni dobro berljivo." Če želite obdržati natanko svoje barve, vklopite Obdrži natanko te barve: Vaše barve ostanejo, besedilo na njih pa samodejno dobi berljivo barvo. Tudi v razdelkih, ki jih UI ustvari z lastnim oblikovanjem, graditelj popravi barve besedila, ki padejo pod 4,5:1 (veliko besedilo 3:1).

Česa graditelj ne presoja: besedila na fotografiji ali v Vašem logotipu ter naslova čez razgibano fotografijo. To preverite sami, na telefonu. Če ste v dvomih glede barvnega para, vnesite obe barvni kodi v preverjevalnik kontrasta (glejte Za nadaljnje branje).

Past: barva celostne podobe iz tiskarne ali s kombija (na primer živo rumena) je redko primerna za barvo besedila. Uporabite jo kot poudarek ali ploskev, besedilo pa naj ostane temno.

Pisave in lastna pisava

Pri Pisave izberete pisavo za Naslovi in pisavo za Osnovno besedilo. Pisave so kot datoteke shranjene na Vaši lastni strani; ni nobene povezave do storitve za pisave nekoga drugega. Pri Pisave in velikosti z drsniki nastavite za celotno stran: razmik med vrsticami in med črkami za besedilo in naslove, število znakov v vrstici, širino vsebine in debelino naslovov. Kot slog drsnik ponastavi. Pri Velikost besedila izberete Običajno, Velika ali Zelo velika; to lahko storite tudi v klepetu ("povečaj pisavo").

Mogoča je tudi lastna pisava: naložite jo pri Pisave ali s sponko v klepetu, kot .woff2, .woff, .ttf ali .otf, do 2 MB na datoteko (dovoljenih je več debelin). Nato izberete, za kaj jo uporabite: naslove, besedilo ali oboje. To nič ne stane. Pisave iz storitve, kot je Adobe Fonts, ni mogoče uporabiti.

Pomembno: naložite le pisavo, za katero imate spletno licenco. Pisava je programska oprema z licenco. Licenca za uporabo na Vašem računalniku (za izdelavo tiskovin) še zdaleč ne dovoljuje vedno, da datoteko postavite na spletno stran, kjer jo prenese vsak obiskovalec. V licenčnih pogojih preverite, ali je spletna uporaba dovoljena. Pisave pod licenco SIL Open Font License se smejo vgraditi in razširjati.

Temni način in gibanje

Pri Temni način izberete Izklopljeno (vedno svetlo), Vedno temno ali Kot naprava. Pri zadnji možnosti obiskovalec, ki ima telefon ali računalnik nastavljen na temno, vidi temno različico Vaših barv. Ozadje, besedilo in glavno barvo v temnem načinu lahko izberete sami. Gumba, s katerim bi obiskovalci sami preklapljali, ni. Predogled sledi Vaši napravi: telefon ali računalnik nastavite na temno, da vidite temno različico, in pri tem preverite tudi svoj logotip.

Pri Gibanje izberete Vklopljeno, Umirjeno ali Izklopljeno za celotno stran in po potrebi izjemo za posamezno stran. Tu izberete tudi Učinek miške na računalniku (brez, magnet ali svetlobna lisa). V predogledu vse miruje; z Predvajaj animacijo ga vidite enkrat. Če ima obiskovalec na svoji napravi nastavljeno manj gibanja, vse ostane mirno. Preveč gibanja odvrača pozornost; na strani z veliko besedila sta Umirjeno ali Izklopljeno pogosto boljša izbira.

V graditelju: tako to storite

1. Odprite Celostna podoba, sklop Ime in logotip. Kliknite Naloži lasten logotip ali Naj UI oblikuje logotip.
2. Pri Favicon izberite svoj logotip ali samodejno začetnico.
3. Preizkusite dva ali tri sloge pri Slog; poglejte tudi pod Mobilni telefon.
4. Pri Menijska vrstica izberite obliko in barvo.
5. Pri Barve nastavite glavno barvo. Preberite sporočila graditelja.
6. Pri Temni način in Gibanje preverite, kaj želite.
7. Kliknite Shrani in stran znova objavite.

Povzetek

• Plošča Celostna podoba je brezplačna; Shrani ustvari novo različico.
• Logotip, ki ga oblikuje UI, stane 1 urejanje za tri predloge; favicon ustvari graditelj sam ali ga naložite sami.
• Dvanajst slogov in petnajst oblik menija; vsebina menija ostane enaka.
• WCAG zahteva najmanj 4,5:1 kontrasta za običajno besedilo in 3:1 za veliko besedilo; graditelj to nadzoruje, razen na fotografijah in v Vašem logotipu.
• Lastna pisava le s spletno licenco; temni način in gibanje nastavite glede na to, kaj potrebuje Vaš obiskovalec.

Kviz

Naloga

Naloga D4.2: Vaša celostna podoba in kontrast. Nastavite celostno podobo in izmerite kontrast svojih najpomembnejših barvnih parov.

Kontrolni seznam:

• [ ] logotip naložen ali izbran med predlogi UI;
• [ ] favicon nastavljen in preverjen v zavihku brskalnika na objavljeni strani;
• [ ] slog in oblika menija izbrana, pregledana pod Mobilni telefon;
• [ ] glavna barva nastavljena in sporočila graditelja prebrana;
• [ ] kontrast barve besedila na ozadju in besedila gumba na barvi gumba izmerjen s preverjevalnikom kontrasta;
• [ ] temni način in gibanje premišljeno izbrana;
• [ ] celostna podoba shranjena in stran znova objavljena.

Vprašanja:

1. Kakšni kontrastni razmerji ste izmerili za besedilo na ozadju in za besedilo gumba na gumbu ter ali dosežeta 4,5:1?
2. Na katerem mestu Vaše strani je besedilo čez fotografijo in ali je na telefonu dobro berljivo?
3. Ali uporabljate lastno pisavo? Kje v licenci piše, da je spletna uporaba dovoljena?

Ko kliknete "opravljeno", vidite primer odgovora: Schildersbedrijf Example je za temno sivo na belem izmeril 14,5:1 in za belo besedilo na zelenem gumbu 5,1:1, oboje nad 4,5:1; naslov čez fotografijo v uvodnem delu je bil slabo berljiv, zato je izbral temnejšo fotografijo; lastne pisave ne uporablja, zato licenca ni potrebna.

Za nadaljnje branje

• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C, v angleščini): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• Understanding Success Criterion 1.4.11: Non-text Contrast (W3C, v angleščini): https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• Contrast Checker (WebAIM, v angleščini): https://webaim.org/resources/contrastchecker/
• SIL Open Font License, uradno besedilo (v angleščini): https://openfontlicense.org/open-font-license-official-text/