Brand identity and guidelines - Brand identity 2. Brand adjectives 3. Buyer persona 4. Linee guida verbali 5. Linee guida grafiche 6. Linee ...
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Brand identity and guidelines 1. Brand identity 2. Brand adjectives 3. Buyer persona 4. Linee guida verbali 5. Linee guida grafiche 6. Linee guida web
1. Brand identity Core identity: La nostra identità Il modo migliore per comunicare efficacemente “chi siamo”, è avere ben chiara la nostra identità: vision, mission e values. Vision: perché esiste Hippi? We believe in a world where millions of digital freelancers are truly happy and in control of their work. Crediamo in un mondo dove milioni di freelancer digitali sono davvero felici e in controllo del loro lavoro. Mission: cosa fa Hippi? We want to improve the life of digital freelancers. Vogliamo migliorare la vita dei freelancer digitali. We develop software that improves their quality of life. Sviluppiamo software che migliorano la qualità della loro vita. We make their work life easier and better. Rendiamo la loro vita lavorativa più facile e serena. Values: come ragiona Hippi? Focus on customer feedback Transparency and honesty Quality over quantity Good karma over profit Profit fuels innovation Reinvest in ourselves Build relationships Respect others Talk and play, have fun
2. Brand adjectives (tratti distintivi) Il brand deve comunicare chiaramente l'identità dell'azienda, a questo scopo abbiamo identificato sei tratti distintivi utili a rappresentare l'essenza di Hippi. 1 2 3 4 5 6 CULTURE CUSTOMER VOICE FEEL IMPACT X-FACTOR Friendly Busy Sincere Relieved Make money Quick Open Aspirational Reassuring Empowered Save time Fun Vibrant Professional Wise Skilled Offer more Powerful Relaxed Unconventional Bright Safe Take control Different Collaborative Independent Bold Taken care No problem Smart Culture: come immaginiamo la nostra cultura di impresa? Come vogliamo che questa venga percepita da chi lavora per noi? E da chi acquista i nostri prodotti? L’aggettivo che meglio la descrive è Vibrant: colorata, multi-etnica, profumata, come un bellissimo mercato in primavera. Un’ambiente di lavoro produttivo, stimolato e creativo, dove non siamo motivati dal profitto ma dalla voglia di inventare e re-inventarci. Customer: come ci immaginiamo il nostro cliente ideale? I nostri buyer personas sono accomunati da un tratto comune, hanno tutti scelto di intraprendere uno stile di vita Unconventional. Fuori dagli schemi, fuori dalle regole di orario e di etichetta, sono persone che hanno deciso di prendere il controllo della propria vita lavorativa ricercando l’indipendenza finanziaria e lavorativa nella professione creativa. Voice: qual è il tono della nostra voce? È profondo o squillante? Chi ci immaginiamo quando la sentiamo? Il nostro tono è quello di una persona giovane che ha alle spalle già numerose esperienze, voce profonda e rassicurante ma anche eccitata appena si tocca un argomento interessante. È il tono di una persona intelligente e navigata, una di quelle che quando apre bocca vuoi ascoltare. Siamo Bright. Feel: come si deve sentire un nostro cliente? Quali sensazioni vogliamo che provi quando usa un nostro prodotto o apre un ticket? Hippi è studiato per potenziare immediatamente le abilità dei nostri clienti, sollevandoli dalle fatiche e responsabilità che la programmazione richiede. Vogliamo che si sentano Empowered, professionisti emancipati e coraggiosi. Impact: qual è l’aggettivo che meglio descrive l’impatto che ha Hippi sui nostri clienti? Possiamo dire che risparmiano tempo, che possono guadagnare di più, che possono offrire un servizio in più, che avranno il controllo del processo produttivo e creativo, ma la cosa che desiderano di più è non avere problemi. Andare a letto con la serenità che al loro risveglio non sia saltata in aria una bomba. Non vogliono ricevere lamentele, non vogliono problemi. No problem. X-Factor: se potessimo scegliere un solo aggettivo per descriverci, quale sarebbe? In un mare di website builder, di commodity e prodotti standardizzati, di colori spenti, noia e crisi d’identità, vogliamo essere Different. Non nel senso della mela di Apple, ma nel vero senso della parola. Vogliamo essere quella persona divertente e colorata che risalta alle feste noiose.
3. Buyer Persona
Target audience - Chi sono i nostri clienti?
Ogni attività di comunicazione e marketing inizia con il comprendere a fondo chi vogliamo
raggiungere con i nostri contenuti, la nostra target audience.
A questo scopo torna utile creare persone immaginarie che rappresentino la nostra target
audience, le cosiddette buyer personas.
Nelle personas si identificano tutti i tratti demografici e psicologici distintivi dei nostri
potenziali clienti. Ci forniscono cosi un quadro più chiaro di chi queste persone siano, di
cosa si preoccupano e di come comunicare con loro.
Ponete particolare attenzione alle domande legate al loro lavoro, perchè nelle loro
risposte c’è la chiave per comprendere le sfide che devono affrontare ogni giorno e sulle
quali Hippi dovrà fare leva: i problemi che dobbiamo risolvere e i rischi che dobbiamo
mitigare.
Queste persone immaginarie ci aiuteranno a capire quanto sarà di impatto la nostra value
proposition e le prossime strategie di marketing:
CARLOTTA
Freelancer – Social Media Manager
• 28 anni
• Fidanzata
• In affitto
• Vive in area metropolitana
• Reddito annuo €13.500 - €22.000
• Budget a disposizione €600 - €800
• Vota centro-sinistra
• Veste alternativa, monocromatica
• Stima le guru della stessa professione e affini
• Il suo obiettivo è ottenere riconoscimenti e premi. Il denaro non è il fattore motivante
più importante.
• Riceve approvazione da il cliente e le statistiche
• Ha paura di svegliarsi alla mattina con una email di recesso dal piano marketing;
telefonata o riunione forzata dal cliente in cui chiede spiegazioni sul rapporto
spesa/risultati
• Sceglierebbe Hippi per aggiungere un servizio al loro portfolio di servizi. Il markup e il
margine di guadagno con Hippi è nettamente superiore alla collaborazione con altri
freelancer, i quali ti conferiscono meno del 20% sul preventivo
• Sentirebbe parlare di noi su gruppi di freelancer affini su social network; eventi di
networking
• Hippi la può aiutare perchè le permetterebbe di offrire un servizio in più e che tutti i
clienti le chiedono senza avere conoscenze tecniche. Sa benissimo che senza l'aiuto di
tecnici non potrebbe mai farcela (configurazioni hosting, dominio, installazioni, sicurezza
e velocità). Noi togliamo dall'equazione la necessità di un tecnico, dovrà solamente
scrivere i contenuti e caricare le immagini.
ALEX
Freelancer – Grafico
• 26 anni
• Single
• Convive con i genitori/In affitto
• Vive in area metropolitana
• Reddito annuo €14.000 - €22.600
• Budget a disposizione €500 - €750
• Vota centro-sinistra
• Veste alternativo e colorato
• Stima le agenzie che hanno ricevuto riconoscimenti internazionali
• Il suo obiettivo è raggiungere una stabilità in termini produttivi, meno precarietà e
saltuarietà tra un lavoro e l'altro. Ottenere un premio per il proprio lavoro creativo
• Riceve approvazione da il cliente e i colleghi
• Ha paura di una revisione in più richiesta dal cliente o un logo che non viene approvato.
Più in generale il rifiuto del proprio lavoro creativo. I clienti insolventi
• Sceglierebbe Hippi per soddisfare un cliente che ha richiesto un pacchetto completo di
grafica coordinata e presenza online e non sa a chi rivolgersi per la parte online. Inoltre
intravede la possibilità di arrangiarsi e di rivendere personalmente il servizio di sviluppo
sito web al cliente finale, marginando su questo servizio, tanto ha tempo di farlo
• Sentirebbe parlare di noi su tutorial online (video e articoli); gruppi di freelancer affini su
facebook
• Hippi lo può aiutare perché gli permetterebbe di offrire un servizio in più e che tutti i
clienti gli chiedono senza avere conoscenze tecniche. In passato ha già provato ad
arrangiarsi e sa che non è per nulla semplice cavarsela da solo, ha perso un sacco di
tempo a configurare il tutto e alla fine è venuto fuori un mezzo casino, con conseguente
cliente che continua a lamentarsi tutt'oggi della lentezza del sito web e del fatto che
nessuno lo trova su Google. Noi togliamo dall'equazione la necessità di un tecnico, dovrà
solamente scrivere i contenuti e caricare le immagini.
STEFANO
Freelancer – Web Designer
• 31 anni
• Fidanzato
• In affitto/Mutuo
• Vive in città di provincia/area metropolitana
• Reddito annuo €15.000 - 23.000
• Budget a disposizione €600 - €900
• Vota centro-sinistra
• Veste casual, mono-cromatico
• Stima agenzie e professionisti che hanno ricevuto awwwards e riconoscimenti
• Il suo obiettivo è ottenere la libertà finanziaria attraverso il proprio talento, non vuole
avere orari e non vuole arrivare con fatica a fine mese. Vuole la libertà lavorativa ed
economia
• Riceve approvazione da il cliente e i colleghi
• Ha paura di vedere che il suo lavoro viene stravolto dal cliente una volta consegnato,
oppure trovarsi una fattura insoluta per un progetto a cui ha dedicato molto tempo,
pazienza, energie e creatività
• Sceglierebbe Hippi per provare un servizio che promette di accorciare i tempi di sviluppo
del sito web. Fino ad oggi se ne è occupato lui, un po' a tentoni installando quasi a caso
plugin e moduli, ma c'è quasi sempre riuscito anche se in maniera precaria ma soprattutto
instabile. Vorrebbe delegare a qualcun altro le task tecniche, ma non può permetterselo
dati i budget dei clienti, spera che con Hippi possa farcela
• Sentirebbe parlare di noi su Tutorial online (video ma soprattutto articoli); gruppi di
freelancer affini; eventi di networking
• Hippi lo può aiutare perchè gli permetterebbe di risparmiare sui tempi di sviluppo, non
dovendo creare staging, vagliare temi, creare le pagine, selezionare e testare i plugin,
ottimizzarlo per velocità e sicurezza, oltre alla messa online che con Hippi avviene
direttamente. Inoltre non dovrebbe rimanere aggiornato sugli sviluppi tecnologici che
coinvolgono il back-end e il telaio dei CMS, potrà concentrarsi finalmente solo sul
front-end. Con Hippi può inoltre offrire nuovi servizi che prima erano costosi da
mantenere ma soprattutto erano difficili da erogare (aggiornamento e/o manutenzione,
server, email, domini).
VITTORIO
Imprenditore creativo
• 29 anni
• Fidanzato
• Affitto
• Vive in area metropolitana
• Reddito annuo €18.000 - €22.000
• Budget a disposizione €1.200 - €1.500
• Vota centro-destra
• Veste casual o formale, sempre in ordine
• Stima il leader di mercato
• Il suo obiettivo è stabilità finanziaria per l'azienda e la possibilità di poter vedere
realizzate le proprie idee e visioni senza limiti di risorse (tempo e denaro)
• Riceve approvazione da i clienti, i bilanci a fine anno e i dipendenti
• Ha paura di un cliente insoddisfatto che gli fa cattiva pubblicità oppure l'impossibilità di
pagare fornitori, dipendenti e Stato alla fine del mese
• Sceglierebbe Hippi per costruire attraverso Hippi la presenza online della sua azienda.
Sarebbe motivato ad usare Hippi invece delle agenzie tradizionali per il mix perfetto di
costo e benefici. Pur di risparmiare è disposto a lavorare fuori orario di ufficio, il tempo è
sempre poco ma piuttosto che pagare qualcuno ci si mette lui a caricare i contenuti nei
weekend
• Sentirebbe parlare di noi su ricerca su Google; tutorial online (video e articoli)
• Hippi lo potrebbe aiutare perché gli permetterebbe di potersi arrangiare e creare il
proprio sito web senza avere conoscenze tecniche. Ha letto e visto un po' di tutorial ma
non riesce a venirne a capo sull'hosting e le installazioni del CMS. Non riesce a capire la
relazione tra uno e l'altro, tra i domini, le mail, il server, il sito ecc. Vuole arrangiarsi ma ha
bisogno di una mano. Hippi è la soluzione più adatta. Noi togliamo dall'equazione la
necessità di pagare un freelancer, dovrà solamente scrivere i contenuti e caricare le
immagini quando ha tempo.
Millennials - Analisi generazionale e caratteristiche uniche
Tutti i nostri buyer personas rientrano nella demografica Millennials.
Di conseguenza è necessario approfondire le caratteristiche e le abitudini che li rendono unici
rispetto alle altre generazioni di consumatori, cosi da poter studiare un piano marketing che li
spinga dal profondo.
• Sono collaborativi e fortemente influenzati dai coetanei
Se paragonati alle generazioni precedenti, i Millennials sono particolarmente
collaborativi e influenzati da coetanei e colleghi. Per consigli su come fare/cosa
acquistare si rivolgono a Internet, dove a loro volta condividono le loro esperienze.
I Millennials selezionano e consumano prodotti che li aiutano a definire la loro
identità (chi sono?), le loro priorità (cos’è importante per me?) e i valori (cos’è
importante nella vita?). La definizione di questi aspetti, tramite il consumo, li aiuta ad
esprimere la loro personalità o la loro immagine.
Sfruttano la loro vasta conoscenza delle ultime tendenze, dei look, della reputazione
delle aziende, dei prodotti e dei brand per essere considerati leader o esperti nel loro
cerchio di coetanei, amici e colleghi. Hanno un forte desiderio di fare la scelta
migliore non solo in termini di qualità/prezzo ma anche in termini di investimento per
il futuro.
Modello decisionale dei Millennials paragonati ai Baby Boomers
MILLENNIALS BABY BOOMERS
Mercato con molte opportunità Un‘opportunità e fonte di Piuttosto frustrante
ispirazione
Vasta disponibilità di informazioni Sa come navigarla Stressante, richiede tempo
Criterio d‘acquisto prevalente Emotivo Razionale
Rischio maggiore Sociale Fisico ed economico
Scelta del prodotto Emotiva Razionale
Scelta del brand Razionale Emotiva
Fedeltà al brand Bassa Alta
Prodotti attraenti Innovativi, early adoption Maturi, late adoption
Pressione sociale nelle decisioni Alta Limitata
d‘acquisto
Fonte della pressione sociale Persone influenti Esperti e amici stretti
(influencer) e famose, amici
Ruolo principale dei brand Immagine, status sociale e Qualità
qualità
• Vivono sugli smartphone
Il 100% degli Americani tra i 18 e i 29 anni possiedono un telefono e il 94% di loro
possiede uno smartphone. Il traffico mobile rappresenta la porta principale per
raggiungere i consumatori Millennials.
Anche il coinvolgimento dei Millennials nei confronti del loro smartphone è degno di
nota: 4 Millennials su 10 affermano di interagire di più con il proprio telefono che con
persone reali; e oltre i ¾ dei Millennials trascorrono una media di più di due ore al
giorno sul loro smartphone.
• Amano viaggiare
Oltre alla loro voglia di condividere, i Millennials si distinguono dalle generazioni
precedenti per la loro voglia di viaggiare. Secondo uno studio della Nielsen i
Millennials viaggiano più di ogni altra generazione. In un sondaggio il 70% dei
Millennials era d’accordo che “Visitare nella mia vita ogni continente sarebbe un
traguardo ed è qualcosa che mi piacerebbe fare”.
Nel 2025 i Millennials comporranno il 75% della forza lavoro. Anche se molti
Millennials sono già attivi nel mondo del lavoro, trovano il tempo per viaggiare. Al
contrario, membri della Generazione X (quella precedente) che andranno
progressivamente in pensione con conseguente aumento del tempo libero,
viaggiano meno.
• Sono concentrati sul benessere
In aggiunta al viaggiare, i Millennials sono fanatici del benessere. Il 60% si allena
regolarmente e il 73% afferma che l’aspetto fisico sia importante per loro. I
Millennials inoltre fumano meno, si allenano di più e mangiano più sano di ogni altra
generazione precedente.
Questo interesse si riflette nelle loro abitudini di acquisto. Goldman Sachs ha
monitorato questo comportamento tra il 2008 e il 2013 e ha scoperto che al
diminuire della spesa per abbigliamento e calzature, corrispondeva un aumento
della spesa per abbigliamento sportivo e calzature sportive.
• Danno priorità assoluta agli sconti
I Millennials sono consumatori incredibilmente esperti e astuti. Anche se oltre
due-terzi preferiscono acquistare online, molti decidono di ricercare e confrontare i
prodotti che stanno guardando di persona con ciò che trovano online. Il desiderio dei
Millennials di pagare meno per un prodotto supera la loro fedeltà verso un brand. In
un sondaggio, il 60% dei Millennials afferma di essere disposto a comprare un
marchio generico in offerta rispetto al brand che di solito acquistano. Inoltre, il 56%
dice ti essere disposto a cambiare brand per usare un coupon.
La mancanza di fedeltà nei brand da parte dei Millennials rappresenta una sfida per
le aziende, soprattutto ora che più Millennials si uniscono alla forza lavoro, con
conseguente aumento del loro reddito disponibile.
Per comprendere a fondo la psicologia dietro alla brand loyalty (fedeltà nel brand
ndt), consiglio la lettura dell’allegato “Millennial (Gen Y) Consumer Behavior, Their
Shopping Preferences and Perceptual Maps Associated With Brand Loyalty”. Le parti
più interessanti sono evidenziate.
• Comprendono che le pubblicità hanno uno scopo
Il 79% dei Millennials comprendono che le pubblicità sono necessarie affinchè i brand
informino il pubblico e il 46% di loro non è infastidito dalle pubblicità. Al contrario,
solo il 39% degli over 36 (Generazione X) dice di non esserne infastidito (Δ = -7%). La
quota di Millennials non infastidita dalle pubblicità aumenta al 75% se il contenuto
che stanno guardando è gratuito. Al 58% di loro non dispiace guardare una pubblicità
se serve a supportare il loro Youtuber preferito. Chiaramente questa tolleranza
dipende dal tipo di formato pubblicitario a cui sono sottoposti:
• 80% dei Millennials preferisce le pubblicità pre-roll (riprodotto automaticamente
prima di un video) della durata di 15 secondi;
• 53% tollerano pubblicità da 1 minuto;
• 87% approva il product placement, come i video sponsorizzati su Youtube (e.g.
unboxing) o le video dimostrazioni (e.g. recensioni). L’importante è che siano
divertenti, utili e che includano personalità autentiche e genuine.
Per questi motivi, pubblicizzare il nostro brand ai Millennials potrebbe essere più
facile che per altre generazioni.
Le statistiche appena presentate prendono in analisi la volontà o meno di guardare
una pubblicità, non di comprare un determinato prodotto o servizio come
conseguenza della pubblicità appena vista. Solo il 6% dei Millennials pensa che la
pubblicità online sia efficace.
In queste dinamiche possiamo concludere che per i Millennials le pubblicità online
servano solo alla brand awareness, mentre l’influencer marketing è la chiave delle
conversioni.
• 1 su 3 blocca le pubblicità
I Millennials si rivolgono agli ad blocker per combattere le sempre più invadenti
pubblicità online. Poco più di 1 Millennials su 3 utilizza almeno un ad blocker su
mobile o desktop e il 14% usa un ad blocker sia su mobile che desktop.
Anche se i Millennials tollerano le pubblicità, questi consumatori danno un forte
valore all’autenticità. Per questo gli ad blocker sono utilizzati per filtrare quelle
pubblicità che non sono ritenute autentiche e originali.
Dobbiamo spostarci dai tradizionali canali pubblicitari, anche quelli online, in favore
di strategie di marketing che diano valore ai Millennials, come per esempio
l’influencer marketing.
• Hanno sempre a portata un secondo schermo
Il 68% dei Millennials utilizza uno schermo secondario durante la visione di un
programma in TV. Uno schermo secondario è un dispositivo secondario che lo
spettatore utilizza in contemporanea alla visione del programma, come tablet,
laptop, smartphone, e-reader o dispositivi per il gaming.
La diffusione dei dispositivi mobile, soprattutto degli smartphone, ha fatto si che le
esperienze visive siano cambiate completamente. L’attenzione degli spettatori, e
quindi dei consumatori Millennials, è ora divisa tra più piattaforme.
Il second screen advertising è una sfida e una opportunità, sicuramente è un canale
che ha senso esplorare in futuro.
• Acquistano spontaneamente ciò che vedono sui social media
Il 57% dei Millennials afferma di aver fatto un acquisto non-programmato come
conseguenza dell’aver visto qualcosa nel loro feed sui social media. Il 55% dei
Millennials afferma di aver provato la “FOMO” – Fear Of Missing Out (paura di essere
tagliati fuori ndt). Per i Millennials i social network sono una componente
fondamentale della modello decisionale di acquisto, perchè ritenuti una fonte
primaria di informazioni. Per esempio, l’88% dei Millennials riceve le notizie da
Facebook e il 67% di loro crede di poter imparare qualsiasi cosa su YouTube. Inoltre,
il 33% dei Millennials afferma di essere propenso ad acquistare un prodotto che ha
visto in un video tutorial su YouTube.
• Entro il 2020 rappresenteranno la generazione con il maggiore potere d’acquisto
Secondo il Pew Research Center, entro il 2020 i Millennials rappresenteranno la
generazione più numerosa e con il maggiore potere d’acquisto. Negli USA, i
consumatori Millennials sono 92 milioni (su 327 milioni di persone, il 28% della
popolazione), con una spesa complessiva al 2018 di $600 miliardi e si stima che
questa possa salire a $1,4 bilioni ($1.400.000.000.000) entro il 2020, rappresentando
cosi il 30% delle vendite totali.
• Si aspettano un’esperienza d’acquisto integrata
Il 68% dei Millennials si aspetta che i brand gli diano la possibilità di consumare su
ogni piattaforma, fisica o digitale. Questo significa creare un processo di acquisto che
permetta ai Millennials una transizione fluida da una pubblicità su smartphone
all’e-commerce o al negozio fisico, e viceversa.
• Per i video preferiscono le piattaforme digitali
I Millennials consumano più video e media digitali di qualsiasi altra generazione. Il
35% di loro preferisce farlo su YouTube, quasi il doppio di quel 19% di Millennials che
preferisce ancora consumare video sulla TV tradizionale. Più in generale, su YouTube
i Millennials trovano più interessante qualsiasi contenuto rispetto agli over 36.
I Millennials stanno adottando un approccio digitale per la scoperta di nuovi
contenuti video, il che ci suggerisce che le piattaforme digitali video saranno sempre
più rilevanti in una strategia di marketing rivolta a loro.
• Sono tutti sui social
I social media sono la chiave di come i Millennials interagiscono tra loro e di come
elaborano le informazioni. Il 90% dei Millennials tra i 18 e i 29 anni è sui social media.
Ancora più impressionante della loro presenza sui social media, è il loro
coinvolgimento. Per esempio, i Millennials trascorrono una media di 15 minuti nel
redarre e modificare un singolo contenuto (e.g. post, immagine, tweet) e il 42% di loro
ricontrolla che le informazioni sui social media siano precise e veritiere.
• Molti preferiscono gli influencer agli amici
Il 40% dei Millennials si relaziona e si immedesima di più con gli influencer online che
con i propri amici.
Il marketing tradizionale sfruttava VIP e celebrità come volto per le proprie
campagne, allo scopo di creare un rapporto tra il brand e il pubblico. Con
l’avvenimento dei social media è arrivata l’ascesa delle social media stars, aka
influencers. Oggi gli influencers sono le vere icone pop dei Millennials, lodati per la
loro autenticità e per la loro capacità di relazionarsi con il pubblico.
Nella community YouTube, il 70% dei teenager Millennials preferisce gli YouTube
creator rispetto alle celebrità tradizionali.
Queste statistiche sono forti indicatori del posizionamento della fiducia e
dell’attenzione di questa generazione.4. Linee guida verbali Alcuni consigli su come scrivere copy e creare contenuti sulle varie piattaforme e come essere percepiti dall’utente: Blog posts: • Rendiamoci utili • Aiutiamolo • Insegniamogli • Diamogli del tu • Non facciamogli perdere tempo • Nessuna supercazzola Social media: • Siamo informali • Suoniamo sinceri • Suoniamo rassicuranti • Suoniamo ambiziosi • Non sforziamoci troppo • Nessuna supercazzola
5. Linee guida grafiche
Controllo ortografico:
quando viene scritto su testo, su carta oppure online, il brand Hippi si scrive sempre con
la prima lettera maiuscola.
Si scrive Hippi, mai hippi e neppure HIPPI.
Logo - wordmark:
La forma, le proporzioni, il colore o l'orientamento dei loghi non devono essere mai
modificati. Assicuriamoci che ci sia almeno tanto padding quanto gli esempi forniti qui
sopra, questo aiuta il nostro logo ad apparire pulito e in ordine.
Dove possibile, dovremo sempre utilizzare il logo in bianco e nero, anche in reverse (logo
bianco su sfondo nero). In rari casi in cui il marchio non risulti leggibile in bianco e nero,
potrà essere utilizzata una versione alternativa con sfondo a scelta tra: bright pink, light
yellow e strong cyan.
Wordmark • Minimum Clearspace
½y ½y
½y ½y
Wordmark • Minimum sizes Wordmark • Dont‘s
Non alterare il logo
25 mm
Non variare il font
20 mm
Rispettare le proporzioni
15 mm
Wordmark • Applicazioni su sfondo
Bright Pink Light Yellow Strong Cyan
Hex: F02D8E Hex: FFEE3A Hex: 00C2D3
Pantone: 213 C Pantone: 106 C Pantone: 3115 C
Web: R 240 G 45 B 130 Web: R 255 G 238 B 58 Web: R 0 G 194 B 211
Print: C 0 M 93,4 Y 14,3 K 0 Print: C 2,75 M 0,61 Y 87,24 K 0 Print: C 69,28 M 0 Y 18,93 K 0
Wordmark • Variante sfumatura
45°
0% 45% 100%
Bright Pink Light Red Light Yellow
Logo - monogram:
Il monogramma è il formato ridotto del nostro wordmark.
Può essere utilizzato esclusivamente nel caso in cui il wordmark risulti troppo piccolo per
ottenere il massimo impatto visivo.
Monogram • Minimum clearspace
½x ½x
½x ½x
Monogram • Minimum sizes Monogram • Dont‘s
Non alterare il logo
6 mm
Non variare il font
4 mm
Rispettare le proporzioni
2 mm
Monogram • Applicazioni su sfondo
Tipografia - font pairing (combinazioni):
Font primario: Ava nt Ga r d e Got hi c S t d
Book
ABCDEFGHIJKLMNOP
QRSTUVWXYZ
abcdefghijklmnopq
rstuvwxyz
Font secondario: N e u z e i t G ro t es k
Regular
A B C D E F G H I J K L M N O P Q
R ST U V W X Y Z
a b c d e f g h i j k l m n o p q r s
t uv w x y z
Fallback: Open Sans Helvetica Calibri sans-serif
Colori:
Hex: F02D8E
Pantone: 213 C
BRIGHT PINK Web: R 240 G 45 B 130
Print: C 0 M 93,4 Y 14,3 K 0
Utilizzo: testi in evidenza, cta, elementi, sfumatura, logo, sfondo logo
Hex: FF8965
Pantone: 1635 C
LIGHT RED Web: R 255 G 137 B 101
Print: C 0 M 57,53 Y 59,91 K 0
Utilizzo: elementi, sfumatura
Hex: FFEE3A
Pantone: 106 C
LIGHT YELLOW Web: R 255 G 238 B 58
Print: C 2,75 M 0,61 Y 87,24 K 0
Utilizzo: elementi, sfumatura, sfondo logo
Hex: 00C2D3
Pantone: 3115 C
STRONG CYAN Web: R 0 G 194 B 211
Print: C 69,28 M 0 Y 18,93 K 0
Utilizzo: testi in evidenza, elementi, sfondo logo
Hex: 0E143A
Pantone: 2768 C
VERY DARK BLUE Web: R 14 G 20 B 58
Print: C 99,39 M 93,08 Y 43,3 K 54,91
Utilizzo: link, elementi
Hex: 333333
Pantone: 2768 C
VERY DARK GRAY Web: R 14 G 20 B 58
Print: C 99,39 M 93,08 Y 43,3 K 54,91
Utilizzo: testo, elementi, logo (colore preferibile al nero)
Hex: EEEEEE
Pantone: 2768 C
VERY LIGHT GRAY Web: R 14 G 20 B 58
Print: C 99,39 M 93,08 Y 43,3 K 54,91
Utilizzo: elementi (separatori), logo (colore alternativo al bianco)
Colori: Bright Pink (posizione 0%)
Light Red (posizione 45%)
GRADIENT Light Yellow (posizione 100%)
Incl.: 45°
Utilizzo: cta, elementi, logo6. Linee guida web
Web elements / UI
• Iconografia intuitiva
• In Italiano
• Nessuna decorazione
Calls to action:
• Dialoghiamoci
• Invitiamolo
• Non insistiamo
Elementi • CTA
Call To Action Normal Call To Action Normal
Primary Footer
Call To Action Hover Call To Action Hover
Call To Action Normal Call To Action Normal
Sticky Header Header
Call To Action Hover Call To Action Hover
Raggio CTA: 5px
Elementi • Balloon Elementi • Box
Lorem ipsum
Lorem ipsum
Lorem Lorem
ipsum ipsum
Lorem ipsum
dolor sit amet
Classi CSS
Tipografia (font-size base: 15px)
• Body: • H3:
font-family: Neuzeit Grotesk Regular; font-family: Neuzeit Grotesk Regular;
font-size: 1,4rem; font-size: 2,2rem;
line-height: 1,2em; color: #F54A81;
color: #333333;
• H4:
• Link: font-family: Neuzeit Grotesk Regular;
text-decoration: underline; font-size: 1,8rem;
:hover color: #F54A81;
color: #0E143A; • H5:
• H1: font-family: Neuzeit Grotesk Regular;
font-size: 1,4rem;
font-family: Avant-Garde STD Book;
font-size: 4rem; color: #F54A81;
color: #F54A81;
• H6:
• H2: font-family: Neuzeit Grotesk Regular;
font-family: Avant-Garde STD Book; font-size: 1,4rem;
font-size: 2,5rem; color: #00C2D3;
color: #333333;
Altre classi
Separatore animato CTA gradiente + animazione hover
.hippi-animated-line { .gradient-button a {
width: 15%; background:
height: 7px; -moz-linear-gradient
margin: -15px 0 35px 0; (-45deg, #f02d82 0%, #ff8965 55%,
border-radius: 15px; #ffee3a 100%);
background: linear-gradient background:
(-45deg, #ffee3a, #ff8965, #f02d82); -webkit-linear-gradient(-45deg,
background-size: 200% 200%; #f02d82 0%,#ff8965 55%,#ffee3a
animation: gradient 5s ease infinite; 100%);
} background:
@keyframes gradient { linear-gradient(135deg, #f02d82
0% {background-position: 0% 50%;} 0%,#ff8965 55%,#ffee3a 100%);
50% {background-position: filter: progid:
100% 50%;} DXImageTransform.Microsoft.gra-
dient( startColorstr='#f02d82', endCo-
100% {background-position: 0% 50%;}
lorstr='#ffee3a',GradientType=1 );
}
}
Animazione hover CTA bianca .gradient-button a::after {
border-radius: 5px;
.white-button a::after {
position: absolute;
border-radius: 5px; content: '';
position: absolute; top:0;
content: ''; left: 0;
top:0; width: 0;
left: 0; height: 100%;
width: 0; background-color: #f54a81;
height: 100%; transform-origin:left;
background-color: #f54a81; transition:width 0.25s ease;
transform-origin:left; z-index:-1;
transition:width 0.25s ease;
}
z-index:-1;
.gradient-button a:hover::after {
}
width: 100%;
.white-button a:hover::after {
}
width: 100%;
}Puoi anche leggere
