Identitatea vizuală: logo, culori, fonturi și meniu

Modulul 4: Pagini, aspect și funcții · Timp de citire: 8 minute

Obiectivul lecției: După această lecție veți putea configura în panoul Identitate vizuală numele și logoul, favicon-ul, stilul, designul meniului, culorile, fonturile, modul întunecat și mișcarea, și veți verifica dacă textul de pe site-ul dumneavoastră se citește ușor.

Concepte cheie: identitate vizuală, stil (look), logo, simbol grafic, logo text, favicon, bara de meniu, culoare principală, contrast, raport de contrast, WCAG, licență web, mod întunecat, mișcare

De ce identitatea vizuală înseamnă mai mult decât un aspect frumos

O identitate vizuală este combinația fixă de logo, culori și fonturi după care oamenii vă recunosc. Pe un site web, ea asigură recunoașterea (aceleași culori pe dubă, pe ofertă și pe site) și trebuie să rămână lizibilă: textul gri deschis pe alb arată liniștit, dar mulți vizitatori îl citesc greu, mai ales pe un telefon în soare.

Tot ce se află în panoul Identitate vizuală este gratuit și vizibil imediat în previzualizare. Abia când dați clic pe Salvați devine o versiune nouă (lecția 3.5). Dacă vreți să reveniți, dați clic pe Anulați modificările sau restaurați o versiune mai veche.

Panoul are aceste blocuri: Stil, Culori, Fonturi, Bara de meniu, Nume și logo, Imagini, Formă și spațiere, Fonturi și dimensiuni, Mod întunecat și Mișcare.

Nume, logo și favicon

În Nume și logo se află numele site-ului dumneavoastră, așa cum apare în antet și în subsol. Dedesubt se află logoul:

• Încărcați propriul logo: PNG cu fundal transparent, SVG, JPG sau WebP, de până la 2 MB. Un logo orizontal funcționează cel mai bine într-o bară de meniu.
• Dacă nu aveți un logo, constructorul a creat un logo text: numele dumneavoastră în fontul și culorile dumneavoastră. Acesta se adaptează automat când le modificați.
• Lăsați AI-ul să creeze un logo: descrieți pe scurt firma și atmosfera dorită ("firmă de zugrăveli într-un sat, meșteșugărească și de încredere") și dați clic pe Creați trei logouri. Primiți trei simboluri grafice (un semn fără text) în culorile dumneavoastră, cu numele alături, în fontul dumneavoastră. Împreună, acestea costă 1 editare. Alegeți unul cu Folosiți sau scrieți ce s-ar putea îmbunătăți ("primul, dar mai rotunjit") și dați clic pe Creați trei logouri noi; aceasta este o nouă rundă de 1 editare.
• Afișare în meniu și subsol: Logo și nume, Doar logo sau Doar nume, plus Dimensiune (Mic, Normal, Mare).

Constructorul vă avertizează dacă un logo are linii subțiri sau un contrast slab față de bara de meniu: la dimensiune mică, în bară, s-ar putea să nu se mai vadă.

Verificați personal un logo creat de AI: nu seamănă prea mult cu logoul unei alte firme?

Favicon-ul este pictograma mică din fila browserului și din marcaje. Alegeți Automat: inițiala în culorile dumneavoastră, Logoul dumneavoastră sau Fișier propriu (pătrat, PNG, SVG sau ICO, de până la 512 KB).

Stil și bara de meniu

Un stil (în constructor numit și look) stabilește dintr-un singur clic fonturile, formele, butoanele, cardurile, meniul și decorațiunile. Există douăsprezece, cum ar fi Proaspăt, Cald, Profesional, Natură, Atelier și Noapte. Culorile dumneavoastră rămân neschimbate când schimbați stilul; dacă doriți și culorile stilului, dați clic pe Și culorile acestui stil. Stilul Noapte este mereu întunecat.

La Bara de meniu alegeți forma barei din partea de sus a fiecărei pagini, din cincisprezece designuri: lățime completă, centrat, divizat, pe două rânduri, bară colorată, cu contur, pastilă, cu bară de sus, transparent, minimal, plutitor, rubrici, segment, ecran complet și meniu lateral. Conținutul meniului (lecția 4.1) rămâne același. Câteva aspecte de reținut din explicațiile din constructor:

