Immagine coordinata: logo, colori, caratteri e menu

Modulo 4: Pagine, aspetto e funzioni · Tempo di lettura: 8 minuti

Obiettivo della lezione: Dopo questa lezione saprà impostare nel pannello Stile il nome e il logo, la favicon, lo stile, il design del menu, i colori, i caratteri, la modalità scura e il movimento, e saprà verificare che il testo del Suo sito sia ben leggibile.

Concetti chiave: immagine coordinata, stile (look), logo, pittogramma, logotipo, favicon, barra del menu, colore principale, contrasto, rapporto di contrasto, WCAG, licenza web, modalità scura, movimento

Perché l'immagine coordinata conta più dell'estetica

Un'immagine coordinata è la combinazione fissa di logo, colori e caratteri da cui le persone La riconoscono. Su un sito web favorisce il riconoscimento (gli stessi colori sul furgone, sul preventivo e sul sito) e deve restare leggibile: un testo grigio chiaro su bianco appare elegante, ma molti visitatori lo leggono a fatica, soprattutto su un telefono al sole.

Tutto ciò che si trova nel pannello Stile è gratuito e subito visibile nell'anteprima. Solo quando fa clic su Salva diventa una nuova versione (lezione 3.5). Se vuole tornare indietro, fa clic su Ripristina oppure ripristina una versione precedente.

Il pannello contiene questi blocchi: Stile, Colori, Caratteri, Barra del menu, Nome e logo, Immagini, Forma e spazi, Font e dimensioni, Modalità scura e Movimento.

Nome, logo e favicon

In Nome e logo trova il nome del Suo sito, così come compare nell'intestazione e nel piè di pagina. Sotto si trova il logo:

• Carica il proprio logo: PNG con sfondo trasparente, SVG, JPG o WebP, fino a 2 MB. Un logo orizzontale funziona meglio in una barra del menu.
• Se non ha un logo, il builder ha creato un logotipo: il Suo nome nel Suo carattere e nei Suoi colori. Si adatta automaticamente quando li modifica.
• Fai progettare un logo all'IA: descrive brevemente la Sua attività e l'atmosfera ("impresa di tinteggiatura in un paese, artigianale e affidabile") e fa clic su Progetta tre loghi. Riceve tre pittogrammi (un simbolo senza testo) nei Suoi colori, con accanto il Suo nome nel Suo carattere. In tutto costa 1 elaborazione. Ne sceglie uno con Usa, oppure scrive che cosa si può migliorare ("il primo, ma più arrotondato") e fa clic su Progetta tre nuovi loghi: si tratta di un altro giro da 1 elaborazione.
• Visualizzazione nel menu e nel piè di pagina: Logo e nome, Solo logo o Solo nome, e la Dimensione (Piccolo, Normale, Grande).

Il builder La avvisa se un logo ha linee sottili o poco contrasto con la barra del menu: in piccolo, nella barra, rischierebbe di non vedersi.

Controlli personalmente un logo creato dall'IA: non somiglia troppo al logo di un'altra azienda?

La favicon è l'iconcina nella scheda del browser e nei segnalibri. Scelga Automatica: iniziale nei suoi colori, Il suo logo oppure File personale (quadrato, PNG, SVG o ICO, fino a 512 KB).

Stile e barra del menu

Uno stile (nel builder anche look) stabilisce con un solo clic caratteri, forme, pulsanti, schede, menu e decorazioni. Ce ne sono dodici, come Fresco, Caldo, Professionale, Natura, Atelier e Notte. I Suoi colori restano invariati quando cambia stile; se desidera anche i colori dello stile, faccia clic su Anche i colori di questo stile. Lo stile Notte è sempre scuro.

In Barra del menu sceglie la forma della barra in cima a ogni pagina, tra quindici design: a tutta larghezza, centrato, diviso, su due righe, barra colorata, con contorno, a pillola, con barra superiore, trasparente, minimale, fluttuante, a rubriche, a segmenti, a schermo intero e menu laterale. Il contenuto del menu (lezione 4.1) rimane lo stesso. Alcuni punti di attenzione tratti dalle spiegazioni del builder stesso:

