Illustrazione

Panoramica

Le illustrazioni trasmettono il significato a colpo d'occhio, semplificando idee complesse e migliorando la comprensione da parte dell'utente attraverso la narrazione visiva. Colmano il divario tra concetti tecnici e comprensione dell'utente, rendendo le idee astratte più tangibili e coinvolgenti.

Nei prodotti e nei servizi di Cloudflare, le illustrazioni catturano l'attenzione, suscitano curiosità e guidano efficacemente gli utenti. Trasformano concetti teorici in elementi visivi comprensibili, migliorando la chiarezza e l'accessibilità.

Principi fondamentali

Illustrazione del marchio - semplice e chiaro
Semplice e chiaro

Concentrati sull'essenziale. Riduci i dettagli non necessari in modo che gli elementi significativi si distinguano. Usa linee pulite, forme semplici e una tavolozza di colori minima per mantenere gli elementi visivi facili da interpretare.

Illustrazione del marchio - mostra, non dire
Mostra, non dire

Usa metafore e analogie per rappresentare idee complesse. L'illustrazione deve aiutare lo spettatore a comprendere rapidamente un concetto, senza bisogno di molto testo.

Illustrazione del marchio - la coerenza è fondamentale
La coerenza è fondamentale

Segui rigorosamente la tavolozza di colori, la tipografia, gli spessori delle linee del marchio Cloudflare e riutilizza le immagini iconiche della libreria esistente. Questo garantisce che tutte le illustrazioni sembrino una parte coesa del linguaggio visivo del nostro marchio.

Illustrazione del marchio - Garantisci la scalabilità
Garantisci la scalabilità

Le illustrazioni devono essere altrettanto leggibili ed efficaci sia in piccolo che in grande.

Illustrazione del marchio - Diventa accessibile
Diventa accessibile

Progetta pensando all'accessibilità. Assicura linee, forme e colori distinti utilizzando motivi ed etichette per differenziare gli elementi, soprattutto se hanno scopi diversi. Fornisci contrasto tra i colori e descrizioni di testo alternative per tutte le illustrazioni non decorative, in modo che possano essere comprese dalle persone che utilizzano gli screen reader.

Illustrazione del marchio - infusione marchio
Infondi la personalità del marchio

Usiamo l'illustrazione per esprimere il carattere unico del nostro marchio. Le illustrazioni non solo devono essere chiare ma immediatamente riconoscibili come le nostre. Adotta il nostro linguaggio visivo specifico e infondi la nostra tavolozza di colori unica, arguzia e stranezze distinte in ogni pezzo.

Stile e composizione

Illustrazione del marchio - Personalità delle persone
Persone e personalità

La diversità è parte integrante del modo in cui illustriamo le persone in Cloudflare. Caratteristiche, tonalità della pelle, acconciature e vestiti diversi devono essere utilizzati per aggiungere personalità alle nostre illustrazioni e rappresentare la diversità dei nostri dipendenti e clienti.

Scarica le linee guida per le persone
Illustrazione del marchio - 2D isometrico
2D e isometrico

Sebbene lo stile sia principalmente bidimensionale, alcune illustrazioni utilizzano una sfumatura e un'ombreggiatura sottili per creare un senso di profondità e dimensione. Questo impedisce loro di sembrare eccessivamente semplicistici. In alcuni casi, le illustrazioni isometriche trasmettono meglio il significato.

Da non fare

Da non fare - complicare eccessivamente

Non complicare eccessivamente gli elementi visivi con elementi non necessari che potrebbero confondere o distrarre gli utenti.

Da non fare - introdurre

Non introdurre stili o combinazioni di colori non correlati in quanto potrebbero creare confusione e ridurre il riconoscimento e la fiducia del marchio.

Da non fare - miniatura bloccata

Non utilizzare immagini stereotipate o abusate, prive di originalità. Sono tanti gli aspetti che rendono Cloudflare unica. Concentrati sulla differenziazione.

Da non fare - presentare la miniatura

Non presentare gli utenti o gli ambienti in modo omogeneo. Sforzati di rappresentare una varietà di utenti ovunque sia possibile. Non perpetuare stereotipi, pregiudizi o idee sbagliate che causano pregiudizi culturali.

Tavolozza dei colori