• Transparent arată bine doar dacă fiecare pagină are o secțiune hero întunecată sau o secțiune hero cu fotografie.
• Minimal afișează doar numele dumneavoastră și un singur buton; linkurile către pagini apar atunci în subsol.
• Cu bară de sus afișează telefonul și programul într-o bară îngustă deasupra. Este corect acel număr de telefon?

La Culoarea barei de meniu alegeți Automat (urmează stilul), Alb, Gri deschis, Închis sau Culoare de accent. O altă culoare o puteți cere în chat.

Culori și contrast

La Culori setați culoarea principală (butoane, accente), o a doua culoare pentru gradienți și fundalul (alb, crem, rece, gri sau o nuanță a culorii dumneavoastră, ori la alegere). Cu Butoane cu gradient de culoare, toate butoanele principale primesc o trecere de la o culoare la cealaltă.

Aici intervine contrastul: diferența de luminozitate dintre text și fundal. O exprimăm ca raport de contrast, de la 1:1 (nicio diferență) la 21:1 (negru pe alb). Ghidul internațional pentru site-uri accesibile, WCAG de la W3C, cere la nivelul AA cel puțin 4,5:1 pentru textul obișnuit și 3:1 pentru textul mare (aproximativ 18 puncte sau 14 puncte îngroșat). Butoanele și celelalte elemente de control trebuie să atingă cel puțin 3:1 față de ceea ce le înconjoară.

Constructorul supraveghează acest lucru pentru dumneavoastră. Dacă alegeți o culoare pe care textul nu se citește bine, o ajustează și vă spune ce s-a schimbat, de exemplu: "Culoarea textului ... a devenit ..., pentru că altfel textul nu se citește bine pe ea." Dacă doriți să păstrați exact culorile dumneavoastră, activați Păstrați exact aceste culori: culorile rămân, iar textul de pe ele primește automat o culoare lizibilă. Și în secțiunile pe care AI-ul le creează cu formatare proprie, constructorul corectează culorile textului care scad sub 4,5:1 (3:1 pentru textul mare).

Ce nu evaluează constructorul: textul dintr-o fotografie sau din logoul dumneavoastră și un titlu peste o fotografie aglomerată. Verificați-le personal, pe un telefon. Dacă aveți îndoieli cu privire la o pereche de culori, introduceți cele două coduri de culoare într-un verificator de contrast (vedeți Resurse suplimentare).

Capcană: o culoare de identitate vizuală de la tipografie sau de pe dubă (de exemplu galben aprins) este rareori potrivită ca culoare de text. Folosiți-o ca accent sau ca suprafață și păstrați textul închis la culoare.

Fonturi și font propriu

La Fonturi alegeți un font pentru Titluri și unul pentru Textul de bază. Fonturile se află ca fișiere pe propriul dumneavoastră site; nu se face nicio conexiune către un serviciu de fonturi al altcuiva. La Fonturi și dimensiuni setați cu glisoare pentru întregul site: spațierea dintre rânduri și dintre litere pentru text și titluri, caracterele pe rând, lățimea conținutului și grosimea titlurilor. Conform stilului readuce un glisor la valoarea inițială. La Dimensiunea textului alegeți Normal, Mare sau Foarte mare; puteți face asta și în chat ("măriți literele").

Puteți folosi și un font propriu: încărcați-l la Fonturi sau cu agrafa din chat, ca .woff2, .woff, .ttf sau .otf, de până la 2 MB per fișier (sunt permise mai multe grosimi). Apoi alegeți pentru ce îl folosiți: titluri, text sau ambele. Nu costă nimic. Un font de la un serviciu precum Adobe Fonts nu se poate folosi.

Important: încărcați doar un font pentru care aveți licență web. Un font este un software cu licență. O licență de utilizare pe computerul dumneavoastră (pentru materiale tipărite) nu permite întotdeauna să puneți fișierul pe un site web, de unde fiecare vizitator îl descarcă. Verificați în condițiile licenței dacă utilizarea web este permisă. Fonturile sub SIL Open Font License pot fi încorporate și distribuite.

