Protocollo World Design

Principi, linee guida e risorse

Principi di design

  • Umano

    La convinzione che le qualità organiche e imprevedibili dell'essere umano siano fondamentali per l'innovazione.

  • Universale

    Un linguaggio visivo che va oltre ogni confine, cultura e storia, garantendo inclusività, accessibilità e connessione globale.

  • Ottimista

    Credere nell'umanità e nel ruolo che la tecnologia può avere nel migliorare la vita di tutti.

Panoramica del marchio

Tutti gli strumenti fanno parte del marchio principale World.

Identità visiva

Logo World

Il logo World è il punto di riferimento visivo del nostro marchio: semplice, chiaro e universale. Basato su principi di design senza tempo, rappresenta il nostro impegno verso l'accessibilità, l'innovazione e la connessione globale.

Il nostro logo è il cuore dell'identità del nostro brand. Usa sempre il logo com'è e lascia un po' di spazio intorno per renderlo più visibile e di maggiore impatto. Modificarlo, distorcerlo o usare colori non autorizzati può rovinarne l'integrità.

Il nostro marchio è una parte importante dell'identità visiva del nostro brand e va d'accordo con il logo per far capire il nostro nome in modo chiaro e con stile. Non si possono fare modifiche, allungamenti o effetti non approvati al marchio.

Il logo lockup mette insieme il simbolo e il marchio in un unico design, che rappresenta il nostro brand nella sua forma più completa. Questo lockup va sempre usato così com'è, mantenendo le giuste proporzioni, spaziature e allineamenti tra gli elementi. Evita di separare, riorganizzare o ridimensionare i componenti da solo. Segui sempre le linee guida per dimensioni, spaziature e posizionamento per mantenere la sua integrità.

Lo spazio libero è la distanza minima tra il logo e qualsiasi altro elemento in un layout. La larghezza della “o” in world definisce lo spazio libero che circonda il logo.

Quando vuoi mostrare partnership o collaborazioni, il logo World può essere messo insieme al logo di un altro marchio nei seguenti formati.

Colori e gradiente

Neutrale
Morbido, Delicato, Sofisticato, Tenue, Sobrio, Rilassante
Colore primario
Tranquillità, Onestà, Serenità, Riflessione, Saggezza, Fiducia
Colori secondari
Vitalità, Felicità, Entusiasmo, Ottimismo, Energia, Inclusività

Crea un gradiente (Tutorial PDF)

  • Il gradiente World è un elemento importante del sistema di branding principale. Trasmette speranza e ottimismo e può essere usato come risorsa di branding riconoscibile quando viene usato come sfondo.
  • Dovrebbe essere usato solo nei colori indicati.
  • Il gradiente deve essere creato come bitmap e poi colorato, assicurandosi che la risoluzione del bitmap segua le linee guida nelle pagine seguenti.
Gradiente — Risoluzione
Troppo bassa
Giusta
Troppo alta

I colori secondari sono usati sia per dare un tocco espressivo che per scopi pratici nel marchio World. Alcuni esempi sono: usare colori diversi per indicare i livelli di autorizzazione nei badge degli eventi, colori sfumati personalizzati per le bandiere nei materiali di lancio, la semantica dei colori nelle interfacce utente e immagini di supporto espressive.

Tipografia

Lausanne è un font sans-serif moderno e sofisticato, super versatile sia per il testo che per la visualizzazione. Si mette alla pari con i grandi sans-serif classici, ma con le particolarità della tipografia digitale. È l'unico font usato nel marchio World.

Pesi

Di seguito ci sono i tre pesi di Lausanne usati in tutto il marchio World. Sono la base di tutti i contenuti e qualsiasi eccezione o aggiunta deve essere approvata internamente.

In generale, queste regole possono essere usate praticamente in ogni situazione tipografica all'interno dei messaggi del marchio.

Il corpo del testo e le sezioni lunghe sono in peso 300. I titoli e i caratteri grandi sono in peso 400, mentre i sottotitoli e i titoli più piccoli sono in peso 450 per mantenere il grassetto pur essendo leggermente più piccoli dei titoli principali.

Le interlinee e il tracciamento
Allineamento

La collezione Tiempos è una famiglia di caratteri serif moderni pensati per la tipografia editoriale. Tiempos Headline è fatto apposta per titoli di grandi dimensioni, trovando un equilibrio tra praticità ed eleganza.

Pesi

Di seguito ci sono i due pesi di Tiempos Headline usati in tutto il marchio World. Qualsiasi eccezione o aggiunta deve essere approvata internamente.

