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; } }
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; } }
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; } }
🎵 VinylVerse – Projet de boutique e-commerce fictive
Services
Communication - Graphisme
Collaboration
FLOCARD R. - FRAGNOUD N.- DI FRANCESCO N.
Année
Juin 2025
Pour ce projet réalisé à trois, nous avons imaginé VinylVerse, une marque fictive dédiée aux vinyles, créée de A à Z. Notre objectif était de concevoir une expérience e-commerce immersive, combinant vente de vinyles classiques, personnalisation d’objets uniques et abonnements mensuels avec contenus exclusifs.Nous avons travaillé à partir du brief client, défini trois personas, effectué une veille concurrentielle, puis élaboré un design system complet (typographie, couleurs, composants et arborescence).
Le projet s’est ensuite matérialisé par des wireframes et une maquette haute fidélité sur Figma, avec un design impactant et moderne, pensé pour séduire une audience curieuse, créative et sensible à l’esthétique. L’expérience vise à rendre chaque vinyle non seulement un produit, mais aussi une porte ouverte sur un univers musical et sensoriel.
Bien que le site ait été développé sur PrestaShop, il n’est plus accessible en ligne ; le projet est valorisable via nos maquettes et prototypes Figma, qui illustrent notre approche UX/UI et notre capacité à transformer une idée en expérience utilisateur cohérente et attractive.
⚠️ Les liens entre les pages de la maquette ne sont pas actifs. Vous pouvez appuyer sur → ou faites glisser (sur mobile) pour naviguer entre les pages. .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; } }
Posters web
Services
Graphisme
Collaboration
Individuel
Année
2023 - 2024
Dans le cadre de mon développement de compétences en design web, j'ai créé plusieurs affiches sur mes centres d'interêt, notamment la mode et les sneaker, en utilisant Photoshop, Illustrator et Canva.Découvrez ici mes meilleures réalisations !

À 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.