After my 3D Donut adventure with Spline, I came across another free to use 3D modeling program called Blender. This program allowed me to go more in depth with parameters I might find in higher end 3D modeling software. This week, I utilized it in a challenge I made for myself:

Incorporate Interactive 3D in a Landing Page.

With my love for all things celestial, I decided on a landing page for Jupiter as one might find on one of NASA’s webpages. I recommend that everyone should check out the actual Solar System Exploration page for the stellar interactions. But for a quick Blender study, here’s my experience.

First Look at Blender Interface

Blender is kind enough to have a cube, a light, and a camera waiting for you upon each entry. After going through a few tutorials, my shortcut game increased enough to navigate as best as possible using my MacBook (for better workflow, use a desktop computer). I learned how to add new shapes, modify them, and add materials to selected shapes.

Blender comes with extended modifying parameters in the Nodes section (the extra screen I pulled down towards the end of the video). Within Nodes, I was able to set Jupiter into space and clean up the light displacement. Blender Nodes can be used to streamline complex effects through various processing blocks. I have yet to discover how deep it gets, but getting Jupiter to float in space was a good start.

Nodes Editor on top, stars behind Jupiter

The next venture required learning how to animate in Blender. Though the Timeline is familiar to other programs such as Adobe After Effects and Final Cut Pro X, I only used the Keying presets and set them along the timeline. Each preset holds the parameter information set for anything in the item collection. In this case, I only needed a rotation.

Animation Rendering in Blender

Finally, I set up a mock landing page using Figma. Unfortunately, unless you go through hoops and plugins to embed a video into your prototype, you will have to change your video file to .gif in order to see it in action. I believe this is also true for Adobe XD.

In the end, it was an amazing learning experience to incorporate Blender and Figma (plus many other tools of conversion) to come up with this result. As a first time user, this is the tip of the iceberg of Blender’s abilities. But, of course this would not be complete without showing my growth in baking a 3D Donut from one program to another. So, Bon Appetit.

Blender Donut thanks to Blender Guru

UI/UX Designer | Bass Player | Recording Engineer | Video Editor | Photographer | Constant Creative Thinking | Avocado Advocate | Average Pisces