Ranking Freestyle Italia

Costruire l’identità e la piattaforma digitale dietro le classifiche del freestyle italiano.

Ranking Freestyle Italia è un progetto indipendente dedicato alla scena italiana delle battle di freestyle rap. Trasforma i risultati delle battle in classifiche di stagione, statistiche e profili che seguono ogni freestyler nel tempo. Lo seguiamo dal primo logo: identità, primo sito, la piattaforma custom su cui gira oggi, le grafiche che pubblica ogni settimana e gli strumenti che arriveranno.

Settore
Cultura hip-hop, digital media, piattaforma dati
Luogo
Italia
Anno
2025, in corso
Servizi
BrandDesignProdottoSviluppoBrand IdentityUX/UI DesignWeb DesignSviluppo piattaforma customData visualizationGraphic design continuativo
4stagioni di dati su ogni profilo, dal 2023 al 2026, compresi gli anni senza classifica
9colonne di dati per ogni freestyler nella classifica di stagione
2piattaforme nel tempo: prima un sito su CMS, oggi un prodotto custom
La sfida

Dare struttura a una scena culturale in evoluzione.

La scena freestyle italiana è fatta di battle, artisti, crew e organizzatori sparsi sul territorio. I risultati raccontavano il percorso di ogni artista, ma vivevano in video, post e memoria, senza una struttura condivisa per raccoglierli e confrontarli.

Ranking aveva bisogno di un’identità riconoscibile dalla cultura, di interfacce che rendessero leggibili numeri complessi, di una piattaforma capace di crescere con il progetto e di un sistema di comunicazione al passo con una stagione di risultati settimanali.

Approccio

Quattro pilastri, un unico ecosistema.

Identità, dati, prodotto e comunicazione crescono insieme.

  1. 01Un’identità riconoscibileBold, competitiva, fatta per la cultura.
  2. 02Dati leggibiliClassifiche, turni e punti che chiunque può seguire.
  3. 03Un prodotto che scalaDa un sito su CMS a una piattaforma custom.
  4. 04Un sistema di comunicazioneGrafiche al passo con la stagione.
Cosa abbiamo fatto

Un progetto, passo dopo passo

Brand

Brand identity

Un’identità fatta per distinguersi, e per reggere i numeri.

1.1Il marchio e i coloriUna R decisa in un sigillo giallo, con la corona e “Ranking Freestyle Italia” lungo il bordo. Giallo su blu notte, la stessa coppia sul sito, nelle classifiche e in ogni grafica.
Ranking yellow#FAE17ENight navy#1F2632Ink#11151CPaper#FFFFFF
1.2Una voce condensata per nomi e numeriTipografia condensata in maiuscolo per nomi, titoli e punti: forte come un poster di battle, abbastanza compatta per una tabella.
1.3Grafiche che non si fermanoRanking news, aggiornamenti delle giornate e tributi: l’identità continua a vivere come un flusso settimanale di grafiche per sito e social.
Brand

Comunicazione editoriale

Grafiche a supporto del progetto editoriale, settimana dopo settimana.

2.1Format ricorrentiRanking News per le novità della piattaforma, Ranking Rewind per le storie della scena, con serie in più episodi come “Inside Joke, parte 01”. Ogni format ha la sua etichetta, così il pubblico lo riconosce prima ancora di leggere.
2.2Un sistema, tante storieSempre gli stessi elementi: il sigillo R, la corona, il titolo condensato in giallo e bianco, il pattern RANKING sfumato e l’indirizzo del sito in basso. Cambiano foto e storie, il brand resta riconoscibile.
2.3Dal post alla piattaformaOgni grafica porta a rankingita.com: le news mostrano l’interfaccia reale, gli episodi Rewind portano al blog e ai profili dei freestyler. Comunicazione e prodotto si alimentano a vicenda.
Prodotto

Evoluzione della piattaforma

Da un sito a un prodotto digitale su misura.

3.1Versione 01, su CMSProgettata in Webflow, convertita con Udesly e gestita in WordPress: classifiche, profili e contenuti degli eventi sono andati online, e la struttura dei dati è stata validata.
3.2Versione 02, piattaforma customCon la crescita di stagioni, storico e statistiche, il prodotto è passato a un’architettura propria. Non una correzione della prima versione: la tecnologia è cambiata per adattarsi al prodotto.
Sviluppo

