Arculat: logó, színek, betűk és menü

Modul 4: Oldalak, megjelenés és funkciók · Olvasási idő: 8 perc

Tanulási cél: A lecke után be tudja állítani az Arculat panelen a webhely nevét és logóját, a favicont, a stílust, a menü kialakítását, a színeket, a betűket, a sötét módot és a mozgást, és ellenőrzi, hogy a webhelyén lévő szöveg jól olvasható-e.

Kulcsfogalmak: arculat, stílus (megjelenés), logó, ábrás védjegy (képjel), szóvédjegy (szöveges logó), favicon, menüsáv, fő szín, kontraszt, kontrasztarány, WCAG, webes licenc, sötét mód, mozgás

Miért több az arculat a szép megjelenésnél?

Az arculat a logó, a színek és a betűk állandó együttese, amelyről az emberek felismerik Önt. Egy webhelyen ez biztosítja a felismerhetőséget (ugyanazok a színek a furgonon, az árajánlaton és a webhelyen), ugyanakkor olvashatónak is kell maradnia: a fehér alapon világosszürke szöveg nyugodtnak hat, de sok látogató nehezen olvassa, különösen napfényben, telefonon.

Az Arculat panelen minden ingyenes, és azonnal látszik az előnézetben. Új változat csak akkor jön létre, amikor a Mentés gombra kattint (3.5. lecke). Ha vissza szeretne lépni, kattintson a Visszaállítás gombra, vagy állítson vissza egy korábbi változatot.

A panel a következő blokkokból áll: Stílus, Színek, Betűtípusok, Menüsáv, Név és logó, Képek, Forma és térköz, Betűk és méretek, Sötét mód és Mozgás.

Név, logó és favicon

A Név és logó blokkban szerepel a webhely neve, ahogyan a fejlécben és a láblécben megjelenik. Alatta található a logó:

• Saját logó feltöltése: átlátszó hátterű PNG, SVG, JPG vagy WebP, legfeljebb 2 MB. A menüsávban a fekvő logó működik a legjobban.
• Ha nincs logója, a szerkesztő készített egy szöveges logót: az Ön nevét az Ön betűtípusával és színeivel. Ez magától igazodik, ha ezeket módosítja.
• Logótervezés AI-val: röviden leírja a vállalkozását és a kívánt hangulatot („festőcég egy faluban, kézműves és megbízható”), majd a Három logó tervezése gombra kattint. Három képjelet kap (szöveg nélküli jel) az Ön színeiben, mellettük a nevével az Ön betűtípusában. Ez összesen 1 szerkesztésbe kerül. Válasszon egyet a Használat gombbal, vagy írja le, min lehetne javítani („az első, csak kerekebben”), és kattintson a Három új logó tervezése gombra; ez ismét egy 1 szerkesztéses kör.
• Megjelenítés a menüben és a láblécben: Logó és név, Csak logó vagy Csak név, valamint a Méret (Kicsi, Normál, Nagy).

A szerkesztő figyelmeztet, ha egy logó vékony vonalakból áll, vagy kevés a kontrasztja a menüsávval: kis méretben a sávban ilyenkor elveszhet.

Az AI által készített logót ellenőrizze saját maga is: nem hasonlít túlságosan egy másik vállalkozás logójára?

A favicon a böngészőlapon és a könyvjelzőknél megjelenő kis ikon. Válassza az Automatikus: kezdőbetű az Ön színeiben, Az Ön logója vagy a Saját fájl lehetőséget (négyzetes, PNG, SVG vagy ICO, legfeljebb 512 KB).

Stílus és menüsáv

A stílus (a szerkesztőben megjelenés is) egyetlen kattintással meghatározza a betűket, a formákat, a gombokat, a kártyákat, a menüt és a díszítést. Tizenkét stílus van, például Friss, Meleg, Üzleti, Természet, Műterem és Éjszaka. Stílusváltáskor a saját színei megmaradnak; ha a stílus színeit is szeretné, kattintson A stílus színeit is lehetőségre: A stílus színeit is. Az Éjszaka stílus mindig sötét.

A Menüsáv blokkban választhatja ki az egyes oldalak tetején lévő sáv formáját, tizenöt kialakítás közül: teljes szélességű, középre igazított, osztott, kétsoros, színes sáv, keretes, pirula, felső sávval, átlátszó, minimális, lebegő, rovatok, szegmens, teljes képernyős és oldalsó menü. A menü tartalma (4.1. lecke) ugyanaz marad. Néhány szempont a szerkesztőben található magyarázatból:

