I am
DI FRANCESCO Nolan
I am currently in my third year of a BUT MMI program in Grenoble, doing a work-study at Youtips, where I focus on communication, social media management, and content creation. Specialized in communication strategy and experience design, I love learning, experimenting with new ideas, and exploring everything digital has to offer. Feel free to check out my best projects !
Content creator at Youtips (and coffee brewer on the side)
Portfolio
A glimpse of my work
THE BEAR: Awaken your wild instincts – UI Design & Prototyping
Services
Graphic design
Collaboration
Yoan Toran -Nolan DI FRANCESCO
Year
December 2025
THE BEAR: Awaken Your Wild InstinctUI Design & Figma Prototyping
How do you transform a strong visual identity into a fluid web experience?
THE BEAR is a fictional craft beer brand rooted in nature. On this collaborative project, roles were clearly defined: the visual identity and illustrations were created by my partner Yoan Toran, while I was responsible for translating this universe into a digital interface (UI) on Figma.
I structured the user journey to showcase the three ranges (Brown, Polar, Grizzly), created the adapted web design system, and produced high-fidelity prototyping to ensure immersive and functional navigation. .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 – Open the doors to the world
Services
Communication -
Design
Collaboration
FLOCARD R. - FRAGNOUD N.
- DI FRANCESCO N.
Year
Décember 2025
When was the last time you booked a trip… without spending hours comparing, hesitating, juggling between ten different tabs?That frustration is exactly where KeyTrip was born. We reinvented the travel experience to make it simpler, more intuitive, and more human.
We designed a complete concept dossier and a full Figma prototype (wireframes + high-fidelity mockups) to bring to life an all-in-one platform that centralizes flights, hotels and activities—while adding a unique touch: the immersive box, letting your journey begin even before you leave.
A premium concept designed for zero stress, 100% emotion. KeyTrip is travel, reimagined.
KeyTrip – Open the doors to the world. .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 – Event Communication
Services
Communication - Design
- Audiovisual
Collaboration
In a team of four
Year
April 2024
As a team of four, we created the communication plan for Multimédi’Alpes 2024, a festival highlighting the creative projects of MMI students.Our role was to design and coordinate the entire communication strategy, from concept to production. We conducted interviews with students and professors to include in the official trailer and teaser, and developed a digital campaign featuring Instagram stories and posts.
We also designed the graphic charter for the event website and prepared coordination and production reports outlining the key steps of the project.
I was mainly responsible for social media management and writing the communication and coordination documents. .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 – Fictional E-commerce Store Project
Services
Communication - Design
Collaboration
FLOCARD R. - FRAGNOUD N.- DI FRANCESCO N.
Year
June 2025
For this project, completed as a team of three, we created VinylVerse, a fictional brand dedicated to vinyl records, built from scratch. Our goal was to design an immersive e-commerce experience, combining sales of classic vinyls, customization of unique items, and monthly subscriptions with exclusive content.We started from the client brief, defined three personas, conducted competitor research, and then developed a complete design system (typography, colors, components, and site architecture).
The project was then brought to life through wireframes and a high-fidelity Figma mockup, featuring a modern and impactful design aimed at engaging a curious, creative, and aesthetically-minded audience. The experience is designed to make each vinyl not just a product, but also a gateway to a musical and sensory universe.
Although the site was developed on PrestaShop, it is no longer accessible online; the project is showcased through our Figma mockups and prototypes, which demonstrate our UX/UI approach and our ability to turn an idea into a coherent and attractive user experience.
⚠️ The links between the pages in the mockup are not active. You can press → or swipe (on mobile) to navigate between 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; } }
Web Posters
Services
Design
Collaboration
Individual
Year
2023 - 2024
As part of developing my web design skills, I created several posters based on my personal interests, particularly fashion and sneakers, using Photoshop, Illustrator, and Canva.Discover here my best creations !
About Me
After high school, I chose to specialize in digital communication by joining the BUT MMI (Multimedia and Internet Professions) program in Grenoble. This experience has given me a valuable opportunity to develop my skills and immerse myself in various fields such as marketing, web development, design, and audiovisual production.
Throughout this program, I have had the chance to work on a wide range of exciting projects that have allowed me to sharpen my technical skills while learning how to collaborate effectively in a team and take on new challenges.
I am recognized for my reliability and determination, always striving to give my best. Passionate about teamwork, I enjoy collaborating and am always eager to contribute my ideas to enrich the projects I am part of. After this year, I plan to pursue a Master’s degree in work-study to further strengthen my skills and gain even more professional experience. With a strong interest in the world of fashion and sports, my goal is to join a major company where I can contribute to creative and challenging projects. Thanks to my proficiency in English, I am also considering the possibility of completing part of my journey abroad to broaden my perspective and develop an even more international approach.
Throughout this program, I have had the chance to work on a wide range of exciting projects that have allowed me to sharpen my technical skills while learning how to collaborate effectively in a team and take on new challenges.
I am recognized for my reliability and determination, always striving to give my best. Passionate about teamwork, I enjoy collaborating and am always eager to contribute my ideas to enrich the projects I am part of. After this year, I plan to pursue a Master’s degree in work-study to further strengthen my skills and gain even more professional experience. With a strong interest in the world of fashion and sports, my goal is to join a major company where I can contribute to creative and challenging projects. Thanks to my proficiency in English, I am also considering the possibility of completing part of my journey abroad to broaden my perspective and develop an even more international approach.
Experience
Work-study – Communication & Content Creator – Youtips (Grenoble, 38000) – 1 year
September 2025 – August 2026
Internship – Content Creator – Youtips (Grenoble, 38000) – 13 weeks
January 27 – April 25, 2025
Volunteer – Trail du Lac de Paladru (38850) – 2 days
Setup and dismantling of equipment, timekeeping, signaling, and ensuring smooth event operations | April 19–20, 2025
Cashier Supervisor – La Rochette Swimming Pool (City Hall, 73110) – 2 months
Cash register management | August 2024 and July 2025
Logistics Assistant – Isère Department (38000) – 1 week
Grenoble Departmental Elections – June 2022
Internship – Electrician – ENR Energy (38530) – 6 weeks
2019 – 2020
Middle School Internship – Isère Department (38000) – 1 week
Office Assistant | 2019
Education
IUT 1 - Grenoble
2023 - 2026
BUT MMI, specialization in Communication Strategy – Digital Communication School (communication strategy, audiovisual production, design, and web development)
LPO Monge - Chambéry
2020 - 2023
STI2D Baccalaureate, specialization in ITEC (Technological Innovation and Eco-Design)
My skills
Social media
Figma
Analytics
Canva
WordPress
Capcut
Adobe Creative Suit
My interests
Music
Sports
Travel
Music plays an important role in my life: it sparks emotions, helps me relax, and accompanies me in my daily routine. I enjoy exploring a wide variety of styles and sharing my discoveries with those around me, whether while traveling or during social moments. This passion also resonated during my work-study at Youtips, a company specialized in training musicians. Even though my role was focused on digital communication, I had the chance to meet and exchange with many artists, which enriched my creative vision and strengthened my connection to the musical world.
Among my many interests, sports hold a special place in my life ! My favorite disciplines are skiing and swimming. In the past, I competed in judo tournaments, even winning some titles. Today, I regularly go to the gym and I am also passionate about football (soccer).
Exploring different countries has allowed me to discover a variety of fascinating cultures. Each trip has opened my eyes to new traditions, flavors, and ways of life. It’s an enriching experience that helps me appreciate the diversity of the world and grow as a person. I have already visited many European countries, as well as Madagascar, Thailand, India, and the Maghreb. Next on my list are the United States and Japan.- Passion - Creativity - Energy - Teamwork - Communication - Collaboration - Versatility
- Autonomy - Honesty - Determination - Responsibility - Curiosity - Confidence - Respect - Patience - Perseverance
No matter how difficult or impossible it may seem, never lose sight of your goal.
Monkey D. Luffy
Contact Me |
Whether it’s to work together, ask a question, or share a funny joke, you can reach me here.