UX/UI data-driven

Far contare ogni risultato.

4.1Un profilo che racconta una carrieraBio, classe, città e bilancio in alto, poi le schede delle stagioni dal 2023 al 2026, e un link per suggerire modifiche alla community.
4.2Testa a testa, battle per battleAvversario più affrontato, bestia nera, bonus costanza, e ogni scontro con evento, turno, anno, link al video ed etichetta vinto o perso.
4.3Pensata per lo smartphoneSu mobile le barre laterali diventano un unico menu, le card scorrono in orizzontale e la tabella tiene le colonne che contano.
4.4Oltre la stagioneUna classifica perpetua che somma tutti gli anni, con barre per leggere i distacchi a colpo d’occhio, e un blog che racconta le storie dietro i numeri.
Funzionalità chiaveSistema di interfacciaPiattaforma custom

Un layout, tre stati. Lo spazio va ai dati.

La piattaforma funziona come un’app: navigazione a sinistra, la stagione al centro, news, newsletter e community a destra. Entrambe le barre laterali si aprono e si chiudono.

Quando una barra si chiude, la tabella non si allarga soltanto: guadagna colonne. Con tutto aperto mostra l’essenziale; con più spazio aggiunge media, TDS e punti rookie.

  1. 01Barra sinistraNavigazioneEtichette complete, o una barra sottile di icone.EspansaSolo icone
  2. 02CentroLa stagioneCard, primi freestyler e la tabella, che adatta le colonne.Cnt · T.v. · 2° · 1° · SFMedia · TDS · Rookie
  3. 03Barra destraCommunityNews, newsletter, collabora, social.ApertaChiusa
AEntrambe le barre aperte
Tutto in vista: la tabella tiene le colonne principali.
BNavigazione chiusa
La barra sinistra diventa di icone, e compare “Media”.
CBarra community chiusa
Più spazio alla stagione: TDS e punti rookie entrano in tabella.
Timeline

Dal primo logo a quello che verrà

  1. 2025Brand identity e prima piattaformaL’identità visiva, poi un sito Webflow, Udesly e WordPress con classifiche, profili e risultati.
  2. 2025 al 2026Un sistema statistico più profondoClassifiche annuali, storico, artisti non classificati, risultati dei singoli contest e fasce degli eventi.
  3. 2026Piattaforma customIl passaggio dal CMS a un prodotto su misura.
  4. 2026Graphic design continuativoComunicazione settimanale per la stagione, la scena e i partner.
  5. Ott 2026Generatore di grafiche, in sviluppoLa creazione grafica dentro la piattaforma.
Risultati

Più di un sito. Un brand e un prodotto digitale costruiti per evolvere.

  1. 01Un’identità che funziona sul sito, nelle classifiche e sui social.
  2. 02Classifiche di stagione e perpetua, profili e storico degli scontri leggibili da chiunque.
  3. 03Una piattaforma custom con layout adattivo, pronta per nuovi strumenti.
  4. 04Un flusso settimanale di grafiche, e un generatore in arrivo.
Guardalo dal vivorankingita.comvisita il sito
In corso

Non un lancio. Un’evoluzione continua.

Dai dati al design: il prossimo capitolo porta la creazione grafica dentro la piattaforma, vicino ai dati che comunica. Presentato come direzione, non come funzionalità concluse.

ProdottoIn sviluppoGeneratore di grafiche integratoDati della piattaforma, poi un sistema di composizione visiva, poi grafiche coerenti con l’identità Ranking. Avvicinare database, design system e produzione di contenuti.
BrandContinuativoGraphic design continuativoAggiornamenti della classifica, risultati delle giornate, grafiche per gli artisti, contenuti per eventi e presentazioni per partner.
Prossimo progettoEl MichiPiù di un ristorante vegano. Una casa digitale per cucina, community, coworking ed eventi.leggi il case study
Inizia un progetto

Raccontaci dove vuoi arrivare.

Ti aiutiamo a trovare l'approccio giusto. Si parte da una domanda.

Di cosa hai bisogno? Scegline quante vuoi, o nessuna.
{{ p.name }}{{ p.name }}

