Un sistema, ogni frame.

Regole

Otto regole che non si rompono.

1. 01Solo scuroSito, social e promo: un tema solo, scuro, senza selettore. Si rispettano il contrasto alto e i colori forzati del sistema.
2. 02Un solo accentoIl blu oppure il giallo, mai tutti e due in primo piano.
3. 03Colore nelle parti visiveMai nel testo piccolo. Testo e grafica non condividono il colore.
4. 04Il più grande è il più contrastatoTitolo bianco, secondario grigio, etichette mono più piccole.
5. 05L’avatar firma, la foto presentaIl volto del marchio è il logo-avatar. La foto vera compare solo nel Chi sono, dove Fabio si presenta.
6. 06Accessibile per regolaContrasto 4,5:1, aree da 44 px, movimento ridotto rispettato.
7. 07Centrato sui glifiIl testo in una tessera si centra sul disegno delle lettere.
8. 08Leggero e vettoriale primaSVG per logo, icone e grafiche. Raster solo per foto e copertine, font WOFF2, niente script di terze parti.

Colore

Neutri freddi, un blu, colori solo per le figure.

Solo per le parti visive · mai per il testo piccolo

Contrasti misurati

Soglie: 4,5:1 per il testo, 3:1 per i titoli grandi e per i bordi che servono a capire. Calcolati con la formula WCAG 2.1 sui valori del tema.

Tipografia

Larga per gridare, stretta per spiegare.

Scala

Il resto del testo usa le sei misure fisse, con il loro token. Restano fuori, dichiarati: il nome in barra (18 px, parte del logo), le misure nei disegni (10 px), i campioni dentro le pagine, il blocco del libro (con le sue misure) e i giochi nascosti. Nessun testo dell’interfaccia sotto i 12 px.

Griglia e spazi

Una griglia, multipli di 4.

Griglia

1. Un contenitore, un bordo.Al massimo 1120 px, con 16-56 px ai lati. La barra va da bordo a bordo, contenuto e footer partono dallo stesso margine.
2. Tre punti di rottura.560, 760 e 1100 px. Un valore diverso vale per un solo componente e sta accanto a lui.
3. Lo spazio si conta.Fra le schede di una griglia 14-20 px. Una sezione respira almeno 48 px sopra e sotto.

Spaziature · multipli di 4

Forme e profondità

Angoli vivi, un’ombra sola.

Raggi

Ombre · una sola, dura e blu

Livelli

Movimento

Un gesto, una scena.

1. Veloce all’inizio, morbida alla fine.Una curva sola per tutto: parte svelta e si posa piano, come una mano che appoggia una scheda.
2. Tre tempi.0,2 s per bordi e colori, 0,35 s per le dissolvenze, 0,5 s per i disegni. Con il movimento ridotto si fermano.
3. Si muove solo il disegno.Al passaggio, al focus e, su touch, a metà schermo. Le altre schede si attenuano a 0,4.

Logo

La faccia con i ricci.

Regole

Scarica il logo

Il logo è il mio marchio: usalo per parlare di me o del sito, non per un progetto tuo.

Componenti

Squadrati nell’interfaccia, tondi nelle figure.

Stati del bottone

Bottone: anatomia e varianti

<button class="btn" type="button">Leggi la storia</button>
<a class="btn ghost" href="#lavoro">Salta la storia</a>

Campo: stati

Alto almeno 44 px come il bottone accanto; sul telefono tutti e due a tutta larghezza. L’etichetta è collegata al campo con for e id. L’errore mette aria-invalid="true" sul campo e la frase in un paragrafo con role="status", così lo screen reader la legge.

<form class="ff-form" novalidate>
  <label for="email">La tua email</label>
  <input id="email" name="email" type="email" autocomplete="email" required aria-describedby="nota">
  <button type="submit">Iscriviti</button>
  <p id="nota" role="status"></p>
</form>

Link

Focus: contorno 2 px --link a 2 px, come ogni altro elemento.

Quando usare cosa

Icone

L’SVG ha sempre aria-hidden="true". Nessun set esterno: poche icone disegnate qui.

<button type="button" aria-label="Chiudi">×</button>
<svg viewBox="0 0 24 24" width="24" height="24" fill="none"
     stroke="currentColor" stroke-width="1.5" aria-hidden="true">…</svg>

Barra e footer

import componenti as C
C.bar('it', crumbs=[('Tools', '/tools/'), ('Mockup 3D', None)])
C.footer('it')

Tema

Strumenti

Illustrazioni

Un’idea, un protagonista blu.

Sì e no

1. Oggetti del mestiere, non icone.Una selezione con le maniglie dice design. Una lampadina dice qualunque cosa.
2. Persone: il logo o un cursore.Il logo-avatar su tessera blu e i cursori grigi. Mai omini colorati.
3. Un protagonista, a tinta piatta.Un solo blu, il resto grigio. Niente arcobaleni, sfumature e ombre morbide.