• Trasparente è bello solo se ogni pagina ha una hero scura o una hero con foto.
• Minimale mostra solo il Suo nome e un pulsante; i link alle pagine si trovano allora nel piè di pagina.
• Con barra superiore mette telefono e orari di apertura in una barra sottile sopra il menu. Quel numero di telefono è corretto?

In Colore della barra del menu sceglie Automatico (segue lo stile), Bianco, Grigio chiaro, Scuro o Colore di accento. Un altro colore lo può chiedere nella chat.

Colori e contrasto

In Colori imposta il colore principale (pulsanti, accenti), un secondo colore per le sfumature e lo sfondo (bianco, crema, freddo, grigio o una tonalità del Suo colore, oppure a scelta). Con Pulsanti con sfumatura di colore tutti i pulsanti principali ricevono una sfumatura da un colore all'altro.

Qui entra in gioco il contrasto: la differenza di luminosità tra testo e sfondo. Lo esprimiamo come rapporto di contrasto, da 1:1 (nessuna differenza) a 21:1 (nero su bianco). La linea guida internazionale per siti web accessibili, le WCAG del W3C, richiede al livello AA almeno 4,5:1 per il testo normale e 3:1 per il testo grande (circa 18 punti, o 14 punti in grassetto). Pulsanti e altri elementi di comando devono raggiungere almeno 3:1 rispetto a ciò che li circonda.

Il builder vigila su questo al posto Suo. Se sceglie un colore su cui il testo non si legge bene, lo corregge e La informa di che cosa è cambiato, ad esempio: "Il colore del testo ... è diventato ..., perché altrimenti il testo non si legge bene." Se vuole mantenere esattamente i Suoi colori, attivi Mantieni esattamente questi colori: i Suoi colori restano e il testo sopra di essi riceve automaticamente un colore leggibile. Anche nelle sezioni che l'IA crea con una formattazione propria, il builder corregge i colori del testo che scendono sotto 4,5:1 (testo grande 3:1).

Che cosa il builder non valuta: il testo dentro una foto o nel Suo logo, e un titolo sopra una foto molto movimentata. Questi aspetti li controlli Lei, su un telefono. Se ha dubbi su una coppia di colori, inserisca i due codici colore in un controllo del contrasto (vedere Per approfondire).

Attenzione: un colore aziendale scelto per la tipografia o per il furgone (ad esempio un giallo acceso) raramente è adatto come colore del testo. Lo usi come accento o come superficie e mantenga il testo scuro.

Caratteri e carattere personale

In Caratteri sceglie un carattere per i Titoli e uno per il Testo corrente. I caratteri sono salvati come file sul Suo sito; non viene stabilita alcuna connessione con un servizio di caratteri di terzi. In Font e dimensioni imposta con dei cursori per tutto il sito: interlinea e spaziatura tra le lettere di testo e titoli, caratteri per riga, larghezza del contenuto e spessore dei titoli. Come lo stile riporta un cursore al valore iniziale. In Dimensione del testo sceglie Normale, Grande o Molto grande; può farlo anche nella chat ("ingrandisci il testo").

È possibile anche un carattere personale: lo carichi in Caratteri o con la graffetta nella chat, come .woff2, .woff, .ttf o .otf, fino a 2 MB per file (sono ammessi più spessori). Poi sceglie per che cosa usarlo: titoli, testo o entrambi. Non costa nulla. Un carattere di un servizio come Adobe Fonts non si può usare.

Importante: carichi solo un carattere per cui possiede la licenza web. Un carattere tipografico è un software con una licenza. Una licenza per l'uso sul Suo computer (per realizzare materiale stampato) non sempre consente di pubblicare il file su un sito web, dove ogni visitatore lo scarica. Verifichi nelle condizioni di licenza se l'uso web è consentito. I caratteri con la SIL Open Font License possono invece essere incorporati e distribuiti.