{{ p.hA }} {{ p.hB }}

{{ p.lede }}

{{ U.industry }}
{{ p.industry }}
{{ U.location }}
{{ p.location }}
{{ U.year }}
{{ p.year }}
{{ U.client }}
{{ p.url }}
{{ U.services }}
{{ t.name }}{{ x.s }}
[IMAGE] {{ hero.cap }}
[IMAGE] {{ hero.cap }}[IMAGE] Mobile
{{ f.n }}{{ f.l }}
{{ U.chalEb }}

{{ p.chalH }}

{{ c.t }}
{{ U.apprEb }}

{{ appr.h }}

{{ appr.p }}

  1. {{ pr.n }}{{ pr.t }}{{ pr.p }}
{{ U.cinEb }}

{{ cin.h }} {{ cin.sub }}

{{ cp.t }}

{{ cin.url }}
{{ cin.recCap }}{{ cin.recNote }}
{{ cin.sbEb }}

{{ cin.sbH }}

{{ cin.sbP }}

  1. {{ fr.n }}{{ fr.t }}{{ fr.p }}
{{ cin.veoEb }}

{{ cin.veoH }}

{{ cin.veoP }}

  1. {{ vs.n }}{{ vs.t }}{{ vs.who }}{{ vs.p }}
  2. {{ cin.veoNote }}
{{ cin.syEb }}

{{ cin.syH }} {{ cin.sySub }}

{{ cin.syP }}

{{ ch.n }}{{ ch.t }}
{{ U.scrubLive }} · {{ cin.pctTxt }}
{{ cin.syNote }}
  1. {{ cc.n }}{{ cc.t }}{{ cc.p }}
{{ cin.lnEb }}

{{ cin.lnH }}

{{ cin.lnP }}

  1. {{ ls.n }}{{ ls.t }}{{ ls.p }}
{{ U.baEb }}

{{ ba.h }}

{{ ba.p }}

{{ U.before }}{{ ba.beforeWhen }}
{{ bi.cap }}
{{ U.after }}{{ ba.afterWhen }}
{{ ai.cap }}
{{ U.didEb }}

{{ U.didH }}

{{ c.terrName }}

{{ c.title }}

{{ c.intro }}

{{ st.num }}{{ st.t }}{{ st.p }}
[IMAGE] {{ st.a.cap }}[IMAGE] {{ st.a.cap }}[IMAGE] {{ st.b.cap }}[IMAGE] {{ st.a.cap }}[IMAGE] {{ st.b.cap }}[IMAGE] {{ st.c.cap }}[IMAGE] {{ st.a.cap }}[IMAGE] {{ st.b.cap }}{{ c.n }}{{ c.h }}Aa{{ p.typeName }}ABCDEFGHIJKLM abcdefghijklm 0123456789
{{ U.featEb }}{{ tg.t }}

{{ ft.h }} {{ ft.sub }}

{{ fp.t }}

  1. {{ fl.n }}{{ fl.site }}{{ fl.t }}{{ fl.p }}{{ fd.f }}
{{ sh.k }}{{ sh.label }}
{{ sh.note }}
{{ U.tlEb }}

{{ tlH }}

  1. {{ ph.when }}{{ ph.t }}{{ ph.p }}
    2.
{{ U.resEb }}

{{ resH }}

  1. {{ r.num }}{{ r.r }}
    2.
{{ U.quoteEb }}
{{ quote.text }}
[C]{{ quote.who }}{{ quote.role }}
{{ U.liveEb }}{{ p.url }}{{ U.visit }}
{{ U.ongEb }}

{{ ong.h }}

{{ ong.p }}

{{ og.terr }}{{ og.status }}{{ og.t }}{{ og.p }}
{{ U.nextEb }}{{ next.name }}{{ next.hA }} {{ next.hB }}{{ U.readCase }} [IMAGE] {{ next.cap }}
{{ U.moreEb }}{{ U.allWork }}
{{ tx.eb_start }}

{{ tx.start_h }}

{{ tx.start_lede }}

{{ tx.need_q }} {{ tx.need_hint }}
{{ cta }} {{ tx.or_write }} hello@beeasydesign.com