Ranking Freestyle Italia

Construir la identidad y la plataforma digital detrás de los rankings del freestyle italiano.

Ranking Freestyle Italia es un proyecto independiente dedicado a la escena italiana de batallas de freestyle. Convierte los resultados de las batallas en rankings de temporada, estadísticas y perfiles que siguen a cada freestyler en el tiempo. Lo acompañamos desde el primer logo: identidad, la primera web, la plataforma a medida en la que funciona hoy, las gráficas que publica cada semana y las herramientas que vienen.

Sector
Cultura hip-hop, medios digitales, plataforma de datos
Ubicación
Italia
Año
2025, en curso
Servicios
MarcaDiseñoProductoDesarrolloIdentidad de MarcaDiseño UX/UIDiseño WebDesarrollo de plataforma a medidaVisualización de datosDiseño gráfico continuo
4temporadas de datos en cada perfil, de 2023 a 2026, incluidos los años sin clasificar
9columnas de datos por freestyler en la tabla de temporada
2plataformas en el tiempo: primero una web con CMS, hoy un producto a medida
El reto

Dar estructura a una escena cultural en evolución.

La escena del freestyle italiano está hecha de batallas, artistas, crews y organizadores repartidos por todo el país. Los resultados contaban la historia de cada artista, pero vivían en vídeos, posts y memoria, sin una estructura común para recogerlos y compararlos.

Ranking necesitaba una identidad que la cultura reconociera, interfaces que hicieran legibles números densos, una plataforma capaz de crecer con el proyecto y un sistema de comunicación a la altura de una temporada de resultados semanales.

Enfoque

Cuatro pilares, un ecosistema.

Identidad, datos, producto y comunicación crecen juntos.

  1. 01Una identidad reconocibleBold, competitiva, hecha para la cultura.
  2. 02Datos legiblesRankings, rondas y puntos que cualquiera puede seguir.
  3. 03Un producto que escalaDe una web con CMS a una plataforma a medida.
  4. 04Un sistema de comunicaciónGráficas al ritmo de la temporada.
Qué hicimos

Un proyecto, paso a paso

Marca

Identidad de marca

Una identidad hecha para destacar, y para sostener números.

1.1El símbolo y los coloresUna R contundente en un sello amarillo, con corona y “Ranking Freestyle Italia” alrededor. Amarillo sobre azul noche, la misma pareja en la web, en las tablas y en cada gráfica.
Ranking yellow#FAE17ENight navy#1F2632Ink#11151CPaper#FFFFFF
1.2Una voz condensada para nombres y númerosTipografía condensada en mayúsculas para nombres, títulos y puntos: fuerte como un cartel de batalla, compacta para una tabla.
1.3Gráficas que no se detienenRanking news, actualizaciones de jornada y homenajes: la identidad sigue viva como un flujo semanal de gráficas para la web y las redes.
Marca

Comunicación editorial

Gráficas que acompañan el proyecto editorial, semana tras semana.

2.1Formatos recurrentesRanking News para las novedades de la plataforma, Ranking Rewind para las historias de la escena, con series de varios episodios como “Inside Joke, parte 01”. Cada formato tiene su etiqueta, y el público lo reconoce antes de leer.
2.2Un sistema, muchas historiasSiempre las mismas piezas: el sello R, la corona, el titular condensado en amarillo y blanco, el patrón RANKING difuminado y la dirección de la web al pie. Cambian fotos e historias, la marca se reconoce.
2.3Del post de vuelta a la plataformaCada gráfica lleva a rankingita.com: las news muestran la interfaz real, los episodios Rewind llevan al blog y a los perfiles. Comunicación y producto se alimentan.
Producto

Evolución de la plataforma

De una web a un producto digital a medida.

3.1Versión 01, con CMSDiseñada en Webflow, convertida con Udesly y gestionada en WordPress: rankings, perfiles y contenido de eventos salieron online y la estructura de datos quedó validada.
3.2Versión 02, plataforma a medidaAl crecer temporadas, histórico y estadísticas, el producto pasó a una arquitectura propia. No fue corregir la primera versión: la tecnología cambió para adaptarse al producto.
Desarrollo

