Per creare una buona interfaccia per il web è fondamentale saper gestire i colori in modo corretto.

In primissima battuta lasciatemi consigliare di nuovo Refactoring UI che è la fonte principale e di riferimento per chi scrive soprattutto codice e ha bisogno di una prima infarinatura per quanto riguarda il design delle applicazioni web.

Da ex graphic-designer e attuale sviluppatore Ruby On Rails ho trovato in questo libro una grande capacità di riassumere i più importanti principi della grafica contemporanea declinati sul campo del web design.

In particolare il capitolo sui colori è sufficientemente chiaro da diventare per me un punto di partenza per i vari progetti che sviluppo.

In questo caso, come Rubynetti, stiamo sviluppando un gioco di carte online. Il nome è ancora da decidere in modo definitivo. Fatto sta che siamo in un punto in cui l'interfaccia a livello estetico non funziona del tutto bene.

Abbiamo bisogno di colori per questo motivo seguendo le indicazioni del libro qui sopra ho iniziato a creare una palette cromatica dove vario intensità di saturazione e luminosità.

Sono partito da due colori: rosso e giallo. I principali colori di riferimento quando si parla di palette veneziana.

Palette - Refactoring UI - Per Magico


Dopo aver definito la palette cromatico all'interno di Figma, ho trasportato il tutto all'interno di sass pronto per essere dato in pasto ai componenti vue e a Rails.

Sass per applicazione Ruby on Rails - Refactoring UI


Di seguito ho aggiunto anche i colori per le situazioni di interfaccia di successo e di warning.

A questo punto ho creato questa immagine di riepilogo e di riferimento per quanto riguarda l'applicazione Rails finale.

Palette cromatica pronta per Sass e per l'applicazione Rails.