Brand System
Brand System
Introduzione al Brand
Più clienti,
realmente tuoi!
Mission
In un mondo digitale in cui gli sforzi e le ambizioni possono sembrare fragili e incerte, dove il successo di un business dipende dalle decisioni di Google e Meta, voglio assicurarmi che ogni sforzo dei miei clienti non vada mai sprecato. La mia missione è restituire loro il controllo sul proprio futuro, creando una presenza digitale solida e duratura, restituendo sicurezza e una crescita autentica, dove la proprietà è tua e i clienti sono veramente tuoi.
Logo
Il logo è il cuore del sistema di identificazione di marcofama e la base della sua identità di marca.
Logo Lockup
Il logo è composto da due elementi: il simbolo e il logotipo. Il simbolo può essere utilizzato in modo indipendente quando lo spazio è limitato, ad esempio per le icone delle app, gli avatar dei social media e le slide delle presentazioni.
Spazio libero
Assicurati sempre che ci sia spazio intorno al logo. Quando posizioni elementi vicino al logo, utilizza l’altezza della lettera “o” come riferimento per il distanziamento. Assicurati che nulla interferisca con questo spazio.
Combinazione colori
Quando combini il logo con i colori del brand, assicurarsi che ci sia un contrasto sufficiente. Di seguito sono riportati alcuni esempi di combinazioni approvate.
Altezza minima
Utilizza sempre il buon senso nel ridimensionare il logo. È stato progettato per rimanere leggibile a tutte le dimensioni, ma evita di utilizzarlo al di sotto della dimensione minima indicata per garantirne chiarezza e riconoscibilità.
Digitale: 20px Stampa: 5mm
Usi scorretti
Evita di utilizzare il logo in modo scorretto, può creare confusione e rendere difficile il riconoscimento del brand. Ecco alcuni esempi di utilizzi da evitare.
Social Media e Favicon.
Il simbolo del logo può essere utilizzato come avatar per i social media e come favicon per il sito web. Assicurati che sia centrato, senza sovrapposizioni, e che utilizzi combinazioni di colori approvate.
Colori
Palette Ispirata a Stabilità e Innovazione in Un Mondo Digitale
Colori Primari
Il colore principale da utilizzare è il nero, ideale soprattutto per gli sfondi. Il blu e il grigio possono essere impiegati per gli sfondi o come colori secondari, mentre il giallo viene utilizzato come colore d’accento per valorizzare il design.
Nero
#000000
RGB 0, 0, 0
CMYK 91, 79, 62, 97
Blu
#0e60f4
RGB 14, 96, 244
CMYK 87, 64, 0, 0
Grigio
#999999
RGB 153, 153, 153
CMYK 41, 32, 32, 11
Giallo
#ffc730
RGB 255, 199, 48
CMYK 0, 24, 85, 0
Tipografia
Il carattere esprime controllo e precisione, richiamando i linguaggi di programmazione.
Neue Machina Plain Family
Il carattere Neue Machina dovrebbe essere utilizzato nei titoli sempre con il peso Light.
Neue Machina Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
! @ # $ % ^ & * ( ) _ + – = { } [ ] | \ : ; ” ‘ < > , . ? / ~ `
Gerarchia Tipografica
Sono riportate qui sotto le gerarchie tipografiche da utilizzare sul web per la versione desktop. Per tutti gli altri utilizzi, come ad esempio per i materiali di comunicazione, cerca di rispettare le proporzioni tra le varie grandezze.
H1 Hero Headline
PP Neue Machina Light
Dimensione: 115 px
Interlinea: 108 px
Tracking: -7
H2 Primary
PP Neue Machina Light
Dimensione: 70 px
Interlinea: 72 px
Tracking: -3
H3 Secondary
PP Neue Machina Light
Dimensione: 40 px
Interlinea: 48 px
Tracking: -1,5
Accent (Maiuscolo)
PP Neue Machina Light
Dimensione: 16 px
Interlinea: 16 px
Tracking: -0,5
Body Text
PP Neue Machina Light
Dimensione: 16 px
Interlinea: 24 px
Tracking: -0,5
Iconografia
Utilizza le icone per migliorare l'esperienza utente con una navigazione intuitiva, una comunicazione sintetica e un design visivo accattivante.
Come disegnare le icone
Griglia:
Usa una griglia composta da 22×22 blocchi come base di riferimento.
Vertici:
Disegna le linee usando il centro dei blocchi della griglia come riferimento per i vertici.
Spessore delle linee:
Linee spesse: utilizza uno spessore di 2 blocchi.
Linee sottili: utilizza uno spessore di 1 blocco.
Niente curve:
Disegna linee rette evitando qualsiasi tipo di curvatura.
Armonia visiva:
Assicurati che tutte le icone mantengano coerenza stilistica, rispettando lo stesso livello di semplicità.
Fotografia
Uno stile fotografico che elimina le distrazioni cromatiche e crea coerenza visiva.
Trattamento fotografico
Lo stile fotografico è caratterizzato da un trattamento in bianco e nero, che elimina le distrazioni cromatiche per mettere in risalto l’essenza dell’immagine.
Maschere per Immagini
Utilizza forme semplici e ripetibili, come quadrati e triangoli, per creare le maschere delle immagini. Queste forme conferiscono struttura e coerenza visiva al layout.
Griglia
Di seguito sono riportate le linee guida per combinare tutti gli elementi del brand nei layout, al fine di creare composizioni coerenti.
Linee di base
La griglia è configurata con linee di base distanziate di 12 px.
Allineamento
Testo e immagini devono essere allineati alle linee di base per mantenere coerenza visiva.
Distanze
Le distanze tra gli oggetti devono essere un multiplo di 12 px per garantire un design armonioso e ordinato.
Cosa cercano i tuoi clienti su Google?
3x
3x
1x
12px
2x
24px
3x
36px
4x
48px
6x
72px
8x
96px
12x
144px
16x
192px
20x
240px
Layout
Una volta stabilite le linee di base, gli elementi grafici devono essere allineati alle linee della griglia. Per organizzare meglio le informazioni, è possibile utilizzare layout con 1, 2, 3, 4 o fino a 12 colonne, mantenendo un margine pari a 6 volte la distanza della griglia di base.
Layout a 1 colonna.
Layout a 2 colonne.
Layout a 3 colonne.
Layout a 4 colonne.
Layout a 6 colonne.
Layout a 8 colonne.