• Az Átlátszó csak akkor szép, ha minden oldalon sötét hero vagy fotós hero van.
• A Minimális csak a nevét és egy gombot mutatja; az oldalakra mutató linkek ilyenkor a láblécbe kerülnek.
• A Felső sávval a telefonszámot és a nyitvatartást egy fölötte lévő keskeny sávba teszi. Helyes az a telefonszám?

A A menüsáv színe beállításnál választhat: Automatikus (a stílust követi), Fehér, Világosszürke, Sötét vagy Kiemelő szín. Más színt a csevegőben kérhet.

Színek és kontraszt

A Színek blokkban állíthatja be a fő színt (gombok, kiemelések), egy második színt a színátmenetekhez, valamint a hátteret (fehér, krém, hideg, szürke vagy a saját színe egy árnyalata, illetve egyéni választás). A Gombok színátmenettel beállítással minden fő gomb az egyik színből a másikba átmenő színezést kap.

Itt jön képbe a kontraszt: a szöveg és a háttér közötti világosságkülönbség. Ezt kontrasztaránnyal fejezzük ki, 1:1-től (nincs különbség) 21:1-ig (fekete a fehéren). Az akadálymentes webhelyekre vonatkozó nemzetközi irányelv, a W3C WCAG szabványa AA szinten legalább 4,5:1 arányt kér normál szövegnél és 3:1 arányt nagy szövegnél (nagyjából 18 pont, vagy félkövéren 14 pont). A gomboknak és más kezelőelemeknek legalább 3:1 arányt kell elérniük a környezetükhöz képest.

A szerkesztő ezt figyeli Ön helyett. Ha olyan színt választ, amelyen a szöveg rosszul olvasható, a szerkesztő módosítja, és jelzi, mi változott, például: „A szöveg színe ... lett ..., mert különben a szöveg nem olvasható jól rajta.” Ha pontosan a saját színeit szeretné megtartani, kapcsolja be a Pontosan ezek a színek maradjanak beállítást: a színei megmaradnak, a rajtuk lévő szöveg pedig magától olvasható színt kap. Az AI által saját formázással készített szekciókban is kijavítja a szerkesztő azokat a szövegszíneket, amelyek 4,5:1 (nagy szövegnél 3:1) alá esnek.

Amit a szerkesztő nem értékel: a fotóban vagy a logóban lévő szöveget, illetve a zsúfolt fotó fölé írt címet. Ezeket nézze meg saját maga, telefonon. Ha bizonytalan egy színpárban, írja be a két színkódot egy kontrasztellenőrzőbe (lásd További olvasnivaló).

Buktató: a nyomdától vagy a furgonfeliratról származó arculati szín (például az élénksárga) ritkán alkalmas szövegszínnek. Használja kiemelésként vagy színfoltként, a szöveg pedig maradjon sötét.

Betűk és saját betűtípus

A Betűtípusok blokkban választhat egy betűtípust a Címsorok és egyet a Folyó szöveg számára. A betűtípusok fájlként a saját webhelyén vannak; nem jön létre kapcsolat más szolgáltató betűtípus-szolgáltatásával. A Betűk és méretek blokkban csúszkákkal állíthatja be az egész webhelyre: a szöveg és a címsorok sor- és betűközét, a soronkénti karakterszámot, a tartalom szélességét és a címsorok vastagságát. A A stílus szerint visszaállít egy csúszkát. A Szövegméret beállításnál a Normál, Nagy vagy Extra nagy közül választhat; ezt a csevegőben is kérheti („legyenek nagyobbak a betűk”).

Saját betűtípus is használható: saját betűtípust a Betűtípusok blokkban vagy a csevegőben a gemkapocs ikonnal tölthet fel, .woff2, .woff, .ttf vagy .otf formátumban, fájlonként legfeljebb 2 MB méretben (több vastagság is feltölthető). Ezután kiválasztja, mire használja: címsorokra, szövegre vagy mindkettőre. Ez semmibe sem kerül. Az Adobe Fontshoz hasonló szolgáltatásokból származó betűtípus nem használható.

Fontos: csak olyan betűtípust töltsön fel, amelyhez webes licence van. A betűtípus licenccel rendelkező szoftver. A számítógépen történő használatra (nyomdai anyagok készítésére) szóló licenc korántsem mindig engedi meg, hogy a fájlt egy webhelyre tegye, ahonnan minden látogató letölti. Nézze meg a licencfeltételekben, hogy engedélyezett-e a webes használat. A SIL Open Font License alá tartozó betűtípusok beágyazhatók és terjeszthetők.