La tavolozza di colori nel nostro stile di illustrazione si basa sul marchio Cloudflare. Presenta prevalentemente mandarino, mango, vermiglio con lampone e ciliegia che creano un senso di calore e ottimismo. Questi sono integrati da un set di colori più fresco, tra cui mora, viola, grigio chiaro e azzurro, che forniscono equilibrio e contrasto. Il bianco viene utilizzato come elemento neutro di base, conferendo alle illustrazioni un aspetto pulito e moderno. L'effetto complessivo è professionale, affidabile e sottilmente energico.

Nelle illustrazioni del nostro marchio, i colori rosso e verde sono usati con uno scopo. Il rosso rappresenta un chiaro pericolo o minaccia, segnalando efficacemente attacchi informatici, violazioni della sicurezza o un'azione non riuscita. Al contrario, il verde trasmette sicurezza, successo e protezione, illustrando connessioni sicure, difese efficaci o un’azione completata. L'uso coerente di questi colori in tutti i nostri elementi visivi garantisce un'esperienza unificata e intuitiva per i nostri clienti, aiutandoli a comprendere rapidamente lo stato della loro sicurezza.

Primario

Colore - mandarino

Mandarino

Hex #F6821F
RGB 246, 130, 31
CMYK 0, 60, 100, 0
PMS 1495 C

Colore - vermiglio

Vermiglio

Hex #FF6633
RGB 255, 102, 51
CMYK 0, 80, 93, 0
PMS 1645 C

Colore - mango

Mango

Hex #FBAD41
RGB 251, 173, 64
CMYK 0, 37, 84, 0
PMS 1365 C

Secondario

Colore - limone

Limone

Hex #FFD43C
RGB 255, 212, 60
CMYK 0, 17, 76, 0

Colore - lampone

Lampone

Hex #CE2F55
RGB 206, 47, 85
CMYK 0, 77, 59, 19

Colore - ciliegia

Ciliegia

Hex #960C3E
RGB 150, 12, 62
CMYK 0, 92, 59, 41

Colore - Mirtillo

Mirtillo

Hex #3E74FF
RGB 62, 116, 255
CMYK 76, 55, 0, 0

Colore - mora

Mora

Hex #0F006B
RGB 15, 0, 107
CMYK 86, 100, 0, 58

Colore - nero

Nero (testo)

Hex #000000
RGB 0, 0, 0
CMYK 0, 0, 0, 100

Terziario

Colore - arancione chiaro

Arancione chiaro

Hex #FFE9CB
RGB 255, 233, 203
CMYK 0, 9, 20, 0

Colore - celeste

Celeste

Hex #E0ECFF
RGB 224, 236, 255
CMYK 12, 7, 0, 0

Colore - azzurro

Azzurro

Hex #A8CBFF
RGB 168, 203, 255
CMYK 34, 20, 0, 0

Colore - viola chiaro

Viola chiaro

Hex #F2D6F4
RGB 242, 214, 244
CMYK 1, 12, 0, 4

Colore - viola

Viola

Hex #941FBA
RGB 148, 31, 186
CMYK 20, 83, 0, 27

Colore - viola scuro

Viola scuro

Hex #4D1470
RGB 77, 20, 112
CMYK 31, 82, 0, 56

Colore - successo chiaro

Successo (chiaro)

Hex #BCECCB
RGB 188, 236, 203
CMYK 20, 0, 14, 7

Colore - successo

Successo

Hex #57CF7D
RGB 87, 207, 125
CMYK 58, 0, 40, 19

Colore - successo scuro

Successo (scuro)

Hex #12523D
RGB 18, 82, 61
CMYK 78, 0 26, 68

Colore - pericolo chiaro

Pericolo (chiaro)

Hex #FCA39C
RGB 252, 163, 156
CMYK 0, 35, 38, 1

Colore - pericolo

Pericolo

Hex #FC3D2E
RGB 252, 61, 46
CMYK 0, 75, 82, 1

Colore - pericolo scuro

Pericolo (scuro)

Hex #B0291C
RGB 176, 41, 28
CMYK 0, 77, 84, 31

Colore - grigio chiaro

Grigio chiaro

Hex #747474
RGB 116, 116, 116
CMYK 0, 0, 0, 55

Colore - grigio scuro

Grigio scuro

Hex #DFDFDF
RGB 223, 223, 223
CMYK 0, 0, 0, 13