Je suis
DI FRANCESCO Nolan
Je suis actuellement en troisième année de BUT MMI à Grenoble, en alternance chez Youtips, où je travaille dans la communication, la gestion des réseaux sociaux et la création de contenu. Spécialisé dans la stratégie de communication et le design d’expérience, j’adore apprendre, tester de nouvelles idées et explorer tout ce que le digital peut offrir. N’hésitez pas à découvrir mes meilleurs projets !

Alternant chez Youtips, créateur de contenu (et de café aussi)
Portfolio
Un avant-goût de mes travaux
THE BEAR : Réveillez votre instinct sauvage – UI Design & Prototypage
Services
Graphisme
Collaboration
Yoan Toran -Nolan DI FRANCESCO
Année
Décembre 2025
THE BEAR : Réveillez votre instinct sauvageUI Design & Prototypage Figma
Comment transformer une identité visuelle forte en une expérience web fluide ?
THE BEAR est une marque fictive de bières artisanales ancrée dans la nature. Sur ce projet collaboratif, les rôles étaient bien définis : l'identité graphique et les illustrations ont été réalisées par mon binôme Yoan Toran, tandis que je me suis chargé de traduire cet univers en une interface numérique (UI) sur Figma.
J'ai structuré le parcours utilisateur pour présenter les trois gammes (Brown, Polar, Grizzly), créé le design system web adapté, et réalisé le prototypage haute-fidélité pour garantir une navigation immersive et fonctionnelle. .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; } }
“Ce bruit qui ne me lâchait pas” – Fiction sonore
Services
Audiovisuel
Collaboration
Individuel
Année
Décembre 2025
Ce bruit qui ne me lâchait pasAutofiction Sonore — Durée : 2 min
Vous marchez dans la rue, votre casque est votre seul refuge contre le chaos urbain. Mais soudain, un son apparaît. Minuscule. Régulier. Impossible à ignorer.
Dans cette autofiction immersive, plongez au cœur d'une obsession sonore. À travers un travail minutieux sur la stéréo et les filtres fréquentiels, le récit explore cette frontière fragile où le monde extérieur devient menaçant.
Le bruit vient-il de la ville, ou est-ce votre propre esprit qui sature ? Une expérience courte et intense sur notre tentative, parfois vaine, de contrôler notre environnement sonore. .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 – Inauguration Pop Up (évènement)
Services
Communication
Collaboration
Noah F. - Zoé R. - Nolan DF
Année
Novembre 2025
À l’approche des fêtes, nous imaginons un pop-up immersif pour installer l’univers Miliamatcha au cœur de Grenoble.Ce projet événementiel présente la création complète d’un espace éphémère pensé comme un “Christmas Matcha Bar” : scénographie naturelle, dégustations exclusives, ateliers participatifs et animations conçues pour attirer, surprendre et engager le public.
Vous trouverez dans le PDF l’ensemble du concept : identité du lieu, budget détaillé, plan d’actions, scénographie, animations et gestion des imprévus, le tout pensé pour offrir une expérience chaleureuse, esthétique et cohérente avec l’ADN de la marque. .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; } }
KeyTrip – Ouvrez les portes du monde
Services
Communication -
Graphisme
Collaboration
FLOCARD R. - FRAGNOUD N.
- DI FRANCESCO N.
Année
Décembre 2025
Quand avez-vous réservé un voyage pour la dernière fois… sans passer des heures à comparer, à douter, à jongler entre dix onglets différents ?C’est de cette frustration qu’est né KeyTrip, une nouvelle façon de préparer ses séjours : plus simple, plus intuitive, plus humaine.
Nous avons développé un dossier de conception complet ainsi qu’un prototype Figma (wireframes + maquettes haute-fidélité) pour donner vie à une plateforme “tout-en-un” qui centralise vols, hôtels, activités… tout en ajoutant une touche unique : la box immersive, qui fait commencer le voyage avant même le départ.
Un concept premium, pensé pour offrir zéro stress, 100 % émotion. KeyTrip, c’est l’expérience du voyage réinventée.
KeyTrip – Ouvrez les portes du monde. .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; } }
Audit de com – Ut4M (Ultra Tour des 4 Massifs)
Services
Communication
Collaboration
En équipe de 4
Année
Novembre 2025
Projet : Stratégie de communication pour l’UT4M (Ultra Tour des 4 Massifs)Objectif : élargir la visibilité de l’UT4M auprès des étudiants et du jeune public afin d’attirer de nouveaux participants et spectateurs.
Dans le cadre d’un travail d’audit et de recommandation stratégique, notre équipe a analysé la communication actuelle de l’événement (réseaux sociaux, presse, partenariats, site web, actions terrain).
Nous avons ensuite proposé une stratégie visant à moderniser l’image de l’UT4M et à renforcer sa présence sur les campus grenoblois.
Actions clés :
– Création d’un UT4M Campus Day en partenariat avec le BDE STAPS (événement sportif et festif).
– Mise en place d’un club ambassadeurs étudiants pour relayer la communication sur les réseaux.
– Développement de contenus dynamiques : mini-séries YouTube, capsules conseils, stories participatives.
Ce projet nous a permis de travailler sur un cas réel, en mobilisant nos compétences en audit de communication, stratégie digitale et gestion de projet événementiel. .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 – Communication de l’événement
Services
Communication - Graphisme
- Audiovisuel
Collaboration
En équipe de 4
Année
Avril 2024
En équipe de quatre, nous avons réalisé le dossier de communication du festival Multimédi’Alpes 2024, un événement mettant en avant les projets créatifs des étudiants du département MMI.Notre mission consistait à concevoir et coordonner l’ensemble de la communication de l’événement, depuis la stratégie jusqu’à la production des supports. Nous avons mené des interviews d’étudiants et de professeurs afin de les intégrer dans la bande-annonce et le teaser officiel, et conçu une campagne digitale comprenant des stories et publications Instagram.
Nous avons également élaboré une charte graphique pour le site web du festival, ainsi qu’un dossier de coordination et de production détaillant les étapes et les besoins du projet.
Pour ma part, je me suis principalement chargé de la gestion des réseaux sociaux et de la rédaction des différents dossiers (communication, coordination et production). .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; } }
À propos de moi
Après le lycée, j’ai choisi de me spécialiser dans le domaine de la communication digitale en intégrant le BUT MMI (Métiers du Multimédia et de l’Internet) à Grenoble. Cette expérience m’a offert une opportunité précieuse pour développer mes compétences et m’immerger pleinement dans divers domaines tels que le marketing, le développement web, le design et l’audiovisuel.
Au cours de cette formation, j’ai eu l’occasion de travailler sur une multitude de projets passionnants qui m’ont permis de perfectionner mes compétences techniques tout en apprenant à collaborer en équipe et à relever de nouveaux défis.
Je suis reconnu pour mon sérieux et ma détermination, m’efforçant toujours de donner le meilleur de moi-même. Passionné par le travail d’équipe, j’aime collaborer et suis toujours prêt à apporter mes idées pour enrichir les projets auxquels je participe.
Après cette année, je souhaite poursuivre mes études en master en alternance afin d’approfondir mes compétences et d’acquérir une expérience professionnelle encore plus solide. Passionné par l’univers de la mode et du sport, mon objectif serait d’intégrer une grande entreprise où je pourrais contribuer à des projets créatifs et exigeants. Grâce à ma maîtrise de l’anglais, je réfléchis également à la possibilité de poursuivre une partie de mon parcours à l’étranger, afin d’enrichir ma vision et de développer une approche encore plus internationale.
Au cours de cette formation, j’ai eu l’occasion de travailler sur une multitude de projets passionnants qui m’ont permis de perfectionner mes compétences techniques tout en apprenant à collaborer en équipe et à relever de nouveaux défis.
Je suis reconnu pour mon sérieux et ma détermination, m’efforçant toujours de donner le meilleur de moi-même. Passionné par le travail d’équipe, j’aime collaborer et suis toujours prêt à apporter mes idées pour enrichir les projets auxquels je participe.
Après cette année, je souhaite poursuivre mes études en master en alternance afin d’approfondir mes compétences et d’acquérir une expérience professionnelle encore plus solide. Passionné par l’univers de la mode et du sport, mon objectif serait d’intégrer une grande entreprise où je pourrais contribuer à des projets créatifs et exigeants. Grâce à ma maîtrise de l’anglais, je réfléchis également à la possibilité de poursuivre une partie de mon parcours à l’étranger, afin d’enrichir ma vision et de développer une approche encore plus internationale.
Mes expériences
Alternance - Communication et Créateur de contenu - Youtips (Grenoble, 38000) - 1 an
Septembre 2025 – août 2026
Stage - Créateur de contenu - Youtips (Grenoble, 38000) - 13 semaines
Créateur de contenu | 27 janvier au 25 avril 2025
Bénévole - Trail du Lac de Paladru (38850) - 2 jours
Mise en place et rangement du matériel, chronométrage, signaleur, bon fonctionnement de l’événement | 19 et 20 avril 2025
Responsable de Caisse - Piscine de La Rochette (Mairie, 73110) - 2 mois
Responsable de caisse | Août 2024 et Juillet 2025
Assistant logistique - Élections départementales de Grenoble - Département de l’Isère (38000) - 1 semaine
Assistant logistique | Juin 2022
Stage électricien - ENR Energy (38530) - 6 semaines
Electricien | 2019 – 2020
Stage de troisième - Département de l’Isère (38000) - 1 semaine
Assistant de bureaux | 2019
Éducation
IUT 1 - Grenoble
2023 - 2026
BUT MMI option Stratégie de Communication – École de communication digitale
(stratégie de communication, audiovisuel, design et developpement web)
LPO Monge - Chambéry
2020 - 2023
Bac STI2D spécialité ITEC (Innovation Technologique et Éco Conception)
Mes compétences
Social media
Figma
Analytics
Canva
WordPress
Capcut
Adobe Creative Suit
Mes passions
La musique
Le sport
Les voyages
La musique occupe une place importante dans ma vie : elle suscite des émotions, m’aide à me détendre et m’accompagne au quotidien. J’aime explorer une grande variété de styles et partager mes découvertes avec mon entourage, que ce soit en voyage ou lors de moments conviviaux. Cette passion a également trouvé un écho particulier durant mon alternance chez Youtips, une structure spécialisée dans la formation de musiciens. Même si mon rôle était centré sur la communication digitale, j’ai eu la chance de côtoyer de nombreux artistes et d’échanger avec eux, ce qui a enrichi ma vision créative et renforcé mon lien avec l’univers musical.
J’ai de nombreux centres d’intérêt, mais le sport occupe une place particulière dans ma vie ! Mes disciplines favorites sont le ski et la natation. Par le passé, j’ai participé à des compétitions de judo, remportant même certains titres. Actuellement, je fréquente régulièrement la salle de sport et je suis également passionné par le football.
Explorer différents pays m'a permis de découvrir une variété de cultures fascinantes. Chaque voyage m'a ouvert les yeux sur de nouvelles traditions, saveurs et modes de vie. C'est une expérience enrichissante qui m'aide à apprécier la diversité du monde et à grandir en tant que personne. J'ai déjà visité de nombreux pays en Europe, ainsi que Madagascar, la Thaïlande, l'Inde et le Maghreb. Les pays où je compte me rendre prochainement sont les États-Unis et le Japon.Passion - Créativité - Dynamisme - Travail d'équipe - Communication - Collaborations - Polyvalence -
Autonomie - Honnêteté - Détermination - Responsabilité - Curiosité - Confiance - Respect - Patience - Persévérance -
No matter how difficult or impossible it may seem, never lose sight of your goal.
Monkey D. Luffy
Contactez-moi |
Pour travailler ensemble, pour une question ou pour une blague amusante vous pouvez me contacter ici.