UX/UI guiada por datos

Que cada resultado cuente.

4.1Un perfil que cuenta una carreraBio, año, ciudad y balance arriba, luego las pestañas de temporada de 2023 a 2026 y un enlace para sugerir correcciones a la comunidad.
4.2Cara a cara, batalla a batallaRival más enfrentado, “bestia nera”, bonus de constancia y cada enfrentamiento con evento, ronda, año, enlace al vídeo y etiqueta de ganado o perdido.
4.3Pensada para el móvilEn el móvil los laterales se convierten en un solo menú, las cards se deslizan en horizontal y la tabla mantiene las columnas que importan.
4.4Más allá de la temporadaUn ranking histórico que suma todos los años, con barras para leer las distancias de un vistazo, y un blog que cuenta las historias detrás de los números.
Funcionalidad claveSistema de interfazPlataforma a medida

Un layout, tres estados. El espacio va a los datos.

La plataforma funciona como una app: navegación a la izquierda, la temporada en el centro, noticias, newsletter y comunidad a la derecha. Los dos laterales se abren y se cierran.

Cuando un lateral se cierra, la tabla no solo se estira: gana columnas. Con todo abierto muestra lo esencial; con más espacio añade media, TDS y puntos rookie.

  1. 01Lateral izquierdoNavegaciónEtiquetas completas o una barra fina de iconos.ExpandidaSolo iconos
  2. 02CentroLa temporadaCards, mejores freestylers y la tabla, que adapta sus columnas.Cnt · T.v. · 2° · 1° · SFMedia · TDS · Rookie
  3. 03Lateral derechoComunidadNoticias, newsletter, colabora, redes.AbiertoCerrado
ALos dos laterales abiertos
Todo a la vista: la tabla mantiene las columnas principales.
BNavegación plegada
El lateral izquierdo pasa a iconos y aparece “Media”.
CLateral de comunidad cerrado
Más espacio para la temporada: TDS y puntos rookie se suman a la tabla.
Cronología

Del primer logo a lo que viene

  1. 2025Identidad de marca y primera plataformaLa identidad visual y una web en Webflow, Udesly y WordPress con rankings, perfiles y resultados.
  2. 2025 a 2026Un sistema estadístico más profundoRankings de temporada, histórico, artistas sin clasificar, resultados por contest y niveles de eventos.
  3. 2026Plataforma a medidaEl paso del CMS a un producto a medida.
  4. 2026Diseño gráfico continuoComunicación semanal para la temporada, la escena y los partners.
  5. Oct 2026Generador de gráficas, en desarrolloLa creación de gráficas dentro de la plataforma.
Resultados

Más que una web. Una marca y un producto digital hechos para evolucionar.

  1. 01Una identidad que funciona en la web, en las tablas y en redes.
  2. 02Rankings de temporada e históricos, perfiles e historial de enfrentamientos que cualquiera puede leer.
  3. 03Una plataforma a medida con layout adaptativo, lista para nuevas herramientas.
  4. 04Un flujo semanal de gráficas, y un generador en camino.
Míralo en vivorankingita.comvisitar la web
En curso

No un lanzamiento. Una evolución continua.

De los datos al diseño: el próximo capítulo lleva la creación de gráficas dentro de la plataforma, cerca de los datos que comunica. Se muestra como dirección, no como funciones terminadas.

ProductoEn desarrolloGenerador de gráficas integradoDatos de la plataforma, luego un sistema de composición visual, luego gráficas coherentes con la identidad Ranking. Acercar base de datos, design system y producción de contenidos.
MarcaContinuoDiseño gráfico continuoActualizaciones del ranking, resultados de jornada, gráficas de artistas, contenido de eventos y presentaciones para partners.
Siguiente proyectoEl MichiMás que un restaurante vegano. Una casa digital para la comida, la comunidad, el coworking y los eventos.leer el caso
Empieza un proyecto

Cuéntanos adónde quieres llegar.

Te ayudamos a encontrar el enfoque adecuado. Empieza con una pregunta.

¿Qué necesitas? Elige las que quieras, o ninguna.
{{ 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