Tiempos Headline è il nostro secondo font, usato solo in alcuni casi specifici, soprattutto quando il marchio si rivolge direttamente all'utente e vuole creare un senso di vicinanza.

Può essere utilizzato per pubblicità, merchandising e alcune schermate nella UX. Tutti i contenuti e qualsiasi eccezione o aggiunta devono essere approvati internamente.

Ruolo del font

Post sui social media, campagne, esclusività

Tiempos aggiunge un tocco umano e una voce diretta al linguaggio visivo del marchio. È perfetto per creare un tono accogliente, accessibile e raffinato in situazioni specifiche, quando si vuole comunicare in modo più intimo con gli utenti.

Usiamo il font Noto insieme ai nostri caratteri tipografici latini principali per garantire un supporto completo a tutti gli alfabeti non latini. Noto è stato scelto perché copre un sacco di lingue del mondo, offrendo una tipografia coerente e visivamente armoniosa in diversi alfabeti, come cinese, arabo, cirillico e giapponese.

Questo ci permette di mantenere la coerenza e l'inclusività del marchio, assicurando che la nostra comunicazione raggiunga gli utenti di tutto il mondo nelle loro lingue native, senza compromettere la leggibilità o la coerenza estetica.

Mandarino: Noto Sans HKn
Giapponese: Noto Sans JP
Arabo: Noto Sans Arabic
Bengalese: Noto Sans Bengali
Ebraico: Noto Sans Hebrew
Cirillico: Noto Sans

Quando non puoi usare Lausanne, tipo in Google Slides, puoi usare un altro font dalla libreria Google Fonts: per il testo, usa il font Inter; per i titoli, usa il font Inter Tight. Puoi usare solo questi font dalla libreria Google Fonts e solo se non puoi usare Lausanne.

Composizione

La griglia è uno degli strumenti più importanti nel sistema di progettazione. È fondamentale per tutti i layout e le composizioni e va usata sempre. Che sia una griglia a 2, 4, 6 o 8 colonne dipende dalle dimensioni della tavola da disegno e da quanti elementi ci sono dentro, ma tutti gli elementi in una composizione dovrebbero essere allineati alla griglia sottostante e distanziati in modo proporzionale ai margini.

Materiali interni

Per tutto il materiale interno e il materiale promozionale del marchio, dove il logo compare insieme ad altre risorse e contenuti, il logo va messo nell'angolo in alto a sinistra del layout per garantire la coerenza.

Logo singolo

Nei layout in cui il logo è l'unico elemento, come le schede video o alcune campagne o annunci, il logo viene messo al centro del layout.

Profili social media
Logo su gradiente

Quando posizioni il logo sullo sfondo sfumato, assicurati di metterlo sempre nella parte chiara, così non si confonde e si legge bene.

Illustrazione

Ogni prodotto principale di World ha un'immagine che lo rappresenta, ispirata alla natura del prodotto o a quello che offre.

World ID
World App
World Chain
Worldcoin
Orb

Anche se ci sono tanti modi per mostrare i dati, è meglio usare uno stile coerente. Contorni, forme geometriche per grafici e tabelle, usi delicati e mirati di riempimenti e colori sono gli elementi che rendono coerente la grafica di visualizzazione dei dati.

Es. 1 - Grafico a barre
Es. 2 - Modello in scala
Es. 3 - Grafico del prezzo

Le griglie a gradiente servono come grafiche colorate ed espressive e sono usate in due modi:

  1. Come rappresentazioni locali usando i colori della mappa di un paese come input per la transizione del gradiente
  2. Grafiche ambientali, non legate a specifici colori ma semplicemente espressive di uno stato d'animo o energia
Es. 1 - Colombia
Es. 2 - Argentina

Iconografia

Per agevolare identificazione e navigazione, ogni prodotto ha un'icona associata, sviluppata come forma abbreviata della relativa illustrazione di prodotto.

Le icone di prodotto devono mantenere lo stesso aspetto e spessore visivo attraverso le diverse dimensioni. Il peso di base usato è 1,0 px quando l'icona è impostata a 60 px di larghezza e, se viene ingrandita o ridotta, il peso dovrà adattarsi per preservare lo stesso impatto ottico del peso di base.

Quando le icone sono usate in contesti con altri elementi di un layout, come sul web, devono essere sempre allineate nell'angolo in alto a sinistra. In alcune situazioni, quando le icone sono mostrate insieme, senza altri elementi, possono essere posizionate al centro della composizione.

In alto a sinistra
Centro

Risorse

Risorse per immagini hero, sfumature, simbolo della valuta WLD, Orb, World App, World Chain, ecc.