Design and Animation of a 3D-Enhanced Landing Page

UX
1

Process Breakdown

  1. Design Phase – Figma
    I began by creating the landing page layout in Figma, ensuring a clean structure, consistent typography, and a visual hierarchy that would complement 3D elements.

  2. Integration – Figma to Dora Plugin
    Once the design was finalized, I used the Figma to Dora plugin to seamlessly transfer the components into Dora AI, eliminating the need to manually rebuild the layout.

  3. 3D Asset Selection – Sketchfab
    To enhance the page with an engaging centerpiece, I explored Sketchfab for suitable 3D assets. I selected a model that aligned with the theme and downloaded it in .glb format, which is fully compatible with Dora.

  4. Animation – Dora AI
    The 3D model was then imported into Dora AI, where I focused on creating smooth, interactive animations. This involved adjusting movement, timing, and transitions to ensure the 3D element felt naturally integrated within the landing page experience.
    Here’s the final design in action

1 Like