Meet Leonardo da Vinci
The Genius of Leonardo da Vinci's an immersive experience that provides education, arts, and music with an elegant, mysterious feeling and credible content. The journey is intended to keep the audience focused on Leonardo's most extraordinary works by using interaction design and sound effects to let the audience unconsciously sink into the timeline experience and gain Leonardo da Vinci's understanding and impact on modern development.


Six Weeks


After Effects
Adobe XD

My Role

(All Creation)
UX/UI Designer
Interaction Designer


UI + Interaction Design
Visual Design + Branding
Low/High-Fi Prototyping
Prototyping for Web & Tablet
Motion Graphics
A Better Leonardo Perception
Too much Reading when the audience grabs Leonardo's information online.
I design interaction with Leonardo da Vinci's timeline website that combines the Visual images with Audio background music, using a Moving Frame to keep the audience's eyeballs. Users quickly have a vision of Leonardo da Vinci's most significant innovation.
The primary purpose is to introduce the greatest innovator during Renaissance.
Leonardo da Vinci, as we know, was the epitome of the Renaissance man. His innovative inventions weren’t to be realized for centuries, but his creation is ahead of his time.
The most well-known painting - Mona Lisa, is also a mysterious painting, so I use this painting as a foundation to design this project.
Typeface discovered in 1592
Known as the most noticeable representative of the French Renaissance style of the 16th century and one of the critical fonts of typography worldwide, the Garamond typeface is easily recognized for its elegant forms and excellent readability.
EB Garamond represents a revival of Garamond style and relies heavily on the letterforms discovered in 1592 in the Renaissance, in an Egenolff–Berner specimen, hence its name.
Build elements from Mona Lisa
Using Mona Lisa as the foundation of my project. Grab all the color palettes from the painting, and extend the color to each element in Navigation, Heading, Title, Content, Shape, Icons, and Buttons.
Designed based on user behavior
- Interaction Timeline
Instead of using paragraphs and images as content, I create a Moving Frame. When the audience finishes exploring per page, the audiences follow the moving frame and understand Leonardo da Vinci's innovation, and the moving frame will not lose their interest.
Leonardo walks towards you
Listen to at least 100 music and pick this one as my final music.
The background music contains a slow but mysterious feeling to make the audience feel like Leonardo is walking towards you.
Please enjoy the vibes.
I am always obsessed with talented people, and Leonardo da Vinci is always a genius legend from the 1500s. When I create the user interface, I want to present an elegant feeling with reliable information to the audience. I design at least 80 frames and tried different color palettes from his paintings and drawings.
In this project, I practice and learn to focus on the graphic design for the user interface and how the interaction grabs the audience's attention.
Moreover, I Get into Interaction Design during g the research, think, and create during the interaction design process. 👍🏻