Mod întunecat și mișcare

La Mod întunecat alegeți Dezactivat (mereu luminos), Mereu întunecat sau Ca pe dispozitiv. Cu ultima opțiune, un vizitator care are telefonul sau computerul setat pe întunecat vede o versiune întunecată a culorilor dumneavoastră. Fundalul, textul și culoarea principală în modul întunecat le puteți alege personal. Nu există un buton cu care vizitatorii să comute singuri. Previzualizarea urmează dispozitivul dumneavoastră: setați telefonul sau computerul pe întunecat pentru a vedea versiunea întunecată și verificați atunci și logoul.

La Mișcare alegeți Activată, Discretă sau Dezactivată pentru întregul site și, dacă este nevoie, o excepție pentru fiecare pagină. Tot aici alegeți și Efect de mouse pe computer (niciunul, magnet sau pată de lumină). În previzualizare totul stă nemișcat; cu Redați animația o vedeți o dată. Dacă un vizitator a setat pe dispozitivul său mai puțină mișcare, totul rămâne nemișcat. Prea multă mișcare distrage atenția; pe o pagină cu mult text, Discretă sau Dezactivată este adesea mai bine.

În constructor: cum procedați

1. Deschideți Identitate vizuală, blocul Nume și logo. Dați clic pe Încărcați propriul logo sau pe Lăsați AI-ul să creeze un logo.
2. La Favicon, alegeți logoul sau inițiala automată.
3. Încercați două sau trei stiluri la Stil; uitați-vă și pe Mobil.
4. La Bara de meniu, alegeți un design și o culoare.
5. La Culori, setați culoarea principală. Citiți mesajele constructorului.
6. Verificați la Mod întunecat și Mișcare ce doriți.
7. Dați clic pe Salvați și publicați din nou site-ul.

Rezumat

• Panoul Identitate vizuală este gratuit; Salvați creează o versiune nouă.
• Un logo creat de AI costă 1 editare pentru trei propuneri; favicon-ul îl creează constructorul sau îl încărcați dumneavoastră.
• Douăsprezece stiluri și cincisprezece designuri de meniu; conținutul meniului rămâne același.
• WCAG cere un contrast de cel puțin 4,5:1 pentru textul obișnuit și 3:1 pentru textul mare; constructorul supraveghează acest lucru, cu excepția fotografiilor și a logoului.
• Un font propriu doar cu licență web; modul întunecat și mișcarea le setați după nevoile vizitatorilor dumneavoastră.

Test

Exercițiu

Exercițiul D4.2: Identitatea vizuală și contrastul. Configurați identitatea vizuală și măsurați contrastul celor mai importante perechi de culori.

Checklist:

• [ ] logo încărcat sau ales dintre propunerile AI;
• [ ] favicon setat și văzut în fila browserului pe site-ul dumneavoastră publicat;
• [ ] stil și design de meniu alese, verificate pe Mobil;
• [ ] culoare principală setată și mesajele constructorului citite;
• [ ] contrastul culorii textului pe fundal și al textului butonului pe culoarea butonului măsurat cu un verificator de contrast;
• [ ] modul întunecat și mișcarea alese în mod conștient;
• [ ] identitatea vizuală salvată și site-ul publicat din nou.

Întrebări:

1. Ce rapoarte de contrast ați măsurat pentru textul pe fundal și pentru textul butonului pe buton, și ating ele 4,5:1?
2. În ce loc de pe site-ul dumneavoastră apare text peste o fotografie și se citește bine pe un telefon?
3. Folosiți un font propriu? Unde scrie în licență că utilizarea web este permisă?

După ce marcați "gata", vedeți un exemplu de răspuns: Schildersbedrijf Example a măsurat gri închis pe alb 14,5:1 și text alb pe butonul verde 5,1:1, ambele peste 4,5:1; titlul peste fotografia din secțiunea hero se citea greu, așa că a ales o fotografie mai întunecată; niciun font propriu, deci nu este nevoie de licență.

Resurse suplimentare

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