Sötét mód és mozgás

A Sötét mód beállításnál a Ki (mindig világos), a Mindig sötét vagy az Az eszköz szerint lehetőséget választhatja. Az utóbbinál az a látogató, akinek a telefonja vagy számítógépe sötét módra van állítva, a saját színei sötét változatát látja. A sötét módú hátteret, szöveget és fő színt saját maga is megválaszthatja. Olyan gomb nincs, amellyel a látogatók maguk válthatnának. Az előnézet az Ön eszközét követi: állítsa a telefonját vagy számítógépét sötét módra, hogy lássa a sötét változatot, és ekkor ellenőrizze a logóját is.

A Mozgás beállításnál a Be, a Visszafogott vagy a Ki lehetőséget választhatja az egész webhelyre, és szükség esetén oldalanként kivételt is megadhat. Itt választhatja ki az Egérhatás számítógépen beállítást is (nincs, mágnes vagy fényfolt). Az előnézetben minden mozdulatlan; az Animáció lejátszása gombbal egyszer megnézheti. Ha egy látogató az eszközén kevesebb mozgást állított be, minden mozdulatlan marad. A túl sok mozgás elvonja a figyelmet; sok szöveget tartalmazó oldalon gyakran jobb a Visszafogott vagy a Ki.

A szerkesztőben: így csinálja

1. Nyissa meg az Arculat panelt, azon belül a Név és logó blokkot. Kattintson a Saját logó feltöltése vagy a Logótervezés AI-val lehetőségre.
2. A Favicon beállításnál válassza a logóját vagy az automatikus kezdőbetűt.
3. Próbáljon ki két-három stílust a Stílus blokkban; nézze meg Mobil nézetben is.
4. A Menüsáv blokkban válasszon kialakítást és színt.
5. A Színek blokkban állítsa be a fő színt. Olvassa el a szerkesztő üzeneteit.
6. A Sötét mód és a Mozgás beállításnál ellenőrizze, mit szeretne.
7. Kattintson a Mentés gombra, és tegye közzé újra a webhelyét.

Összefoglalás

• Az Arculat panel ingyenes; a Mentés új változatot hoz létre.
• Az AI-logó három javaslatért 1 szerkesztésbe kerül; a faviconot a szerkesztő maga készíti el, vagy Ön tölt fel egyet.
• Tizenkét stílus és tizenöt menükialakítás; a menü tartalma ugyanaz marad.
• A WCAG legalább 4,5:1 kontrasztot kér normál szövegnél és 3:1-et nagy szövegnél; a szerkesztő ezt figyeli, kivéve a fotókban és a logóban.
• Saját betűtípust csak webes licenccel használjon; a sötét módot és a mozgást a látogatói igényeihez igazítsa.

Kvíz

Feladat

D4.2. feladat: Az arculata és a kontraszt. Állítsa be az arculatát, és mérje meg a legfontosabb színpárjai kontrasztját.

Ellenőrzőlista:

• [ ] a logó feltöltve vagy kiválasztva az AI-javaslatok közül;
• [ ] a favicon beállítva, és megnézve az élő webhely böngészőlapján;
• [ ] a stílus és a menükialakítás kiválasztva, Mobil nézetben is megnézve;
• [ ] a fő szín beállítva, a szerkesztő üzenetei elolvasva;
• [ ] a szövegszín és a háttér, valamint a gombszöveg és a gombszín kontrasztja kontrasztellenőrzővel megmérve;
• [ ] a sötét mód és a mozgás tudatosan kiválasztva;
• [ ] az arculat elmentve, a webhely újra közzétéve.

Kérdések:

1. Milyen kontrasztarányt mért a háttéren lévő szövegnél és a gombon lévő gombszövegnél, és elérik-e a 4,5:1 arányt?
2. A webhelye mely részén van szöveg egy fotó fölött, és jól olvasható-e telefonon?
3. Használ saját betűtípust? A licenc melyik része mondja ki, hogy a webes használat engedélyezett?

A „kész” után egy mintaválaszt lát: a Schildersbedrijf Example a fehér alapon lévő sötétszürkénél 14,5:1, a zöld gombon lévő fehér szövegnél 5,1:1 arányt mért, mindkettő 4,5:1 fölött van; a hero-fotó fölötti cím rosszul volt olvasható, ezért a cég sötétebb fotót választott; saját betűtípust nem használ, így licencre sincs szüksége.

További olvasnivaló

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