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.

  • Logo LFW, chiaro Chiaro Su sfondo scuro, come nel tema scuro SVG PNG
  • Logo LFW, quasi nero Quasi nero Su sfondo bianco o chiaro SVG PNG
  • Icona del profilo LFW, bianco su Blu LFW 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.

  • DisplayPublic Sans 500 · 72px · 1.02 · −0.045emLa sua agenzia web di riferimento.
  • TitoloPublic Sans 500 · 48px · 1.08 · −0.035emChe cosa copre il canone.
  • SottotitoloPublic Sans 500 · 28px · 1.15 · −0.025emIl modulo di iscrizione va in loop su iPhone
  • IntestazionePublic Sans 600 · 20px · 1.25 · −0.02emPiccole modifiche illimitate
  • TitolettoPublic Sans 600 · 16px · 1.35 · −0.01emOrari dell’ufficio
  • Testo correntePublic Sans 400 · 17px · 1.65Apportiamo le modifiche che ci invia, teniamo aggiornato il suo sito e lo controlliamo ogni giorno.
  • EtichettaPublic Sans 500 · 14pxDati 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.

Richiedi un preventivo Prenota una chiamata Link di testo Etichetta Stato
SchedaUna superficie tenue, angoli di 12px, 28px di margine interno, con un bordo su sfondo bianco.
Finestra di prodotto

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.