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
Maison Élégance – Social Media
Services
Communication -
Graphisme
Collaboration
Individuel
Année
Mars 2026
Étude de cas : Maison Élégance
Comment transformer un compte Instagram en un véritable tunnel de vente premium ? Pour illustrer ma vision du Social Media Management, j'ai conceptualisé de A à Z une marque fictive de prêt-à-porter : 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.
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.
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.
Reportage sur le métier de Vidéaste/Photographe
Services
Audiovisuel
Collaboration
Nolan DI FRANCESCO, ThéoMARTINEZ, Titouan GIGNOUX
Année
Décembre 2023
Ce reportage, baptisé "Le Cœur de la Caméra", représentait un projet universitaire ambitieux qui avait pour objet le portrait documentaire d'Arnaud Auria, un professionnel émérite du domaine. Dans le cadre de ce projet, nous avons occupé divers rôles et exercé différentes compétences, allant de la captation vidéo à la réalisation d'interviews, en passant par le montage et la gestion du son. Notre objectif primordial était de révéler la diversité et la profondeur de ce métier, en mettant en avant les défis, les passions et les compétences qui lui sont inhérents.https://www.youtube.com/watch?v=405Obj6JZuI&t=2sPour mener à bien ce projet, nous avons investi plusieurs semaines dans des activités de planification minutieuse, de tournage sur le terrain et de recherche approfondie. Ces efforts nous ont permis de capturer des instants authentiques et de recueillir des témoignages poignants, offrant ainsi un aperçu fascinant de la vie et du travail d'Arnaud Auria, ainsi que de son impact sur son domaine professionnel.
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; } }
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; } } .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; } }
Au-delà du portfolio
Le Carnet — une revue éditoriale personnelle où je décrypte les campagnes qui m'inspirent.
Découvrir →À propos de moi
Créer du lien, raconter une histoire et rassembler.
Si mes compétences techniques et mes réalisations ont leur propre espace sur ce portfolio, c’est ici que je vous parle de mon approche. Actuellement en fin de BUT MMI à Grenoble, j’envisage la communication comme une expérience globale. Ce qui m’anime au quotidien, c’est de trouver le bon message, le format le plus juste ou l’événement idéal pour engager une communauté et faire vivre les valeurs d’un projet.
Curieux par nature et véritable joueur d’équipe, j’aime la synergie qui naît d’un brainstorming collectif et la satisfaction de voir une idée abstraite prendre vie sur le terrain ou sur les réseaux sociaux. Pour moi, communiquer ce n’est pas seulement produire du contenu à la chaîne, c’est avant tout donner du sens et de l’impact à chaque action.
Et pour la suite ? Dès septembre 2026, je poursuis mon cursus avec un Master en Communication et Stratégie Digitale. Dans ce cadre, je recherche une alternance de 24 mois au sein d’une entreprise ou d’une agence pour m’investir dans des projets porteurs de sens. Doté d’un bon niveau d’anglais, j’aborde cette future collaboration dans une véritable logique d’échange : j’ai à cœur de m’enrichir de votre expertise, tout en apportant un regard neuf, mes propres idées et une réelle force de proposition à vos équipes. Je suis également prêt à mettre mon dynamisme au service de missions à dimension internationale.
Mes expériences
Alternance - Communication et Créateur de contenu - Youtips (Grenoble, 38000) - 1 an
Stage - Créateur de contenu - Youtips (Grenoble, 38000) - 13 semaines
Bénévole - Trail du Lac de Paladru (38850) - 2 jours
Responsable de Caisse - Piscine de La Rochette (Mairie, 73110) - 2 mois
Assistant logistique - Élections départementales de Grenoble - Département de l'Isère (38000) - 1 semaine
Stage de troisième - Département de l'Isère (38000) - 1 semaine
Éducation
IUT 1 - Grenoble — 2023 - 2026
LPO Monge - Chambéry — 2020 - 2023
Boîte à outils
Mes compétences
Un savoir-faire articulé autour de deux pôles complémentaires : la communication et la création visuelle.
01
Communication & stratégie
- Social media Stratégie de contenu, ligne éditoriale, community management et planning de publication multi-plateformes.
- SEO · SEA · GEO Optimisation pour les moteurs classiques et pour les IA génératives, campagnes Google Ads, audit et recommandations.
- KPI & analytics Définition d’indicateurs, suivi des campagnes, tableaux de bord et reporting pour piloter les actions de communication.
02
Création & production
- Adobe Creative Suite
- Figma
- Photographie
- CapCut
- Canva
À noter Maîtrise de WordPress et bases solides en HTML & CSS pour intégrer et personnaliser les contenus web en autonomie.
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.