Io sono
DI FRANCESCO Nolan

Portfolio
Un’anteprima dei miei lavori
Maison Élégance – Social Media
Servizi
Comunicazione - Design
Collaborazione
Individuale
Anno
Marzo 2026
Caso Studio: Maison Élégance
Come trasformare un account Instagram in un vero e proprio funnel di vendita premium? Per illustrare la mia visione del Social Media Management, ho ideato da zero un brand di abbigliamento prêt-à-porter fittizio: Maison Élégance.
/* ============================================== */ /* === ISOLATION DU BLOC ======================== */ /* ============================================== */ .me-portfolio-wrapper { font-family: 'Inter', sans-serif; background-color: #E5E5E5; padding: 40px 10px; display: flex; flex-direction: column; align-items: center; width: 100%; overflow: hidden; } .me-portfolio-wrapper * { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================== */ /* === LE SLIDER ================================ */ /* ============================================== */ .me-slider-container { width: 100%; max-width: 1000px; position: relative; } .me-slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); background: #fff; } .me-slider-track::-webkit-scrollbar { display: none; } .me-slide { flex: 0 0 100%; min-height: 560px; scroll-snap-align: start; display: flex; align-items: center; padding: 60px 80px; position: relative; } .me-bg-beige { background-color: #F5F3E9; } .me-bg-white { background-color: #FFFFFF; } .me-content { flex: 1; padding-right: 40px; } .me-content.me-reverse { padding-right: 0; padding-left: 40px; } .me-visual { flex: 1.2; display: flex; justify-content: center; align-items: center; } /* ============================================== */ /* === FLÈCHES DE NAVIGATION ==================== */ /* ============================================== */ .me-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background-color: #ffffff; color: #1A1A1A; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-decoration: none !important; border: none !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1); z-index: 50; transition: all 0.2s ease; } .me-arrow:hover { background-color: #1A1A1A; color: #ffffff; transform: translateY(-50%) scale(1.1); text-decoration: none !important; border: none !important; } .me-arrow-prev { left: 20px; } .me-arrow-next { right: 20px; } /* ============================================== */ /* === TEXTES =================================== */ /* ============================================== */ .me-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: #8C7A6B; font-weight: 600; margin-bottom: 15px; display: block; } .me-title { font-family: 'Playfair Display', serif; font-size: 2.8rem; color: #1A1A1A; line-height: 1.1; margin-bottom: 20px; font-weight: 400; } .me-text { font-size: 1.05rem; color: #444; line-height: 1.6; font-weight: 300; margin-bottom: 15px; } .me-bullet { font-weight: 600; font-size: 0.95rem; color: #1A1A1A; } /* ============================================== */ /* === MOCKUPS & CASCADE ======================== */ /* ============================================== */ /* Format pour les STORIES */ .me-phone { width: 155px; height: 320px; background-color: #D9D9D9; border: 5px solid #FFFFFF; border-radius: 20px; box-shadow: -10px 15px 30px rgba(0,0,0,0.15); background-size: 100% 100%; /* Force l'image à rentrer sans se couper */ background-position: top center; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; flex-shrink: 0; } /* Format pour le PROFIL */ .me-phone-single { width: 250px; height: 460px; border-radius: 30px; border-width: 8px; } .me-stack { display: flex; align-items: center; justify-content: center; padding-top: 30px; } .me-stack .me-phone { margin-left: -75px; } .me-stack .me-phone:first-child { margin-left: 0; } .me-stack .me-phone:nth-child(1) { z-index: 1; } .me-stack .me-phone:nth-child(2) { z-index: 2; } .me-stack .me-phone:nth-child(3) { z-index: 3; } .me-stack .me-phone:nth-child(4) { z-index: 4; } .me-stack .me-phone:nth-child(5) { z-index: 5; } .me-stack .me-phone:hover { transform: translateY(-30px) scale(1.05); z-index: 10 !important; box-shadow: 0 25px 50px rgba(0,0,0,0.3); } /* ============================================== */ /* === NAVIGATION DOTS ========================== */ /* ============================================== */ .me-nav { display: flex; justify-content: center; gap: 12px; margin-top: 25px; } .me-nav a { width: 12px; height: 12px; border-radius: 50%; background-color: #BDBDBD; transition: all 0.3s ease; } .me-nav a:hover { background-color: #8C7A6B; transform: scale(1.2); } /* ============================================== */ /* === RESPONSIVE MOBILE ======================== */ /* ============================================== */ @media (max-width: 850px) { .me-slide { flex-direction: column; padding: 40px 20px; text-align: center; gap: 30px; min-height: auto; } .me-content, .me-content.me-reverse { padding: 0; width: 100%; } .me-visual { width: 100%; margin-bottom: 20px; } .me-stack { transform: scale(0.85); padding-top: 10px; } .me-phone-single { transform: scale(0.85); } .me-title { font-size: 2.2rem; } .me-arrow { display: none; } } @media (max-width: 480px) { .me-stack { transform: scale(0.65); margin-top: -10px; } .me-phone-single { transform: scale(0.7); } .me-title { font-size: 1.8rem; } .me-text { font-size: 0.95rem; } } Étude de Cas / ConceptMaison Élégance.
Création d'une identité premium et d'un tunnel de conversion social media. Direction artistique axée sur la lumière et les textures brutes.
— Le Profil : La vitrine aspirationnelle.
Phase 1 : RéassuranceLa Preuve Sociale.
Mise en avant des parutions médias et des retombées presse. Redirection vers les articles via des stickers natifs intégrés subtilement.
Objectif : Crédibiliser la marque.
Phase 2 : EngagementDans l'Atelier.
Immersion dans le savoir-faire via une séquence narrative. Utilisation stratégique de l'écosystème Instagram (Sondages, Boîtes à questions).
Objectif : Créer du lien et stimuler l'algorithme.
Phase 3 : Social CommerceLe Tunnel de vente.
Génération d'urgence (FOMO) avec le Compte à rebours, suivi d'un achat facilité via le Shopping Tag sans quitter l'application.
Objectif : Convertir et réduire la friction.
KUDOS PACE: Strategia SEA & Design UX
Servizi
Comunicazione –
Design
Collaborazione
Individuale
(Progetto di fine studi)
Anno
Marzo 2026
L'abbigliamento tecnico ha perso la sua anima? Nell'era del Gorpcore, possedere una giacca ultra-performante non dimostra più il tuo livello sportivo, ma semplicemente il tuo potere d'acquisto. KUDOS PACE inverte la tendenza con un concetto radicale: "Don't buy it. Earn it." In un universo in cui la meritocrazia vince sulla carta di credito, ho progettato un ecosistema ibrido che fonde moda tecnica e tracking delle prestazioni. Scopri come una frizione d'acquisto volontaria, unita all'API di Strava e a concept store di personalizzazione locale, trasforma un semplice capo in un vero trofeo di fatica.Il dossier completo qui sotto include l'audit strategico, la nota d'intento e l'accesso al prototipo interattivo Figma. .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: 100%; /* On utilise toute la largeur disponible */ height: 1.2em; /* Hauteur basée sur la taille du texte pour être flexible */ text-transform: uppercase; display: flex; /* Pour aider au centrage interne si besoin */ justify-content: center; } .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; }
K’fée des Jeux – Audit e Strategia di Comunicazione
Servizi
Comunicazione - Audiovisivo -Design - Sviluppo Web
Collaborazione
Noah - Lucie - Iryna- Ryan - Nolan
Anno
Gennaio 2026
La Main dans le Cube : Strategia & Esperienza Utente per il K’Fée des Jeux - GrenobleContesto e Obiettivi: Lavorare per il K’Fée des Jeux, un bar di giochi da tavolo a Grenoble attivo da 18 anni, ha rappresentato una sfida importante: aiutare il cliente a rendere redditizia la sua nuova creazione, "La Main dans le Cube". In gruppo, abbiamo progettato una risposta strategica per differenziare questo gioco dalle classiche escape room e consentirne il noleggio ad altre strutture. L'obiettivo era trasformare questa idea artigianale in un prodotto commercialmente valido, tenendo conto delle risorse limitate del cliente e collegando l'aspetto fisico del gioco a una strategia digitale globale.
Approccio UX e Design dei Servizi: Il nostro intervento è iniziato con un audit di settore per posizionare il prodotto in una nicchia unica: la micro-avventura immersiva. Grazie all'osservazione degli utenti sul campo, abbiamo perfezionato l'esperienza per rispondere al bisogno di "digital detox", pur rimanendo accessibile e veloce. Questo lavoro di co-progettazione ci ha permesso di consegnare un prototipo web e una struttura di servizio adatti ai reali vincoli logistici del locale, garantendo fluidità tra la prenotazione online e l'esperienza in loco.
Strategia di Comunicazione e Redditività: Per garantire il successo del lancio con un budget limitato, abbiamo implementato una strategia plurimedia (Instagram, TikTok, Facebook, supporti cartacei, brochure B2B). L'obiettivo era creare un funnel di conversione efficace, dal teasing alla riprova sociale. Analizzando i costi di produzione, abbiamo dimostrato la fattibilità del progetto: l'investimento iniziale si ripaga in sole dieci sessioni di gioco. Questo progetto di oltre 100 ore si è concluso con la consegna di un dossier completo e una presentazione orale davanti al cliente.
Per motivi di riservatezza e proprietà intellettuale legati a questo cliente reale, il dossier dettagliato e il supporto della presentazione non possono essere consultati pubblicamente.
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; } }
✈️ 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; } }
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;
}
}
🎵 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
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. 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 dell’universo dello sport e della moda, il mio obiettivo è integrare una grande azienda o un’agenzia per contribuire a progetti creativi e ambiziosi. Il mio buon livello di inglese rappresenta inoltre un valore aggiunto che sarei lieto di mettere a disposizione dell’azienda per campagne o progetti di respiro 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
LPO Monge - Chambéry
2020 - 2023
I miei interessi
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
Monkey D. Luffy