Io sono
DI FRANCESCO Nolan
Attualmente sono al terzo anno del BUT MMI a Grenoble, in alternanza presso Youtips, dove mi occupo di comunicazione, gestione dei social media e creazione di contenuti. Specializzato in strategia di comunicazione e design dell’esperienza, adoro imparare, sperimentare nuove idee ed esplorare tutto ciò che il digitale può offrire. Non esitare a scoprire i miei migliori progetti !
Studente in alternanza presso Youtips, creatore di contenuti (e anche di caffè)
Portfolio
Un’anteprima dei miei lavori
THE BEAR: Risveglia il tuo istinto selvaggio – UI Design & Prototipazione
Servizi
Design
Collaborazione
Yoan Toran -Nolan DI FRANCESCO
Anno
Dicembre 2025
THE BEAR: Risveglia il tuo istinto selvaggioUI Design & Prototipazione Figma
Come trasformare una forte identità visiva in un'esperienza web fluida?
THE BEAR è un marchio fittizio di birre artigianali radicato nella natura. In questo progetto collaborativo, i ruoli erano ben definiti: l'identità grafica e le illustrazioni sono state realizzate dal mio partner Yoan Toran, mentre io mi sono occupato di tradurre questo universo in un'interfaccia digitale (UI) su Figma.
Ho strutturato il percorso utente per presentare le tre gamme (Brown, Polar, Grizzly), creato il design system web adatto e realizzato la prototipazione ad alta fedeltà per garantire una navigazione immersiva e funzionale. .content a { width: 100%; width: 470px; } .content { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; } }
“Quel rumore che non mi lasciava” – Autofiction Sonora Immersiva
Servizi
Audiovisivo
Collaborazione
Individuale
Anno
Dicembre 2025
Quel rumore che non mi lasciavaAutofiction Sonora — Durata: 2 min
Cammini per strada, le tue cuffie sono il tuo unico rifugio contro il caos urbano. Ma improvvisamente, appare un suono. Minuscolo. Regolare. Impossibile da ignorare.
In questa autofiction immersiva, immergiti nel cuore di un'ossessione sonora. Attraverso un lavoro meticoloso sulla stereofonia e sui filtri di frequenza, il racconto esplora quel confine fragile dove il mondo esterno diventa minaccioso.
Il rumore proviene dalla città o è la tua mente che sta saturando? Un'esperienza breve e intensa sul nostro tentativo, a volte vano, di controllare il nostro ambiente sonoro. .content a { width: 100%; width: 470px; } .content { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; } }
Millia Matcha – Inaugurazione Pop Up (evento)
Servizi
Comunicazione
Collaborazione
Noah F. - Zoé R. - Nolan DF
Anno
Novembre 2025
Con l’arrivo delle festività, immaginiamo un pop-up immersivo per portare l’universo di Miliamatcha nel cuore di Grenoble.
<br><br>
Questo progetto eventistico presenta la creazione completa di uno spazio effimero ideato come un “Christmas Matcha Bar”: scenografia naturale, degustazioni esclusive, atelier partecipativi e animazioni pensate per attirare, sorprendere e coinvolgere il pubblico.
<br><br>
Nel PDF troverai l’intero concept: identità del luogo, budget dettagliato, piano d’azione, scenografia, animazioni e gestione degli imprevisti, il tutto progettato per offrire un’esperienza calorosa, estetica e coerente con l’ADN del marchio.
KeyTrip – Apri le porte del mondo
Servizi
Comunicazione -
Design
Collaborazione
FLOCARD R. - FRAGNOUD N.
- DI FRANCESCO N.
Anno
Dicembre 2025
Quand’è stata l’ultima volta che hai prenotato un viaggio… senza passare ore a confrontare prezzi, esitare, e aprire dieci schede diverse?È proprio da questa frustrazione che è nato KeyTrip. Abbiamo reinventato l’esperienza di viaggio per renderla più semplice, più intuitiva e più umana. Abbiamo realizzato un dossier di concept e un prototipo completo su Figma (wireframe + mockup ad alta fedeltà) per dare vita a una piattaforma tutto-in-uno che centralizza voli, hotel e attività—aggiungendo un tocco unico: la box immersiva, che fa iniziare il viaggio ancora prima della partenza.
Un concept premium pensato per zero stress, 100% emozione. KeyTrip è il viaggio, reinventato.
KeyTrip – Apri le porte del mondo. .content-sae301 a { width: 100%; width: 470px; } .content-sae301 { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; } }
Strategia di comunicazione per l’UT4M (Ultra Tour dei 4 Massicci)
Servizi
Comunicazione
Collaborazione
In un team di 4 persone
Anno
Novembre 2025
Progetto: Strategia di comunicazione per l’UT4M (Ultra Tour dei 4 Massicci)Obiettivo: Ampliare la visibilità dell’UT4M tra gli studenti e il giovane pubblico per attrarre nuovi partecipanti e spettatori.
Nell'ambito di un lavoro di audit e raccomandazioni strategiche, il nostro team ha analizzato la comunicazione attuale dell’evento (social media, stampa, partnership, sito web, azioni sul campo).
Abbiamo poi proposto una strategia volta a modernizzare l'immagine dell’UT4M e a rafforzare la sua presenza nei campus di Grenoble.
Azioni chiave:
– Creazione di un UT4M Campus Day in collaborazione con il BDE STAPS (evento sportivo e festivo).
– Istituzione di un club di studenti ambasciatori per diffondere la comunicazione sui social media.
– Sviluppo di contenuti dinamici: mini-serie YouTube, capsule di consigli, storie partecipative.
Questo progetto ci ha permesso di lavorare su un caso reale, mettendo in pratica le nostre competenze in audit della comunicazione, strategia digitale e gestione di progetti eventi. .content-sae301 a { width: 100%; width: 470px; } .content-sae301 { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; } }
Multimédi’Alpes – Comunicazione dell’evento
Servizi
Comunicazione - Design- Audiovisivo
Collaborazione
In un team di 4 persone
Anno
April 2024
In un gruppo di quattro persone, abbiamo realizzato il dossier di comunicazione del festival Multimédi’Alpes 2024, un evento che valorizza i progetti creativi degli studenti MMI.Il nostro compito era progettare e coordinare l’intera comunicazione dell’evento, dalla strategia alla produzione dei contenuti. Abbiamo condotto interviste a studenti e professori per integrarle nel trailer e nel teaser ufficiale, e sviluppato una campagna digitale con storie e post su Instagram.
Abbiamo inoltre creato la carta grafica per il sito web del festival e un dossier di coordinamento e produzione con le fasi e i bisogni del progetto.
Personalmente, mi sono occupato della gestione dei social media e della redazione dei dossier (comunicazione, coordinamento e produzione). .content-sae301 a { width: 100%; width: 470px; } .content-sae301 { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; } }
PRESTO ONLINE
✈️ Air France Centers – Il Risveglio delle Costellazioni
Servizi
Comunicazione
Collaborazione
FLOCARD R. - FRAGNOUD N.- LAIB M. - DI FRANCESCO N.
Anno
Maggio 2025
In un team di 4 persone, abbiamo ideato una campagna digitale immersiva per accompagnare l’apertura del primo Air France Center a La Villette, un luogo innovativo che unisce viaggio, cultura ed esperienza sensoriale.La nostra missione: modernizzare l’immagine del brand e coinvolgere nuovi pubblici grazie a un dispositivo transmediale. Abbiamo lavorato sul brief del cliente, sull’analisi dei target e dei concorrenti, per poi immaginare un concept creativo federatore – la Carta Celeste Collettiva.
Diffusa su Instagram, TikTok e LinkedIn, la campagna combina storytelling, gamification e contenuti immersivi, con l’obiettivo di creare un forte legame emotivo tra Air France e le sue community.
Un progetto che illustra la nostra capacità di unire ricerca strategica, design narrativo e creazione di contenuti per dare vita a un’esperienza digitale coerente, innovativa e coinvolgente. .content-sae301 a { width: 100%; width: 470px; } .content-sae301 { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; } }
Report sul mestiere di videomaker/fotografo
Servizi
Audiovisivo
Collaborazione
Nolan DI FRANCESCO, ThéoMARTINEZ, Titouan GIGNOUX
Anno
Dicembre 2023
Questo documentario, intitolato “Il Cuore della Macchina da Presa”, è stato un ambizioso progetto universitario incentrato sul ritratto di Arnaud Auria, un professionista di spicco nel settore. Nell’ambito di questo progetto, abbiamo ricoperto diversi ruoli e messo in pratica competenze differenti, che spaziavano dalle riprese video alla conduzione delle interviste, fino al montaggio e alla gestione del suono.Il nostro obiettivo principale era mettere in evidenza la diversità e la profondità di questa professione, mostrando le sfide, le passioni e le competenze che la caratterizzano.https://www.youtube.com/watch?v=405Obj6JZuI&t=2sPer portare a termine questo progetto, abbiamo investito diverse settimane in una pianificazione meticolosa, nelle riprese sul campo e in un’approfondita ricerca. Questi sforzi ci hanno permesso di catturare momenti autentici e raccogliere testimonianze toccanti, offrendo uno sguardo affascinante sulla vita e sul lavoro di Arnaud Auria, così come sul suo impatto nel suo ambito professionale.
Poster web
Servizi
Design
Collaborazione
Individuale
Anno
2023 - 2024
Nell’ambito dello sviluppo delle mie competenze in design web, ho creato diversi poster sui miei interessi, in particolare moda e sneaker, utilizzando Photoshop, Illustrator e Canva.Scopri qui le mie migliori realizzazioni !
Newsletter UGA
Servizi
Comunicazione
Collaborazione
Cloé BORSELLINO, DI FRANCESCO NolanAnno
Dicembre 2023
Una newsletter è molto più di una semplice email. È un collegamento diretto tra un’azienda, un’organizzazione o un sito web e il suo pubblico. Ricevendo regolarmente newsletter, rimani aggiornato sulle ultime notizie, offerte speciali ed eventi imminenti. È un modo pratico per scoprire nuovi prodotti o servizi, ricevere consigli utili e restare connesso con ciò che accade nel tuo settore di interesse. Iscrivendoti a una newsletter, diventi parte integrante della comunità che la riceve, rafforzando il tuo senso di appartenenza e coinvolgimento.Ecco cosa abbiamo realizzato: una newsletter per l’UGA volta a promuovere il corso MMI.
.btn-epic {
position: relative;
margin: auto;
width: 100%;
border-color: ;
max-width: 260px;
height: 52px;
background: #fff;
transform: translate3d(0px, 0%, 0px);
text-decoration: none;
border-color: black;
font-weight: 600;
font-size: 18px;
letter-spacing: .05em;
transition-delay: .6s;
overflow: hidden;
left: 50%;
transform: translateX(-50%);
}
.btn-epic:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #8BB4B1;
border-radius: 50% 50% 0 0;
transform: translateY(100%) scaleY(.5);
transition: all .6s ease;
}
.btn-epic:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
border-radius: 0;
transform: translateY(0) scaleY(1);
transition: all .6s ease;
}
.btn-epic div {
position: relative;
width: 50%;
height: 26px;
text-transform: uppercase;
}
.btn-epic span {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
text-align: center;
transition: transform .5s ease;
}
.btn-epic span:first-child {
color: white;
transform: translateY(100%);
}
.btn-epic span:last-child {
color: black;
transform: translateY(0);
}
.btn-epic:hover {
background: #d9d9d9;
transition: background .2s linear;
transition-delay: .6s;
}
.btn-epic:hover:after {
border-radius: 0 0 50% 50%;
transform: translateY(-100%) scaleY(.5);
transition-delay: 0;
}
.btn-epic:hover:before {
border-radius: 0;
transform: translateY(0) scaleY(1);
transition-delay: 0;
}
.btn-epic:hover span:first-child {
transform: translateY(0);
}
.btn-epic:hover span:last-child {
transform: translateY(-50px);
}
@media (max-width: 768px) {
.btn-epic {
max-width: 200px;
height: 42px;
font-size: 16px;
}
}
@media (max-width: 480px) {
.btn-epic {
max-width: 160px;
height: 36px;
font-size: 14px;
}
}
L’arte dietro il sipario – Reportage
Servizi
Audiovisivo
Collaborazione
Jules P -Hedi L - Nolan DF
Anno
2025
Questo documentario ti invita a scoprire il mondo affascinante e spesso trascurato dei professionisti che lavorano dietro le quinte del Teatro Municipale di Grenoble. Dalla progettazione dei set alle scelte tecniche e artistiche, passando per le prove, abbiamo seguito le fasi chiave della messa in scena di Feu la Forêt, uno spettacolo della compagnia Le Chant des Pistes.Attraverso interviste e riprese immersive, mettiamo in luce i ruoli essenziali di tecnici, creatori e team artistici, il cui lavoro meticoloso è indispensabile per il successo delle performance dal vivo. Questo documentario rende omaggio alla loro passione e competenza, mostrando al contempo l’organizzazione e la sinergia necessarie per trasformare una visione artistica in realtà sul palco.
Alza il sipario e immergiti nel mondo del backstage, dove comunicazione, storytelling e creazione si incontrano. .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 350px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 250px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 215px; height: 36px; font-size: 14px; } }
🎵 VinylVerse – Progetto fittizio di negozio e-commerce
Servizi
Comunicazione - Design
Collaborazione
FLOCARD R. - FRAGNOUD N.- DI FRANCESCO N.
Anno
Giugno 2025
Per questo progetto, realizzato in un team di tre persone, abbiamo creato VinylVerse, un marchio fittizio dedicato ai dischi in vinile, costruito da zero. Il nostro obiettivo era progettare un’esperienza e-commerce immersiva, combinando la vendita di vinili classici, la personalizzazione di oggetti unici e abbonamenti mensili con contenuti esclusivi.Abbiamo iniziato dal brief del cliente, definito tre personas, condotto un’analisi dei competitor e sviluppato un design system completo (tipografia, colori, componenti e architettura del sito).
Il progetto è poi stato realizzato tramite wireframe e un mockup ad alta fedeltà su Figma, con un design moderno e d’impatto pensato per coinvolgere un pubblico curioso, creativo e attento all’estetica. L’esperienza è progettata per fare in modo che ogni vinile non sia solo un prodotto, ma anche una porta d’accesso a un universo musicale e sensoriale.
Sebbene il sito sia stato sviluppato su PrestaShop, non è più accessibile online; il progetto è presentato attraverso i nostri mockup e prototipi Figma, che dimostrano il nostro approccio UX/UI e la capacità di trasformare un’idea in un’esperienza utente coerente e attraente.
⚠️ I collegamenti tra le pagine nel mockup non sono attivi. È possibile premere → o scorrere (su mobile) per navigare tra le pagine. .content-sae301 a { width: 100%; width: 470px; } .content-sae301 { display: flex; gap : 10px; justify-content: center; align-items: center; } .btn-epic { display: flex; position: relative; margin: auto; width: 100%; max-width: 475px; height: 52px; background: #fff; border-color: black; transform: translate3d(0px, 0%, 0px); text-decoration: none; font-weight: 600; font-size: 18px; letter-spacing: .05em; transition-delay: .6s; overflow: hidden; } .btn-epic:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8BB4B1; border-radius: 50% 50% 0 0; transform: translateY(100%) scaleY(.5); transition: all .6s ease; } .btn-epic:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 0; transform: translateY(0) scaleY(1); transition: all .6s ease; } .btn-epic div { position: relative; width: 50%; height: 26px; text-transform: uppercase; } .btn-epic span { position: absolute; z-index: 1; top: 0; width: 100%; text-align: center; transition: transform .5s ease; } .btn-epic span:first-child { color: white; transform: translateY(100%); } .btn-epic span:last-child { color: black; transform: translateY(0); } .btn-epic:hover { background: #d9d9d9; transition: background .2s linear; transition-delay: .6s; } .btn-epic:hover:after { border-radius: 0 0 50% 50%; transform: translateY(-100%) scaleY(.5); transition-delay: 0; } .btn-epic:hover:before { border-radius: 0; transform: translateY(0) scaleY(1); transition-delay: 0; } .btn-epic:hover span:first-child { transform: translateY(0); } .btn-epic:hover span:last-child { transform: translateY(-50px); } @media (max-width: 768px) { .btn-epic { max-width: 200px; height: 42px; font-size: 16px; } } @media (max-width: 480px) { .btn-epic { max-width: 160px; height: 36px; font-size: 14px; } }
Chi sono
Dopo il liceo, ho scelto di specializzarmi nel campo della comunicazione digitale iscrivendomi al BUT MMI (Professioni del Multimedia e Internet) a Grenoble. Questa esperienza mi ha offerto un’opportunità preziosa per sviluppare le mie competenze e immergermi in diversi settori, come marketing, sviluppo web, design e audiovisivo.
Durante il corso, ho avuto l’opportunità di lavorare su numerosi progetti entusiasmanti che mi hanno permesso di affinare le competenze tecniche, imparando al contempo a collaborare in team e affrontare nuove sfide.
Sono riconosciuto per la mia serietà e determinazione, cercando sempre di dare il meglio di me stesso. Appassionato di lavoro di squadra, amo collaborare e sono sempre pronto a condividere idee per arricchire i progetti a cui partecipo. Dopo quest’anno, desidero proseguire gli studi con un Master in alternanza per approfondire le competenze e acquisire un’esperienza professionale ancora più solida.
Appassionato di moda e sport, il mio obiettivo è entrare in una grande azienda dove poter contribuire a progetti creativi e stimolanti. Grazie alla mia conoscenza dell’inglese, sto valutando anche la possibilità di completare parte del percorso all’estero, per ampliare la mia visione e sviluppare un approccio più internazionale.
Durante il corso, ho avuto l’opportunità di lavorare su numerosi progetti entusiasmanti che mi hanno permesso di affinare le competenze tecniche, imparando al contempo a collaborare in team e affrontare nuove sfide.
Sono riconosciuto per la mia serietà e determinazione, cercando sempre di dare il meglio di me stesso. Appassionato di lavoro di squadra, amo collaborare e sono sempre pronto a condividere idee per arricchire i progetti a cui partecipo. Dopo quest’anno, desidero proseguire gli studi con un Master in alternanza per approfondire le competenze e acquisire un’esperienza professionale ancora più solida.
Appassionato di moda e sport, il mio obiettivo è entrare in una grande azienda dove poter contribuire a progetti creativi e stimolanti. Grazie alla mia conoscenza dell’inglese, sto valutando anche la possibilità di completare parte del percorso all’estero, per ampliare la mia visione e sviluppare un approccio più internazionale.
Esperienza
Alternanza – Comunicazione & Creatore di contenuti – Youtips (Grenoble, 38000) – 1 anno
Settembre 2025 – Agosto 2026
Stage – Creatore di contenuti – Youtips (Grenoble, 38000) – 13 settimane
27 Gennaio – 25 Aprile 2025
Volontario – Trail du Lac de Paladru (38850) – 2 giorni
Allestimento e smontaggio materiali, cronometraggio, segnalazione e supporto al buon svolgimento dell’evento | 19–20 Aprile 2025
Responsabile cassa – Piscina di La Rochette (Municipio, 73110) – 2 mesi
Gestione cassa | Agosto 2024 e Luglio 2025
Assistente logistica – Elezioni dipartimentali di Grenoble – Dipartimento di Isère (38000) – 1 settimana
Giugno 2022
Stage elettricista – ENR Energy (38530) – 6 settimane
2019 – 2020
Stage scuola media – Dipartimento di Isère (38000) – 1 settimana
Assistente d’ufficio | 2019
Educazione
IUT 1 - Grenoble
2023 - 2026
BUT MMI, specializzazione in Strategia di Comunicazione – Scuola di comunicazione digitale (strategia di comunicazione, audiovisivo, design e sviluppo web)
LPO Monge - Chambéry
2020 - 2023
Diploma STI2D, specializzazione ITEC (Innovazione Tecnologica e Eco-Progettazione)
Le mie competenze
Social media
Figma
Analytics
Canva
WordPress
Capcut
Adobe Creative Suit
I miei interessi
Musica
Sport
Viaggi
La musica occupa un ruolo importante nella mia vita: suscita emozioni, mi aiuta a rilassarmi e mi accompagna quotidianamente. Amo esplorare una grande varietà di stili e condividere le mie scoperte con chi mi circonda, sia in viaggio che durante momenti conviviali. Questa passione ha trovato eco anche durante la mia esperienza in alternanza presso Youtips, una realtà specializzata nella formazione dei musicisti. Sebbene il mio ruolo fosse centrato sulla comunicazione digitale, ho avuto l’opportunità di incontrare molti artisti e scambiare idee con loro, arricchendo la mia visione creativa e rafforzando il legame con l’universo musicale.
Tra i miei molti interessi, lo sport occupa un posto speciale nella mia vita! Le mie discipline preferite sono sci e nuoto. In passato ho partecipato a gare di judo, vincendo anche alcuni titoli. Attualmente frequento regolarmente la palestra e sono appassionato anche di calcio.
Esplorare diversi paesi mi ha permesso di scoprire culture affascinanti. Ogni viaggio mi ha aperto gli occhi su nuove tradizioni, sapori e stili di vita. È un’esperienza arricchente che mi aiuta ad apprezzare la diversità del mondo e a crescere come persona. Ho già visitato molti paesi europei, oltre a Madagascar, Thailandia, India e Maghreb. Prossime destinazioni: Stati Uniti e Giappone.- Passione - Creatività - Energia - Lavoro di squadra - Comunicazione - Collaborazione - Polivalenza
- Autonomia - Onestà - Determinazione - Responsabilità - Curiosità - Fiducia - Rispetto - Pazienza - Perseveranza
No matter how difficult or impossible it may seem, never lose sight of your goal.
Monkey D. Luffy
Contattami |
Che sia per lavorare insieme, fare una domanda o condividere una battuta, puoi contattarmi qui.