Come cambiare i colori della mia app?

Ecco il ruolo di ogni colore, come cambiarli per tutta l'app e come dare un colore tutto suo a un solo elemento.

Nel pannello Colori, i quattro «Colori principali» e poi i due «Colori secondari» hanno ciascuno un ruolo, lo stesso in tutta l'app. Eccoli nell'ordine del pannello, come nell'immagine.

1. Il testo principale, i titoli e il testo degli articoli.
2. L'accento, l'informazione sotto il titolo, l'indirizzo di un evento, l'icona di un'azione selezionata.
3. Il testo secondario, l'informazione sopra il titolo (data, categoria), gli autori, il link alla lista completa.
4. Lo sfondo delle superfici, le celle e le intestazioni dei widget.
5. I bordi, attorno alle celle.
6. Lo sfondo secondario, quello di un widget quando gliene dai uno.

In un'app GoodBarber, quindi, un colore ha una funzione, non un posto. Se il tuo accento è blu, tutto ciò che porta l'accento diventa blu, da una schermata all'altra. E quando cambi tinta, il testo resta testo, lo sfondo resta sfondo. Le zone dell'app, l'«Header», il menu, i pulsanti, hanno le loro impostazioni, nello stesso pannello. Il giallo dei bollini della data, il 7 nell'immagine, viene così dagli «Altri bottoni».

Ecco due volte la stessa schermata, e tra le due è cambiato un solo colore, l'accento. A sinistra ha il colore del testo, e tutto si legge allo stesso livello. A destra passa al blu del brand, e con lui l'informazione sotto il titolo dell'avviso e l'indirizzo di ogni prova, con la sua icona. L'occhio trova subito ciò che serve. Né i titoli, né gli sfondi, né i caratteri si sono mossi.

Una sola impostazione arriva lontano. In una delle nostre app GoodBarber, cambiare il colore del testo principale ha ridipinto 95 impostazioni in un colpo solo, in tutta l'app, senza aprire una sola schermata. È il nostro principio «No design burden», perché la coerenza non sia mai un peso per te.

Per giudicare la tua impostazione, guarda l'anteprima prima di applicare, poi sfoglia due o tre pagine. Se l'accento salta all'occhio dove non dovrebbe, probabilmente è l'elemento che lo porta che va ritoccato, nel suo pannello di design.

Queste quattro app usano gli stessi ruoli, eppure non si somigliano. La differenza sta nelle impostazioni in cui ognuna mette il suo colore.

• Eastside Music Workshop mette il suo blu nell'accento, che qui colora l'indirizzo di una prova, e il suo giallo negli «Altri bottoni», che colorano i bollini della data.
• Blandas Astronomy Club mette il suo color ambra nelle impostazioni della barra delle schede, e qui si accende solo la scheda corrente.
• Unit 7 posa il suo verde fluo come sfondo della scheda attiva, un blocco di colore pieno con il suo nome scritto sopra.
• Tweed & Cheviot mette il suo rosso nell'accento, ma mostra l'informazione sotto il titolo solo dove conta, qui il numero da ricordare.

Sta a te scegliere dove mettere il tuo colore d'accento. Chiediti che cosa deve dire, ciò che è attivo, ciò che è nuovo, ciò che attende un gesto.

La mia impostazione preferita non si nota. Per lo sfondo delle superfici non metto mai #FFFFFF, ma un bianco leggermente tinto, #FFF8ED per Eastside, posato su uno «Sfondo dell'app» di un tono più scuro, #EDE7DD. Le celle si staccano senza ombra, e la schermata acquista una sua matericità, come la carta. Anche per il testo principale, mai #000000, ma un quasi nero colorato, #23252B qui. Il nero puro sul bianco dà il contrasto massimo, 21:1, che trovo duro in una lettura lunga. #23252B su #FFF8ED mantiene 14,5:1, il doppio del livello più esigente delle WCAG (7:1), con in più la morbidezza.

Tre valori, e tutta l'app ci guadagna, i titoli, i testi, le celle. È ciò che permette il ruolo, una sola impostazione, valida ovunque.

I colori in breve

• In un'app GoodBarber, i colori di tutta l'app si regolano in un solo pannello, venti impostazioni di cui sei colori che portano ciascuno un ruolo.
• Un colore ha una funzione, non un posto, il testo principale, l'accento, il testo secondario, lo sfondo delle superfici, i bordi, lo sfondo secondario.
• Tutto si regola nel pannello Colori, un tema, la Palette magica o un solo colore, poi «Applica», che ridipinge l'intera app.
• Un elemento si ritocca nel pannello della sua sezione o del suo widget, oppure chiave per chiave con l'estensione gratuita Edizione avanzata.
• Regola prima il tema, poi i dettagli.
• Due impostazioni da designer, mai bianco puro per le superfici, mai nero puro per il testo.