Blog Rubynetti

Interfacce web, i colori per una applicazione web (con Rails e Vue)

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.

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.

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.

Chi siamo?

Rubynetti è una squadra di designer, sviluppatori e programmatori specializzata in applicazioni web. Il nostro focus è portare valore e automazione nei processi umani e aziendali attraverso l'uso delle tecnologie del web.

Operiamo da più di 20 anni nel settore e siamo specializzati su Vue.js, Nuxt, Rails e React.

Lavoriamo per lo più da Venezia centro storico.

Contatti

Se hai bisogno di una mano per portare avanti o creare dal nulla un progetto digitale siamo a disposizione.