Crea il tuo sistema di progettazione, parte 3: Colori

In questo articolo, vedremo come impostare un sistema di colore nei CSS e quali sono le migliori pratiche per garantire che il sistema sia facile da usare e da gestire.

Questo articolo fa parte di una serie di sistemi di progettazione ispirata alla nostra libreria di componenti Web. La biblioteca si basa su un solido sistema di globi CSS. Quindi siamo noi a condividere le cose che abbiamo imparato impostando lo stile globale della nostra biblioteca!

Serie di articoli:
- Parte 1: tipografia
- Parte 2: griglia e layout
- Parte 3: Colori
- Parte 4: spaziatura
- Parte 5: icone
- Parte 6: pulsanti

Abbiamo lanciato Color Editor! Uno strumento di web design che genera tavolozze di colori e temi compatibili con CodyHouse Framework.

Variabili di colore 101

A differenza di altri globi CSS, la creazione di un sistema di colore è del 10% sulla codifica e del 90% sulla semantica. Mentre lavori sul tuo file _colors.scss, tieni a mente i seguenti obiettivi:

  1. Le variabili di colore devono essere facili da ricordare → Non vuoi controllare il file globale ogni volta che devi scegliere un colore.
  2. Il sistema deve essere facile da aggiornare → Aggiungerai, rimuoverai e rinominerai i colori. Assicurarsi che non sia complicato.
  3. Il sistema dovrebbe includere solo i colori essenziali → l'abbiamo sentito così tante volte ... eppure finiamo sempre con più colori del necessario! La vera chiave del successo di un sistema di progettazione è rimuovere tutto ciò che non è necessario (colori inclusi).

Colori semantici e dichiarativi

Quando si tratta di impostare le variabili di colore, ci sono due approcci principali: colori semantici e dichiarativi.

L'approccio semantico è simile a:

Mentre ecco un esempio di approccio dichiarativo:

Nessuno dei due ha torto. Scegliere quello che soddisfa le tue esigenze dipende da tanti fattori (ad es. Dimensioni del progetto, pertinenza dei colori del marchio, ecc.).

Mentre lavoravo sul file _colors.scss del nostro framework, dovevo prendere in considerazione che gli utenti lo avrebbero modificato (100%). Ciò significa che anche se l'approccio dichiarativo era il più semplice da usare, ho dovuto mescolarlo con l'approccio semantico per ottenere un sistema che fosse anche facile da mantenere.

La tavolozza dei colori essenziale

Il passaggio numero uno stava dichiarando il numero minimo di colori necessario per creare i componenti Web. In generale, la tavolozza dei colori essenziale è composta da:

  1. Il colore principale / principale → utilizzato per i collegamenti, il colore di sfondo del pulsante, ecc. In generale, è il colore di invito all'azione principale.
  2. Il colore dell'accento → utilizzato per evidenziare qualcosa di importante sulla pagina. Non dovrebbe essere una variazione del colore primario, ma un colore complementare.
  3. Una scala di colori neutri → È generalmente una scala di toni di scala di grigi, da utilizzare per elementi di testo, elementi sottili, bordi, ecc.
  4. Colori feedback → successo, errore, avviso.

Alcuni di questi colori richiedono una variazione (versione più scura / più chiara), spesso utilizzata per evidenziare l'interattività (ad esempio: hover /: stati attivi).

In CSS, questo si traduce in:

* nota: stiamo usando il plug-in postcss-color-mod-function per tradurre le funzioni colore in codice RGBA compatibile con tutti i browser.

Lo snippet sopra rappresenta la tavolozza dei colori: tutti i colori utilizzati in tutto il progetto.

Le variazioni dei colori primari e di accento vengono generate utilizzando le funzioni colore. Questo approccio è utile se hai un file demo.html (e lo facciamo nel nostro framework) in modo da poter modificare i valori delle funzioni fino a quando non sei soddisfatto dei colori ottenuti. I colori delle tonalità (o neutri) sono generati usando chroma.js. In questo caso, l'uso delle funzioni non era l'ideale, poiché in genere si hanno due colori opposti (bianco e nero) e è necessario generare una scala di valori basata su questi due colori.

