Marchio
Linee guida del marchio.
L’aspetto e il tono di LFW: il nome, il logo, il colore, la tipografia e le regole dietro ogni pagina.
Il nome e il logo.
Sempre LFW. Un indirizzo web da solo si scrive LFW.com. Dove serve l’entità giuridica, usi LFW.com LLC d/b/a LFW. Il logo è in Source Serif 4 Display, peso 600, l’unico punto in cui compaiono le grazie.
-
Chiaro Su sfondo scuro, come nel tema scuro SVG PNG
-
Quasi nero Su sfondo bianco o chiaro SVG PNG
-
Icona del profilo Bianco su Blu LFW, quadrata, per i profili social e le icone delle app. Regge il ritaglio circolare. SVG PNG
I file del logo sono trasparenti e ritagliati al limite, con le lettere convertite in tracciati; l’icona del profilo è un quadrato pieno. Lasci spazio attorno al marchio, ne mantenga le proporzioni, e non lo ricolori né lo deformi mai.
Colore.
Una palette chiara. Il Blu LFW apre e chiude ogni pagina, e segnala le azioni nel mezzo. Ogni abbinamento di testo rispetta il contrasto AA delle WCAG, in entrambi i temi.
- Blu LFW #1849B8 Il colore del marchio: l’intestazione, le sezioni di chiusura, i pulsanti principali, gli occhielli e gli stati attivi.
- Blu profondo #123A96 Il Blu LFW per gli sfondi scuri: l’intestazione e le sezioni di chiusura nel tema scuro, e gli stati al passaggio del mouse.
- Inchiostro #0A0A0A Titoli e testo corrente sulle pagine chiare; lo sfondo del tema scuro.
- Grigio 600 #555555 Testo secondario e descrizioni.
- Grigio 500 #666666 Etichette, didascalie e caratteri piccoli.
- Linea #EBEBEB Bordi delle schede e righe delle tabelle. È lo spazio, non le linee, a separare gli elementi.
- Superficie #FAFAFA Pannelli tenui, schede su sfondo bianco e piè di pagina.
- Bianco #FFFFFF La pagina. LFW.com è chiaro per impostazione predefinita.
- Verde #0E7D57 Solo per uno stato positivo: controlli superati, disponibilità, pubblicato.
Tipografia.
Public Sans per tutto ciò che si legge. Cinque livelli di titolo, da Display a Titoletto, poi il testo corrente e l’etichetta. Ogni titolo del sito ne usa uno. Spaziatura stretta alle dimensioni grandi, nessuna a quelle piccole. Niente sotto i 14px.
- La sua agenzia web di riferimento.
- Che cosa copre il canone.
- Il modulo di iscrizione va in loop su iPhone
- Piccole modifiche illimitate
- Orari dell’ufficio
- Apportiamo le modifiche che ci invia, teniamo aggiornato il suo sito e lo controlliamo ogni giorno.
- Dati di esempio per un’organizzazione fittizia.
Elementi di interfaccia.
Pulsanti a pillola, schede tenui e finestre di prodotto con un bordo sottile e un’ombra leggera.
Schermate reali del prodotto, disegnate a una dimensione leggibile e indicate come esempi.
Regole di impaginazione.
- Chiaro per impostazione predefinitaPagine bianche, con un tema scuro per chi lo sceglie.
- Il blu è un accentoPulsanti, link e stati attivi. Mai una fascia a tutta larghezza.
- Mostrare il servizioLe immagini del Portale, di Monitor e del rapporto spiegano il lavoro. Ogni esempio è indicato.
- Pulito e facile da scorrereTitoli brevi, una riga sotto ciascuno, poi la prova.
- Il testo sotto il suo titoloMai accanto. I pulsanti stanno sotto le parole che li giustificano.
- Spazio tra gli elementiSchede ed elementi sono separati dallo spazio, non da divisori.
- Schede, non tabelleOpzioni, tempi e confronti sono schede. Tabelle solo nelle immagini di prodotto.
- Le grazie solo per il logoOgni titolo e intestazione è in Public Sans.
Tono.
Sicuro, preciso e semplice. Parlare come le persone che fanno il lavoro.
- Posizionamento
- Operazioni web mission-critical.
- Il rapporto
- La sua agenzia web di riferimento.
- L’atteggiamento
- Nessun carico è troppo pesante.
- Essere diretti su che cosa facciamo, quanto costa e che cosa succede dopo.
- Fatti semplici, con le parole del cliente. Niente slogan che lasciano il lettore a chiedersi che cosa vogliano dire.
- Prendere sul serio le richieste ambiziose, ed essere onesti sul perimetro, sui compromessi e sugli strumenti che usiamo, IA compresa.
- Promettere ciò che i clienti otterranno, come i tempi di risposta e la piena proprietà del loro sito. Non affermare nulla sulle dimensioni del team né su chi fa il lavoro, che cambiano man mano che LFW cresce.
- Indicare l’orario lavorativo ovunque compaia un tempo di risposta.
- Paragrafi brevi. Quando il contenuto è un elenco di passaggi, funzionalità o requisiti, farne un vero elenco.
- Niente lineette lunghe. In inglese, l’ortografia americana. Il dominio si scrive LFW.com, e in minuscolo solo quando è seguito da un percorso.
- WordPress solo come descrittore, come in «siti web su WordPress».
- Un po’ di umorismo quando suona personale, mai nei testi legali, di sicurezza o sugli appalti pubblici.