Le otto regole

1. 01Sempre sul palco.Il disegno sta in un riquadro scuro con una griglia di puntini ogni 12 px. In alto a sinistra un numero mono, quando i disegni sono in serie.
2. 02Un’idea, pochi oggetti grandi.Il disegno racconta una cosa sola con pochi oggetti che riempiono il riquadro. Niente scene, niente decorazioni di contorno.
3. 03Un protagonista blu, il resto grigio.Il blu va a un solo oggetto, quello che fa il gesto. Tutto il resto sta nei grigi del tema scuro. Un colore delle parti visive può prendere il posto del blu, mai affiancarlo.
4. 04Oggetti del mestiere, non icone.Si disegna con quello che vede chi progetta: glifi veri, selezioni tratteggiate con le maniglie, guide, curve di Bézier, cursori, tessere, misure. Niente icone di repertorio come lampadine, ingranaggi, razzi o fumetti.
5. 05Le persone sono il logo o un cursore.Fabio è il logo-avatar bianco su tessera blu, oppure un cursore con il nome. Gli altri sono cursori grigi. Mai omini o figure generiche.
6. 06Forme piene, angoli vivi.Rettangoli e cerchi a tinta piatta, senza sfumature né ombre. Il tratto serve solo a guide, tratteggi e curve. Il raggio resta a tessere e chip.
7. 07Dentro, solo misure e nomi.Etichette mono maiuscole in grigio, come 44 PX, ×10 o 07 / 40, oppure un glifo grande in Anybody. Mai frasi: il disegno vale in ogni lingua.
8. 08Il gesto racconta l’idea.Al passaggio il protagonista fa il gesto dell’idea, cresce, cade al suo posto, annuisce o preme, e il resto si attenua o si sposta. Un solo movimento in loop.

Tono di voce

Corto, concreto, in prima persona.

1. 01Parlo io, a te.Prima persona singolare, il lettore si chiama “tu”. Niente “noi” da azienda, niente “l’utente”.

   «Scorri e ti racconto come ci sono arrivato.»

2. 02Frasi corte, un’idea per frase.I titoli sono di poche parole e finiscono con il punto.

   «Tabelle.» «Il metodo, dal vivo.»

3. 03Due tempi.La prima frase apre, la seconda gira.

   «Gli strumenti cambiano. Il mestiere no.»

4. 04Cose vere, non aggettivi.Nomi, numeri, oggetti: spacer.gif, dieci bottoni, trenta volte al secondo. Se una frase regge senza un aggettivo, l’aggettivo si toglie.

   «L’AI genera dieci bottoni in pochi secondi. Quanti reggono davvero?»

5. 05Chi prova, non chi predica.Racconto cosa ho provato e cosa ha retto, anche quando non ha funzionato. L’AI genera, chi progetta decide. Niente promesse, niente entusiasmo di maniera.

   «L’AI genera e tu decidi.»

6. 06Una battuta, poi si torna seri.Autoironia sul mestiere e sul passato, mai sul lettore. Al massimo una per blocco.

   «Il cliente vuole sempre il logo più grande.»

7. 07Chiaro anche quando è noioso.Privacy, conferme ed errori dicono cosa succede e cosa fa il lettore, senza linguaggio legale.

   «Finché non confermi non ricevi nulla.»

8. 08Il bottone dice cosa succede.Un verbo, al massimo due parole, rivolto al lettore. Mai “Clicca qui” o “Invia”.

   Iscriviti · Scrivimi · Avvisami · Scarica PNG

Parole e punteggiatura

• Italiano prima. L’inglese resta dove è il nome della cosa: Lab, Tools, mockup, workshop.
• Il mestiere prima degli strumenti: Figma e l’AI sono strumenti, non un’identità.
• Punto e due punti. Niente punti esclamativi, salvo le parodie d’epoca. Niente trattini lunghi: si spezza la frase.
• Numeri in cifre per misure e dati (4:5, 44 px), in lettere nel racconto (dieci anni, tre edizioni).

Grafiche social

4:5, figura in alto, testo a sinistra.

learnfigmanow.com

Scarica il kit vuoto

Mettere in piedi questo sistema mi ha preso parecchio lavoro. Il kit è la parte che vale per chiunque, senza il mio marchio: le regole di base già scritte, i posti per le tue scelte e token neutri che funzionano subito. Lo prendi gratis e parti da qui, non da zero.

A cosa ti serve

Cosa contiene

Licenza CC BY 4.0: usalo e modificalo come vuoi, anche al lavoro e per i clienti, citando fabiostaiano.it. Vale per il kit: logo, illustrazioni e il resto del mio marchio restano miei. I font che uso sono gratuiti su Google Fonts con licenza OFL, ecco il testo per ognuno: Anybody · Instrument Sans · Martian Mono.