<aside> 🍌

In my most recent project, I was able to get my hands on a web design for a Web3 Token Landing Page. I have been eager to try out “no-code” solutions for web design prototyping and Framer + Spline is my best bet!

In addition to the project, I’ve also tried my hand at creating my own portfolio in framer.

Click on the image — explore the page.

Click on the image — explore the page.

</aside>

1️⃣ First stop: UI Layout in Figma

1.png

2.png

2️⃣ Second: 3D Coin Design in Spline

Spline is a web-based 3D program that creates web implementation ready 3D assets. After creating this, I plugged in the “Viewer” code in Framer to embed into HyperX’s website.

Spline is a web-based 3D program that creates web implementation ready 3D assets. After creating this, I plugged in the “Viewer” code in Framer to embed into HyperX’s website.

✅ Final: Designing the overall presentation in Framer!

Here’s how the website looked. This is to show the Devs how the website folds out, they will then try to implement the design in code.

Here’s how the website looked. This is to show the Devs how the website folds out, they will then try to implement the design in code.

🎊 Bonus: Creating my own Spline + Framer Portfolio

Click on the image to check out the site!

After starting out in Framer, I’ve decided to dive deep into 3D and no-code solution web design. I think creating the portfolio site has taught me more in terms of responsive layout design, optimization for performance (some things are best reserved for PC viewing), limitations of no-code website platforms like Framer.

After starting out in Framer, I’ve decided to dive deep into 3D and no-code solution web design. I think creating the portfolio site has taught me more in terms of responsive layout design, optimization for performance (some things are best reserved for PC viewing), limitations of no-code website platforms like Framer.