Aggiunta di colori semantici al mix

Quando la tavolozza dei colori è pronta, possiamo aggiungere colori semantici. Creare colori semantici non significa aumentare il numero di colori, ma distribuirli usando riferimenti semantici.

Perché penso che questo sia un buon approccio

Innanzitutto, questo sistema si basa su due colori essenziali: colori primari e accentati. Ciò significa che quando è necessario utilizzare le variabili di colore, non sarà difficile ricordare cosa rappresentano tali variabili (anche se non si utilizzano nomi dichiarativi come "blu" e "rosso").

Potrebbe essere necessario che il tuo sistema includa più colori (ad es. Un colore secondario). Hai ancora a che fare con solo tre colori. Gestire un sistema basato su oltre 10 colori principali sarebbe difficile a prescindere dall'approccio che stai utilizzando, quindi potresti prendere in considerazione l'idea di semplificarlo.

I colori della scala di grigi usano una diversa convenzione di denominazione: maggiore è il numero alla fine della variabile, più scuro è il colore.
Questo approccio diventa utile quando non sei sicuro di quale colore neutro desideri applicare. Se gray-2 sembra troppo sottile, puoi provare gray-3. Potresti aver notato che mancano alcune sfumature (ad esempio, grigio-5). Nel nostro caso non erano essenziali (non li abbiamo mai usati durante la creazione dei componenti Web), quindi li abbiamo rimossi dalla tavolozza dei colori.

I colori semantici vengono aggiunti al mix per tre motivi principali:

  1. Il file _colors.scss diventa la fonte della verità ogni volta che è necessario modificare un colore. Pensi che gli elementi dell'intestazione del testo debbano essere più scuri? Apri il file _colors.scss e modifica la variabile color-text-header.
  2. Se ad esempio definisci un bordo colorato, non dovrai cercare quale colore grigio hai usato in altri componenti la prossima volta che crei un elemento bordo. Lo stesso concetto si applica a molti elementi, non solo ai bordi.
  3. Lo rende un gioco da ragazzi per creare e mantenere temi diversi.

tematizzazione

Non appena possiamo usare le variabili CSS senza dover fare affidamento su plugin o polyfill, la creazione di temi di colore sarà semplicissima *! Significa che non possiamo creare temi oggi? No, possiamo. Abbiamo due opzioni.

* nel nostro framework, utilizziamo il plug-in postcss-css-variabili per compilare le variabili CSS. Al momento non supporta l'aggiornamento di variabili in una classe CSS.

L'opzione 1 aggiorna comunque le variabili CSS. I browser che non supportano le variabili mostreranno il tema del colore "predefinito". Questo non è un problema, purché il contenuto sia accessibile.

Ad esempio, hai un tema di colore predefinito → sfondo bianco e colore del testo nero e un .mio scuro → sfondo nero e colore del testo bianco. Quindi si creano due componenti, uno con il tema predefinito, l'altro con il tema .dark. Se avere entrambi i componenti con il tema predefinito non influisce sull'esperienza utente, è possibile considerare il tema .dark come un miglioramento (facoltativo). In questo caso, ha senso aggiornare le variabili per creare temi diversi anche se non sono supportati ovunque.

Ecco come creare un nuovo tema aggiornando alcune variabili CSS chiave:

Adoro questa soluzione perché astrae la correzione del colore e ti consente di conservare i temi del colore in un singolo file. In questo modo, possiamo potenzialmente cambiare lo stato di ciascun componente (dal tema a al tema b) semplicemente applicando una classe CSS.

L'opzione 2 avrebbe come target tutti gli elementi il ​​cui aspetto è influenzato dal tema. Il vantaggio di questo metodo è che è supportato da tutti i browser. Tuttavia, non è così facile da mantenere rispetto a quello basato interamente su variabili CSS.

Ecco un esempio dell'opzione 2 in azione:

Ora sai come stiamo pianificando di gestire i colori nel nostro framework! Se hai commenti / suggerimenti, faccelo sapere nel commento!

Spero che l'articolo ti sia piaciuto! Per altre pepite di web design, seguici qui su Medium o Twitter.