Modalità scura e movimento

In Modalità scura sceglie Disattivata (sempre chiara), Sempre scura o Come il dispositivo. Con quest'ultima opzione, un visitatore con il telefono o il computer impostato su scuro vede una versione scura dei Suoi colori. Lo sfondo, il testo e il colore principale in modalità scura li può scegliere Lei. Non esiste un pulsante con cui i visitatori possano cambiare modalità da soli. L'anteprima segue il Suo dispositivo: imposti il Suo telefono o computer su scuro per vedere la versione scura, e controlli anche il Suo logo.

In Movimento sceglie Attivo, Tranquillo o Disattivato per tutto il sito e, se necessario, un'eccezione per singola pagina. Qui sceglie anche l'Effetto del mouse su computer (nessuno, magnete o macchia di luce). Nell'anteprima tutto è fermo; con Riproduci animazione vede il movimento una volta. Se un visitatore ha impostato sul proprio dispositivo una riduzione del movimento, tutto resta fermo. Troppo movimento distrae; su una pagina con molto testo spesso è meglio Tranquillo o Disattivato.

Nel builder: come procedere

1. Apra Stile, blocco Nome e logo. Faccia clic su Carica il proprio logo oppure su Fai progettare un logo all'IA.
2. In Favicon scelga il Suo logo o l'iniziale automatica.
3. Provi due o tre stili in Stile; guardi anche su Mobile.
4. In Barra del menu scelga un design e un colore.
5. In Colori imposti il Suo colore principale. Legga i messaggi del builder.
6. In Modalità scura e Movimento verifichi ciò che desidera.
7. Faccia clic su Salva e rimetta online il Suo sito.

Riepilogo

• Il pannello Stile è gratuito; Salva crea una nuova versione.
• Un logo creato dall'IA costa 1 elaborazione per tre proposte; la favicon la crea il builder oppure ne carica una Lei.
• Dodici stili e quindici design del menu; il contenuto del menu resta invariato.
• Le WCAG richiedono almeno 4,5:1 di contrasto per il testo normale e 3:1 per il testo grande; il builder lo controlla, tranne nelle foto e nel Suo logo.
• Un carattere personale solo con licenza web; modalità scura e movimento li imposta in base alle esigenze dei Suoi visitatori.

Quiz

Esercizio

Esercizio D4.2: La Sua immagine coordinata e il contrasto. Imposti la Sua immagine coordinata e misuri il contrasto delle Sue coppie di colori più importanti.

Lista di controllo:

• [ ] logo caricato o scelto tra le proposte dell'IA;
• [ ] favicon impostata e verificata nella scheda del browser del Suo sito online;
• [ ] stile e design del menu scelti, controllati su Mobile;
• [ ] colore principale impostato e messaggi del builder letti;
• [ ] contrasto del colore del testo sullo sfondo e del testo dei pulsanti sul colore del pulsante misurato con un controllo del contrasto;
• [ ] modalità scura e movimento scelti consapevolmente;
• [ ] immagine coordinata salvata e sito rimesso online.

Domande:

1. Quali rapporti di contrasto ha misurato per il testo sullo sfondo e per il testo del pulsante sul pulsante, e raggiungono 4,5:1?
2. In quale punto del Suo sito c'è un testo sopra una foto, ed è ben leggibile su un telefono?
3. Usa un carattere personale? In quale punto della licenza è scritto che l'uso web è consentito?

Dopo "fatto" vedrà una risposta di esempio: Schildersbedrijf Example ha misurato grigio scuro su bianco 14,5:1 e testo bianco sul pulsante verde 5,1:1, entrambi sopra 4,5:1; il titolo sopra la foto della hero si leggeva male, quindi ha scelto una foto più scura; nessun carattere personale, quindi nessuna licenza necessaria.

Per approfondire

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