Colori
La tavolozza dei colori di Smart Chip riflette la sua personalità divertente e dinamica. I nostri colori principali – il bianco e il nero – creano una base decisa e intramontabile. I colori di accento aggiungono flessibilità e vivacità, aiutandoci ad adattarci a diversi stati d’animo e contesti, mantenendo al contempo un look fresco e coerente.
Colori primari
La tavolozza dei colori è Nero e Bianco insieme a un Colore di evidenziazione. Il bianco e il nero sono semplici e garantiscono il massimo contrasto e la massima leggibilità. I diversi colori di evidenziazione, visualizzati come una sfumatura lineare, aggiungono un tocco di energia e riflettono il modo giocoso in cui Smart Chip semplifica la vita.
Nero
CMYK (nero intenso)
60/40/40/100
Hex
#000000
Bianco
CMYK
0/0/0/0
Hex
#ffffff
Colori in evidenza
I colori di risalto completano e arricchiscono i colori primari. Sono una parte fondamentale della nostra identità visiva dinamica. Li usiamo per dare varietà ai nostri progetti e dare vita al nostro linguaggio visivo.
Quando scegli un colore, tieni conto dell'atmosfera o del tono del tuo progetto. Ogni sfumatura trasmette una sensazione diversa. Ad esempio, Viola fresco È un colore che trasmette calma, il che lo rende perfetto per argomenti più rilassati. D'altra parte, Arancione brillante È un colore vivace ed energico, perfetto per contenuti dinamici o ricchi di azione. Pensa al messaggio che vuoi trasmettere e scegli il colore che meglio si adatta a quella storia.
C'è una regola molto importante: non usare più di un colore nello stesso layout. Ogni colore di evidenziazione dovrebbe risaltare da solo.
Arancione brillante
CMYK
0/46/78/0 > 0/86/70/0
Hex
#ffa041 > #fc3a3c
Deep Blue
CMYK
79/24/6/2 > 90/69/0/0
Hex
#0393bc > #004cd5
Viola fresco
CMYK
47/59/0/0 > 80/82/0/0
Hex
#9d77c4 > #554195
Rame
CMYK
0/46/78/0 > 24/58/86/15
Hex
#ffa041 > #b26e31
Blu elettrico
CMYK
65/0/0/0 > 70/54/0/0
Hex
#23c8fe > #647cff
Viola caldo
CMYK
40/72/0/0 > 68/74/0/0
Hex
#a85fa2 > #6e539e
Rosa carino
CMYK
5/54/34/0 > 0/85/69/0
Hex
#ea9091 > #ed4343
Verde sereno
CMYK
62/0/92/0 > 86/29/88/16
Hex
#71b541 > #197642
Allerta Rossa
CMYK
0/76/55/0 > 0/100/68/0
Hex
#ff5a5a > #e6003c
Gradienti e curve
Quando possibile, usiamo sfumature per i nostri colori di evidenziazione, abbinate a un elemento centrale del design chiamato Curve. Qui scoprirai come crearli e usarli.
Curve
Le curve vengono usate soprattutto per gli sfondi. Conferiscono loro maggiore interesse visivo, profondità e un senso di movimento.
Le curve si ottengono ridimensionando, ruotando e ritagliando l'icona del chip. Il ridimensionamento, la rotazione e il ritaglio li decidi tu, ma cerca di non mostrare troppo dell'icona. Dovrebbero sembrare curve e strisce astratte, non l'icona vera e propria.
Le curve sono sempre posizionate su uno sfondo. Lo sfondo utilizza lo stesso gradiente delle curve, ma in una direzione diversa.
La direzione dei gradienti non è fissa. Puoi modificarli liberamente in ogni nuovo progetto e persino animarli. Questo rende le curve vivaci e originali.
Non devi per forza usare l'intera gamma del gradiente dall'inizio alla fine. Puoi “ingrandire” solo una parte di esso. Questo amplia ancora di più la nostra tavolozza di colori, pur mantenendo i colori riconoscibili.
Fai attenzione però che si riconosca ancora come un gradiente. Non scegliere una porzione così piccola da sembrare un colore a tinta unita.
Le curve non sono obbligatorie: a volte “meno è meglio”. Evita di usarle su elementi più piccoli come pulsanti o immagini di piccole dimensioni.
Creare nuovi colori
La tavolozza dei colori in evidenza è pensata per combinarsi bene tra loro e adattarsi a tanti contesti diversi. Ma se nessun gradiente si adatta al tuo progetto specifico, puoi crearne uno tuo.
Creare nuovi sfumature è particolarmente utile quando abbini un titolo a un'immagine. In questo esempio si usa una sfumatura personalizzata per il titolo che si abbina perfettamente all'immagine.
I colori sono stati ottenuti campionando l'immagine e poi aumentando la saturazione e la luminosità. In questo modo, la nuova sfumatura si integra perfettamente con la tavolozza dei colori esistente.
Ci sono alcune regole da seguire quando crei nuovi colori:
Non esagerare! Cerca di attenerti alla tavolozza dei colori approvata e crea nuovi colori solo se proprio necessario.
Non creare un nuovo gradiente troppo simile a uno già esistente. Se un colore già presente va bene, usa quello.
Mantieni lo stesso tono. Non passare dal rosso al blu, ma dal rosso vivo al rosso medio.
Mantieni i valori in linea con le sfumature già presenti. Non esagerare con la saturazione, né renderli troppo tenui, chiari o scuri.
Principi fondamentali del colore
Quando progetti un nuovo layout, puoi scegliere se usare uno sfondo nero o uno sfondo bianco. Uno sfondo bianco dà un’impressione di pulizia, apertura e accoglienza. Uno sfondo nero evoca tecnologia, eleganza e potenza. Scegli quello che si adatta meglio al tuo progetto, al tuo messaggio e al pubblico a cui ti rivolgi.
Qualunque opzione tu scelga, usa un colore di risalto per spezzare la composizione, mettere in evidenza alcune informazioni, guidare lo sguardo o sottolineare un punto.
Quando crei layout con più pagine, non passare a casaccio da un colore all’altro. Organizza il tuo progetto in argomenti oppure capitoli, e assegna a ciascuno un colore diverso. Mantieni lo stesso colore all’interno di ogni capitolo. In questo modo garantisci coerenza ed eviti che le pagine sembrino troppo affollate.
Puoi usare i colori per gli sfondi, i titoli, le icone o qualsiasi altro elemento in cui un tocco di colore sia d'effetto.
Per mantenere un design pulito e coerente, non mescolare mai colori diversi sulla stessa pagina, tranne quando è necessario per elementi funzionali (come i messaggi di errore o gli avvisi).
Cosa non fare
Cerca di evitare i seguenti errori.
Non usare colori diversi nello stesso layout.
Non usare le curve senza uno sfondo.
Non usare le curve su uno sfondo di colore diverso.
Non far vedere troppo l'icona del chip.
Non abbinare una sfumatura a un colore diverso.
Non creare nuovi gradienti che non rispettino le regole.
Non usare i colori per le annotazioni o per interi blocchi di testo.
Non usare colori a tinta unita, a meno che non sia assolutamente necessario.
Esempi
Ecco alcuni esempi di come si usano il colore e le curve. Nota le differenze in termini di scala, fattore di crop, rotazione e intervallo di gradiente delle curve.
